// Caffè Italia · espace client (Supabase Auth)
// =============================================
// Inscription, connexion, profil + adresse de livraison.
// La table `profiles` (one-to-one avec auth.users) stocke nom complet,
// téléphone, adresse de livraison. Les policies RLS limitent à l'auth.uid().

const { useState: _acUseState, useEffect: _acUseEffect } = React;

// ─── Champs partagés ───────────────────────────────────────────────────────
const acInput = {
  width:"100%",padding:"12px 14px",fontSize:14,fontFamily:"inherit",
  background:"var(--paper-2)",color:"var(--ink)",
  border:"1px solid var(--hairline-strong)",borderRadius:6,outline:"none",
  boxSizing:"border-box",
};
function AcField({ label, children, hint }){
  return (
    <label style={{display:"block",marginBottom:14}}>
      <span style={{display:"block",fontSize:11.5,letterSpacing:".12em",textTransform:"uppercase",fontWeight:600,color:"var(--muted)",marginBottom:6}}>{label}</span>
      {children}
      {hint && <span style={{display:"block",fontSize:11.5,color:"var(--muted)",marginTop:4,fontStyle:"italic"}}>{hint}</span>}
    </label>
  );
}

// ─── Formulaire signup ─────────────────────────────────────────────────────
function SignupForm({ onSwitch }){
  const [email, setEmail] = _acUseState("");
  const [password, setPw] = _acUseState("");
  const [name, setName] = _acUseState("");
  const [loading, setLoading] = _acUseState(false);
  const [err, setErr] = _acUseState(null);
  const [done, setDone] = _acUseState(false);

  const submit = async (e) => {
    e.preventDefault(); setErr(null); setLoading(true);
    if (!window.sb) { setErr("Supabase indisponible."); setLoading(false); return; }
    const { data, error } = await window.sb.auth.signUp({
      email, password,
      options: { data: { full_name: name, lang: window.__LANG__ || "fr" } },
    });
    setLoading(false);
    if (error) { setErr(error.message); return; }
    // Si la confirmation email est activée, l'utilisateur recevra un mail
    if (data?.user && !data?.session) {
      setDone(true);
    }
    // Si l'auto-confirm est activé, on est connecté directement (la session
    // change et useSession re-render la page)
  };

  if (done) {
    return (
      <div style={{padding:"24px 0"}}>
        <div className="display" style={{fontSize:32,color:"var(--rosso)"}}>
          {window.__LANG__==="it" ? "Quasi pronto" : "Presque prêt"}
        </div>
        <p style={{fontSize:14.5,color:"var(--ink)",marginTop:10,lineHeight:1.6}}>
          {window.__LANG__==="it"
            ? <>Abbiamo inviato un'email di conferma a <b>{email}</b>. Cliccaci sopra per attivare il tuo account.</>
            : <>Nous avons envoyé un email de confirmation à <b>{email}</b>. Cliquez dessus pour activer votre compte.</>}
        </p>
      </div>
    );
  }

  return (
    <form onSubmit={submit}>
      <AcField label={window.__LANG__==="it"?"Nome completo":"Nom complet"}>
        <input type="text" value={name} onChange={(e)=>setName(e.target.value)} required autoComplete="name" style={acInput}/>
      </AcField>
      <AcField label="Email">
        <input type="email" value={email} onChange={(e)=>setEmail(e.target.value)} required autoComplete="email" style={acInput}/>
      </AcField>
      <AcField label={window.__LANG__==="it"?"Password":"Mot de passe"}
               hint={window.__LANG__==="it"?"Minimo 8 caratteri":"Minimum 8 caractères"}>
        <input type="password" value={password} onChange={(e)=>setPw(e.target.value)} required minLength="8" autoComplete="new-password" style={acInput}/>
      </AcField>
      {err && <div style={{padding:"10px 12px",background:"rgba(220,40,50,.12)",border:"1px solid var(--rosso)",borderRadius:6,color:"var(--rosso)",fontSize:13,marginBottom:14}}>{err}</div>}
      <button type="submit" disabled={loading} className="btn btn-primary" style={{width:"100%",height:48,opacity:loading?.6:1}}>
        {loading ? (window.__LANG__==="it"?"In corso…":"En cours…") : (window.__LANG__==="it"?"Crea il mio account":"Créer mon compte")}
      </button>
      <p style={{fontSize:13,color:"var(--muted)",textAlign:"center",marginTop:18}}>
        {window.__LANG__==="it" ? "Hai già un account ? " : "Déjà un compte ? "}
        <a onClick={onSwitch} style={{color:"var(--rosso)",fontWeight:600,cursor:"pointer",textDecoration:"underline"}}>
          {window.__LANG__==="it" ? "Accedi" : "Se connecter"}
        </a>
      </p>
    </form>
  );
}

