/* ============================================================
   RACK & BOX — Account, Lookbook, Bespoke, Collections, Wishlist
   ============================================================ */

/* ---------------- 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"], ["fittings", "Fittings"], ["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 enquiries</h2>
                  <div className="center" style={{ padding: "40px 0" }}>
                    <p style={{ color: "var(--ink-soft)" }}>No enquiries yet.</p>
                    <Btn style={{ marginTop: 14 }} onClick={() => onNav("shop", {})}>Browse the collection</Btn>
                  </div>
                </div>
              }
              {tab === "fittings" &&
              <div>
                  <h2 className="serif acct-h">Bespoke enquiries</h2>
                  <div className="center" style={{ padding: "40px 0" }}>
                    <p style={{ color: "var(--ink-soft)" }}>No bespoke enquiries yet.</p>
                    <Btn style={{ marginTop: 14 }} onClick={() => onNav("custom", {})}>Start an enquiry</Btn>
                  </div>
                </div>
              }
              {tab === "addresses" &&
              <div>
                  <h2 className="serif acct-h">Addresses</h2>
                  <div className="acct-addr-grid">
                    <div className="acct-addr"><strong>Address</strong><p style={{ color: "var(--ink-soft)", marginTop: 8 }}>Add an address for enquiries and delivery.</p><button className="opt-link" style={{ marginTop: 12 }}>Add address</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="Adé" /></div>
                    <div className="field"><label>Last name</label><input className="input" defaultValue="Williams" /></div>
                    <div className="field span2"><label>Email</label><input className="input" defaultValue="ade@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="SETS · CONTEMPORARY" ratio="tall" />
        <div className="auth-media-cap"><Logo size={30} mono /></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) || "lookslikeagoodman")}</h1>
          <p style={{ color: "var(--ink-soft)", marginBottom: 26 }}>{mode === "login" ? "Sign in to track orders & fittings." : "Create an account for faster checkout, order history and early access."}</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>
          <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>);

}

/* ---------------- LOOKBOOK ---------------- */
function LookbookPage({ onNav }) {
  return (
    <div className="fade-page">
      <section className="lb-page-hero">
        <div className="wrap center">
          <Eyebrow style={{ marginTop: 18, display: "inline-block" }}>Bespoke Editorials</Eyebrow>
          <h1 className="serif" style={{ fontSize: "clamp(48px,8vw,118px)", fontWeight: 500, lineHeight: 0.98, margin: "14px 0 14px" }}>The Lookbook</h1>
          <p className="lede" style={{ maxWidth: "46ch", margin: "0 auto" }}>Three stories, one atelier — every look cut to the man who wears it.</p>
        </div>
      </section>
      <section style={{ paddingBottom: 90 }}>
        <div className="wrap-wide lb-stories">
          {RB.LOOKBOOK.map((l, i) =>
          <Reveal key={l.id} className={"lb-story" + (i % 2 ? " rev" : "")}>
              <button className="lb-story-media zoomable" onClick={() => onNav("shop", {})}><Ph label={l.label} ratio={i === 0 ? "wide" : "portrait"} /></button>
              <div className="lb-story-body">
                <span className="mono" style={{ color: "var(--accent)", fontSize: 11, letterSpacing: "0.2em" }}>{l.season}</span>
                <h2 className="serif" style={{ fontSize: "clamp(34px,4.5vw,64px)", fontWeight: 500, margin: "12px 0 14px", lineHeight: 1 }}>{l.title}</h2>
                <p className="lede" style={{ marginBottom: 24 }}>{l.blurb}</p>
                <Btn onClick={() => onNav("shop", {})}>Shop the story</Btn>
              </div>
            </Reveal>
          )}
        </div>
      </section>
      <LookbookTeaser onNav={onNav} />
    </div>);

}

function BespokeHeroImage() {
  const poster = (window.RB_IMGS || {})["BESPOKE · ENQUIRE"] || "";
  return (
    <div className="about-hero-bg" aria-hidden="true">
      <img src={poster} alt="" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", objectPosition: "center 30%" }} />
    </div>);
}

