import React, { useEffect, useMemo, useState } from "react";
import { createRoot } from "react-dom/client";
import {
  Activity, AlertTriangle, ArrowRight, BarChart3, Bell, BookOpen,
  CalendarDays, CheckCircle2, ChevronRight, CircleDollarSign,
  FileText, Gauge, LayoutDashboard, LogOut, Menu, Settings, ShieldCheck,
  Target, WalletCards, X, XCircle
} from "lucide-react";
import { supabase } from "./lib/supabaseClient.js";

const CONTRACT = { name: "CAP_COMMAND_CENTER", version: "1.0.0", status: "frozen" };

const NAV = [
  ["Command Center", LayoutDashboard, true],
  ["Agenda & Missions", CalendarDays, false],
  ["Finances", CircleDollarSign, false],
  ["Livre de caisse", BookOpen, false],
  ["Objectifs & KPI", Target, false],
  ["Documents", FileText, false],
  ["Paramètres", Settings, false],
];

function cls(...xs) { return xs.filter(Boolean).join(" "); }
function safeArray(v) { return Array.isArray(v) ? v : []; }
function fmtAmount(v) {
  if (v === null || v === undefined || Number.isNaN(Number(v))) return "—";
  return new Intl.NumberFormat("fr-BE", { maximumFractionDigits: 2 }).format(Number(v));
}
function fmtDate(v) {
  if (!v) return "—";
  const d = new Date(v);
  return Number.isNaN(d.getTime()) ? String(v) : new Intl.DateTimeFormat("fr-BE", { day: "2-digit", month: "short" }).format(d);
}
function fmtDateTime(v) {
  if (!v) return "—";
  const d = new Date(v);
  return Number.isNaN(d.getTime()) ? String(v) : new Intl.DateTimeFormat("fr-BE", { day: "2-digit", month: "short", hour: "2-digit", minute: "2-digit" }).format(d);
}

function Card({ children, className = "" }) {
  return <section className={cls("rounded-2xl border border-white/10 bg-white/[0.035] shadow-[0_18px_50px_rgba(0,0,0,.18)]", className)}>{children}</section>;
}
function CardTitle({ icon: Icon, eyebrow, title, right }) {
  return <div className="flex items-start justify-between gap-4 border-b border-white/8 px-5 py-4">
    <div className="flex items-start gap-3">
      {Icon && <div className="rounded-xl border border-white/10 bg-white/5 p-2"><Icon size={17} className="text-slate-300" /></div>}
      <div><div className="text-[10px] font-semibold uppercase tracking-[.22em] text-slate-500">{eyebrow}</div><h2 className="mt-1 text-sm font-semibold text-slate-100">{title}</h2></div>
    </div>{right}
  </div>;
}
function Severity({ severity }) {
  const map = {
    critical: ["CRITIQUE", "border-red-400/25 bg-red-400/10 text-red-200"],
    warning: ["ATTENTION", "border-amber-300/25 bg-amber-300/10 text-amber-100"],
    info: ["INFO", "border-sky-300/20 bg-sky-300/10 text-sky-100"],
  };
  const [label, style] = map[severity] || [String(severity || "INFO").toUpperCase(), "border-white/10 bg-white/5 text-slate-300"];
  return <span className={cls("rounded-full border px-2 py-1 text-[9px] font-bold tracking-[.14em]", style)}>{label}</span>;
}