// ─── Nouveau mot de passe (retour du lien de réinitialisation) ─────────────
// Sans cet écran, le client qui clique sur le lien atterrit connecté mais
// n'a aucun moyen de changer son mot de passe : la promesse de l'email
// n'était jamais tenue.
function NewPasswordForm({ session }){
  const [pw, setPw]   = _acUseState("");
  const [pw2, setPw2] = _acUseState("");
  const [loading, setLoading] = _acUseState(false);
  const [err, setErr] = _acUseState(null);
  const [done, setDone] = _acUseState(false);

  const submit = async (e) => {
    e.preventDefault(); setErr(null);
    if (pw.length < 8) { setErr(window.__LANG__==="it"?"Minimo 8 caratteri.":"Minimum 8 caractères."); return; }
    if (pw !== pw2)    { setErr(window.__LANG__==="it"?"Le due password non corrispondono.":"Les deux mots de passe ne correspondent pas."); return; }
    setLoading(true);
    const { error } = await window.sb.auth.updateUser({ password: pw });
    setLoading(false);
    if (error) { setErr(error.message); return; }
    setDone(true);
  };

  if (done) {
    return (
      <div style={{maxWidth:420}}>
        <div className="display" style={{fontSize:32,color:"var(--rosso)"}}>
          {window.__LANG__==="it" ? "Password aggiornata" : "Mot de passe enregistré"}
        </div>
        <p style={{fontSize:14.5,marginTop:10,lineHeight:1.6}}>
          {window.__LANG__==="it"
            ? "Puoi ora usare la tua nuova password. Sei già connesso."
            : "Vous pouvez désormais utiliser votre nouveau mot de passe. Vous êtes déjà connecté."}
        </p>
        <button onClick={()=>window.exitRecoveryMode()} className="btn btn-primary" style={{marginTop:18,height:48}}>
          {window.__LANG__==="it" ? "Vai al mio account" : "Aller à mon compte"}
        </button>
      </div>
    );
  }

  return (
    <form onSubmit={submit} style={{maxWidth:420}}>
      <div className="eyebrow" style={{color:"var(--rosso)"}}>
        {window.__LANG__==="it" ? "Reimpostazione" : "Réinitialisation"}
      </div>
      <h1 className="display" style={{fontSize:"clamp(32px,4.5vw,56px)",margin:"8px 0 10px",lineHeight:1}}>
        {window.__LANG__==="it" ? "Nuova password" : "Nouveau mot de passe"}
      </h1>
      <p style={{fontSize:14,color:"var(--muted)",marginBottom:20,lineHeight:1.6}}>
        {session && session.user
          ? (window.__LANG__==="it"
              ? <>Per il conto <b style={{color:"var(--ink)"}}>{session.user.email}</b>.</>
              : <>Pour le compte <b style={{color:"var(--ink)"}}>{session.user.email}</b>.</>)
          : null}
      </p>
      <AcField label={window.__LANG__==="it"?"Nuova password":"Nouveau mot de passe"}
               hint={window.__LANG__==="it"?"Minimo 8 caratteri":"Minimum 8 caractères"}>
        <input type="password" value={pw} onChange={(e)=>setPw(e.target.value)} required minLength="8"
               autoComplete="new-password" autoFocus style={acInput}/>
      </AcField>
      <AcField label={window.__LANG__==="it"?"Conferma":"Confirmation"}>
        <input type="password" value={pw2} onChange={(e)=>setPw2(e.target.value)} required minLength="8"
               autoComplete="new-password" style={acInput}/>
      </AcField>
      {err && <div style={{padding:"10px 12px",background:"rgba(220,40,50,.12)",border:"1px solid var(--rosso)",borderRadius:6,color:"var(--rosso)",fontSize:13,marginBottom:14}}>{err}</div>}
      <button type="submit" disabled={loading} className="btn btn-primary" style={{width:"100%",height:48,opacity:loading?.6:1}}>
        {loading ? (window.__LANG__==="it"?"En cours…":"En cours…") : (window.__LANG__==="it"?"Salva":"Enregistrer")}
      </button>
      <p style={{fontSize:12.5,color:"var(--muted)",textAlign:"center",marginTop:16}}>
        <a onClick={()=>window.exitRecoveryMode()} style={{cursor:"pointer",textDecoration:"underline"}}>
          {window.__LANG__==="it" ? "Annulla" : "Annuler"}
        </a>
      </p>
    </form>
  );
}

