// Page 1 — Dashboard
// Only two blocks: alerts ribbon + Partitura (full-bleed timeline).
// Quick stats live in the global StatusStrip; theme switcher in the footer.

function AlertRibbonCard({ alert, onDismiss, onOpen }) {
  return (
    <div style={{
      display: "flex",
      minWidth: 360, maxWidth: 420, flex: "0 0 auto",
      background: "var(--surface)", border: "1px solid var(--border-soft)",
      borderRadius: 10, overflow: "hidden",
    }} className={alert.severity === "critical" ? "pulse-crit" : ""}>
      <SeverityBar severity={alert.severity} />
      <div style={{ flex: 1, padding: "12px 14px", display: "flex", flexDirection: "column", gap: 6 }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8 }}>
          <SeverityChip severity={alert.severity} />
          <div className="mono muted" style={{ fontSize: 11 }}>{fmtAgo(alert.ts)}</div>
        </div>
        <div style={{ fontSize: 14, fontWeight: 600, lineHeight: 1.3 }}>{alert.ruleTitle}</div>
        <div style={{ fontSize: 12, color: "var(--text-dim)" }}>
          <span className="mono" style={{ color: "var(--accent)" }}>PB-{alert.seq}</span>
          <span className="muted"> · висит </span>
          <span className="mono">{fmtDuration(alert.durationMin)}</span>
        </div>
        <div style={{ fontSize: 12, color: "var(--text-dim)", lineHeight: 1.45 }}>{alert.text}</div>
        <div style={{ display: "flex", gap: 6, marginTop: 4 }}>
          <button className="btn btn-primary" style={{ padding: "4px 10px", fontSize: 11 }} onClick={onOpen}>К задаче</button>
          <button className="btn btn-ghost" style={{ padding: "4px 10px", fontSize: 11 }} onClick={onDismiss}>Скрыть</button>
        </div>
      </div>
    </div>
  );
}

function DashboardPage({ onNav, alerts, dismissAlert }) {
  const activeAlerts = alerts.filter(a => a.status === "active");

  return (
    <div className="page">
      {/* Block A — alerts ribbon */}
      <h3 className="section-title">
        <span>Активные алерты</span>
        <span className="mono muted">{activeAlerts.length}</span>
        <span className="rule" />
        <a onClick={() => onNav("alerts")} style={{ cursor: "pointer", color: "var(--accent)", fontSize: 12, textTransform: "none", letterSpacing: 0 }}>Все алерты →</a>
      </h3>
      {activeAlerts.length === 0 ? (
        <div className="card" style={{ marginBottom: 24 }}>
          <div className="empty">
            <div className="big" style={{ color: "var(--ok)" }}>● Алертов нет</div>
            <div>Все агенты работают штатно.</div>
          </div>
        </div>
      ) : (
        <div style={{ display: "flex", gap: 12, overflowX: "auto", paddingBottom: 8, marginBottom: 24 }}>
          {activeAlerts.map((a) => (
            <AlertRibbonCard
              key={a.id}
              alert={a}
              onDismiss={() => dismissAlert(a.id)}
              onOpen={() => onNav("alerts")}
            />
          ))}
        </div>
      )}

      {/* Block B — Партитура смены (main content) */}
      <h3 className="section-title">
        <span>Партитура смены</span>
        <span className="mono muted">за 24 часа · клик по треку фильтрует панель справа</span>
        <span className="rule" />
      </h3>
      <div className="card" style={{ overflow: "visible" }}>
        <Partitura embedded alertsForLabels={alerts} stickyTop={130} />
      </div>
    </div>
  );
}

window.DashboardPage = DashboardPage;