/* Analytics.jsx — live API.
 * Без synthetic timeseries: KPI з /overview + /analytics; donut статусу
 * маршрутів + 7-денна activity-summary з audit-log; останні інциденти.
 */

const { useState: useStateA, useEffect: useEffectA } = React;

function Donut({ segments, size = 100 }) {
  const r = 36, cx = size / 2, cy = size / 2;
  const total = segments.reduce((a, s) => a + (s.value || 0), 0);
  if (!total) {
    return (
      <svg width={size} height={size}>
        <circle cx={cx} cy={cy} r={r} fill="none" stroke="var(--surface-3)" strokeWidth="14" />
      </svg>
    );
  }
  let angle = -90;
  return (
    <svg width={size} height={size}>
      {segments.map((s, i) => {
        const v = s.value || 0;
        if (!v) return null;
        const sweep = v / total;
        const x1 = cx + r * Math.cos(angle * Math.PI / 180);
        const y1 = cy + r * Math.sin(angle * Math.PI / 180);
        const endAngle = angle + sweep * 360;
        const x2 = cx + r * Math.cos(endAngle * Math.PI / 180);
        const y2 = cy + r * Math.sin(endAngle * Math.PI / 180);
        const large = sweep > 0.5 ? 1 : 0;
        const path = `M ${x1} ${y1} A ${r} ${r} 0 ${large} 1 ${x2} ${y2}`;
        angle = endAngle;
        return <path key={i} d={path} fill="none" stroke={s.color} strokeWidth="14" />;
      })}
      <circle cx={cx} cy={cy} r={r - 12} fill="var(--surface)" />
    </svg>
  );
}

function ActionLabel(action) {
  const m = {
    "passenger.stops.create": "Створено зупинку",
    "passenger.stops.update": "Оновлено зупинку",
    "passenger.stops.publish": "Опубліковано зупинку",
    "passenger.stops.delete": "Видалено зупинку",
    "passenger.routes.create": "Створено маршрут",
    "passenger.routes.publish": "Опубліковано маршрут",
    "passenger.routes.pause": "Призупинено маршрут",
    "passenger.routes.resume": "Відновлено маршрут",
    "passenger.routes.delete": "Видалено маршрут",
    "passenger.monitoring.ack": "Підтверджено алерт",
    "passenger.settings.update": "Зміна налаштувань",
    "passenger.auth.login": "Логін",
    "passenger.auth.login_failed": "Невдала спроба логіну",
    "passenger.auth.logout": "Вихід",
  };
  return m[action] || action;
}