// ─── Formulaire login ──────────────────────────────────────────────────────
function LoginForm({ onSwitch }){
  const [email, setEmail] = _acUseState("");
  const [password, setPw] = _acUseState("");
  const [loading, setLoading] = _acUseState(false);
  const [err, setErr] = _acUseState(null);
  const [linkLoading, setLinkLoading] = _acUseState(false);
  const [linkSent, setLinkSent] = _acUseState(false);
  const [code, setCode] = _acUseState("");
  const [codeLoading, setCodeLoading] = _acUseState(false);

  const submit = async (e) => {
    e.preventDefault(); setErr(null); setLoading(true);
    if (!window.sb) { setErr("Supabase indisponible."); setLoading(false); return; }
    const { error } = await window.sb.auth.signInWithPassword({ email, password });
    setLoading(false);
    if (error) setErr(error.message);
  };
  // Connexion par lien. `shouldCreateUser: false` : le lien ouvre une session
  // sur un compte existant, il n'en crée pas — l'inscription passe par le
  // formulaire, qui collecte le nom affiché sur les commandes et les avis.
  //
  // La réponse est volontairement la même que l'adresse existe ou non : dire
  // « ce compte n'existe pas » permettrait à n'importe qui de tester des
  // adresses pour savoir qui est client chez vous. Les vraies pannes (quota
  // d'envoi dépassé) restent affichées, sinon on promettrait un email qui
  // n'est jamais parti.
  const sendLoginLink = async () => {
    if (!email) { setErr(window.__LANG__==="it"?"Indica un'email":"Saisissez votre email"); return; }
    setErr(null); setLinkLoading(true);
    const { error } = await window.sb.auth.signInWithOtp({
      email,
      options: {
        shouldCreateUser: false,
        emailRedirectTo: window.location.origin + window.location.pathname,
      },
    });
    setLinkLoading(false);
    if (error && (error.status === 429 || /rate limit|too many/i.test(error.message || ""))) {
      setErr(window.__LANG__==="it"
        ? "Troppe richieste. Riprova tra qualche minuto."
        : "Trop de demandes. Réessayez dans quelques minutes.");
      return;
    }
    setLinkSent(true);
  };

  // Le même email porte un lien ET un code. Le code existe pour le cas
  // courant où l'on relève ses messages sur le téléphone mais où l'on veut
  // ouvrir la session sur l'ordinateur : cliquer le lien connecterait le
  // mauvais appareil.
  const verifyCode = async (e) => {
    e.preventDefault(); setErr(null); setCodeLoading(true);
    const { error } = await window.sb.auth.verifyOtp({
      email, token: code.trim(), type: "email",
    });
    setCodeLoading(false);
    if (error) {
      setErr(window.__LANG__==="it"
        ? "Codice non valido o scaduto."
        : "Code invalide ou expiré.");
    }
    // Succès : la session change, useSession fait basculer l'écran.
  };

  const resetPw = async () => {
    if (!email) { setErr(window.__LANG__==="it"?"Indica un'email":"Saisissez votre email"); return; }
    setErr(null);
    const { error } = await window.sb.auth.resetPasswordForEmail(email, {
      redirectTo: window.location.origin + window.location.pathname,
    });
    if (error) setErr(error.message);
    else setErr(window.__LANG__==="it"?"Email di reset inviata.":"Email de réinitialisation envoyée.");
  };

  return (
    <form onSubmit={submit}>
      <AcField label="Email">
        <input type="email" value={email} onChange={(e)=>setEmail(e.target.value)} required autoComplete="email" style={acInput}/>
      </AcField>
      <AcField label={window.__LANG__==="it"?"Password":"Mot de passe"}>
        <input type="password" value={password} onChange={(e)=>setPw(e.target.value)} required autoComplete="current-password" style={acInput}/>
      </AcField>
      {err && <div style={{padding:"10px 12px",background:"rgba(220,40,50,.12)",border:"1px solid var(--rosso)",borderRadius:6,color:"var(--rosso)",fontSize:13,marginBottom:14}}>{err}</div>}
      <button type="submit" disabled={loading} className="btn btn-primary" style={{width:"100%",height:48,opacity:loading?.6:1}}>
        {loading ? (window.__LANG__==="it"?"In corso…":"En cours…") : (window.__LANG__==="it"?"Accedi":"Se connecter")}
      </button>
      {/* Connexion par lien · alternative au mot de passe */}
      <div style={{display:"flex",alignItems:"center",gap:12,margin:"20px 0 16px"}}>
        <span style={{flex:1,height:1,background:"var(--hairline)"}}/>
        <span style={{fontSize:11,letterSpacing:".14em",textTransform:"uppercase",color:"var(--muted)",fontWeight:600}}>
          {window.__LANG__==="it" ? "oppure" : "ou"}
        </span>
        <span style={{flex:1,height:1,background:"var(--hairline)"}}/>
      </div>

      {linkSent ? (
        <div style={{padding:"14px 16px",border:"1px solid var(--hairline-strong)",borderRadius:6,fontSize:13.5,lineHeight:1.6}}>
          <b>{window.__LANG__==="it" ? "Controlla la tua casella" : "Vérifiez votre boîte mail"}</b>
          <div style={{color:"var(--muted)",marginTop:4}}>
            {window.__LANG__==="it"
              ? <>Se un account esiste per <b style={{color:"var(--ink)"}}>{email}</b>, un link di accesso è appena partito. È valido un'ora.</>
              : <>Si un compte existe pour <b style={{color:"var(--ink)"}}>{email}</b>, un lien de connexion vient de partir. Il est valable une heure.</>}
          </div>
          <div style={{height:1,background:"var(--hairline)",margin:"14px 0"}}/>
          <div style={{fontSize:12.5,color:"var(--muted)",marginBottom:8}}>
            {window.__LANG__==="it"
              ? "Leggi la mail su un altro dispositivo ? Digita il codice a 8 cifre che contiene."
              : "Vous lisez le mail sur un autre appareil ? Saisissez le code à 8 chiffres qu'il contient."}
          </div>
          <div style={{display:"flex",gap:8}}>
            <input type="text" inputMode="numeric" autoComplete="one-time-code" maxLength={8}
              value={code} onChange={(e)=>setCode(e.target.value.replace(/\D/g,""))}
              placeholder="12345678"
              style={{...acInput, flex:1, letterSpacing:".26em", fontFamily:"ui-monospace,Menlo,monospace"}}/>
            <button type="button" onClick={verifyCode} disabled={codeLoading || code.length < 8}
              className="btn btn-primary" style={{flex:"0 0 auto",height:"auto",padding:"0 18px",opacity:(codeLoading||code.length<8)?.5:1}}>
              {codeLoading ? "…" : (window.__LANG__==="it" ? "Accedi" : "Valider")}
            </button>
          </div>
          <a onClick={()=>{setLinkSent(false);setCode("");}} style={{display:"inline-block",marginTop:12,fontSize:12.5,color:"var(--rosso)",cursor:"pointer",textDecoration:"underline"}}>
            {window.__LANG__==="it" ? "Usa un altro indirizzo" : "Utiliser une autre adresse"}
          </a>
        </div>
      ) : (
        <button type="button" onClick={sendLoginLink} disabled={linkLoading} className="btn btn-ghost"
                style={{width:"100%",height:48,opacity:linkLoading?.6:1}}>
          {linkLoading
            ? (window.__LANG__==="it"?"Invio…":"Envoi…")
            : (window.__LANG__==="it"?"Ricevi un link di accesso":"Recevoir un lien de connexion")}
        </button>
      )}

      <div style={{display:"flex",justifyContent:"space-between",marginTop:18,fontSize:13}}>
        <a onClick={resetPw} style={{color:"var(--muted)",cursor:"pointer",textDecoration:"underline"}}>
          {window.__LANG__==="it" ? "Password dimenticata ?" : "Mot de passe oublié ?"}
        </a>
        <a onClick={onSwitch} style={{color:"var(--rosso)",fontWeight:600,cursor:"pointer",textDecoration:"underline"}}>
          {window.__LANG__==="it" ? "Crea un account" : "Créer un compte"}
        </a>
      </div>
    </form>
  );
}

