// Account: login / signup / dashboard (orders / subscription / profile)
//
// `mode` toggles between the auth screen and the logged-in dashboard.
// Real auth is wired later through the Shopify Customer Account API; the
// "Anmelden" / "Konto erstellen" buttons currently fake a login so the
// dashboard is reachable for review.

// Auth screen (login + signup).
function Auth({ mode, setMode, onLogin }) {
  const isLogin = mode === "login";
  const submit = (e) => { e.preventDefault(); onLogin(); };
  return (
    <section className="auth">
      <div className="auth__inner">
        <span className="eyebrow">{isLogin ? "Willkommen zurück" : "Willkommen im Garten"}</span>
        <h1 className="page-h1 page-h1--tight">
          {isLogin ? "Bei deinem Garten anmelden." : "Konto erstellen."}
        </h1>
        <p className="lead" style={{ margin: 0 }}>
          {isLogin
            ? "Bestellungen verfolgen, Garten-Abo verwalten, Lieblinge speichern."
            : "Schneller bestellen, Lieferungen verfolgen, das Garten-Abo verwalten."}
        </p>

        <div className="auth__card">
          <form className="auth__form" onSubmit={submit}>
            {!isLogin && (
              <div className="auth__row">
                <input className="field" placeholder="Vorname" required />
                <input className="field" placeholder="Nachname" required />
              </div>
            )}
            <input className="field" type="email" placeholder="E-Mail" required />
            <input className="field" type="password" placeholder={isLogin ? "Passwort" : "Passwort wählen"} required />
            {isLogin && <a className="auth__forgot">Passwort vergessen?</a>}
            <div style={{ marginTop: 4 }}>
              <Button variant="primary" size="lg" block type="submit">
                {isLogin ? "Anmelden" : "Konto erstellen"}
              </Button>
            </div>
          </form>

          <div className="auth__divider">oder</div>

          <Button variant="secondary" size="lg" block onClick={onLogin}>
            <Icon name="user" size={16} /> Demo-Konto öffnen
          </Button>

          <div className="auth__foot">
            {isLogin ? (
              <p>Noch kein Konto? <a onClick={() => setMode("signup")}>Jetzt registrieren</a></p>
            ) : (
              <p>Schon dabei? <a onClick={() => setMode("login")}>Anmelden</a></p>
            )}
            <p className="small" style={{ color: "var(--fg-3)", fontSize: 12.5, lineHeight: 1.5 }}>
              Mit dem Klick auf {isLogin ? "Anmelden" : "Konto erstellen"} akzeptierst du unsere <a>AGB</a> und <a>Datenschutzerklärung</a>.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

function Account({ onNav, onOpen }) {
  // Default mode = "login" (most visitors aren't authenticated). Once Shopify
  // Customer Account API is wired, this seed will come from the session.
  const [mode, setMode] = useState("login");
  const [tab, setTab] = useState("orders");

  if (mode === "login" || mode === "signup") {
    return <Auth mode={mode} setMode={setMode} onLogin={() => setMode("dashboard")} />;
  }

  const orders = [
    { no: "AG-48217", date: "28. Mai 2026", status: "way", statusLabel: "Unterwegs", total: 58, p: PRODUCTS[7] },
    { no: "AG-47980", date: "2. Mai 2026", status: "del", statusLabel: "Geliefert", total: 36, p: PRODUCTS[0] },
    { no: "AG-47511", date: "14. Apr. 2026", status: "del", statusLabel: "Geliefert", total: 45, p: PRODUCTS[3] },
  ];

  const NavBtn = ({ id, icon, label }) => (
    <button className={tab === id ? "on" : ""} onClick={() => setTab(id)}><Icon name={icon} size={18} /> {label}</button>
  );

  return (
    <section className="account">
      <div className="wrap">
        <span className="eyebrow">Mein Konto</span>
        <h1 className="page-h1">Hallo, Inga 👋</h1>
        <div className="account__grid">
          <div className="account__nav">
            <NavBtn id="orders" icon="package" label="Bestellungen" />
            <NavBtn id="sub" icon="repeat" label="Abonnement" />
            <NavBtn id="profile" icon="user" label="Profil & Adressen" />
            <div className="sep"></div>
            <button onClick={() => { setMode("login"); onNav("home"); }}><Icon name="log-out" size={18} /> Abmelden</button>
          </div>

          <div>
            {tab === "orders" && (
              <div>
                <h2 className="section-title">Deine Bestellungen</h2>
                {orders.map((o) => (
                  <div className="acard" key={o.no}>
                    <div className="order">
                      <div className="order__media" style={!o.p.image ? { background: o.p.media } : undefined}>
                        {o.p.image ? <img className="product-photo" src={o.p.image} alt={o.p.name} loading="lazy" /> : <div className="b" style={{ background: o.p.bottle }}></div>}
                      </div>
                      <div className="order__info">
                        <h4>{o.no}</h4>
                        <div className="meta">{o.date} · {money(o.total)}</div>
                      </div>
                      <span className={`ostatus ostatus--${o.status}`}>{o.statusLabel}</span>
                    </div>
                    <div style={{ display: "flex", gap: 10, marginTop: 16, paddingTop: 16, borderTop: "1px solid var(--border)" }}>
                      <Button variant="secondary" size="sm" onClick={() => onOpen(o.p)}>Erneut bestellen</Button>
                      <Button variant="ghost" size="sm">Rechnung</Button>
                      {o.status === "way" && <Button variant="ghost" size="sm">Sendung verfolgen →</Button>}
                    </div>
                  </div>
                ))}
              </div>
            )}

            {tab === "sub" && (
              <div>
                <h2 className="section-title">Dein Garten-Abo</h2>
                <div className="sub-hero">
                  <div>
                    <h3>Aktiv · alle 4 Wochen</h3>
                    <p>Nächste Lieferung: <b style={{ color: "#fff" }}>12. Juni 2026</b> · 6 Flaschen gemischt · 10 % Rabatt</p>
                  </div>
                  <Icon name="repeat" size={26} color="var(--clay-300)" />
                </div>
                <div className="sub-controls">
                  <Button variant="secondary" size="md">Lieferung überspringen</Button>
                  <Button variant="secondary" size="md">Rhythmus ändern</Button>
                  <Button variant="ghost" size="md">Pausieren</Button>
                </div>
                <div className="acard" style={{ marginTop: 22 }}>
                  <h4 style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 17, margin: "0 0 14px" }}>In dieser Box</h4>
                  <div style={{ display: "flex", flexDirection: "column", gap: 0 }}>
                    {[PRODUCTS[0], PRODUCTS[2], PRODUCTS[5]].map((p) => (
                      <div className="order" key={p.id} style={{ padding: "12px 0", borderBottom: "1px solid var(--border)" }}>
                        <div className="order__media" style={!p.image ? { background: p.media, width: 46, height: 56 } : { width: 46, height: 56 }}>
                          {p.image ? <img className="product-photo" src={p.image} alt={p.name} loading="lazy" /> : <div className="b" style={{ background: p.bottle }}></div>}
                        </div>
                        <div className="order__info"><h4 style={{ fontSize: 15 }}>{p.name}</h4><div className="meta">{p.category} · 2 ×</div></div>
                      </div>
                    ))}
                  </div>
                  <div style={{ marginTop: 14 }}><Button variant="ghost" size="sm" onClick={() => onNav("collection")}>Box anpassen →</Button></div>
                </div>
              </div>
            )}

            {tab === "profile" && (
              <div>
                <h2 className="section-title">Profil & Adressen</h2>
                <div className="acard">
                  <h4 style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 17, margin: "0 0 16px" }}>Persönliche Angaben</h4>
                  <div className="fgrid">
                    <input className="field" defaultValue="Inga" />
                    <input className="field" defaultValue="Niemeyer" />
                    <input className="field full" defaultValue="inga@aperogarden.ch" />
                  </div>
                  <div style={{ marginTop: 16 }}><Button variant="secondary" size="md">Speichern</Button></div>
                </div>
                <div className="acard">
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 14 }}>
                    <h4 style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 17, margin: 0 }}>Lieferadresse</h4>
                    <span className="ostatus ostatus--del">Standard</span>
                  </div>
                  <p style={{ margin: 0, color: "var(--fg-2)", lineHeight: 1.6, fontSize: 15 }}>Inga Niemeyer<br />Gartenstrasse 12<br />8001 Zürich, Schweiz</p>
                  <div style={{ marginTop: 16 }}><Button variant="ghost" size="sm">Adresse bearbeiten</Button></div>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { Account });