// ── App root ────────────────────────────────────────────────────
function App() {
  const [route, setRoute] = React.useState(() => {
    const p = window.location.pathname.replace(/\/$/, "");
    if (p.endsWith("/menu")) return "menu";
    return "home";
  });
  const [initCat, setInitCat] = React.useState(null);
  const goToMenuCat = (catId) => { setInitCat(catId); setRoute("menu"); };
  const [cart, setCart] = React.useState([]);
  const [cartOpen, setCartOpen] = React.useState(false);
  const [confirmOpen, setConfirmOpen] = React.useState(false);
  const [paymentDetails, setPaymentDetails] = React.useState(null);
  const [lastOrder, setLastOrder] = React.useState(null);
  const [toast, setToast] = React.useState(null);
  const [menu, setMenu]     = React.useState(SEED_MENU);
  const [orders, setOrders] = React.useState(SEED_ORDERS);
  const [authUser, setAuthUser]     = React.useState(null);
  const [authChecked, setAuthChecked] = React.useState(false);

  // Verify existing token on mount
  React.useEffect(() => {
    const token = sessionStorage.getItem("cb_token");
    if (!token) { setAuthChecked(true); return; }
    fetch("/api/auth/me", { headers: { "Authorization": `Bearer ${token}` } })
      .then(r => r.ok ? r.json() : Promise.reject())
      .then(data => setAuthUser(data.user))
      .catch(() => sessionStorage.removeItem("cb_token"))
      .finally(() => setAuthChecked(true));
  }, []);

  // Public menu (always)
  React.useEffect(() => {
    fetch("/api/menu")
      .then(r => r.ok ? r.json() : Promise.reject())
      .then(data => { if (data.length) setMenu(data); })
      .catch(() => {});
  }, []);

  // Orders (authenticated only)
  React.useEffect(() => {
    if (!authUser) return;
    const token = sessionStorage.getItem("cb_token");
    fetch("/api/orders", { headers: { "Authorization": `Bearer ${token}`, "Content-Type": "application/json" } })
      .then(r => r.ok ? r.json() : Promise.reject())
      .then(data => setOrders(data))
      .catch(() => {});
  }, [authUser]);

  const onLogin = (user) => { setAuthUser(user); setRoute("admin"); };
  const onLogout = () => { sessionStorage.removeItem("cb_token"); setAuthUser(null); setRoute("home"); };

  const cartCount = cart.reduce((s, i) => s + i.qty, 0);

  const showToast = (msg) => {
    setToast(msg);
    clearTimeout(window.__toastT);
    window.__toastT = setTimeout(() => setToast(null), 1800);
  };

  const addToCart = (item) => {
    setCart(prev => {
      const ex = prev.find(i => i.id === item.id);
      if (ex) return prev.map(i => i.id === item.id ? { ...i, qty: i.qty + 1 } : i);
      return [...prev, { id: item.id, name: item.name, price: item.price, qty: 1 }];
    });
    showToast(`Ajouté : ${item.name}`);
  };
  const setQty = (id, qty) => setCart(cart.map(i => i.id === id ? { ...i, qty } : i));
  const removeItem = (id) => setCart(cart.filter(i => i.id !== id));

  const openConfirm = () => { setCartOpen(false); setConfirmOpen(true); };

  const completePayment = async (details) => {
    const d = details || paymentDetails;
    const newOrder = {
      id:      "CB-" + Math.floor(2400 + Math.random() * 200),
      name:    d.name,
      phone:   d.phone,
      type:    d.type,
      address: d.type === "Livraison" ? d.address : "–",
      when:    "Aujourd'hui · " + new Date().toLocaleTimeString("fr-FR", { hour: "2-digit", minute: "2-digit" }),
      items:   cart.map(i => ({ ...i })),
      total:   d.total,
      status:  "Nouvelle",
    };

    fetch("/api/orders", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ ...newOrder, email: d.email || "", note: d.note || "" }),
    }).catch(() => {});

    setOrders([newOrder, ...orders]);
    setLastOrder(newOrder);
    setCart([]);
    setPaymentDetails(null);
    setRoute("confirmation");
  };

  const proceedToPayment = (details) => {
    setConfirmOpen(false);
    if (authUser) {
      completePayment(details);
    } else {
      setPaymentDetails(details);
    }
  };

  React.useEffect(() => {
    window.scrollTo({ top: 0, behavior: "instant" in window ? "instant" : "auto" });
  }, [route]);

  const showFooter = route !== "admin" && route !== "confirmation" && route !== "login";
  const showAdmin  = route === "admin" && authChecked;

  return (
    <>
      <Header route={route} setRoute={setRoute} cartCount={cartCount} openCart={() => setCartOpen(true)} authUser={authUser} />

      {route === "home"             && <Home setRoute={setRoute} goToMenuCat={goToMenuCat} />}
      {route === "menu"             && <Menu menu={menu} addToCart={addToCart} openCart={() => setCartOpen(true)} cartCount={cartCount} initCat={initCat} onInitCatDone={() => setInitCat(null)} />}
      {route === "infos"            && <InfosPage />}
      {route === "login"            && <LoginPage onLogin={onLogin} setRoute={setRoute} />}
      {route === "mentions"         && <LegalPage page="mentions" setRoute={setRoute} />}
      {route === "confidentialite"  && <LegalPage page="confidentialite" setRoute={setRoute} />}
      {showAdmin && authUser    && <Admin menu={menu} setMenu={setMenu} orders={orders} setOrders={setOrders} authUser={authUser} onLogout={onLogout} />}
      {showAdmin && !authUser   && <LoginPage onLogin={onLogin} setRoute={setRoute} />}
      {route === "confirmation" && <OrderConfirmation order={lastOrder} setRoute={setRoute} />}

      {showFooter && <Footer setRoute={setRoute} authUser={authUser} />}

      <CartDrawer open={cartOpen} cart={cart} setQty={setQty} removeItem={removeItem}
        onClose={() => setCartOpen(false)} onConfirm={openConfirm} />

      {confirmOpen && (
        <ConfirmCartModal cart={cart} onClose={() => setConfirmOpen(false)} onPay={proceedToPayment} authUser={authUser} />
      )}

      {paymentDetails && (
        <PaymentModal details={paymentDetails} cart={cart}
          onClose={() => { setPaymentDetails(null); setConfirmOpen(true); }}
          onSuccess={completePayment} />
      )}

      {toast && <div className="toast">{toast}</div>}
    </>
  );
}