// ─── Carte profil (vue après login) ────────────────────────────────────────
function ProfilePanel({ session, navigate }){
  // Même prédicat que les policies RLS : l'email doit figurer dans
  // admin_emails. `ready` évite d'afficher le bouton une fraction de
  // seconde avant que la question soit tranchée.
  const { isAdmin, ready } = useAdmin();
  const [profile, setProfile] = _acUseState(null);
  const [loading, setLoading] = _acUseState(true);
  const [saving, setSaving]   = _acUseState(false);
  const [msg, setMsg]         = _acUseState(null);

  _acUseEffect(() => {
    let cancelled = false;
    (async () => {
      if (!window.sb || !session?.user) return;
      const { data, error } = await window.sb
        .from("profiles")
        .select("*")
        .eq("id", session.user.id)
        .maybeSingle();
      if (cancelled) return;
      setLoading(false);
      if (error && error.code !== "PGRST116") { setMsg(error.message); return; }
      // Crée un profil vide si pas encore enregistré
      setProfile(data || {
        id: session.user.id,
        full_name: session.user.user_metadata?.full_name || "",
        phone: "", address_line: "", address_city: "", address_zip: "", address_country: "France",
      });
    })();
    return () => { cancelled = true; };
  }, [session?.user?.id]);

  const save = async (e) => {
    e.preventDefault(); setSaving(true); setMsg(null);
    const payload = { ...profile, id: session.user.id, updated_at: new Date().toISOString() };
    const { error } = await window.sb.from("profiles").upsert(payload, { onConflict: "id" });
    setSaving(false);
    setMsg(error ? error.message : (window.__LANG__==="it"?"Salvato ✓":"Enregistré ✓"));
    setTimeout(()=>setMsg(null), 3000);
  };
  const logout = async () => {
    await window.sb.auth.signOut();
    navigate({page:"home"});
  };

  if (loading) return <div style={{padding:"24px 0",color:"var(--muted)"}}>{window.__LANG__==="it"?"Caricamento…":"Chargement…"}</div>;
  if (!profile) return null;

  const set = (k, v) => setProfile(prev => ({ ...prev, [k]: v }));

  const isIt = window.__LANG__ === "it";

  return (
    <div>
      <div style={{padding:"16px 18px",background:"var(--paper-2)",borderRadius:8,marginBottom:28,display:"flex",justifyContent:"space-between",alignItems:"center",gap:14,flexWrap:"wrap",border:"1px solid var(--hairline)"}}>
        <div style={{minWidth:0}}>
          <div className="eyebrow" style={{color:"var(--rosso)"}}>{isIt?"Connesso":"Connecté"}</div>
          <div style={{fontWeight:700,fontSize:15,marginTop:4,overflow:"hidden",textOverflow:"ellipsis"}}>{session.user.email}</div>
        </div>
        <div style={{display:"flex",gap:8,alignItems:"center",flexWrap:"wrap"}}>
          {ready && isAdmin && (
            <button onClick={()=>navigate({page:"admin"})} className="btn btn-primary btn-sm">
              {isIt?"Spazio admin":"Espace admin"} <IconArrow size={15}/>
            </button>
          )}
          <button onClick={logout} className="btn btn-ghost btn-sm">
            {isIt?"Disconnetti":"Déconnexion"}
          </button>
        </div>
      </div>

      <div className="ac-grid" style={{display:"grid",gridTemplateColumns:"minmax(0,1fr) minmax(0,1fr)",gap:32,alignItems:"start"}}>
        <form onSubmit={save}>
          <AcSectionTitle>{isIt?"Le tue informazioni":"Vos coordonnées"}</AcSectionTitle>
          <AcField label={isIt?"Nome completo":"Nom complet"}>
            <input type="text" value={profile.full_name||""} onChange={(e)=>set("full_name",e.target.value)} style={acInput}/>
          </AcField>
          <AcField label={isIt?"Telefono":"Téléphone"}>
            <input type="tel" value={profile.phone||""} onChange={(e)=>set("phone",e.target.value)} style={acInput}/>
          </AcField>

          <div style={{height:8}}/>
          <AcSectionTitle>{isIt?"Indirizzo di consegna":"Adresse de livraison"}</AcSectionTitle>
          <AcField label={isIt?"Indirizzo":"Adresse"}>
            <input type="text" value={profile.address_line||""} onChange={(e)=>set("address_line",e.target.value)} autoComplete="street-address" style={acInput}/>
          </AcField>
          <div style={{display:"grid",gridTemplateColumns:"140px 1fr",gap:14}} className="ac-zip-city">
            <AcField label={isIt?"CAP":"Code postal"}>
              <input type="text" value={profile.address_zip||""} onChange={(e)=>set("address_zip",e.target.value)} autoComplete="postal-code" style={acInput}/>
            </AcField>
            <AcField label={isIt?"Città":"Ville"}>
              <input type="text" value={profile.address_city||""} onChange={(e)=>set("address_city",e.target.value)} autoComplete="address-level2" style={acInput}/>
            </AcField>
          </div>
          <AcField label={isIt?"Paese":"Pays"}>
            <input type="text" value={profile.address_country||""} onChange={(e)=>set("address_country",e.target.value)} autoComplete="country-name" style={acInput}/>
          </AcField>

          {msg && <div style={{padding:"10px 12px",background:"var(--paper-2)",borderRadius:6,fontSize:13,marginBottom:14,border:"1px solid var(--hairline)"}}>{msg}</div>}
          <button type="submit" disabled={saving} className="btn btn-primary" style={{height:48,padding:"0 28px",opacity:saving?.6:1}}>
            {saving ? (isIt?"Salvataggio…":"Enregistrement…") : (isIt?"Salva":"Enregistrer")}
          </button>
        </form>

        <div>
          <AcSectionTitle>{isIt?"I tuoi ordini":"Vos commandes"}</AcSectionTitle>
          <OrdersList userId={session.user.id} navigate={navigate}/>
        </div>
      </div>

      <style>{`
        @media (max-width:520px){.ac-zip-city{grid-template-columns:1fr !important}}
        @media (max-width:880px){.ac-grid{grid-template-columns:1fr !important; gap:36px !important}}
      `}</style>
    </div>
  );
}

