/* Overview.jsx — головний екран: KPI + алерти + активність (live API). */

const { useState: useStateO, useEffect: useEffectO } = React;

function Sparkline({ data, color = "var(--accent)", height = 32 }) {
  if (!data || !data.length) return null;
  const w = 80, h = height;
  const max = Math.max(...data), min = Math.min(...data);
  const range = max - min || 1;
  const pts = data.map((v, i) => [
    (i / Math.max(1, data.length - 1)) * w,
    h - ((v - min) / range) * (h - 4) - 2,
  ]);
  const path = pts.map((p, i) => (i === 0 ? `M${p[0]},${p[1]}` : `L${p[0]},${p[1]}`)).join(" ");
  const last = pts[pts.length - 1];
  return (
    <svg width={w} height={h} viewBox={`0 0 ${w} ${h}`}>
      <path d={path} stroke={color} strokeWidth="1.5" fill="none" strokeLinejoin="round" />
      <circle cx={last[0]} cy={last[1]} r="2.5" fill={color} />
    </svg>
  );
}

function KpiCard({ label, value, sub, sparkData, sparkColor, alert }) {
  return (
    <div className={"kpi-card" + (alert ? " alert-card" : "")}>
      <div className="kpi-label">{label}</div>
      <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between" }}>
        <div className="kpi-value" style={{ color: alert ? "var(--bad)" : "var(--text-1)" }}>
          {value}
        </div>
        {sparkData && <Sparkline data={sparkData} color={sparkColor || (alert ? "var(--bad)" : "var(--accent)")} />}
      </div>
      {sub && <div className="kpi-trend">{sub}</div>}
    </div>
  );
}

function ActionLabel(action) {
  const map = {
    "passenger.stops.create": "Створено зупинку",
    "passenger.stops.update": "Оновлено зупинку",
    "passenger.stops.delete": "Видалено зупинку",
    "passenger.stops.publish": "Опубліковано зупинку",
    "passenger.routes.create": "Створено маршрут",
    "passenger.routes.update": "Оновлено маршрут",
    "passenger.routes.publish": "Опубліковано маршрут",
    "passenger.routes.pause": "Призупинено маршрут",
    "passenger.routes.resume": "Відновлено маршрут",
    "passenger.routes.delete": "Видалено маршрут",
    "passenger.settings.update": "Оновлено налаштування",
    "passenger.monitoring.ack": "Підтверджено алерт",
  };
  return map[action] || action;
}

function ActionIcon(action) {
  if (action.endsWith(".create")) return "➕";
  if (action.endsWith(".update")) return "✏️";
  if (action.endsWith(".delete")) return "🗑";
  if (action.endsWith(".publish")) return "✅";
  if (action.endsWith(".pause")) return "⏸";
  if (action.endsWith(".resume")) return "▶";
  if (action.endsWith(".ack")) return "✓";
  if (action.includes("settings")) return "⚙";
  return "•";
}

function formatTime(ts) {
  if (!ts) return "";
  return new Date(ts).toLocaleTimeString("uk-UA", { hour: "2-digit", minute: "2-digit" });
}

function AlertRow({ alert, onGoTo }) {
  return (
    <div style={{
      display: "flex", alignItems: "center", gap: 12,
      padding: "12px 0", borderBottom: "1px solid var(--border)",
    }}>
      <span className={"dot dot-" + (alert.severity === "bad" ? "bad" : alert.severity === "warn" ? "warn" : "ok")} style={{ flexShrink: 0 }}></span>
      <div style={{ flex: 1 }}>
        <span style={{ fontWeight: 600 }}>{alert.route_id || alert.central_id || "—"}</span>
        <span style={{ color: "var(--text-3)", fontSize: 12.5, marginLeft: 6 }}>{alert.kind || alert.code}</span>
        <div style={{ fontSize: 13, color: "var(--text-2)", marginTop: 2 }}>{alert.message || "—"}</div>
      </div>
      <div style={{ display: "flex", alignItems: "center", gap: 8, flexShrink: 0 }}>
        <span style={{ fontSize: 12, color: "var(--text-3)" }}>{alert.age_label || ""}</span>
        <button className="btn btn-secondary btn-sm" onClick={() => onGoTo && onGoTo("monitoring")}>
          Переглянути
        </button>
      </div>
    </div>
  );
}

