// admin-app/app.jsx — Composition principale de l'admin
// (gate du secret, tabs, routing)

const TABS = [
  { id: "dash",    label: "Tableau de bord" },
  { id: "rsvp",    label: "RSVP" },
  { id: "tables",  label: "Tables" },
  { id: "gites",   label: "Gîtes" },
  { id: "regimes", label: "Régimes" },
  { id: "covoit",  label: "Covoiturages" },
];

function AdminApp() {
  // Init secret depuis URL au mount
  React.useEffect(() => { initSecretFromUrl(); }, []);

  // État : ping en cours / OK / KO
  const [authState, setAuthState] = React.useState(() => getAdminSecret() ? "checking" : "no-secret");
  const [authError, setAuthError] = React.useState("");

  React.useEffect(() => {
    if (authState !== "checking") return;
    pingAdmin().then(res => {
      if (res.ok) setAuthState("ok");
      else { setAuthState("bad-secret"); setAuthError(res.reason); }
    });
  }, [authState]);

  // Si pas de secret → écran de saisie
  if (authState === "no-secret" || authState === "bad-secret") {
    return <KeyGate
      onSubmit={(k) => { setAdminSecret(k); setAuthState("checking"); }}
      error={authState === "bad-secret" ? authError : null}
    />;
  }

  if (authState === "checking") {
    return <FullScreenLoader/>;
  }

  return <AdminShell/>;
}

// ─── Écran de saisie du secret ────────────────────────────────────────
function KeyGate({ onSubmit, error }) {
  const [value, setValue] = React.useState("");
  return (
    <div style={{
      minHeight: "100vh", display: "flex", alignItems: "center", justifyContent: "center",
      padding: 24, background: AD.paper,
    }}>
      <div className="ad-up" style={{ background: AD.white, padding: "36px 32px", maxWidth: 440, width: "100%", border: `1px solid ${AD.ruleSoft}` }}>
        <div className="eyebrow">★ Admin pilotage</div>
        <div className="display-italic" style={{ fontSize: 36, color: AD.ink, marginTop: 10, lineHeight: 1 }}>
          E <span style={{ color: AD.or }}>&amp;</span> A
        </div>
        <div className="italic" style={{ fontSize: 15, color: AD.inkSoft, marginTop: 12, lineHeight: 1.5 }}>
          Saisis le secret admin (32 caractères) pour accéder au tableau de bord.
        </div>
        {error && (
          <div style={{ marginTop: 14, padding: "8px 12px", background: AD.rougePale, color: AD.rougeDeep, fontFamily: AD.mono, fontSize: 11, letterSpacing: 1 }}>
            ⚠ {error}
          </div>
        )}
        <form onSubmit={(e) => { e.preventDefault(); if (value.trim()) onSubmit(value.trim()); }} style={{ marginTop: 18 }}>
          <input
            type="password"
            value={value}
            onChange={(e) => setValue(e.target.value)}
            placeholder="ex : 5Niv74FguSgx6Ntr…"
            autoFocus
            style={{ width: "100%", padding: "12px 14px", fontFamily: AD.mono, fontSize: 13 }}
          />
          <button type="submit" className="btn gold" style={{ marginTop: 12, width: "100%", padding: "12px" }}>
            ★ Déverrouiller
          </button>
        </form>
        <div style={{ marginTop: 16, fontFamily: AD.italic, fontStyle: "italic", fontSize: 12, color: AD.inkMute, lineHeight: 1.45 }}>
          Tu peux aussi accéder via une URL avec <code style={{ background: AD.paper, padding: "1px 5px" }}>?key=…</code> : le secret sera stocké automatiquement.
        </div>
      </div>
    </div>
  );
}

function FullScreenLoader() {
  return (
    <div style={{ minHeight: "100vh", display: "flex", alignItems: "center", justifyContent: "center", gap: 12, color: AD.inkSoft, fontFamily: AD.italic, fontStyle: "italic" }}>
      <AdSpinner size={20}/> Connexion au backend…
    </div>
  );
}

