/* global React, Reveal, MagneticButton, Footer, Store, useStore */
const { useState: useState_a, useEffect: useEffect_a } = React;

const AUTH_IMG = "assets/hardanger-sideboard.jpg";

function SignInPage({ onNavigate }) {
  const [mode, setMode] = useState_a("signin"); // signin | register
  const [email, setEmail] = useState_a("");
  const [password, setPassword] = useState_a("");
  const [firstName, setFirstName] = useState_a("");
  const [lastName, setLastName] = useState_a("");
  const [sent, setSent] = useState_a(false);

  const submit = (e) => {
    e.preventDefault();
    /* Magic-link flavored — pretend to send, then sign in after a beat. */
    setSent(true);
    setTimeout(() => {
      Store.signIn({ email, name: firstName ? `${firstName} ${lastName}` : email.split("@")[0] });
      onNavigate("account");
    }, 1100);
  };

  return (
    <main className="auth" data-screen-label="Sign In">
      <div className="auth-img" style={{ backgroundImage: `url(${AUTH_IMG})` }}></div>
      <div className="auth-form">
        <Reveal><div className="t-eyebrow" style={{ color: "var(--accent)" }}>— The atelier</div></Reveal>
        <Reveal delay={120}>
          <h1 className="t-h1" style={{ fontSize: "clamp(40px, 5vw, 80px)", lineHeight: 0.96 }}>
            {mode === "signin"
              ? <><span style={{ fontStyle: "italic" }}>Welcome</span> back.</>
              : <><span style={{ fontStyle: "italic" }}>An account</span> for keeping.</>}
          </h1>
        </Reveal>
        <Reveal delay={240}>
          <p className="t-body t-body-lg" style={{ color: "var(--ink-soft)", maxWidth: "44ch" }}>
            {mode === "signin"
              ? "Sign in to track your orders, save swatch sets and resume any drafts."
              : "Save swatch sets, follow pieces in the workshop, and keep your delivery preferences across visits."}
          </p>
        </Reveal>

        <div className="auth-tabs">
          <button data-cursor="Switch" className={mode === "signin" ? "is-on" : ""} onClick={() => setMode("signin")}>Sign in</button>
          <button data-cursor="Switch" className={mode === "register" ? "is-on" : ""} onClick={() => setMode("register")}>Create account</button>
        </div>

        {sent ? (
          <div style={{ padding: "32px 0" }}>
            <div className="t-eyebrow" style={{ color: "var(--accent)" }}>— Magic link sent</div>
            <p className="t-h3" style={{ marginTop: 16, fontStyle: "italic", maxWidth: "20ch" }}>
              Check {email || "your inbox"}.
            </p>
            <p className="t-body" style={{ marginTop: 12, maxWidth: "40ch" }}>
              We don't believe in passwords. We've sent you a single-use sign-in link that's good for the next ten minutes.
            </p>
          </div>
        ) : (
          <form onSubmit={submit}>
            {mode === "register" && (
              <div className="field-row">
                <div className="field"><label>First name</label><input type="text" value={firstName} onChange={(e) => setFirstName(e.target.value)} data-cursor="Type" /></div>
                <div className="field"><label>Last name</label><input type="text" value={lastName} onChange={(e) => setLastName(e.target.value)} data-cursor="Type" /></div>
              </div>
            )}
            <div className="field"><label>Email</label><input type="email" placeholder="you@somewhere.com" value={email} onChange={(e) => setEmail(e.target.value)} required data-cursor="Type" /></div>
            <div className="field"><label>Password (optional — we'll email a link)</label><input type="password" value={password} onChange={(e) => setPassword(e.target.value)} data-cursor="Type" /></div>

            <div style={{ marginTop: 32, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
              <a href="#" data-cursor="Help" className="t-mono" style={{ color: "var(--ink-mute)" }}>Forgot password</a>
              <MagneticButton className="btn btn--solid" data-cursor={mode === "signin" ? "Sign in" : "Create"}>
                <span>{mode === "signin" ? "Send sign-in link" : "Create account"}</span>
                <span className="arrow">→</span>
              </MagneticButton>
            </div>
          </form>
        )}

        <p className="t-small" style={{ marginTop: 32, color: "var(--ink-mute)" }}>
          By continuing you agree to Delina Living's <a href="#" data-cursor="Read">Terms</a> and <a href="#" data-cursor="Read">Privacy</a>.
        </p>
      </div>
    </main>
  );
}

/* =================================================
   ACCOUNT DASHBOARD
================================================= */
const MOCK_ORDERS = [
  { num: "HLD-482012", date: "Mar 12, 2026", status: "Frame joined · Week 02", img: "assets/sognefjord-bone.jpg", name: "Sognefjord", sub: "Three-Seat Sofa · Bone Linen, Walnut", total: "$4,820", week: 2 },
  { num: "HLD-471902", date: "Nov 28, 2025", status: "Delivered", img: "assets/lysefjord-lounge.jpg", name: "Lysefjord", sub: "Lounge Chair · Oxblood Mohair, Walnut", total: "$2,640", week: 8 },
  { num: "HLD-460221", date: "Feb 03, 2025", status: "Delivered", img: "assets/geirangerfjord-table.jpg", name: "Geirangerfjord", sub: "Dining Table · Oak, oiled", total: "$3,980", week: 8 },
];

function AccountPage({ onNavigate }) {
  const user = useStore((s) => s.user);
  const [tab, setTab] = useState_a("orders");

  /* If not signed in → redirect to signin */
  if (!user) {
    return <SignInPage onNavigate={onNavigate} />;
  }

  return (
    <main className="account-shell" data-screen-label="Account">
      <div className="page-head">
        <div>
          <Reveal><div className="t-eyebrow" style={{ color: "var(--accent)" }}>— Account</div></Reveal>
          <Reveal delay={120}>
            <h1 className="t-h1" style={{ marginTop: 20 }}>
              Hello, <span style={{ fontStyle: "italic" }}>{(user.name || "friend").split(" ")[0]}.</span>
            </h1>
          </Reveal>
        </div>
        <Reveal delay={240}>
          <p className="dek">
            Three pieces in your home, one in the workshop. Signed in as <span className="t-mono">{user.email}</span>. <a onClick={() => { Store.signOut(); onNavigate("home"); }} href="#" data-cursor="Sign out" style={{ borderBottom: "1px solid currentColor" }}>Sign out</a>.
          </p>
        </Reveal>
      </div>

      <div className="account-grid">
        <aside className="account-side">
          {[
            ["orders", "Orders", MOCK_ORDERS.length],
            ["addresses", "Addresses", 2],
            ["saved", "Saved pieces", 4],
            ["settings", "Settings", null],
          ].map(([id, l, n]) => (
            <button key={id} className={tab === id ? "is-on" : ""} onClick={() => setTab(id)} data-cursor="View">
              <span>{l}</span>
              {n !== null && <span style={{ color: "var(--ink-mute)" }}>{n}</span>}
            </button>
          ))}
        </aside>

        <div className="account-main">
          {tab === "orders" && (
            <section>
              <h2 className="t-h3" style={{ marginBottom: 24, fontStyle: "italic" }}>Orders.</h2>
              {MOCK_ORDERS.map((o) => (
                <Reveal key={o.num} className="order-card">
                  <div className="thumb" style={{ backgroundImage: `url(${o.img})` }}></div>
                  <div>
                    <div className="t-mono" style={{ color: "var(--ink-mute)", marginBottom: 4 }}>{o.num} · {o.date}</div>
                    <div className="name">{o.name}</div>
                    <div className="sub">{o.sub} · {o.total}</div>
                    <div className="meta" style={{ marginTop: 12 }}>
                      <span className="status-pill"><span className="dot" style={{ background: o.week < 8 ? "var(--accent)" : "#3a8a5a" }}></span>{o.status}</span>
                      {o.week < 8 && <ProgressBar week={o.week} />}
                    </div>
                  </div>
                  <div style={{ display: "flex", flexDirection: "column", gap: 8, alignItems: "flex-end" }}>
                    <button className="t-mono" data-cursor="View" style={{ borderBottom: "1px solid currentColor" }}>View</button>
                    {o.week < 8 && <button className="t-mono" data-cursor="View" style={{ color: "var(--ink-mute)" }}>Track</button>}
                  </div>
                </Reveal>
              ))}
            </section>
          )}

          {tab === "addresses" && (
            <section>
              <h2 className="t-h3" style={{ marginBottom: 24, fontStyle: "italic" }}>Addresses.</h2>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24 }}>
                {[
                  { tag: "Default · Shipping & Billing", lines: ["Astrid Vance", "125 Pine Street, Apt 4B", "Brooklyn, NY 11215", "+1 (718) 555-0192"] },
                  { tag: "Weekend", lines: ["Astrid Vance", "44 Delina Living Road", "Hudson, NY 12534"] },
                ].map((a, i) => (
                  <Reveal key={i} delay={i * 100}>
                    <div style={{ padding: 24, border: "1px solid var(--line-strong)", display: "flex", flexDirection: "column", gap: 8 }}>
                      <div className="t-eyebrow" style={{ color: "var(--accent)" }}>— {a.tag}</div>
                      {a.lines.map((l, j) => <div key={j} style={{ fontSize: 15 }}>{l}</div>)}
                      <div style={{ marginTop: 12, display: "flex", gap: 16 }}>
                        <button className="t-mono" data-cursor="Edit" style={{ color: "var(--accent)" }}>Edit</button>
                        <button className="t-mono" data-cursor="Remove" style={{ color: "var(--ink-mute)" }}>Remove</button>
                      </div>
                    </div>
                  </Reveal>
                ))}
                <button style={{ padding: 24, border: "1px dashed var(--line-strong)", textAlign: "left" }} data-cursor="Add">
                  <div className="t-eyebrow" style={{ color: "var(--ink-mute)" }}>— New address</div>
                  <div style={{ marginTop: 8, fontFamily: '"GT Sectra","Instrument Serif",serif', fontSize: 22, fontStyle: "italic" }}>+ Add</div>
                </button>
              </div>
            </section>
          )}

          {tab === "saved" && (
            <section>
              <h2 className="t-h3" style={{ marginBottom: 24, fontStyle: "italic" }}>Saved pieces.</h2>
              <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 24 }}>
                {[
                  { name: "Hardanger", sub: "Sideboard", price: "$5,420", img: "assets/hardanger-sideboard.jpg" },
                  { name: "Aurland", sub: "Pendant Lamp", price: "$880", img: "assets/aurland-pendant.jpg" },
                  { name: "Nærøyfjord", sub: "Two-Seat Sofa", price: "$3,640", img: "assets/sognefjord-oxblood.jpg" },
                  { name: "Romsdalen", sub: "Bed Frame", price: "$4,280", img: "assets/romsdalen-bed.jpg" },
                ].map((p, i) => (
                  <Reveal key={p.name} delay={i * 80} variant="img">
                    <div data-cursor="View" onClick={() => onNavigate("pdp")} style={{ cursor: "none" }}>
                      <div style={{ aspectRatio: "4/5", backgroundImage: `url(${p.img})`, backgroundSize: "cover", backgroundPosition: "center", marginBottom: 12, backgroundColor: "var(--bone-deep)" }}></div>
                      <div style={{ fontFamily: '"GT Sectra","Instrument Serif",serif', fontSize: 19 }}>{p.name}</div>
                      <div style={{ fontSize: 12, color: "var(--ink-mute)" }}>{p.sub} · {p.price}</div>
                    </div>
                  </Reveal>
                ))}
              </div>
            </section>
          )}

          {tab === "settings" && (
            <section>
              <h2 className="t-h3" style={{ marginBottom: 24, fontStyle: "italic" }}>Settings.</h2>
              <div style={{ maxWidth: 560 }}>
                <div className="field"><label>Name</label><input type="text" defaultValue={user.name || ""} data-cursor="Type" /></div>
                <div className="field"><label>Email</label><input type="email" defaultValue={user.email || ""} data-cursor="Type" /></div>
                <div className="field"><label>Phone</label><input type="tel" defaultValue="+1 (718) 555-0192" data-cursor="Type" /></div>
                <div style={{ marginTop: 32, paddingTop: 24, borderTop: "1px solid var(--line)" }}>
                  <div className="t-eyebrow" style={{ color: "var(--ink-mute)" }}>— Communication</div>
                  {[
                    { l: "Workshop letter (monthly)", d: true },
                    { l: "Order updates (essential)", d: true, locked: true },
                    { l: "New piece announcements (twice yearly)", d: true },
                    { l: "Trade & press notes (occasional)", d: false },
                  ].map((c, i) => (
                    <label key={i} style={{ display: "flex", justifyContent: "space-between", padding: "16px 0", borderBottom: "1px solid var(--line)" }}>
                      <span>{c.l}</span>
                      <input type="checkbox" defaultChecked={c.d} disabled={c.locked} style={{ accentColor: "var(--accent)" }} />
                    </label>
                  ))}
                </div>
              </div>
            </section>
          )}
        </div>
      </div>

      <Footer onNavigate={onNavigate} />
    </main>
  );
}

function ProgressBar({ week }) {
  const pct = Math.min(100, (week / 8) * 100);
  return (
    <span style={{ display: "inline-flex", alignItems: "center", gap: 10 }}>
      <span style={{ width: 100, height: 2, background: "var(--line)", position: "relative", overflow: "hidden" }}>
        <span style={{ position: "absolute", inset: 0, width: `${pct}%`, background: "var(--accent)" }}></span>
      </span>
      <span className="t-mono" style={{ color: "var(--ink-mute)", fontSize: 10 }}>Week {week} / 08</span>
    </span>
  );
}

window.SignInPage = SignInPage;
window.AccountPage = AccountPage;