/* global React, Icon, Logo */
const { useState: useStateAuth } = React;

const AuthShell = ({ side, children }) => (
  <div style={{ minHeight: "100vh", display: "grid", gridTemplateColumns: "1fr 1.1fr" }}>
    <div className="col" style={{ padding: "48px 64px", justifyContent: "space-between" }}>
      <Logo />
      {children}
      <div className="row spread t-mono-sm muted">
        <span>© 2026 Roomly</span>
        <span>Need help? <a style={{ color: "var(--ink-0)" }}>Contact support</a></span>
      </div>
    </div>
    {side}
  </div>
);

const PageLoginSeeker = ({ onNav }) => {
  const [showPw, setShowPw] = useStateAuth(false);
  const [tab, setTab] = useStateAuth("agency");
  return (
    <AuthShell
      side={
        <div style={{ position: "relative", overflow: "hidden", background: "linear-gradient(160deg, oklch(0.22 0.02 240), oklch(0.18 0.012 240))", display: "flex", alignItems: "center", justifyContent: "center", padding: 60 }}>
          <div aria-hidden style={{ position: "absolute", inset: 0, background: "radial-gradient(40% 50% at 70% 30%, var(--accent-dim), transparent 70%)" }} />
          <div className="col gap-6" style={{ position: "relative", maxWidth: 460, color: "var(--ink-0)" }}>
            <span className="eyebrow">Tonight, somewhere safe</span>
            <h2 className="t-display-lg">"We placed 14 clients into rooms in our first month with Roomly."</h2>
            <div className="row gap-3" style={{ marginTop: 8 }}>
              <span className="avatar b3">MR</span>
              <div className="col">
                <span className="t-h3">Marisol Rivera</span>
                <span className="t-sm muted">Housing Navigator · Bay Area Outreach</span>
              </div>
            </div>
            <hr className="divider" style={{ margin: "16px 0" }} />
            <div className="row gap-6 t-mono-sm muted">
              <div className="col"><span className="t-h2" style={{ color: "var(--ink-0)", fontFamily: "var(--font-mono)" }}>12,840</span><span>verified rooms</span></div>
              <div className="col"><span className="t-h2" style={{ color: "var(--ink-0)", fontFamily: "var(--font-mono)" }}>48hr</span><span>avg. placement</span></div>
              <div className="col"><span className="t-h2" style={{ color: "var(--ink-0)", fontFamily: "var(--font-mono)" }}>96%</span><span>retention at 90 days</span></div>
            </div>
          </div>
        </div>
      }
    >
      <div className="col gap-6" style={{ maxWidth: 420, width: "100%", margin: "auto 0" }}>
        <div className="col gap-3">
          <span className="badge badge-info">Sign in · Seeker</span>
          <h1 className="t-display">Welcome back.</h1>
          <p className="t-body muted">Find a room — for yourself or someone you're placing.</p>
        </div>

        <div className="pill-tab-row" style={{ alignSelf: "flex-start" }}>
          <button className={`pill-tab ${tab === "agency" ? "active" : ""}`} onClick={() => setTab("agency")}>Case worker</button>
          <button className={`pill-tab ${tab === "individual" ? "active" : ""}`} onClick={() => setTab("individual")}>Individual</button>
        </div>

        <div className="col gap-4">
          <div className="field">
            <label className="field-label">{tab === "agency" ? "Work email" : "Email"}</label>
            <input className="input" placeholder={tab === "agency" ? "you@agency.org" : "you@example.com"} defaultValue={tab === "agency" ? "marisol@bayareaoutreach.org" : ""} />
          </div>
          <div className="field">
            <label className="field-label">Password</label>
            <div style={{ position: "relative" }}>
              <input className="input" type={showPw ? "text" : "password"} placeholder="••••••••" defaultValue="••••••••••" />
              <button type="button" className="btn btn-icon btn-ghost" style={{ position: "absolute", right: 4, top: 4, height: 40, width: 40 }} onClick={() => setShowPw(!showPw)}>
                <Icon name={showPw ? "eyeOff" : "eye"} />
              </button>
            </div>
          </div>
          <div className="row spread">
            <label className="row gap-2 t-sm muted" style={{ cursor: "pointer" }}>
              <input type="checkbox" defaultChecked /> Remember this device
            </label>
            <a className="t-sm" style={{ color: "var(--accent)", cursor: "pointer" }}>Forgot password?</a>
          </div>
          <button className="btn btn-primary btn-lg" onClick={() => onNav("search")}>
            Sign in <Icon name="arrowRight" className="i i-sm" />
          </button>
          <button className="btn btn-outline btn-lg">
            <Icon name="shield" /> Continue with SSO
          </button>
        </div>

        <p className="t-sm muted" style={{ textAlign: "center" }}>
          New here? <a style={{ color: "var(--accent)", cursor: "pointer" }} onClick={() => onNav("signup-pick")}>Create an account</a> · <a style={{ color: "var(--ink-1)", cursor: "pointer" }} onClick={() => onNav("login-lister")}>Sign in as a host →</a>
        </p>
      </div>
    </AuthShell>
  );
};

