/* ============================================================
   ADORN — Account, The Edits, Wishlist
   ============================================================ */

/* ---------------- ACCOUNT ---------------- */
function AccountPage({ onNav }) {
  const [loggedIn, setLoggedIn] = useState(false);
  const [mode, setMode] = useState("login");
  const [tab, setTab] = useState("orders");
  const B = window.BRAND || {};

  if (loggedIn) {
    return (
      <div className="fade-page page-shell">
        <div className="wrap-wide">
          <div className="acct-head">
            <div><h1 className="serif page-h" style={{ margin: 0 }}>Welcome, friend</h1></div>
            <button className="link-arrow" onClick={() => setLoggedIn(false)}>Sign out</button>
          </div>
          <div className="acct-grid">
            <aside className="acct-nav">
              {[["orders", "Orders"], ["wishlist", "Wishlist"], ["addresses", "Addresses"], ["details", "Details"]].map(([k, l]) =>
                <button key={k} className={"acct-link" + (tab === k ? " on" : "")} onClick={() => k === "wishlist" ? onNav("wishlist", {}) : setTab(k)}>{l}<Icon name="chevron" size={15} /></button>
              )}
            </aside>
            <div className="acct-body">
              {tab === "orders" &&
                <div>
                  <h2 className="serif acct-h">Your orders</h2>
                  {[["AD-48201", "Delivered", "Eko Top-Handle Bag + 1", 98500, "BAG · TOP HANDLE"], ["AD-47330", "In transit", "Layered Coin Necklace", 24500, "NECKLACE · LAYERED COIN"], ["AD-46115", "Delivered", "Saddle Leather Belt", 26000, "BELT · SADDLE"]].map(([id, st, items, amt, label]) =>
                    <div className="acct-order" key={id}>
                      <div className="acct-order-media"><Ph label={label} ratio="square" /></div>
                      <div className="acct-order-body">
                        <div className="spread"><span className="mono">#{id}</span><span className={"order-status " + (st === "Delivered" ? "ok" : "warn")}>{st}</span></div>
                        <div className="serif" style={{ fontSize: 19, margin: "4px 0" }}>{items}</div>
                        <Price ngn={amt} alt={false} style={{ color: "var(--ink-soft)", fontSize: 13 }} />
                      </div>
                      <button className="link-arrow" onClick={() => onNav("track", { order: id })}>Track</button>
                    </div>
                  )}
                </div>
              }
              {tab === "addresses" &&
                <div>
                  <h2 className="serif acct-h">Addresses</h2>
                  <div className="acct-addr-grid">
                    {[["Home · " + (B.hqCity || "Lagos"), B.addresses?.hq.full || "Victoria Island\nLagos, Nigeria"], [B.addresses?.second.label || "Pickup Point", B.addresses?.second.full || "By appointment\nVictoria Island, Lagos"]].map(([t, a]) =>
                      <div className="acct-addr" key={t}><strong>{t}</strong><p style={{ whiteSpace: "pre-line", color: "var(--ink-soft)", marginTop: 8 }}>{a}</p><button className="opt-link" style={{ marginTop: 12 }}>Edit</button></div>
                    )}
                  </div>
                </div>
              }
              {tab === "details" &&
                <div>
                  <h2 className="serif acct-h">Your details</h2>
                  <div className="form-grid" style={{ maxWidth: 520 }}>
                    <div className="field"><label>First name</label><input className="input" defaultValue="Adaeze" /></div>
                    <div className="field"><label>Last name</label><input className="input" defaultValue="Okafor" /></div>
                    <div className="field span2"><label>Email</label><input className="input" defaultValue="adaeze@email.com" /></div>
                    <div className="field span2"><label>Phone</label><input className="input" defaultValue="+234 803 555 0116" /></div>
                  </div>
                  <Btn arrow={false} style={{ marginTop: 18 }}>Save changes</Btn>
                </div>
              }
            </div>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="fade-page auth-page">
      <div className="auth-media">
        <Ph label="AUTH · PORTRAIT" ratio="tall" />
        <div className="auth-media-cap"><Logo size={30} /><p className="serif" style={{ fontSize: 28, marginTop: 16, color: "#f6f1e7" }}>The finishing touch.</p></div>
      </div>
      <div className="auth-form-side">
        <div className="auth-box">
          <div className="auth-tabs">
            <button className={mode === "login" ? "on" : ""} onClick={() => setMode("login")}>Sign in</button>
            <button className={mode === "register" ? "on" : ""} onClick={() => setMode("register")}>Create account</button>
          </div>
          <h1 className="serif" style={{ fontSize: 38, margin: "22px 0 26px" }}>{mode === "login" ? "Welcome back" : "Join " + (B.name || "Adorn")}</h1>
          <form onSubmit={(e) => { e.preventDefault(); setLoggedIn(true); }} className="stack" style={{ gap: 16 }}>
            {mode === "register" && <div className="field"><label>Full name</label><input className="input" required placeholder="Your name" /></div>}
            <div className="field"><label>Email</label><input className="input" type="email" required placeholder="you@email.com" /></div>
            <div className="field"><label>Password</label><input className="input" type="password" required placeholder="••••••••" /></div>
            {mode === "login" && <button type="button" className="opt-link" style={{ alignSelf: "flex-end" }}>Forgot password?</button>}
            <Btn block arrow={false} type="submit">{mode === "login" ? "Sign in" : "Create account"}</Btn>
          </form>
          <div className="auth-or"><span>or</span></div>
          <button className="auth-social"><Icon name="globe" size={17} /> Continue with Google</button>
          <button className="auth-guest" onClick={() => onNav("shop", {})}>Continue as guest →</button>
        </div>
      </div>
    </div>
  );
}

/* ---------------- THE EDITS ---------------- */
function CollectionsPage({ onNav }) {
  return (
    <div className="fade-page page-shell">
      <div className="wrap-wide">
        <h1 className="serif page-h">The Edits</h1>
        <div className="collections-grid">
          {RB.EDITS.map((e, i) =>
            <Reveal key={e.id} delay={i % 2 + 1} className="coll-card zoomable">
              <button className="coll-card-btn" onClick={() => onNav("shop", { tag: e.tag, editTitle: e.title })}>
                <Ph label={e.label} ratio="wide" />
                <div className="coll-ov" />
                <div className="coll-cap">
                  <span className="mono">{e.count} pieces</span>
                  <span className="serif coll-title">{e.title}</span>
                  <span className="link-arrow on-img">Shop the edit</span>
                </div>
              </button>
            </Reveal>
          )}
        </div>
      </div>
    </div>
  );
}

/* ---------------- WISHLIST ---------------- */
function WishlistPage({ onNav }) {
  const { wishlist, addToCart, toggleWish } = useContext(RBCtx);
  const items = RB.PRODUCTS.filter((p) => wishlist.includes(p.id));
  return (
    <div className="fade-page page-shell">
      <div className="wrap-wide">
        <h1 className="serif page-h">Your wishlist</h1>
        {items.length === 0 ?
          <div className="center" style={{ padding: "60px 0" }}>
            <Icon name="heart" size={42} stroke={1} style={{ color: "var(--ink-faint)" }} />
            <p className="serif" style={{ fontSize: 28, margin: "16px 0 10px" }}>No saved pieces yet</p>
            <p style={{ color: "var(--ink-soft)", marginBottom: 24 }}>Tap the heart on any piece to save it here.</p>
            <Btn onClick={() => onNav("shop", {})}>Browse the collection</Btn>
          </div> :
          <div className="product-grid" style={{ marginTop: 30 }}>
            {items.map((p, i) =>
              <Reveal key={p.id} delay={i % 4 + 1}>
                <ProductCard p={p} onNav={onNav} onAdd={addToCart} wished={true} onWish={toggleWish} />
              </Reveal>
            )}
          </div>
        }
      </div>
    </div>
  );
}

Object.assign(window, { AccountPage, CollectionsPage, WishlistPage });