// ─── Coquille principale (sidebar + content) ──────────────────────────
function AdminShell() {
  const [tab, setTab] = React.useState(() => {
    const h = window.location.hash.replace("#", "");
    return TABS.find(t => t.id === h) ? h : "dash";
  });
  React.useEffect(() => { window.location.hash = tab; }, [tab]);

  const { data, loading, refreshing, error, lastFetch, reload } = useAdminData();

  if (loading) return <FullScreenLoader/>;

  if (error) {
    return (
      <div style={{ padding: 40, maxWidth: 560, margin: "60px auto", background: AD.white, border: `1px solid ${AD.rouge}`, borderLeft: `4px solid ${AD.rouge}` }}>
        <div className="eyebrow" style={{ color: AD.rougeDeep }}>★ Erreur backend</div>
        <div className="display-bold" style={{ fontSize: 22, marginTop: 8 }}>Connexion au Sheet impossible</div>
        <div style={{ marginTop: 10, fontFamily: AD.mono, fontSize: 12, color: AD.ink, background: AD.paper, padding: 10 }}>
          {error}
        </div>
        <div style={{ marginTop: 14, display: "flex", gap: 8 }}>
          <button className="btn" onClick={reload}>↻ Réessayer</button>
          <button className="btn danger" onClick={() => { clearAdminSecret(); window.location.reload(); }}>Réinitialiser le secret</button>
        </div>
      </div>
    );
  }

  return (
    <div style={{ minHeight: "100vh", display: "flex", flexDirection: "column" }}>
      <AdminHeader/>
      <AdminNav tab={tab} setTab={setTab} refreshing={refreshing}/>
      <main style={{ flex: 1, maxWidth: 1280, width: "100%", margin: "0 auto", padding: "28px 32px 80px" }}>
        {tab === "dash"    && <DashboardPage data={data} lastFetch={lastFetch} refreshing={refreshing} onReload={reload}/>}
        {tab === "rsvp"    && <RsvpPage data={data} onReload={reload}/>}
        {tab === "tables"  && <TablesPage data={data} onReload={reload}/>}
        {tab === "gites"   && <GitesPage data={data} onReload={reload}/>}
        {tab === "regimes" && <RegimesPage data={data} onReload={reload}/>}
        {tab === "covoit"  && <ComingSoon name="Covoiturages"/>}
      </main>
    </div>
  );
}

function ComingSoon({ name }) {
  return (
    <div style={{ padding: 60, textAlign: "center", background: AD.white, border: `1px dashed ${AD.ruleSoft}` }}>
      <div className="display-italic" style={{ fontSize: 32, color: AD.or, lineHeight: 1 }}>✦</div>
      <div className="display-bold" style={{ fontSize: 22, marginTop: 14 }}>{name}</div>
      <div className="italic" style={{ fontSize: 14, color: AD.inkSoft, marginTop: 8 }}>
        Livré dans la prochaine itération.
      </div>
    </div>
  );
}

function AdminHeader() {
  return (
    <div style={{ background: AD.ink, color: AD.white, padding: "12px 20px", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
      <div>
        <span style={{ fontFamily: AD.mono, fontSize: 9, letterSpacing: 3, color: AD.or }}>★ ADMIN PILOTAGE</span>
        <span style={{ fontFamily: AD.italic, fontStyle: "italic", fontSize: 13, marginLeft: 14, color: "rgba(255,255,255,0.7)" }}>
          E <span style={{ color: AD.or }}>&amp;</span> A · 21 / 08 / 2027
        </span>
      </div>
      <button onClick={() => { if (confirm("Te déconnecter de l'admin ?")) { clearAdminSecret(); window.location.reload(); } }}
        style={{ background: "transparent", border: "1px solid rgba(255,255,255,0.18)", color: "rgba(255,255,255,0.7)", padding: "6px 12px", fontFamily: AD.mono, fontSize: 9, letterSpacing: 1.5, cursor: "pointer", textTransform: "uppercase" }}>
        Déconnexion
      </button>
    </div>
  );
}

function AdminNav({ tab, setTab, refreshing }) {
  return (
    <nav style={{ background: AD.white, borderBottom: `1px solid ${AD.ruleSoft}`, padding: "0 20px", display: "flex", gap: 2, alignItems: "center", overflowX: "auto" }}>
      {TABS.map(t => {
        const active = tab === t.id;
        return (
          <button key={t.id} onClick={() => setTab(t.id)}
            style={{
              padding: "12px 16px", background: "transparent", border: "none",
              borderBottom: `2px solid ${active ? AD.or : "transparent"}`,
              fontFamily: AD.mono, fontSize: 10, letterSpacing: 1.5, textTransform: "uppercase",
              color: active ? AD.ink : AD.inkSoft, fontWeight: active ? 600 : 400,
              cursor: "pointer", whiteSpace: "nowrap",
            }}>{t.label}</button>
        );
      })}
      <div style={{ marginLeft: "auto", padding: "0 8px", display: "flex", alignItems: "center", gap: 6, fontFamily: AD.mono, fontSize: 9, color: AD.inkMute, letterSpacing: 1, textTransform: "uppercase" }}>
        {refreshing && <><AdSpinner size={9}/> Sync…</>}
      </div>
    </nav>
  );
}

const adminRoot = ReactDOM.createRoot(document.getElementById("admin-root"));
adminRoot.render(<AdminApp/>);