/* Caballo Natural – Kundenkonto
   Login / Registrierung + Konto-Dashboard ("Meine Käufe") */
const { useState: useStateAc, useEffect: useEffectAc } = React;
const SBac = () => window.__SB;

const fmtDateAc = (s) => {
  if (!s) return "";
  const d = new Date(s);
  return d.toLocaleDateString("de-DE", { day: "2-digit", month: "2-digit", year: "numeric" });
};
const STATUS_LABEL = { neu: "In Bearbeitung", bezahlt: "Bezahlt", versandt: "Versandt", abgeschlossen: "Abgeschlossen", storniert: "Storniert" };

// ============ AUTH-FORM (Login / Registrieren) ============
const AccountAuth = () => {
  const [mode, setMode] = useStateAc("login"); // login | register
  const [name, setName] = useStateAc("");
  const [email, setEmail] = useStateAc("");
  const [pw, setPw] = useStateAc("");
  const [busy, setBusy] = useStateAc(false);
  const [err, setErr] = useStateAc("");
  const [info, setInfo] = useStateAc("");

  const submit = async (e) => {
    e.preventDefault();
    setErr(""); setInfo(""); setBusy(true);
    try {
      if (mode === "register") {
        const { data, error } = await SBac().auth.signUp({
          email: email.trim(), password: pw,
          options: { data: { full_name: name.trim() } },
        });
        if (error) throw error;
        if (!data.session) {
          setInfo("Fast geschafft! Wir haben dir eine Bestätigungs-Mail geschickt. Bitte klicke den Link darin, dann kannst du dich anmelden.");
          setMode("login");
        }
      } else {
        const { error } = await SBac().auth.signInWithPassword({ email: email.trim(), password: pw });
        if (error) throw error;
      }
    } catch (e2) {
      const m = e2.message || "Etwas ist schiefgelaufen.";
      setErr(m === "Invalid login credentials" ? "E-Mail oder Passwort falsch." : m);
    } finally { setBusy(false); }
  };

  return (
    <div className="acc-auth">
      <div className="acc-auth-card">
        <div className="acc-tabs">
          <button className={mode === "login" ? "active" : ""} onClick={() => { setMode("login"); setErr(""); setInfo(""); }}>Anmelden</button>
          <button className={mode === "register" ? "active" : ""} onClick={() => { setMode("register"); setErr(""); setInfo(""); }}>Registrieren</button>
        </div>
        <form onSubmit={submit}>
          {mode === "register" && (<>
            <label>Name</label>
            <input value={name} onChange={e => setName(e.target.value)} placeholder="Dein Name" required />
          </>)}
          <label>E-Mail</label>
          <input type="email" value={email} onChange={e => setEmail(e.target.value)} placeholder="deine@e-mail.de" required />
          <label>Passwort</label>
          <input type="password" value={pw} onChange={e => setPw(e.target.value)} placeholder="••••••••" minLength={6} required />
          {err && <div className="acc-err">{err}</div>}
          {info && <div className="acc-info">{info}</div>}
          <button className="acc-btn" type="submit" disabled={busy}>
            {busy ? "Bitte warten …" : (mode === "login" ? "Anmelden" : "Konto erstellen")}
          </button>
        </form>
        <p className="acc-switch">
          {mode === "login"
            ? <>Noch kein Konto? <button onClick={() => { setMode("register"); setErr(""); setInfo(""); }}>Jetzt registrieren</button></>
            : <>Schon ein Konto? <button onClick={() => { setMode("login"); setErr(""); setInfo(""); }}>Anmelden</button></>}
        </p>
      </div>
    </div>
  );
};

