/* app.jsx — shell, routing, tweaks, overlays */
const { useState, useEffect } = React;

const ACCENTS = {
  "Bleu encre": { p:"0.42 0.108 255", s:"0.345 0.118 257", soft:"0.952 0.024 255" },
  "Vert confiance": { p:"0.48 0.085 158", s:"0.40 0.09 158", soft:"0.95 0.03 158" },
  "Indigo": { p:"0.46 0.13 277", s:"0.38 0.14 279", soft:"0.953 0.03 277" },
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "tenantName": "Mutuelle Horizon",
  "tenantInitials": "MH",
  "tenantColor": "#2d4d8f",
  "accent": "Bleu encre",
  "density": "regular"
}/*EDITMODE-END*/;

const TITLES = {
  dashboard:["Tableau de bord"], billing:["Consommation & facturation"],
  journeys:["Parcours métier"], catalog:["Catalogue de services"],
  forms:["Formulaires"], users:["Utilisateurs & rôles"], settings:["Paramètres du tenant"],
};

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [route, setRoute] = useState("dashboard");
  const [navOpen, setNavOpen] = useState(false);
  const [journeyOpen, setJourneyOpen] = useState(null);   // null | "new" | id
  const [form, setForm] = useState(null);                 // { initial, title, onSave } | null
  const [sim, setSim] = useState(null);                   // journey en simulation | null
  const [simExternal, setSimExternal] = useState(false);

  // apply accent + density
  useEffect(() => {
    const a = ACCENTS[t.accent] || ACCENTS["Bleu encre"];
    const r = document.documentElement.style;
    r.setProperty("--primary", `oklch(${a.p})`);
    r.setProperty("--primary-strong", `oklch(${a.s})`);
    r.setProperty("--primary-soft", `oklch(${a.soft})`);
    r.setProperty("--primary-ring", `oklch(${a.p} / 0.28)`);
    document.documentElement.setAttribute("data-density", t.density);
  }, [t.accent, t.density]);

  const tenant = { name: t.tenantName || "Mutuelle Horizon", initials: (t.tenantInitials || "MH").slice(0,3), color: t.tenantColor || "#2d4d8f" };

  const go = (r, sub) => {
    setRoute(r); setNavOpen(false);
    if (r === "journeys") setJourneyOpen(sub != null ? sub : null);
  };
  const openForm = (cfg) => setForm({ initial: cfg.fields || cfg.initial || [], title: cfg.title || "Formulaire", onSave: cfg.onSave });

  const D = window.DATA;
  let body;
  if (route === "dashboard") body = <DashboardView go={go} />;
  else if (route === "billing") body = <BillingView />;
  else if (route === "catalog") body = <CatalogView />;
  else if (route === "users") body = <UsersView />;
  else if (route === "settings") body = <SettingsView tenant={tenant} setTweak={setTweak} />;
  else if (route === "forms") body = <FormsView openBuilder={(cfg)=>openForm(cfg)} />;
  else if (route === "journeys") {
    if (journeyOpen) {
      const j = journeyOpen === "new" ? emptyJourney() : D.JOURNEYS.find(x => x.id === journeyOpen) || emptyJourney();
      body = <JourneyBuilder key={j.id} journey={j} onBack={() => setJourneyOpen(null)}
        onOpenForm={(step, onSave) => openForm({ title: step.label, fields: step.fields || [], onSave })}
        onSimulate={(jr) => { setSimExternal(false); setSim(jr); }} />;
    } else {
      body = <JourneysView open={(id) => setJourneyOpen(id)} onSimulate={(jr) => { setSimExternal(false); setSim(jr); }} />;
    }
  }

  const crumb = tenant.name + (journeyOpen && route==="journeys" ? " · Parcours" : "");

  return (
    <div className={"app" + (navOpen ? " nav-open" : "")}>
      <Sidebar route={route} go={go} tenant={tenant} />
      {navOpen && <div className="scrim" onClick={() => setNavOpen(false)} />}
      <div className="main">
        <Topbar title={(TITLES[route] || ["—"])[0]} crumb={crumb} onMenu={() => setNavOpen(true)}
          actions={<button className="btn btn--ghost btn--icon" title="Aide"><Ic name="Info" /></button>} />
        <div className="content">{body}</div>
      </div>

      {form && <FormBuilder initial={form.initial} title={form.title} onSave={form.onSave} onClose={() => setForm(null)} />}

      {sim && <JourneySimulator journey={sim} external={simExternal} setExternal={setSimExternal} tenant={tenant} onClose={() => setSim(null)} />}

      <TweaksPanel>
        <TweakSection label="Tenant" />
        <TweakText label="Nom du tenant" value={t.tenantName} onChange={(v)=>setTweak("tenantName", v)} />
        <TweakText label="Monogramme" value={t.tenantInitials} onChange={(v)=>setTweak("tenantInitials", (v||"").toUpperCase().slice(0,3))} />
        <TweakColor label="Couleur du logo" value={t.tenantColor} options={["#2d4d8f","#1f6f5c","#5b4b9e","#3a3f4b","#a8552c"]} onChange={(v)=>setTweak("tenantColor", v)} />
        <TweakSection label="Interface" />
        <TweakSelect label="Accent" value={t.accent} options={Object.keys(ACCENTS)} onChange={(v)=>setTweak("accent", v)} />
        <TweakRadio label="Densité" value={t.density} options={["compact","regular","comfy"]} onChange={(v)=>setTweak("density", v)} />
      </TweaksPanel>
    </div>
  );
}

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