// ─── Sub-section title (clean, not Anton) ──────────────────────────────────
function AcSectionTitle({ children }){
  return (
    <h2 style={{
      fontSize:11.5,letterSpacing:".18em",textTransform:"uppercase",fontWeight:700,
      color:"var(--ink)",margin:"0 0 14px",paddingBottom:10,
      borderBottom:"1px solid var(--hairline)",
    }}>{children}</h2>
  );
}

// ─── Orders list ───────────────────────────────────────────────────────────
function OrdersList({ userId, navigate }){
  const [orders, setOrders] = _acUseState(null);
  const [err, setErr]       = _acUseState(null);
  const [openId, setOpenId] = _acUseState(null);
  const [itemsByOrder, setItems] = _acUseState({});
  const isIt = window.__LANG__ === "it";

  _acUseEffect(() => {
    let cancelled = false;
    (async () => {
      const { data, error } = await window.sb
        .from("orders").select("*")
        .eq("user_id", userId)
        .order("created_at", { ascending: false });
      if (cancelled) return;
      if (error) { setErr(error.message); return; }
      setOrders(data || []);
    })();
    return () => { cancelled = true; };
  }, [userId]);

  const toggle = async (orderId) => {
    if (openId === orderId) { setOpenId(null); return; }
    setOpenId(orderId);
    if (itemsByOrder[orderId]) return;
    const { data } = await window.sb.from("order_items").select("*").eq("order_id", orderId);
    setItems(prev => ({ ...prev, [orderId]: data || [] }));
  };

  if (err) {
    return <div style={{padding:"14px 16px",background:"var(--paper-2)",borderRadius:8,fontSize:13,color:"var(--muted)",border:"1px solid var(--hairline)"}}>{err}</div>;
  }
  if (orders === null) {
    return <div style={{padding:"14px 16px",fontSize:13,color:"var(--muted)"}}>{isIt?"Caricamento…":"Chargement…"}</div>;
  }
  if (orders.length === 0) {
    return (
      <div style={{padding:"28px 18px",textAlign:"center",border:"1px dashed var(--hairline-strong)",borderRadius:8,background:"var(--paper-2)"}}>
        <div style={{fontSize:14,fontWeight:600,color:"var(--ink)"}}>{isIt?"Nessun ordine":"Aucune commande"}</div>
        <p style={{fontSize:13,color:"var(--muted)",marginTop:8,lineHeight:1.5}}>
          {isIt
            ? "I tuoi ordini appariranno qui dopo il primo acquisto."
            : "Vos commandes apparaîtront ici après votre premier achat."}
        </p>
        <button onClick={()=>navigate({page:"home"})} className="btn btn-ghost btn-sm" style={{marginTop:14}}>
          {isIt?"Vai alla bottega":"Découvrir la boutique"}
        </button>
      </div>
    );
  }

  const statusLabel = (s) => {
    const m = isIt
      ? { pending:"In attesa", paid:"Pagato", shipped:"Spedito", delivered:"Consegnato", cancelled:"Annullato" }
      : { pending:"En attente", paid:"Payée",  shipped:"Expédiée", delivered:"Livrée",    cancelled:"Annulée" };
    return m[s] || s;
  };
  const statusColor = (s) => ({
    pending:"var(--muted)", paid:"#caa451", shipped:"#1f8a5b",
    delivered:"#1f8a5b", cancelled:"var(--rosso)",
  }[s] || "var(--muted)");

  return (
    <div style={{display:"flex",flexDirection:"column",gap:10}}>
      {orders.map(o => {
        const isOpen = openId === o.id;
        const items = itemsByOrder[o.id];
        return (
          <div key={o.id} style={{border:"1px solid var(--hairline)",borderRadius:8,background:"var(--paper-2)",overflow:"hidden"}}>
            <button onClick={()=>toggle(o.id)} style={{
              width:"100%",display:"flex",alignItems:"center",justifyContent:"space-between",gap:12,
              padding:"14px 16px",textAlign:"left",cursor:"pointer",
            }}>
              <div style={{minWidth:0}}>
                <div style={{display:"flex",alignItems:"center",gap:10,flexWrap:"wrap"}}>
                  <span style={{fontFamily:"ui-monospace,Menlo,monospace",fontSize:12,color:"var(--muted)"}}>
                    #{o.id.slice(0,8)}
                  </span>
                  <span style={{fontSize:11,letterSpacing:".12em",textTransform:"uppercase",fontWeight:700,color:statusColor(o.status)}}>
                    {statusLabel(o.status)}
                  </span>
                </div>
                <div style={{fontSize:12.5,color:"var(--muted)",marginTop:4}}>
                  {new Date(o.created_at).toLocaleDateString(isIt?"it-IT":"fr-FR",{day:"2-digit",month:"short",year:"numeric"})}
                </div>
              </div>
              <div style={{display:"flex",alignItems:"center",gap:10,flex:"0 0 auto"}}>
                <span style={{fontWeight:700,fontSize:14,fontVariantNumeric:"tabular-nums"}}>
                  {Number(o.total).toFixed(2).replace(".",",")} €
                </span>
                <span style={{fontSize:11,color:"var(--muted)",transform:isOpen?"rotate(180deg)":"none",transition:"transform .15s ease"}}>▾</span>
              </div>
            </button>
            {isOpen && (
              <div style={{padding:"4px 16px 16px",borderTop:"1px solid var(--hairline)"}}>
                {!items ? (
                  <div style={{padding:"12px 0",fontSize:13,color:"var(--muted)"}}>{isIt?"Caricamento…":"Chargement…"}</div>
                ) : items.length === 0 ? (
                  <div style={{padding:"12px 0",fontSize:13,color:"var(--muted)"}}>{isIt?"Nessun articolo.":"Aucun article."}</div>
                ) : (
                  <ul style={{listStyle:"none",padding:0,margin:"10px 0 0"}}>
                    {items.map(it => (
                      <li key={it.id} style={{display:"flex",justifyContent:"space-between",gap:12,padding:"6px 0",fontSize:13.5,borderTop:"1px dashed var(--hairline)"}}>
                        <span style={{minWidth:0,flex:"1 1 auto"}}>
                          <span style={{color:"var(--muted)",marginRight:6}}>{it.qty}×</span>
                          {it.product_name}
                        </span>
                        <span style={{fontVariantNumeric:"tabular-nums",color:"var(--muted)",flex:"0 0 auto"}}>
                          {(Number(it.unit_price)*it.qty).toFixed(2).replace(".",",")} €
                        </span>
                      </li>
                    ))}
                  </ul>
                )}
                <div style={{display:"flex",justifyContent:"space-between",fontSize:12.5,color:"var(--muted)",marginTop:12,paddingTop:10,borderTop:"1px solid var(--hairline)"}}>
                  <span>{isIt?"Sub-totale":"Sous-total"}</span>
                  <span style={{fontVariantNumeric:"tabular-nums"}}>{Number(o.subtotal).toFixed(2).replace(".",",")} €</span>
                </div>
                <div style={{display:"flex",justifyContent:"space-between",fontSize:12.5,color:"var(--muted)",marginTop:4}}>
                  <span>{isIt?"Spedizione":"Livraison"}</span>
                  <span style={{fontVariantNumeric:"tabular-nums"}}>{Number(o.shipping).toFixed(2).replace(".",",")} €</span>
                </div>
              </div>
            )}
          </div>
        );
      })}
    </div>
  );
}

