/* ============================================================
   DEE & ELL — Account, Wishlist, Revamp (leather restoration)
   ============================================================ */

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

  if (loggedIn) {
    return (
      <div className="fade-page page-shell">
        <div className="wrap-wide">
          <div className="acct-head">
            <div><Eyebrow>Welcome back</Eyebrow><h1 className="serif page-h" style={{ margin: "8px 0 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>
                  {[["DE-48201", "Delivered", "Cap-Toe Oxford + 1", "78,000"], ["DE-47330", "In transit", "Classic Buckle Belt", "22,000"], ["DE-46115", "Delivered", "Bifold Wallet", "16,000"]].map(([id, st, items, amt]) =>
                <div className="acct-order" key={id}>
                      <div className="acct-order-media"><Ph 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>
                        <span style={{ color: "var(--ink-soft)", fontSize: 13 }}>₦{amt}</span>
                      </div>
                      <button className="link-arrow" onClick={() => onNav("shop", {})}>Buy again</button>
                    </div>
                )}
                </div>
              }
              {tab === "addresses" &&
              <div>
                  <h2 className="serif acct-h">Addresses</h2>
                  <div className="acct-addr-grid">
                    <div className="acct-addr"><strong>Home · {(window.BRAND?.hqCity) || "Abuja"}</strong><p style={{ whiteSpace: "pre-line", color: "var(--ink-soft)", marginTop: 8 }}>{(window.BRAND?.addresses.hq.full) || "Abuja\nNigeria"}</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="" placeholder="First name" /></div>
                    <div className="field"><label>Last name</label><input className="input" defaultValue="" placeholder="Last name" /></div>
                    <div className="field span2"><label>Email</label><input className="input" placeholder="you@email.com" /></div>
                    <div className="field span2"><label>Phone</label><input className="input" placeholder="+234 …" /></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="WORKSHOP · HANDSTITCHING" ratio="tall" />
        <div className="auth-media-cap"><Logo size={30} /><p className="serif" style={{ fontSize: 28, marginTop: 16, color: "#f6f1e7" }}>Every stitch by hand.</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 6px" }}>{mode === "login" ? "Welcome back" : "Join " + ((window.BRAND && window.BRAND.name) || "Dee & Ell")}</h1>
          <p style={{ color: "var(--ink-soft)", marginBottom: 26 }}>{mode === "login" ? "Sign in to track your orders." : "Create an account for faster checkout and order history."}</p>
          <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>
          <button className="auth-guest" onClick={() => onNav("shop", {})}>Continue as guest →</button>
        </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 shop</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>);

}

/* ---------------- REVAMP / RESTORATION ---------------- */
function RevampPage({ onNav }) {
  const [sent, setSent] = useState(false);
  const [item, setItem] = useState("Shoes");
  const [service, setService] = useState(RB.REVAMP_SERVICES[0].id);
  return (
    <div className="fade-page">
      <section className="bespoke-hero">
        <Ph label="REVAMP · RESTORATION" ratio="cinema" className="about-hero-bg" />
        <div className="about-hero-ov" />
        <div className="wrap about-hero-content">
          <Eyebrow style={{ color: "var(--accent-bright)" }}>The Revamp Service</Eyebrow>
          <h1 className="serif about-hero-h">Bring your leather back to life.</h1>
          <p className="lede on-img" style={{ maxWidth: "46ch", marginTop: 16 }}>
            Drop off at our Abuja showroom or mail in your worn shoes, belts or wallets. We assess the job and quote
            individually — pricing varies since every piece needs something different.
          </p>
        </div>
      </section>

      <section className="section-pad">
        <div className="wrap-wide">
          <Reveal className="section-head" style={{ marginBottom: 40 }}>
            <div>
              <Eyebrow line>What we restore</Eyebrow>
              <h2 className="serif" style={{ marginTop: 14 }}>Revamp services</h2>
            </div>
          </Reveal>
          <div className="aca-grid">
            {RB.REVAMP_SERVICES.map((s) => (
              <div key={s.id} className="aca-card">
                <div className="aca-body" style={{ padding: 26 }}>
                  <h3 className="serif aca-name">{s.name}</h3>
                  <p style={{ color: "var(--ink-soft)", fontSize: 14, marginTop: 8 }}>{s.blurb}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section-pad" style={{ paddingTop: 0 }}>
        <div className="wrap-wide co-grid">
          <aside className="co-aside">
            <Eyebrow line>How it works</Eyebrow>
            {[
              ["01", "Tell us about the item", "Describe the piece and what needs fixing — resoling, colour, stitching or a full restoration."],
              ["02", "Drop off or mail in", "Bring it to our Abuja showroom, or ship it to us."],
              ["03", "We quote individually", "Every job is priced once we've seen it — pricing varies by the work needed."],
              ["04", "Restored & returned", "Approve the quote and we'll get to work, then return it to you."],
            ].map(([n, t, d]) => (
              <div className="bk-step" key={n}><span className="mono">{n}</span><div><strong>{t}</strong><p>{d}</p></div></div>
            ))}
          </aside>

          <div className="co-form">
            <div className="bespoke-form-card">
              {sent ? (
                <div className="contact-sent" style={{ padding: "30px 0" }}>
                  <div className="confirm-badge sm"><Icon name="check" size={26} /></div>
                  <h3 className="serif" style={{ fontSize: 30, margin: "14px 0 8px" }}>Enquiry received</h3>
                  <p style={{ color: "var(--ink-soft)" }}>Thank you. We'll review your item and get back to you with a quote shortly.</p>
                  <Btn style={{ marginTop: 20 }} onClick={() => onNav("home", {})}>Back to home</Btn>
                </div>
              ) : (
                <form onSubmit={(e) => { e.preventDefault(); setSent(true); }}>
                  <h2 className="serif" style={{ fontSize: 30, marginBottom: 6 }}>Request a Revamp quote</h2>
                  <p style={{ color: "var(--ink-soft)", marginBottom: 22, fontSize: 14 }}>Pricing varies per job — we'll quote once we've seen your item.</p>
                  <label className="bk-label">What needs restoring?</label>
                  <div className="bk-pills">{["Shoes", "Belt", "Wallet"].map((t) => <button type="button" key={t} className={"chip" + (item === t ? " active" : "")} onClick={() => setItem(t)}>{t}</button>)}</div>
                  <label className="bk-label">Service needed</label>
                  <div className="bk-pills">{RB.REVAMP_SERVICES.map((s) => <button type="button" key={s.id} className={"chip" + (service === s.id ? " active" : "")} onClick={() => setService(s.id)}>{s.name}</button>)}</div>
                  <div className="form-grid" style={{ marginTop: 6 }}>
                    <div className="field"><label>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>Phone</label><input className="input" type="tel" placeholder="+234 …" /></div>
                    <div className="field span2"><label>Describe the item &amp; condition</label><textarea className="input" rows="4" placeholder="What is it, and what's worn or damaged?"></textarea></div>
                    <div className="field span2"><label>Upload photos (optional)</label><input className="input" type="file" accept="image/*" multiple /></div>
                  </div>
                  <Btn block arrow={false} type="submit" style={{ marginTop: 18 }}>Submit enquiry</Btn>
                </form>
              )}
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

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