const PageLoginLister = ({ onNav }) => {
  const [showPw, setShowPw] = useStateAuth(false);
  return (
    <AuthShell
      side={
        <div style={{ position: "relative", overflow: "hidden", background: "linear-gradient(160deg, oklch(0.24 0.04 60), oklch(0.18 0.02 50))", display: "flex", alignItems: "center", justifyContent: "center", padding: 60 }}>
          <div aria-hidden style={{ position: "absolute", inset: 0, background: "radial-gradient(50% 60% at 30% 70%, oklch(0.78 0.14 75 / 0.25), transparent 70%)" }} />
          <div className="col gap-6" style={{ position: "relative", maxWidth: 460, color: "var(--ink-0)" }}>
            <span className="eyebrow">Open a door, change a life</span>
            <h2 className="t-display-lg">Your spare room is someone's fresh start.</h2>
            <p className="t-body muted">Hosts on Roomly earn an average of $720/month per room while housing verified, supported guests.</p>
            <div className="card card-pad" style={{ background: "rgba(0,0,0,0.25)", marginTop: 16 }}>
              <div className="row spread" style={{ marginBottom: 12 }}>
                <span className="t-mono-xs muted">This month · sample host</span>
                <span className="badge badge-success"><span className="dot live" /> Active</span>
              </div>
              <div className="row gap-6">
                <div className="col"><span className="t-mono" style={{ fontSize: 28 }}>$2,160</span><span className="t-sm muted">3 rooms occupied</span></div>
                <span className="v-divider" style={{ height: 40 }} />
                <div className="col"><span className="t-mono" style={{ fontSize: 28 }}>4.9</span><span className="t-sm muted">guest rating</span></div>
              </div>
            </div>
          </div>
        </div>
      }
    >
      <div className="col gap-6" style={{ maxWidth: 420, width: "100%", margin: "auto 0" }}>
        <div className="col gap-3">
          <span className="badge badge-accent">Sign in · Host</span>
          <h1 className="t-display">Manage your rooms.</h1>
          <p className="t-body muted">Check inquiries, payouts, and upcoming move-ins.</p>
        </div>
        <div className="col gap-4">
          <div className="field">
            <label className="field-label">Email</label>
            <input className="input" placeholder="you@example.com" defaultValue="dana.host@roomly.co" />
          </div>
          <div className="field">
            <label className="field-label">Password</label>
            <div style={{ position: "relative" }}>
              <input className="input" type={showPw ? "text" : "password"} defaultValue="••••••••••" />
              <button type="button" className="btn btn-icon btn-ghost" style={{ position: "absolute", right: 4, top: 4, height: 40, width: 40 }} onClick={() => setShowPw(!showPw)}>
                <Icon name={showPw ? "eyeOff" : "eye"} />
              </button>
            </div>
          </div>
          <div className="row spread">
            <label className="row gap-2 t-sm muted" style={{ cursor: "pointer" }}>
              <input type="checkbox" defaultChecked /> Stay signed in
            </label>
            <a className="t-sm" style={{ color: "var(--accent)", cursor: "pointer" }}>Forgot password?</a>
          </div>
          <button className="btn btn-primary btn-lg" onClick={() => onNav("lister-dash")}>
            Open dashboard <Icon name="arrowRight" className="i i-sm" />
          </button>
          <button className="btn btn-outline btn-lg">
            <Icon name="key" /> Sign in with passkey
          </button>
        </div>
        <p className="t-sm muted" style={{ textAlign: "center" }}>
          Want to list a room? <a style={{ color: "var(--accent)", cursor: "pointer" }} onClick={() => onNav("signup-pick")}>Become a host</a> · <a style={{ color: "var(--ink-1)", cursor: "pointer" }} onClick={() => onNav("login-seeker")}>I'm looking for a room →</a>
        </p>
      </div>
    </AuthShell>
  );
};

