/* global React, Icon, Button, Input, Kicker */
// AdminPage — mini espace interne pour basculer la disponibilité des
// produits dans Notion, sans passer par Notion directement. Protégé par un
// code à 6 chiffres (ADMIN_CODE), pensé pour un usage occasionnel par le
// patron depuis son téléphone, pas comme un vrai système de comptes.

const ADMIN_CODE_KEY = "eaumedoc.admin.code";

function AdminPage() {
  const [code, setCode] = React.useState(() => {
    try {return sessionStorage.getItem(ADMIN_CODE_KEY) || "";} catch {return "";}
  });
  const [codeInput, setCodeInput] = React.useState("");
  const [products, setProducts] = React.useState(null);
  const [error, setError] = React.useState("");
  const [savingId, setSavingId] = React.useState(null);

  const loadProducts = React.useCallback(() => {
    setError("");
    fetch("/api/produits", { headers: { Accept: "application/json" } }).
    then((r) => r.json()).
    then((data) => setProducts(data.produits || [])).
    catch(() => setError("Impossible de charger les produits."));
  }, []);

  React.useEffect(() => {
    if (code) loadProducts();
  }, [code, loadProducts]);

  const unlock = (e) => {
    e.preventDefault();
    if (codeInput.length !== 6) return;
    try {sessionStorage.setItem(ADMIN_CODE_KEY, codeInput);} catch {}
    setCode(codeInput);
  };

  const lock = () => {
    try {sessionStorage.removeItem(ADMIN_CODE_KEY);} catch {}
    setCode("");
    setProducts(null);
    setCodeInput("");
  };

  const toggle = (product) => {
    const next = !product.disponible;
    setSavingId(product.id);
    setError("");
    setProducts((list) => list.map((p) => p.id === product.id ? { ...p, disponible: next } : p));
    fetch("/api/admin/dispo", {
      method: "POST",
      headers: { "Content-Type": "application/json", "X-Admin-Code": code },
      body: JSON.stringify({ id: product.id, disponible: next })
    }).
    then(async (r) => {
      if (r.status === 401) {
        lock();
        setError("Code incorrect — reconnectez-vous.");
        throw new Error("unauthorized");
      }
      if (!r.ok) {
        const body = await r.json().catch(() => ({}));
        throw new Error(body.detail || body.error || ("Erreur " + r.status));
      }
    }).
    catch((err) => {
      // On annule la mise à jour optimiste si l'appel a échoué.
      setProducts((list) => list.map((p) => p.id === product.id ? { ...p, disponible: !next } : p));
      setError((prev) => prev || (err && err.message) || "La mise à jour a échoué, réessayez.");
    }).
    finally(() => setSavingId(null));
  };

  if (!code) {
    return (
      <section className="py-24 md:py-32 bg-foam min-h-[70vh] flex items-center">
        <div className="container-x max-w-[420px] mx-auto text-center">
          <div className="w-14 h-14 rounded-full bg-primary/10 text-primary grid place-items-center mx-auto mb-5">
            <Icon name="lock" size={22} />
          </div>
          <Kicker>Espace interne</Kicker>
          <h1 className="h-display mt-3">Gestion des disponibilités</h1>
          <form onSubmit={unlock} className="mt-8 panel p-6 text-left">
            <label className="text-[13px] font-semibold uppercase tracking-eyebrow text-mute">Code à 6 chiffres</label>
            <Input
              type="password"
              inputMode="numeric"
              maxLength={6}
              autoFocus
              value={codeInput}
              onChange={(e) => setCodeInput(e.target.value.replace(/\D/g, "").slice(0, 6))}
              className="mt-2 text-center text-[20px] tracking-[0.3em]" />

            <Button type="submit" variant="primary" size="lg" className="w-full mt-5" disabled={codeInput.length !== 6}>Déverrouiller</Button>
          </form>
        </div>
      </section>);

  }

  return (
    <section className="py-14 md:py-20 bg-foam min-h-[70vh]">
      <div className="container-x max-w-[720px]">
        <div className="flex items-start justify-between gap-4 flex-wrap">
          <div>
            <Kicker>Espace interne</Kicker>
            <h1 className="h-display mt-3">Gestion des disponibilités</h1>
          </div>
          <button onClick={lock} className="text-[13px] font-semibold text-mute hover:text-ink underline underline-offset-4">Verrouiller</button>
        </div>

        {error &&
        <div className="mt-6 panel p-4 bg-red-50 border border-red-200 text-red-700 text-[14px] flex items-center gap-2">
            <Icon name="alert-triangle" size={16} />
            {error}
          </div>
        }

        <div className="mt-8 panel divide-y divide-line">
          {products === null && <div className="p-6 text-mute">Chargement…</div>}
          {products && products.length === 0 &&
          <div className="p-6 text-mute">Aucun produit trouvé dans Notion.</div>
          }
          {products && products.map((p) =>
          <div key={p.id} className="p-4 md:p-5 flex items-center gap-4">
              <div className="flex-1 min-w-0">
                <div className="font-semibold text-ink truncate">{p.produit}</div>
                <div className="text-[13px] text-mute">{p.categorie}</div>
              </div>
              <button
              onClick={() => toggle(p)}
              disabled={savingId === p.id}
              aria-pressed={p.disponible}
              aria-label={"Disponibilité de " + p.produit}
              className={"relative w-11 h-6 rounded-full transition-colors shrink-0 disabled:opacity-50 " + (p.disponible ? "bg-primary" : "bg-line")}>

                <span className={"absolute top-0.5 w-5 h-5 rounded-full bg-white shadow-sm transition-all " + (p.disponible ? "left-[22px]" : "left-0.5")} />
              </button>
            </div>
          )}
        </div>
      </div>
    </section>);

}

window.AdminPage = AdminPage;