function Login({ onReady }) {
  const [email, setEmail] = useState("");
  const [token, setToken] = useState("");
  const [stage, setStage] = useState("email");
  const [busy, setBusy] = useState(false);
  const [message, setMessage] = useState("");
  const [error, setError] = useState("");

  async function sendOtp(e) {
    e.preventDefault(); setBusy(true); setError(""); setMessage("");
    const { error } = await supabase.auth.signInWithOtp({ email: email.trim(), options: { shouldCreateUser: false } });
    setBusy(false);
    if (error) return setError(error.message);
    setStage("otp"); setMessage("Code envoyé. Consultez votre boîte mail.");
  }
  async function verifyOtp(e) {
    e.preventDefault(); setBusy(true); setError("");
    const { data, error } = await supabase.auth.verifyOtp({ email: email.trim(), token: token.trim(), type: "email" });
    setBusy(false);
    if (error) return setError(error.message);
    if (data?.session) onReady(data.session);
  }

  return <div className="min-h-screen bg-[#0d1117] text-white flex items-center justify-center px-5">
    <div className="w-full max-w-md">
      <div className="mb-8"><div className="text-xs font-bold tracking-[.24em] text-slate-500">CAP</div><h1 className="mt-2 text-3xl font-semibold tracking-tight">Business Pro Executive V10</h1><p className="mt-3 text-sm leading-6 text-slate-400">Accès sécurisé au cockpit opérationnel.</p></div>
      <Card className="p-6">
        <form onSubmit={stage === "email" ? sendOtp : verifyOtp} className="space-y-4">
          <div><label className="mb-2 block text-xs font-medium text-slate-400">E-mail</label><input type="email" required disabled={stage === "otp"} value={email} onChange={e=>setEmail(e.target.value)} className="w-full rounded-xl border border-white/10 bg-black/20 px-4 py-3 text-sm outline-none focus:border-white/25 disabled:opacity-60" /></div>
          {stage === "otp" && <div><label className="mb-2 block text-xs font-medium text-slate-400">Code à 6 chiffres</label><input inputMode="numeric" autoComplete="one-time-code" required value={token} onChange={e=>setToken(e.target.value.replace(/\D/g, "").slice(0,6))} className="w-full rounded-xl border border-white/10 bg-black/20 px-4 py-3 text-lg tracking-[.35em] outline-none focus:border-white/25" /></div>}
          {message && <div className="text-xs text-emerald-300">{message}</div>}
          {error && <div className="rounded-xl border border-red-400/20 bg-red-400/10 px-3 py-2 text-xs text-red-200">{error}</div>}
          <button disabled={busy} className="w-full rounded-xl bg-slate-100 px-4 py-3 text-sm font-semibold text-slate-950 disabled:opacity-60">{busy ? "Traitement…" : stage === "email" ? "Recevoir mon code" : "Ouvrir mon cockpit"}</button>
          {stage === "otp" && <button type="button" onClick={()=>{setStage("email");setToken("");setMessage("");setError("");}} className="w-full text-xs text-slate-500 hover:text-slate-300">Changer d’adresse</button>}
        </form>
      </Card>
      <div className="mt-5 text-center text-[10px] tracking-[.15em] text-slate-600">CAP BUSINESS PRO EXECUTIVE V10 · BUILD 001</div>
    </div>
  </div>;
}