const PageSignupPick = ({ onNav }) => {
  return (
    <div className="page">
      <header className="top-nav">
        <div className="container">
          <Logo />
          <div className="row gap-3">
            <span className="t-sm muted">Already have an account?</span>
            <button className="btn btn-sm btn-outline" onClick={() => onNav("login-seeker")}>Sign in</button>
          </div>
        </div>
      </header>
      <main className="container" style={{ padding: "80px 0", maxWidth: 1080 }}>
        <div className="col gap-3" style={{ marginBottom: 48, textAlign: "center", alignItems: "center" }}>
          <span className="eyebrow">Get started · Step 1 of 4</span>
          <h1 className="t-display-lg" style={{ maxWidth: 640 }}>What brings you here?</h1>
          <p className="t-body muted" style={{ maxWidth: 520 }}>Pick the role that fits. You can add another role later from your account.</p>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20 }}>
          {[
            { id: "case", icon: "briefcase", title: "I'm a case worker", body: "Place clients into rooms. Submit applications and track outcomes for your caseload.", chips: ["Agency dashboard", "Bulk applications", "Voucher network"], next: "search" },
            { id: "ind", icon: "user", title: "I'm looking for myself", body: "Find a room you can move into this week. Vouchers welcome, no credit check.", chips: ["Browse rooms", "Direct messaging", "Saved searches"], next: "search" },
            { id: "host", icon: "key", title: "I have a room to list", body: "Earn from your spare room. Background-checked guests, payouts in 48 hours.", chips: ["Free to list", "Insurance included", "Steady payouts"], next: "lister-dash" },
          ].map(opt => (
            <div key={opt.id} className="card card-hover" style={{ padding: 28, cursor: "pointer", display: "flex", flexDirection: "column", gap: 16, minHeight: 320 }} onClick={() => onNav(opt.next)}>
              <div className="row spread">
                <span style={{ width: 44, height: 44, background: "var(--accent-dim)", color: "var(--accent)", display: "grid", placeItems: "center", borderRadius: 12 }}>
                  <Icon name={opt.icon} className="i i-lg" />
                </span>
                <Icon name="arrowRight" className="i i-sm" style={{ color: "var(--ink-3)" }} />
              </div>
              <h3 className="t-h1">{opt.title}</h3>
              <p className="t-sm muted">{opt.body}</p>
              <div className="row gap-2" style={{ flexWrap: "wrap", marginTop: "auto" }}>
                {opt.chips.map(c => <span key={c} className="chip chip-static">{c}</span>)}
              </div>
            </div>
          ))}
        </div>
        <div className="col gap-2 center" style={{ marginTop: 48 }}>
          <p className="t-sm muted">Are you an organization placing 50+ clients per year? <a style={{ color: "var(--accent)", cursor: "pointer" }}>Talk to enterprise →</a></p>
        </div>
      </main>
    </div>
  );
};

window.PageLoginSeeker = PageLoginSeeker;
window.PageLoginLister = PageLoginLister;
window.PageSignupPick = PageSignupPick;