// ── Infos page ──────────────────────────────────────────────────
function InfosPage() {
  return (
    <main style={{ padding: "60px 0 80px" }}>
      <div className="container">
        <div className="label" style={{ color: "var(--accent)" }}>Infos pratiques</div>
        <h1 style={{ marginBottom: 32 }}>Le restaurant</h1>

        <div className="infos-grid">
          <div style={{ background: "var(--cream)", borderRadius: 18, padding: 32 }}>
            <h3 style={{ marginBottom: 18 }}>Adresse & contact</h3>
            <div className="col" style={{ gap: 14 }}>
              <Detail icon={<Icon.Pin />}   k="Adresse"   v={RESTAURANT.address} sub={RESTAURANT.metro} />
              <Detail icon={<Icon.Phone />} k="Téléphone" v={RESTAURANT.phone}   sub="Réservations & livraison" />
              <Detail icon={<Icon.Mail />}  k="Email"     v={RESTAURANT.email}   sub="Réponse sous 24 h" />
            </div>
          </div>
          <div style={{ background: "var(--cream)", borderRadius: 18, padding: 32 }}>
            <h3 style={{ marginBottom: 18 }}>Horaires d'ouverture</h3>
            <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
              {RESTAURANT.hours.map(h => (
                <div key={h.day} className="between" style={{ padding: "8px 0", borderBottom: "1px dashed var(--line)" }}>
                  <span style={{ fontWeight: 500 }}>{h.day}</span>
                  <span className="muted small num">{h.value}</span>
                </div>
              ))}
            </div>
          </div>
        </div>

        <div style={{ marginTop: 24, background: "#fff", border: "1px solid var(--line)", borderRadius: 18, padding: 32 }}>
          <h3 style={{ marginBottom: 14 }}>À propos de Cap Bercy</h3>
          <p style={{ maxWidth: 720, color: "var(--ink-2)", lineHeight: 1.7 }}>
            Cap Bercy est une trattoria moderne installée au cœur du 12<sup>e</sup> arrondissement.
            Notre équipe vous propose une cuisine italienne authentique : pizzas cuites au feu de bois,
            pâtes fraîches préparées chaque jour et produits importés d'Italie.
            Que vous soyez de passage ou habitué du quartier, nous vous accueillons avec plaisir
            sur place, à emporter ou en livraison à domicile.
          </p>
        </div>
      </div>
    </main>
  );
}

function Detail({ icon, k, v, sub }) {
  return (
    <div className="row" style={{ gap: 14, alignItems: "flex-start" }}>
      <div style={{ width: 36, height: 36, borderRadius: 10, background: "#fff", display: "grid", placeItems: "center", flex: "none", border: "1px solid var(--line)" }}>{icon}</div>
      <div>
        <div className="label" style={{ marginBottom: 2 }}>{k}</div>
        <div style={{ fontWeight: 500 }}>{v}</div>
        <div className="small muted">{sub}</div>
      </div>
    </div>
  );
}

window.InfosPage = InfosPage;

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