function Shell({ data, onRefresh, refreshing, onSignOut }) {
  const [open, setOpen] = useState(false);
  const header = data?.header || {};
  const command = data?.command || {};
  const performance = data?.performance || {};
  const attention = data?.attention || {};
  const focus = header?.focus || {};
  const missions = safeArray(command?.missions);
  const agenda = safeArray(command?.agenda);
  const signals = safeArray(command?.signals);
  const kpis = safeArray(performance?.kpis);
  const finance = performance?.finance || {};
  const counts = attention?.counts || {};

  const sidebar = <div className="flex h-full flex-col">
    <div className="border-b border-white/8 px-5 py-5"><div className="text-[11px] font-bold tracking-[.27em] text-slate-500">CAP</div><div className="mt-2 text-sm font-semibold text-white">Business Pro Executive</div><div className="mt-1 text-[10px] tracking-[.18em] text-slate-600">V10 · BUILD 001</div></div>
    <nav className="flex-1 space-y-1 p-3">{NAV.map(([label, Icon, active]) => <button key={label} disabled={!active} className={cls("flex w-full items-center gap-3 rounded-xl px-3 py-3 text-left text-sm", active ? "bg-white/8 text-white" : "text-slate-600 cursor-not-allowed")}><Icon size={17}/><span>{label}</span>{active && <ChevronRight size={14} className="ml-auto text-slate-500"/>}</button>)}</nav>
    <div className="border-t border-white/8 p-3"><button onClick={onSignOut} className="flex w-full items-center gap-3 rounded-xl px-3 py-3 text-sm text-slate-500 hover:bg-white/5 hover:text-slate-300"><LogOut size={17}/>Déconnexion</button></div>
  </div>;

  return <div className="min-h-screen bg-[#0d1117] text-slate-100">
    <aside className="fixed inset-y-0 left-0 z-20 hidden w-64 border-r border-white/8 bg-[#0b0f15] lg:block">{sidebar}</aside>
    {open && <div className="fixed inset-0 z-40 lg:hidden"><button className="absolute inset-0 bg-black/70" onClick={()=>setOpen(false)}></button><aside className="relative h-full w-72 border-r border-white/10 bg-[#0b0f15]">{sidebar}<button onClick={()=>setOpen(false)} className="absolute right-3 top-3 rounded-lg p-2 text-slate-500"><X size={18}/></button></aside></div>}
    <main className="lg:pl-64">
      <header className="sticky top-0 z-10 border-b border-white/8 bg-[#0d1117]/90 backdrop-blur-xl">
        <div className="mx-auto flex max-w-[1500px] items-center gap-4 px-4 py-4 sm:px-6 lg:px-8">
          <button onClick={()=>setOpen(true)} className="rounded-xl border border-white/10 p-2 lg:hidden"><Menu size={18}/></button>
          <div className="min-w-0 flex-1"><div className="text-[10px] font-semibold uppercase tracking-[.23em] text-slate-500">Command Center</div><div className="truncate text-sm font-medium text-slate-200">Aujourd’hui · {header?.today?.date || "—"} · {header?.today?.local_time ? String(header.today.local_time).slice(0,5) : "—"}</div></div>
          <div className="hidden items-center gap-2 rounded-full border border-emerald-400/15 bg-emerald-400/8 px-3 py-1.5 text-[10px] font-semibold tracking-[.12em] text-emerald-200 sm:flex"><ShieldCheck size={13}/>COCKPIT OPÉRATIONNEL</div>
          <button onClick={onRefresh} disabled={refreshing} className="rounded-xl border border-white/10 px-3 py-2 text-xs text-slate-300 hover:bg-white/5 disabled:opacity-50">{refreshing ? "Actualisation…" : "Actualiser"}</button>
        </div>
      </header>

      <div className="mx-auto max-w-[1500px] px-4 py-6 sm:px-6 lg:px-8">
        <div className="mb-6 grid gap-4 xl:grid-cols-[1.35fr_.65fr]">
          <Card className="p-6"><div className="text-[10px] font-semibold uppercase tracking-[.22em] text-slate-500">Direction actuelle</div><h1 className="mt-3 text-2xl font-semibold tracking-tight sm:text-3xl">{focus?.focus_90_days || focus?.direction || "Aucun focus défini"}</h1><div className="mt-5 flex items-start gap-3 rounded-xl border border-white/8 bg-black/15 p-4"><ArrowRight size={17} className="mt-0.5 shrink-0 text-slate-500"/><div><div className="text-[10px] uppercase tracking-[.18em] text-slate-600">Prochaine victoire</div><div className="mt-1 text-sm leading-6 text-slate-300">{focus?.next_win || "Aucune prochaine victoire définie."}</div></div></div></Card>
          <Card className="p-5"><div className="flex items-center justify-between"><div><div className="text-[10px] font-semibold uppercase tracking-[.22em] text-slate-500">Attention</div><div className="mt-2 text-lg font-semibold">Vue immédiate</div></div><Gauge size={22} className="text-slate-500"/></div><div className="mt-5 grid grid-cols-2 gap-3"><Metric label="Missions ouvertes" value={counts?.open_missions}/><Metric label="Agenda · 7 jours" value={counts?.agenda_next_7d}/><Metric label="Signaux ouverts" value={counts?.open_signals}/><Metric label="Notifications" value={counts?.unread_notifications}/></div></Card>
        </div>

        <div className="grid gap-5 xl:grid-cols-12">
          <div className="space-y-5 xl:col-span-7">
            <Card><CardTitle icon={Target} eyebrow="Command" title="Missions prioritaires"/><div className="divide-y divide-white/8">{missions.length ? missions.map((m,i)=><div key={m.id || i} className="flex gap-4 px-5 py-4"><div className="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-full border border-white/10 text-[10px] font-bold text-slate-500">{i+1}</div><div className="min-w-0 flex-1"><div className="text-sm font-medium text-slate-200">{m.title || m.name || "Mission"}</div><div className="mt-2 flex flex-wrap gap-2 text-[10px] text-slate-500"><span>Priorité {m.priority ?? "—"}</span><span>·</span><span>{m.status || "—"}</span>{m.due_at && <><span>·</span><span>Échéance {fmtDateTime(m.due_at)}</span></>}</div></div></div>) : <Empty text="Aucune mission prioritaire."/>}</div></Card>

            <Card><CardTitle icon={CalendarDays} eyebrow="Command" title="Agenda · 7 prochains jours" right={<span className="text-[10px] text-slate-600">Données réelles uniquement</span>}/><div className="divide-y divide-white/8">{agenda.length ? agenda.map((a,i)=><div key={a.id || i} className="flex items-center gap-4 px-5 py-4"><div className="w-16 shrink-0 text-xs font-semibold text-slate-400">{fmtDate(a.date)}</div><div className="min-w-0 flex-1"><div className="truncate text-sm text-slate-200">{a.action || "Événement"}</div><div className="mt-1 text-[10px] text-slate-600">{a.time ? String(a.time).slice(0,5) : "—"}{a.duration_minutes ? ` · ${a.duration_minutes} min` : ""}{a.status ? ` · ${a.status}` : ""}</div></div></div>) : <Empty icon={CalendarDays} text="Agenda vide pour les 7 prochains jours." sub="Aucun événement fictif n’est affiché."/>}</div></Card>

            <Card><CardTitle icon={AlertTriangle} eyebrow="Command" title="Signaux à traiter"/><div className="divide-y divide-white/8">{signals.length ? signals.map((s,i)=><div key={s.id || i} className="px-5 py-4"><div className="flex items-start justify-between gap-4"><div className="min-w-0"><div className="text-sm font-medium text-slate-200">{s.title || s.label || s.signal_type || "Signal"}</div>{s.body && <div className="mt-1 text-xs leading-5 text-slate-500">{s.body}</div>}</div><Severity severity={s.severity}/></div></div>) : <Empty text="Aucun signal ouvert."/>}</div></Card>
          </div>

          <div className="space-y-5 xl:col-span-5">
            <Card><CardTitle icon={WalletCards} eyebrow="Performance" title="Finances · 30 jours"/><div className="grid grid-cols-2 gap-px bg-white/8"><FinanceMetric label="Rentrées" value={finance?.income_30d}/><FinanceMetric label="Sorties" value={finance?.expense_30d}/><FinanceMetric label="À échéance" value={finance?.due_30d}/><FinanceMetric label="En retard" value={finance?.overdue_count}/></div><div className="px-5 py-3 text-[10px] leading-5 text-slate-600">Aucun symbole monétaire n’est ajouté : le contrat V1.0 ne fournit pas la devise.</div></Card>
            <Card><CardTitle icon={BarChart3} eyebrow="Performance" title="Objectifs & KPI"/><div className="divide-y divide-white/8">{kpis.length ? kpis.map((k,i)=><div key={k.id || i} className="px-5 py-4"><div className="flex items-start justify-between gap-4"><div><div className="text-sm font-medium text-slate-200">{k.label || k.name || k.key || "KPI"}</div><div className="mt-1 text-[10px] uppercase tracking-[.13em] text-slate-600">{k.unit || "indicateur"}</div></div><div className="text-right"><div className="text-lg font-semibold text-white">{k.value ?? k.current_value ?? "—"}</div><div className="mt-1 text-[10px] text-slate-600">cible {k.target ?? k.target_value ?? "—"}</div></div></div></div>) : <Empty text="Aucun KPI disponible."/>}</div></Card>
            <Card className="p-5"><div className="flex items-start gap-3"><Activity size={18} className="mt-0.5 text-slate-500"/><div><div className="text-xs font-semibold text-slate-300">CAP AI · fondation prête</div><p className="mt-2 text-xs leading-5 text-slate-600">BUILD 001 n’invente aucune recommandation IA. Le cockpit affiche uniquement ce que le contrat backend autorisé retourne.</p></div></div></Card>
          </div>
        </div>

        <footer className="mt-8 flex flex-col gap-2 border-t border-white/8 py-5 text-[10px] tracking-[.12em] text-slate-700 sm:flex-row sm:items-center sm:justify-between"><span>CAP BUSINESS PRO EXECUTIVE V10 · BUILD 001</span><span>{data?.contract?.name} · v{data?.contract?.version}</span></footer>
      </div>
    </main>
  </div>;
}

