// KCC — Self-Improvement Console
// Reads /api/self-improve/suggestions, shows ranked suggestions,
// lets user run a fresh audit, accept/dismiss/snooze each item.

const { useState, useEffect, useMemo } = React;

function SelfImproveConsole({ onNavigate }) {
  const toast = useToast();
  const [data, setData] = useState({ ranAt: null, items: [] });
  const [loading, setLoading] = useState(true);
  const [auditing, setAuditing] = useState(false);
  const [telemetry, setTelemetry] = useState({ count: 0, items: [] });
  const [tab, setTab] = useState("suggestions"); // suggestions | telemetry

  async function load() {
    setLoading(true);
    try {
      const [sRes, tRes] = await Promise.all([
        fetch("/api/self-improve/suggestions").then(r => r.json()).catch(() => ({ items: [] })),
        fetch("/api/self-improve/telemetry?limit=200").then(r => r.json()).catch(() => ({ items: [], count: 0 })),
      ]);
      setData(sRes);
      setTelemetry(tRes);
    } finally {
      setLoading(false);
    }
  }

  useEffect(() => { load(); }, []);

  async function runAudit() {
    setAuditing(true);
    try {
      const r = await fetch("/api/self-improve/audit", { method: "POST" });
      const j = await r.json();
      if (j.error) {
        toast({ message: `Audit échoué: ${j.error}`, tone: "red" });
      } else {
        toast({ message: `Audit terminé · ${j.suggestions?.length || 0} suggestions`, tone: "green" });
        await load();
      }
    } catch (e) {
      toast({ message: "Erreur réseau pendant l'audit", tone: "red" });
    } finally {
      setAuditing(false);
    }
  }

  async function decide(id, state) {
    await fetch("/api/self-improve/suggestions", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ id, state }),
    });
    toast({ message: state === "accepted" ? "Suggestion acceptée" : state === "dismissed" ? "Suggestion rejetée" : "Suggestion reportée", tone: state === "accepted" ? "green" : "blue" });
    load();
  }

  const open = useMemo(() => (data.items || []).filter(s => (s.state || "open") === "open"), [data]);
  const closed = useMemo(() => (data.items || []).filter(s => (s.state || "open") !== "open"), [data]);

  const sevColor = (s) => s === "high" ? "red" : s === "med" ? "amber" : "muted";
  const catIcon = (c) => ({ bug: "alert", ux: "sparkles", feature: "plus", perf: "zap", data: "database" }[c] || "circle");

  return (
    <div className="stack" style={{ gap: 14, padding: 18 }}>
      <div className="row between" style={{ alignItems: "flex-start" }}>
        <div>
          <div style={{ fontSize: 20, fontWeight: 600 }}>Auto-amélioration</div>
          <div style={{ fontSize: 12.5, color: "var(--text-dim)", marginTop: 4 }}>
            Le site observe son propre usage et propose des correctifs. Aucun changement n'est appliqué sans votre accord.
          </div>
          {data.ranAt && (
            <div className="mono" style={{ fontSize: 11, color: "var(--text-faint)", marginTop: 4 }}>
              Dernier audit: {new Date(data.ranAt).toLocaleString("fr-CA")}
            </div>
          )}
        </div>
        <div className="row" style={{ gap: 8 }}>
          <button className="btn" data-size="sm" onClick={load}>Rafraîchir</button>
          <button className="btn" data-variant="primary" data-size="sm" disabled={auditing} onClick={runAudit}>
            {auditing ? "Analyse…" : "Lancer un audit"}
          </button>
        </div>
      </div>

      <div className="row" style={{ gap: 6 }}>
        <button className="btn" data-variant={tab === "suggestions" ? "primary" : "ghost"} data-size="sm" onClick={() => setTab("suggestions")}>
          Suggestions ({open.length})
        </button>
        <button className="btn" data-variant={tab === "telemetry" ? "primary" : "ghost"} data-size="sm" onClick={() => setTab("telemetry")}>
          Télémétrie ({telemetry.count})
        </button>
      </div>

      {tab === "suggestions" && (
        <>
          {loading && <div className="card" style={{ padding: 20, color: "var(--text-dim)" }}>Chargement…</div>}
          {!loading && open.length === 0 && !data.ranAt && (
            <div className="card" style={{ padding: 24, textAlign: "center" }}>
              <div style={{ fontSize: 14, fontWeight: 550, marginBottom: 6 }}>Aucun audit encore</div>
              <div style={{ fontSize: 12.5, color: "var(--text-dim)", marginBottom: 14 }}>
                Cliquez sur « Lancer un audit » pour que Claude analyse la télémétrie et propose des améliorations.
              </div>
              <button className="btn" data-variant="primary" data-size="sm" onClick={runAudit} disabled={auditing}>
                {auditing ? "Analyse…" : "Lancer le premier audit"}
              </button>
            </div>
          )}
          {!loading && open.length === 0 && data.ranAt && (
            <div className="card" style={{ padding: 24, textAlign: "center", color: "var(--text-dim)" }}>
              Aucune suggestion ouverte. Excellent travail.
            </div>
          )}
          {!loading && open.map((s) => (
            <div key={s.id} className="card" style={{ padding: 14 }}>
              <div className="row between" style={{ alignItems: "flex-start", gap: 12 }}>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div className="row" style={{ gap: 8, flexWrap: "wrap", marginBottom: 4 }}>
                    <Badge tone={sevColor(s.severity)} dot>{s.severity || "med"}</Badge>
                    <span style={{ fontSize: 11, color: "var(--text-dim)", textTransform: "uppercase", letterSpacing: 0.5 }}>{s.category || "ux"}</span>
                  </div>
                  <div style={{ fontSize: 14, fontWeight: 550 }}>{s.title}</div>
                  {s.evidence && (
                    <div style={{ fontSize: 12, color: "var(--text-dim)", marginTop: 4 }}>
                      <span style={{ color: "var(--text-faint)" }}>Preuve: </span>{s.evidence}
                    </div>
                  )}
                  {s.suggested_fix && (
                    <div style={{ fontSize: 12.5, marginTop: 6, padding: 8, background: "var(--bg-2)", borderRadius: 6 }}>
                      <span style={{ color: "var(--text-dim)" }}>Correctif suggéré: </span>{s.suggested_fix}
                    </div>
                  )}
                </div>
                <div className="row" style={{ gap: 6, flexShrink: 0 }}>
                  <button className="btn" data-size="sm" data-variant="primary" onClick={() => decide(s.id, "accepted")}>Accepter</button>
                  <button className="btn" data-size="sm" onClick={() => decide(s.id, "snoozed")}>Plus tard</button>
                  <button className="btn" data-size="sm" data-variant="ghost" onClick={() => decide(s.id, "dismissed")}>Rejeter</button>
                </div>
              </div>
            </div>
          ))}

          {closed.length > 0 && (
            <div style={{ marginTop: 14 }}>
              <div style={{ fontSize: 11, color: "var(--text-dim)", textTransform: "uppercase", letterSpacing: 0.5, marginBottom: 8 }}>
                Décisions précédentes ({closed.length})
              </div>
              {closed.map((s) => (
                <div key={s.id} className="card" style={{ padding: 10, marginBottom: 6, opacity: 0.7 }}>
                  <div className="row between">
                    <div style={{ fontSize: 12.5 }}>{s.title}</div>
                    <div style={{ fontSize: 11, color: "var(--text-dim)" }}>{s.state}</div>
                  </div>
                </div>
              ))}
            </div>
          )}
        </>
      )}

      {tab === "telemetry" && (
        <div className="card" style={{ padding: 0 }}>
          <div className="card-head">
            <div>
              <div className="card-title">Signaux capturés ({telemetry.count})</div>
              <div className="card-sub">Erreurs, boutons morts, changements de page · auto-collectés</div>
            </div>
          </div>
          <div style={{ maxHeight: 500, overflow: "auto" }}>
            {telemetry.items.length === 0 && (
              <div style={{ padding: 24, textAlign: "center", color: "var(--text-dim)", fontSize: 12.5 }}>
                Aucun signal pour l'instant. Naviguez dans le site quelques minutes et revenez.
              </div>
            )}
            {telemetry.items.map((it, i) => (
              <div key={i} style={{ padding: "8px 14px", borderBottom: "1px solid var(--border-subtle)", display: "flex", gap: 10, alignItems: "center" }}>
                <span style={{ fontSize: 10, padding: "2px 6px", borderRadius: 3, background: it.type === "error" ? "var(--red-bg, #fee)" : it.type === "dead_button" ? "var(--amber-bg, #fef3c7)" : "var(--bg-2)", color: "var(--text)", textTransform: "uppercase", letterSpacing: 0.3, minWidth: 90, textAlign: "center" }}>{it.type}</span>
                <span className="mono" style={{ fontSize: 11, color: "var(--text-faint)", width: 70 }}>{new Date(it.ts).toLocaleTimeString("fr-CA")}</span>
                <span style={{ fontSize: 12, color: "var(--text-dim)", width: 110 }}>{it.page}</span>
                <span style={{ fontSize: 12, flex: 1, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{it.detail || "—"}</span>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}

window.SelfImproveConsole = SelfImproveConsole;