function ActivityItem({ item }) {
  return (
    <div style={{ display: "flex", gap: 10, padding: "10px 0", borderBottom: "1px solid var(--border)", alignItems: "flex-start" }}>
      <span style={{ fontSize: 16, flexShrink: 0 }}>{ActionIcon(item.action || "")}</span>
      <div style={{ flex: 1 }}>
        <div style={{ fontSize: 13.5 }}>
          {ActionLabel(item.action)}
          {item.target_id ? <span style={{ color: "var(--text-3)" }}> #{item.target_id}</span> : null}
        </div>
      </div>
      <span style={{ fontSize: 12, color: "var(--text-3)", flexShrink: 0 }}>{formatTime(item.ts)}</span>
    </div>
  );
}

function Overview({ onNav }) {
  const [data, setData] = useStateO(null);
  const [loading, setLoading] = useStateO(true);
  const [error, setError] = useStateO(null);

  const reload = async () => {
    try {
      const res = await window.passengerApi.overview.get();
      setData(res);
      setError(null);
    } catch (e) {
      setError(e);
      window.showToast && window.showToast("Не вдалося завантажити Огляд: " + (e.message || ""), "bad");
    } finally {
      setLoading(false);
    }
  };

  useEffectO(() => { reload(); }, []);
  window.passengerApi.usePolling(reload, 30000, []);

  const kpi = (data && data.kpi) || {};
  const alerts = (data && data.alerts) || [];
  const activity = (data && data.activity) || [];

  return (
    <>
      <Topbar
        title="Огляд"
        subtitle={`Сьогодні · ${new Date().toLocaleDateString("uk-UA", { day: "numeric", month: "long" })}`}
        actions={
          <button className="btn btn-secondary btn-sm" onClick={async () => { await reload(); window.showToast && window.showToast("Дані оновлено", "ok"); }}>
            ⟳ Оновити
          </button>
        }
      />
      <div className="page" style={{ animation: "fadeIn 0.2s ease" }}>

        {error && (
          <div className="alert-banner bad">
            <span>Помилка завантаження.</span>
            <button className="btn btn-sm btn-secondary" onClick={reload}>Спробувати знову</button>
          </div>
        )}

        {loading && !data ? (
          <div style={{ padding: 60, textAlign: "center", color: "var(--text-3)" }}>
            <span style={{ display: "inline-block", animation: "spin 1s linear infinite", marginRight: 6 }}>⟳</span>
            Завантаження…
          </div>
        ) : (
          <>
            {/* Alert banner */}
            {alerts.length > 0 && (
              <div className="alert-banner bad">
                <div style={{ display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
                  <span className="dot dot-bad"></span>
                  <span style={{ fontWeight: 600 }}>{kpi.alerts_total || alerts.length} алертів у мережі</span>
                  <span style={{ color: "var(--bad)", opacity: 0.7 }}>·</span>
                  <span style={{ fontSize: 13, fontWeight: 400 }}>
                    {alerts.slice(0, 5).map(a => a.central_id).filter(Boolean).join(", ")}
                  </span>
                </div>
                <button className="btn btn-danger btn-sm" onClick={() => onNav("monitoring")}>
                  До моніторингу →
                </button>
              </div>
            )}

            {/* KPI grid */}
            <div className="kpi-grid">
              <KpiCard
                label="Проблемні узли"
                value={kpi.problems != null ? kpi.problems : "—"}
                sub={kpi.problems_warn ? `+${kpi.problems_warn} попереджень` : "усе спокійно"}
                sparkColor="var(--bad)"
                alert={(kpi.problems || 0) > 0}
              />
              <KpiCard
                label="Активні маршрути"
                value={kpi.active_routes != null ? kpi.active_routes : "—"}
                sub={`Усього в мережі`}
                sparkColor="var(--ok)"
              />
              <KpiCard
                label="ТЗ онлайн"
                value={kpi.vehicles_online != null ? `${kpi.vehicles_online}` + (kpi.vehicles_total ? `/${kpi.vehicles_total}` : "") : "—"}
                sub="Heartbeat у нормі"
              />
              <KpiCard
                label="Інциденти"
                value={kpi.incidents_open != null ? kpi.incidents_open : "—"}
                sub={`Відкритих зараз`}
                sparkColor="var(--warn)"
                alert={(kpi.incidents_open || 0) > 0}
              />
            </div>

            <div className="grid-2" style={{ gap: 16, alignItems: "start" }}>
              <div className="card">
                <div className="card-header">
                  <span className="card-title">Активні алерти</span>
                  <span className="badge badge-bad">{alerts.length}</span>
                </div>
                <div className="card-body" style={{ padding: "0 16px" }}>
                  {alerts.length === 0 ? (
                    <div style={{ padding: "20px 0", color: "var(--text-3)", fontSize: 13 }}>Немає активних алертів</div>
                  ) : (
                    alerts.map(a => <AlertRow key={a.id} alert={a} onGoTo={onNav} />)
                  )}
                </div>
              </div>

              <div className="card">
                <div className="card-header">
                  <span className="card-title">Активність</span>
                  <button className="btn btn-ghost btn-sm" onClick={() => onNav("history")}>Вся історія →</button>
                </div>
                <div className="card-body" style={{ padding: "0 16px" }}>
                  {activity.length === 0 ? (
                    <div style={{ padding: "20px 0", color: "var(--text-3)", fontSize: 13 }}>Немає подій</div>
                  ) : (
                    activity.map(item => <ActivityItem key={item.id} item={item} />)
                  )}
                </div>
              </div>
            </div>

            <div className="grid-3" style={{ marginTop: 16 }}>
              {[
                { icon: "📍", label: "Зупинки",    sub: "CRUD-таблиця",   screen: "stops" },
                { icon: "🛤",  label: "Маршрути",   sub: `${kpi.active_routes || 0} активних`, screen: "routes" },
                { icon: "📡", label: "Моніторинг", sub: kpi.vehicles_online != null ? `${kpi.vehicles_online} ТЗ онлайн` : "—", screen: "monitoring" },
              ].map(q => (
                <button key={q.screen}
                  onClick={() => onNav(q.screen)}
                  style={{
                    background: "var(--surface)", border: "1px solid var(--border)",
                    borderRadius: "var(--radius)", padding: "16px 18px",
                    cursor: "pointer", textAlign: "left", fontFamily: "inherit",
                    boxShadow: "var(--shadow-sm)", transition: "all 0.12s",
                    display: "flex", alignItems: "center", gap: 12,
                  }}>
                  <span style={{ fontSize: 22 }}>{q.icon}</span>
                  <div>
                    <div style={{ fontWeight: 600, fontSize: 14 }}>{q.label}</div>
                    <div style={{ fontSize: 12, color: "var(--text-3)", marginTop: 2 }}>{q.sub}</div>
                  </div>
                  <span style={{ marginLeft: "auto", color: "var(--text-3)" }}>→</span>
                </button>
              ))}
            </div>
          </>
        )}
      </div>
    </>
  );
}

Object.assign(window, { Overview, Sparkline });