function InspirationPicker({ selected, onToggle, onClose }) {
  const max = 3;
  return (
    <div className="modal-wrap" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()} style={{ maxWidth: 600 }}>
        <div className="spread" style={{ marginBottom: 6 }}>
          <div><Eyebrow>Catalogue</Eyebrow><h3 className="serif" style={{ fontSize: 26, marginTop: 6 }}>Add from catalogue</h3></div>
          <button className="ic-btn" onClick={onClose}><Icon name="close" /></button>
        </div>
        <p style={{ fontSize: 13, color: "var(--ink-soft)", marginBottom: 16 }}>Up to 3 pieces — tap to add as inspiration for your enquiry.</p>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(120px, 1fr))", gap: 12, maxHeight: 420, overflowY: "auto" }}>
          {RB.PRODUCTS.map((p) => {
            const isSel = selected.some((s) => s.id === p.id);
            const disabled = !isSel && selected.length >= max;
            return (
              <button key={p.id} type="button" disabled={disabled} onClick={() => onToggle(p)}
                style={{ textAlign: "left", border: isSel ? "2px solid var(--accent)" : "1px solid var(--line)", borderRadius: "var(--radius)", padding: 6, opacity: disabled ? 0.4 : 1, cursor: disabled ? "not-allowed" : "pointer", background: "var(--surface)" }}>
                <Ph label={p.label} ratio="square" />
                <div style={{ fontSize: 12, marginTop: 6, lineHeight: 1.3 }}>{p.name}</div>
              </button>
            );
          })}
        </div>
        <Btn block arrow={false} style={{ marginTop: 18 }} onClick={onClose}>Done</Btn>
      </div>
    </div>
  );
}