// ─── Screen principal ──────────────────────────────────────────────────────
function AccountScreen({ navigate }){
  const session = useSession();
  const recovery = useRecoveryMode();
  const [mode, setMode] = _acUseState("login"); // "login" | "signup"

  // Pas de Supabase configuré ? message clair
  if (!window.sb) {
    return (
      <main className="wrap" style={{padding:"56px 32px 96px",maxWidth:600}}>
        <h1 className="display" style={{fontSize:"clamp(40px,5vw,72px)",margin:"6px 0 12px",lineHeight:1}}>
          {window.__LANG__==="it"?"Account non disponibile":"Espace client indisponible"}
        </h1>
        <p style={{color:"var(--muted)",fontSize:14.5,lineHeight:1.6}}>
          {window.__LANG__==="it"
            ? <>Il backend Supabase non è configurato. Vedi <code>db/schema.sql</code> per l'inizializzazione.</>
            : <>Le backend Supabase n'est pas configuré. Voir <code>db/schema.sql</code> pour l'initialisation.</>}
        </p>
      </main>
    );
  }

  // Session pas encore chargée
  if (session === undefined) {
    return (
      <main className="wrap" style={{padding:"56px 32px 96px",minHeight:"40vh",color:"var(--muted)"}}>
        {window.__LANG__==="it"?"Caricamento…":"Chargement…"}
      </main>
    );
  }

  // Retour d'un lien de réinitialisation : cet écran prime sur le profil,
  // sinon le client se retrouve connecté sans jamais pouvoir changer son
  // mot de passe.
  if (recovery) {
    return (
      <main className="wrap" style={{padding:"56px 32px 96px",maxWidth:600}}>
        <NewPasswordForm session={session}/>
      </main>
    );
  }

  const isAuthed = !!session;
  return (
    <main className="wrap ac-wrap" style={{padding:"22px 32px 80px",maxWidth: isAuthed ? 1080 : 600,width:"100%",boxSizing:"border-box"}}>
      <div style={{fontSize:12,color:"var(--muted)",display:"flex",gap:8,alignItems:"center",marginBottom:14}}>
        <a onClick={()=>navigate({page:"home"})} style={{cursor:"pointer"}}>{t("cat.crumb_home")}</a>
        <span>/</span>
        <span style={{color:"var(--ink)",fontWeight:600}}>
          {window.__LANG__==="it"?"Account":"Compte"}
        </span>
      </div>

      <div className="eyebrow" style={{color:"var(--rosso)"}}>
        {window.__LANG__==="it"?"Spazio cliente":"Espace client"}
      </div>
      <h1 className="display" style={{fontSize:"clamp(36px,5vw,72px)",margin:"14px 0 28px",lineHeight:1.05}}>
        {session
          ? (window.__LANG__==="it"?"Il tuo account":"Votre compte")
          : (mode==="login"
              ? (window.__LANG__==="it"?"Accedi":"Connexion")
              : (window.__LANG__==="it"?"Crea il tuo account":"Créer votre compte"))}
      </h1>

      {session ? (
        <ProfilePanel session={session} navigate={navigate}/>
      ) : (
        <>
          {mode === "login"
            ? <LoginForm  onSwitch={()=>setMode("signup")}/>
            : <SignupForm onSwitch={()=>setMode("login")}/>}
        </>
      )}

      <style>{`
        @media (max-width:720px){
          .ac-wrap{padding-left:18px !important; padding-right:18px !important}
        }
      `}</style>
    </main>
  );
}

Object.assign(window, { AccountScreen, useSession });