function Analytics() {
  const [data, setData] = useStateA(null);
  const [loading, setLoading] = useStateA(true);
  const [error, setError] = useStateA(null);
  const [tab, setTab] = useStateA("overview");

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

  useEffectA(() => { reload(); }, []);
  window.passengerApi.usePolling(reload, 60000, []);

  const kpi = (data && data.kpi) || {};
  const donut = (data && data.routes_donut) || {};
  const activity = (data && data.activity_7d) || {};
  const incidents = (data && data.incidents_recent) || [];
  const tsUnavailable = data && data.timeseries_available === false;

  const donutSegments = [
    { label: "Активні",     value: donut.published || 0, color: "var(--ok)" },
    { label: "Призупинені", value: donut.paused || 0,    color: "var(--warn)" },
    { label: "Чернетки",    value: donut.draft || 0,     color: "var(--text-3)" },
    { label: "Архівні",     value: donut.archived || 0,  color: "var(--border-2)" },
  ];

  return (
    <>
      <Topbar
        title="Аналітика"
        subtitle={loading && !data ? "Завантаження…" : "Метрики мережі, маршрутів і активності"}
        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>
        ) : (
          <>
            {/* KPI row (live) */}
            <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 12, marginBottom: 20 }}>
              {[
                { label: "Доступність мережі", value: kpi.availability_pct != null ? `${kpi.availability_pct}%` : "—",
                  color: kpi.availability_pct >= 95 ? "var(--ok)" : kpi.availability_pct >= 85 ? "var(--warn)" : "var(--bad)" },
                { label: "ТЗ онлайн", value: kpi.vehicles_total ? `${kpi.vehicles_online}/${kpi.vehicles_total}` : "—",
                  color: "var(--text-1)" },
                { label: "Алертів у мережі", value: kpi.alerts_total ?? "—",
                  color: (kpi.alerts_total || 0) > 0 ? "var(--bad)" : "var(--ok)" },
                { label: "Інциденти (відкр.)", value: kpi.incidents_open ?? "—",
                  color: (kpi.incidents_open || 0) > 0 ? "var(--warn)" : "var(--ok)" },
              ].map((k, i) => (
                <div key={i} className="card" style={{ padding: "16px 18px" }}>
                  <div style={{ fontSize: 11, fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.5px", color: "var(--text-3)", marginBottom: 8 }}>{k.label}</div>
                  <div style={{ fontSize: 28, fontWeight: 700, letterSpacing: "-0.5px", color: k.color }}>{k.value}</div>
                </div>
              ))}
            </div>

            {/* Tabs */}
            <div style={{ display: "flex", gap: 4, marginBottom: 16, borderBottom: "1px solid var(--border)" }}>
              {[["overview","Огляд"],["activity","Активність"],["incidents","Інциденти"]].map(([id, label]) => (
                <button key={id} onClick={() => setTab(id)} style={{
                  border: "none", background: "none", cursor: "pointer",
                  padding: "8px 14px", fontFamily: "inherit", fontSize: 13.5, fontWeight: 500,
                  color: tab === id ? "var(--accent)" : "var(--text-3)",
                  borderBottom: `2px solid ${tab === id ? "var(--accent)" : "transparent"}`,
                  marginBottom: -1, transition: "all 0.12s",
                }}>{label}</button>
              ))}
            </div>

            {tab === "overview" && (
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
                {/* Donut */}
                <div className="card">
                  <div className="card-header"><span className="card-title">Статус маршрутів</span></div>
                  <div className="card-body" style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 16 }}>
                    <Donut segments={donutSegments} />
                    <div style={{ width: "100%", display: "flex", flexDirection: "column", gap: 6, fontSize: 13 }}>
                      {donutSegments.map(s => (
                        <div key={s.label} style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                          <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
                            <span style={{ width: 8, height: 8, borderRadius: "50%", background: s.color, display: "inline-block" }}></span>
                            <span style={{ color: "var(--text-2)" }}>{s.label}</span>
                          </div>
                          <span style={{ fontWeight: 600 }}>{s.value}</span>
                        </div>
                      ))}
                    </div>
                  </div>
                </div>

                {/* SLA / breached */}
                <div className="card">
                  <div className="card-header"><span className="card-title">Інциденти за період</span></div>
                  <div className="card-body" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
                    <div>
                      <div style={{ fontSize: 11, color: "var(--text-3)", textTransform: "uppercase", letterSpacing: "0.5px" }}>Відкритих</div>
                      <div style={{ fontSize: 26, fontWeight: 700, color: (kpi.incidents_open || 0) > 0 ? "var(--bad)" : "var(--ok)" }}>{kpi.incidents_open ?? 0}</div>
                    </div>
                    <div>
                      <div style={{ fontSize: 11, color: "var(--text-3)", textTransform: "uppercase", letterSpacing: "0.5px" }}>Вирішені</div>
                      <div style={{ fontSize: 26, fontWeight: 700 }}>{kpi.incidents_resolved ?? 0}</div>
                    </div>
                    <div>
                      <div style={{ fontSize: 11, color: "var(--text-3)", textTransform: "uppercase", letterSpacing: "0.5px" }}>SLA breached</div>
                      <div style={{ fontSize: 26, fontWeight: 700, color: (kpi.incidents_sla_breached || 0) > 0 ? "var(--bad)" : "var(--text-1)" }}>{kpi.incidents_sla_breached ?? 0}</div>
                    </div>
                    <div>
                      <div style={{ fontSize: 11, color: "var(--text-3)", textTransform: "uppercase", letterSpacing: "0.5px" }}>Алертів total</div>
                      <div style={{ fontSize: 26, fontWeight: 700 }}>{kpi.alerts_total ?? 0}</div>
                    </div>
                  </div>
                </div>

                {tsUnavailable && (
                  <div className="card" style={{ gridColumn: "span 2" }}>
                    <div className="card-body" style={{ padding: "20px", textAlign: "center", color: "var(--text-3)" }}>
                      <div style={{ fontSize: 22, marginBottom: 6 }}>📊</div>
                      <div style={{ fontWeight: 600, color: "var(--text-2)" }}>Часові ряди — недоступні</div>
                      <div style={{ fontSize: 13, marginTop: 4 }}>
                        Trend-графіки (доступність, рейси по днях) з'являться, коли буде підключений metrics-collector. Дані зараз — поточний snapshot.
                      </div>
                    </div>
                  </div>
                )}
              </div>
            )}

            {tab === "activity" && (
              <div className="card" style={{ padding: 0, overflow: "hidden" }}>
                <div className="card-header"><span className="card-title">Активність за 7 днів (passenger_audit_log)</span></div>
                {Object.keys(activity).length === 0 ? (
                  <div style={{ padding: 40, textAlign: "center", color: "var(--text-3)" }}>
                    <div style={{ fontSize: 22, marginBottom: 6 }}>—</div>
                    <div>Жодних подій за останні 7 днів</div>
                  </div>
                ) : (
                  <table className="table">
                    <thead>
                      <tr><th>Дія</th><th style={{ textAlign: "right", width: 100 }}>Кількість</th></tr>
                    </thead>
                    <tbody>
                      {Object.entries(activity).sort((a, b) => b[1] - a[1]).map(([action, n]) => (
                        <tr key={action}>
                          <td>{ActionLabel(action)}<br/><span style={{ fontSize: 11, color: "var(--text-3)", fontFamily: "monospace" }}>{action}</span></td>
                          <td style={{ textAlign: "right", fontWeight: 600 }}>{n}</td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                )}
              </div>
            )}

            {tab === "incidents" && (
              <div className="card" style={{ padding: 0, overflow: "hidden" }}>
                <div className="card-header"><span className="card-title">Останні інциденти (admin/fleet)</span></div>
                {incidents.length === 0 ? (
                  <div style={{ padding: 40, textAlign: "center", color: "var(--text-3)" }}>Немає інцидентів</div>
                ) : (
                  <table className="table">
                    <thead>
                      <tr><th>Узел</th><th>Код</th><th>Серйозність</th><th>Статус</th><th>Перший</th></tr>
                    </thead>
                    <tbody>
                      {incidents.map((inc, i) => (
                        <tr key={i}>
                          <td style={{ fontWeight: 600 }}>{inc.central_id || "—"}</td>
                          <td className="mono" style={{ fontSize: 12 }}>{inc.code}</td>
                          <td>
                            {inc.severity === "bad"
                              ? <span className="badge badge-bad">⚠ Критично</span>
                              : inc.severity === "warn"
                                ? <span className="badge badge-warn">⚡ Уваги</span>
                                : <span className="badge badge-ok">✓ OK</span>}
                          </td>
                          <td>
                            {inc.status === "active"
                              ? <span className="badge badge-bad">● Активний</span>
                              : <span className="badge badge-ok">✓ {inc.status || "—"}</span>}
                          </td>
                          <td className="mono" style={{ fontSize: 11, color: "var(--text-3)" }}>
                            {inc.first_ts ? new Date(inc.first_ts).toLocaleString("uk-UA") : "—"}
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                )}
              </div>
            )}
          </>
        )}
      </div>
    </>
  );
}

Object.assign(window, { Analytics });