function BespokePage({ onNav }) {
  const [mode, setMode] = useState("brief");
  const [sent, setSent] = useState(false);
  const [type, setType] = useState("Agbada");
  const [timeOfDay, setTimeOfDay] = useState("Morning");
  const [inspiration, setInspiration] = useState([]);
  const [showPicker, setShowPicker] = useState(false);
  const [ref] = useState(() => (window.genRef ? window.genRef() : "LLAGM-000000"));
  const toggleInspiration = (p) => setInspiration((prev) => prev.some((x) => x.id === p.id) ? prev.filter((x) => x.id !== p.id) : (prev.length < 3 ? [...prev, p] : prev));
  return (
    <div className="fade-page">
      <section className="bespoke-hero">
        <BespokeHeroImage />
        <div className="about-hero-ov" />
        <div className="wrap about-hero-content">
          <Eyebrow style={{ color: "var(--accent-bright)" }}>Bespoke &amp; Enquiries</Eyebrow>
          <h1 className="serif about-hero-h">Enquire about a piece.</h1>
          <p className="lede on-img" style={{ maxWidth: "44ch", marginTop: 16 }}>Interested in a made-to-measure agbada, kaftan or set? Tell us what you're after and we'll follow up with availability and pricing — by email or Instagram DM.</p>
        </div>
      </section>
      <section className="section-pad">
        <div className="wrap-wide bespoke-book-grid">
          <div className="bespoke-steps-col">
            <Eyebrow line>How it works</Eyebrow>
            {[["01", "Send your order request", "Tell us what you're after — piece, sizing, occasion."], ["02", "We follow up", "We reply by email or Instagram DM with availability and pricing."], ["03", "Made to you", "Every piece can be tailored to your measurements."]].map(([n, t, d]) =>
            <div className="bk-step" key={n}><span className="mono">{n}</span><div><strong>{t}</strong><p>{d}</p></div></div>
            )}
          </div>
          <div className="bespoke-form-card">
            {!sent &&
            <div className="bk-pills" style={{ marginBottom: 26 }}>
                <button type="button" className={"chip" + (mode === "brief" ? " active" : "")} onClick={() => setMode("brief")}>Send a brief</button>
                <button type="button" className={"chip" + (mode === "call" ? " active" : "")} onClick={() => setMode("call")}>Book a consultation call</button>
              </div>
            }
            {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" }}>{mode === "call" ? "Consultation request sent" : "Enquiry sent"}</h3>
                <p style={{ color: "var(--ink-soft)" }}>{mode === "call" ? "Thank you. We'll confirm a time by email or Instagram DM " : "Thank you. We'll get back to you by email or Instagram DM "}{(window.BRAND?.igHandle) || "@lookslikeagoodman"} shortly.</p>
                {inspiration.length > 0 && <p style={{ color: "var(--ink-soft)", fontSize: 13.5, marginTop: 6 }}>Inspiration: {inspiration.map((p) => p.name).join(", ")}</p>}
                <p className="mono" style={{ fontSize: 12, letterSpacing: "0.08em", color: "var(--ink-faint)", marginTop: 10 }}>Reference {ref}</p>
                <Btn style={{ marginTop: 20 }} onClick={() => onNav("home", {})}>Back to home</Btn>
              </div> :
            mode === "brief" ?
            <form onSubmit={(e) => {e.preventDefault();setSent(true);}}>
                <h2 className="serif" style={{ fontSize: 30, marginBottom: 6 }}>Send a brief</h2>
                <p style={{ color: "var(--ink-soft)", marginBottom: 22, fontSize: 14 }}>No obligation — just tell us what you're after.</p>
                <label className="bk-label">What are you ordering?</label>
                <div className="bk-pills">{["Agbada", "Kaftan", "Sets", "Suit", "Occasion", "Other"].map((t) => <button type="button" key={t} className={"chip" + (type === t ? " active" : "")} onClick={() => setType(t)}>{t}</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" placeholder="you@email.com" /></div>
                  <div className="field"><label>Instagram handle</label><input className="input" placeholder="@yourhandle" /></div>
                  <div className="field span2"><label>Tell us more</label><textarea className="input" rows="3" placeholder="Occasion, sizing, colours you have in mind…"></textarea></div>
                </div>
                <div style={{ marginTop: 16 }}>
                  <div className="spread" style={{ alignItems: "baseline" }}>
                    <label className="bk-label" style={{ marginBottom: 0 }}>Inspiration <span style={{ color: "var(--ink-faint)", fontWeight: 400 }}>— up to 3</span></label>
                    <button type="button" className="opt-link" onClick={() => setShowPicker(true)} disabled={inspiration.length >= 3}>+ Add from catalogue</button>
                  </div>
                  {inspiration.length > 0 && (
                    <div className="row" style={{ gap: 10, flexWrap: "wrap", marginTop: 10 }}>
                      {inspiration.map((p) => (
                        <span key={p.id} className="chip active" style={{ display: "inline-flex", alignItems: "center", gap: 8, paddingRight: 10 }}>
                          <Ph label={p.label} ratio="square" style={{ width: 24, height: 24, borderRadius: 4, overflow: "hidden" }} />
                          <span>{p.name}</span>
                          <button type="button" onClick={() => toggleInspiration(p)} aria-label={"Remove " + p.name} style={{ display: "flex", color: "inherit" }}><Icon name="close" size={12} /></button>
                        </span>
                      ))}
                    </div>
                  )}
                </div>
                <Btn block arrow={false} type="submit" style={{ marginTop: 18 }}>Send enquiry</Btn>
              </form> :
            <form onSubmit={(e) => {e.preventDefault();setSent(true);}}>
                <h2 className="serif" style={{ fontSize: 30, marginBottom: 6 }}>Book a consultation call</h2>
                <p style={{ color: "var(--ink-soft)", marginBottom: 22, fontSize: 14 }}>Talk through fit, fabric and occasion before you commit. We'll confirm a time that works.</p>
                <div className="form-grid">
                  <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" placeholder="you@email.com" /></div>
                  <div className="field"><label>Phone</label><input className="input" type="tel" placeholder="Your number" /></div>
                  <div className="field"><label>Instagram handle</label><input className="input" placeholder="@yourhandle" /></div>
                  <div className="field"><label>Preferred date</label><input className="input" type="date" /></div>
                </div>
                <label className="bk-label">Preferred time of day</label>
                <div className="bk-pills">{["Morning", "Afternoon", "Evening"].map((t) => <button type="button" key={t} className={"chip" + (timeOfDay === t ? " active" : "")} onClick={() => setTimeOfDay(t)}>{t}</button>)}</div>
                <div className="form-grid" style={{ marginTop: 6 }}>
                  <div className="field span2"><label>What would you like to discuss?</label><textarea className="input" rows="3" placeholder="Occasion, sizing, fabric, timelines…"></textarea></div>
                </div>
                <Btn block arrow={false} type="submit" style={{ marginTop: 18 }}>Request consultation call</Btn>
              </form>
            }
            {showPicker && <InspirationPicker selected={inspiration} onToggle={toggleInspiration} onClose={() => setShowPicker(false)} />}
          </div>
        </div>
      </section>
    </div>);

}

/* ---------------- COLLECTIONS ---------------- */
function CollectionsPage({ onNav }) {
  return (
    <div className="fade-page page-shell">
      <div className="wrap-wide">
        <h1 className="serif page-h">Collections</h1>
        <p className="shop-sub" style={{ maxWidth: "50ch" }}>Curated edits from lookslikeagoodman — traditional, contemporary and occasion wear.</p>
        <div className="collections-grid">
          {RB.COLLECTIONS.map((c, i) =>
          <Reveal key={c.id} delay={i % 2 + 1} className="coll-card zoomable">
              <button className="coll-card-btn" onClick={() => onNav("shop", { cat: c.catFilter })}>
                <Ph label={c.label} ratio="wide" />
                <div className="coll-ov" />
                <div className="coll-cap">
                  <span className="mono">{c.tag}</span>
                  <span className="serif coll-title">{c.title}</span>
                  <span className="coll-blurb">{c.blurb}</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, LookbookPage, BespokePage, CollectionsPage, WishlistPage });