function Metric({ label, value }) { return <div className="rounded-xl border border-white/8 bg-black/15 p-3"><div className="text-xl font-semibold text-white">{value ?? "—"}</div><div className="mt-1 text-[10px] leading-4 text-slate-600">{label}</div></div>; }
function FinanceMetric({ label, value }) { return <div className="bg-[#0d1117] p-5"><div className="text-[10px] uppercase tracking-[.16em] text-slate-600">{label}</div><div className="mt-2 text-xl font-semibold text-slate-100">{fmtAmount(value)}</div></div>; }
function Empty({ icon: Icon, text, sub }) { return <div className="px-5 py-8 text-center">{Icon && <Icon size={20} className="mx-auto mb-3 text-slate-700"/>}<div className="text-sm text-slate-500">{text}</div>{sub && <div className="mt-1 text-[10px] text-slate-700">{sub}</div>}</div>; }

function App() {
  const [session, setSession] = useState(null);
  const [booting, setBooting] = useState(true);
  const [data, setData] = useState(null);
  const [error, setError] = useState("");
  const [refreshing, setRefreshing] = useState(false);

  useEffect(() => {
    let active = true;
    supabase.auth.getSession().then(({ data }) => { if (active) { setSession(data.session || null); setBooting(false); } });
    const { data: listener } = supabase.auth.onAuthStateChange((_event, nextSession) => { setSession(nextSession || null); if (!nextSession) setData(null); });
    return () => { active = false; listener?.subscription?.unsubscribe(); };
  }, []);

  async function load() {
    if (!session) return;
    setRefreshing(true); setError("");
    const { data: payload, error: rpcError } = await supabase.rpc("cap_get_my_command_center_v1");
    setRefreshing(false);
    if (rpcError) { setData(null); return setError(`RPC indisponible : ${rpcError.message}`); }
    const c = payload?.contract || {};
    if (c.name !== CONTRACT.name || c.version !== CONTRACT.version || c.status !== CONTRACT.status) {
      setData(null); return setError(`Contrat backend incompatible. Attendu ${CONTRACT.name} v${CONTRACT.version} (${CONTRACT.status}).`);
    }
    setData(payload);
  }

  useEffect(() => { if (session) load(); }, [session?.access_token]);

  if (booting) return <div className="min-h-screen bg-[#0d1117] text-slate-500 flex items-center justify-center text-sm">Initialisation sécurisée…</div>;
  if (!session) return <Login onReady={setSession}/>;
  if (error) return <div className="min-h-screen bg-[#0d1117] text-white flex items-center justify-center px-5"><Card className="w-full max-w-lg p-6"><div className="flex items-start gap-3"><XCircle className="mt-0.5 text-red-300"/><div><h1 className="text-lg font-semibold">Command Center indisponible</h1><p className="mt-2 text-sm leading-6 text-slate-400">{error}</p><div className="mt-5 flex gap-3"><button onClick={load} className="rounded-xl bg-white px-4 py-2 text-xs font-semibold text-black">Réessayer</button><button onClick={()=>supabase.auth.signOut()} className="rounded-xl border border-white/10 px-4 py-2 text-xs text-slate-300">Déconnexion</button></div></div></div></Card></div>;
  if (!data) return <div className="min-h-screen bg-[#0d1117] text-slate-500 flex items-center justify-center text-sm">Chargement du Command Center…</div>;
  return <Shell data={data} onRefresh={load} refreshing={refreshing} onSignOut={()=>supabase.auth.signOut()}/>;
}

createRoot(document.getElementById("root")).render(<App/>);