// ============ KONTO-DASHBOARD ============
const AccountDashboard = ({ session, onNav }) => {
  const [profile, setProfile] = useStateAc(null);
  const [orders, setOrders] = useStateAc([]);
  const [loading, setLoading] = useStateAc(true);
  const [tab, setTab] = useStateAc("kaeufe");
  const [name, setName] = useStateAc("");
  const [phone, setPhone] = useStateAc("");
  const [savedMsg, setSavedMsg] = useStateAc("");
  const user = session.user;

  useEffectAc(() => {
    (async () => {
      setLoading(true);
      const [{ data: prof }, { data: ords }] = await Promise.all([
        SBac().from("profiles").select("*").eq("id", user.id).maybeSingle(),
        SBac().from("orders").select("*, order_items(*)").order("created_at", { ascending: false }),
      ]);
      setProfile(prof || null);
      setName((prof && prof.full_name) || user.user_metadata?.full_name || "");
      setPhone((prof && prof.phone) || "");
      setOrders(ords || []);
      setLoading(false);
    })();
  }, []);

  const saveProfile = async (e) => {
    e.preventDefault();
    await SBac().from("profiles").upsert({ id: user.id, full_name: name.trim(), phone: phone.trim() });
    setSavedMsg("Gespeichert ✓");
    setTimeout(() => setSavedMsg(""), 1500);
  };

  const logout = async () => { await SBac().auth.signOut(); };

  return (
    <div className="acc-dash">
      <header className="acc-head">
        <div>
          <div className="acc-hello">Hallo{name ? `, ${name.split(" ")[0]}` : ""} 👋</div>
          <div className="acc-mail">{user.email}</div>
        </div>
        <div className="acc-head-actions">
          {profile && profile.is_admin && (
            <button className="acc-link-btn" onClick={() => onNav("admin")}>⚙ Admin-Dashboard</button>
          )}
          <button className="acc-link-btn" onClick={logout}>Abmelden</button>
        </div>
      </header>

      <nav className="acc-nav">
        <button className={tab === "kaeufe" ? "active" : ""} onClick={() => setTab("kaeufe")}>Meine Käufe</button>
        <button className={tab === "profil" ? "active" : ""} onClick={() => setTab("profil")}>Profil</button>
      </nav>

      {tab === "kaeufe" && (
        <div>
          {loading ? <div className="acc-empty">Lade deine Bestellungen …</div> : (
            orders.length === 0 ? (
              <div className="acc-empty">
                <p>Du hast noch keine Bestellungen.</p>
                <button className="acc-btn" style={{ maxWidth: 260, margin: "16px auto 0" }} onClick={() => onNav("products")}>Zu den Produkten</button>
              </div>
            ) : (
              <div className="acc-orders">
                {orders.map(o => (
                  <div key={o.id} className="acc-order">
                    <div className="acc-order-top">
                      <span className="acc-order-no">{o.order_number}</span>
                      <span className="acc-order-date">{fmtDateAc(o.created_at)}</span>
                      <span className={`acc-status acc-status-${o.status}`}>{STATUS_LABEL[o.status] || o.status}</span>
                    </div>
                    <ul className="acc-order-items">
                      {(o.order_items || []).map(i => (
                        <li key={i.id}>{i.qty}× {i.product_name}{i.unit_price_eur != null && <span className="muted"> · {Number(i.unit_price_eur).toFixed(2)} €</span>}</li>
                      ))}
                    </ul>
                    {o.total_eur != null && <div className="acc-order-total">Summe: <strong>{Number(o.total_eur).toFixed(2)} €</strong></div>}
                  </div>
                ))}
              </div>
            )
          )}
        </div>
      )}

      {tab === "profil" && (
        <form className="acc-profile" onSubmit={saveProfile}>
          <label>Name</label>
          <input value={name} onChange={e => setName(e.target.value)} placeholder="Dein Name" />
          <label>Telefon (optional)</label>
          <input value={phone} onChange={e => setPhone(e.target.value)} placeholder="+49 …" />
          <label>E-Mail</label>
          <input value={user.email} disabled />
          <button className="acc-btn" type="submit" style={{ marginTop: 14 }}>Speichern</button>
          {savedMsg && <span className="acc-saved">{savedMsg}</span>}
        </form>
      )}
    </div>
  );
};

// ============ SHELL ============
const AccountView = ({ onNav }) => {
  const [session, setSession] = useStateAc(null);
  const [ready, setReady] = useStateAc(false);

  useEffectAc(() => {
    if (!window.__SB) { setReady(true); return; }
    SBac().auth.getSession().then(({ data }) => { setSession(data.session); setReady(true); });
    const { data: sub } = SBac().auth.onAuthStateChange((_e, s) => setSession(s));
    return () => sub && sub.subscription && sub.subscription.unsubscribe();
  }, []);

  if (!window.__SB) return <div className="acc-empty" style={{ padding: 80 }}>Konto-System lädt nicht. Bitte Seite neu laden.</div>;

  return (
    <div className="account-page" data-screen-label="Mein Konto">
      <section className="acc-hero">
        <div className="container">
          <span className="eyebrow">Mein Konto</span>
          <h1>{session ? "Dein Bereich" : "Anmelden oder registrieren"}</h1>
          <p className="lead">{session ? "Deine Bestellungen und Profildaten an einem Ort." : "Melde dich an, um deine Käufe und Beratungen zu sehen."}</p>
        </div>
      </section>
      <section className="page-body">
        <div className="container" style={{ maxWidth: 760 }}>
          {!ready ? <div className="acc-empty">Laden …</div> :
            session ? <AccountDashboard session={session} onNav={onNav} /> : <AccountAuth />}
        </div>
      </section>
    </div>
  );
};

window.AccountView = AccountView;