/* global React, Icon, Origin, SyncChip, Meter, CB, RoleChip, JobChip, Portrait, Tag, Empty, Seg, Input, useRoute */
// ============================================================
// Screens 1-2: Landing + Character binding
// ============================================================
const { useState: useS12, useEffect: useE12 } = React;

// -------------------- 1. Landing / login --------------------
function ScreenLanding() {
  const { go } = useRoute();
  return (
    <div className="landing">
      <div className="landing-bg" aria-hidden="true">
        <div className="lb-orb a"></div>
        <div className="lb-orb b"></div>
        <div className="lb-grid"></div>
      </div>

      <header className="landing-top">
        <div className="row gap-10">
          <div className="sb-mark" style={{ width: 30, height: 30 }}><Icon.Mark /></div>
          <div style={{ fontWeight: 600, fontSize: 14.5, color: 'var(--text-strong)' }}>Aether Hub</div>
        </div>
        <div className="row gap-10">
          <a className="btn ghost small" href="#">Changelog</a>
          <a className="btn ghost small" href="#">Docs</a>
          <a className="btn small" href="#">Sign in</a>
        </div>
      </header>

      <main className="landing-main">
        <div className="landing-card">
          <Tag kind="primary" dot>Now in open beta</Tag>
          <h1 className="landing-h1">
            One home for your characters, grinds, static, and FC.
          </h1>
          <p className="landing-sub">
            A companion app + Discord bot that ties together what's currently scattered across
            spreadsheets and single-purpose sites. We sync the public data; you and your group
            track the rest — painlessly.
          </p>
          <button className="btn discord large" onClick={() => go('binding')}>
            <Icon.Discord />
            Continue with Discord
          </button>
          <p className="landing-mini">
            <Icon.Lock />
            We never read your game client — only public data (Lodestone, FFLogs, community item APIs).
          </p>
        </div>

        <div className="landing-feats">
          <div className="lfeat">
            <div className="lfeat-ic"><Icon.Relic /></div>
            <div className="lfeat-t">Track your grinds</div>
            <div className="lfeat-s">Relics, mounts, achievements — checkable, zone-grouped, satisfying. Auto when we can, manual when we must.</div>
          </div>
          <div className="lfeat">
            <div className="lfeat-ic"><Icon.Static /></div>
            <div className="lfeat-t">Run your static</div>
            <div className="lfeat-s">Roster, schedule, loot, and prog in one place. Paste an FFLogs link — attendance fills itself.</div>
          </div>
          <div className="lfeat">
            <div className="lfeat-ic"><Icon.FC /></div>
            <div className="lfeat-t">Bring your FC together</div>
            <div className="lfeat-s">100-row roster, FC-wide stats, and a Discord bot that lives where your group already does.</div>
          </div>
        </div>

        <footer className="landing-foot">
          <span className="faint">© 2026 Aether Hub · Not affiliated with Square Enix</span>
          <span className="row gap-16 faint">
            <a href="#" className="faint">Privacy</a>
            <a href="#" className="faint">Terms</a>
            <a href="#" className="faint">Status</a>
          </span>
        </footer>
      </main>

      <style>{`
        .landing {
          min-height: 100vh;
          background: var(--bg);
          position: relative;
          overflow-x: hidden;
        }
        .landing-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
        .lb-orb {
          position: absolute;
          width: 620px; height: 620px;
          border-radius: 50%;
          filter: blur(120px);
          opacity: 0.35;
        }
        .lb-orb.a { top: -200px; left: -100px; background: oklch(0.45 0.16 275 / 0.55); }
        .lb-orb.b { top: 50px;   right: -160px; background: oklch(0.42 0.14 310 / 0.45); }
        .theme-light .lb-orb { opacity: 0.18; }
        .lb-grid {
          position: absolute; inset: 0;
          background-image:
            linear-gradient(var(--border-soft) 1px, transparent 1px),
            linear-gradient(90deg, var(--border-soft) 1px, transparent 1px);
          background-size: 56px 56px;
          mask-image: radial-gradient(ellipse at center, black 0%, transparent 65%);
          opacity: 0.4;
        }
        .landing-top {
          position: relative; z-index: 1;
          display: flex; align-items: center; justify-content: space-between;
          padding: 18px 28px;
          max-width: 1200px;
          margin: 0 auto;
        }
        .landing-main {
          position: relative; z-index: 1;
          max-width: 1080px;
          margin: 0 auto;
          padding: 56px 28px 36px;
          display: flex; flex-direction: column;
          align-items: center;
        }
        .landing-card {
          background: var(--surface);
          border: 1px solid var(--border-soft);
          border-radius: 16px;
          padding: 36px 40px 32px;
          width: 100%;
          max-width: 560px;
          text-align: center;
          box-shadow: var(--shadow-pop);
          display: flex; flex-direction: column; gap: 16px; align-items: center;
        }
        .landing-h1 {
          font-size: 32px;
          font-weight: 600;
          letter-spacing: -0.022em;
          line-height: 1.15;
          color: var(--text-strong);
          margin: 6px 0 0;
          max-width: 460px;
        }
        .landing-sub {
          font-size: 14px;
          color: var(--text-muted);
          margin: 0;
          max-width: 460px;
          line-height: 1.55;
        }
        .landing-card .btn.discord { width: 100%; margin-top: 8px; }
        .landing-mini {
          font-size: 11.5px;
          color: var(--text-faint);
          margin: 0;
          display: inline-flex; align-items: center; gap: 6px;
        }
        .landing-mini svg { width: 12px; height: 12px; }
        .landing-feats {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 14px;
          margin-top: 48px;
          width: 100%;
          max-width: 880px;
        }
        .lfeat {
          background: var(--surface);
          border: 1px solid var(--border-soft);
          border-radius: 12px;
          padding: 20px;
        }
        .lfeat-ic {
          width: 32px; height: 32px;
          border-radius: 8px;
          background: var(--primary-bg);
          color: var(--primary-hi);
          display: grid; place-items: center;
          margin-bottom: 12px;
        }
        .lfeat-ic svg { width: 16px; height: 16px; }
        .lfeat-t { font-size: 13.5px; font-weight: 600; color: var(--text-strong); margin-bottom: 4px; }
        .lfeat-s { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; }
        .landing-foot {
          margin-top: 56px;
          padding-top: 24px;
          border-top: 1px solid var(--border-soft);
          width: 100%;
          max-width: 880px;
          display: flex; justify-content: space-between;
          font-size: 11.5px;
        }
        .landing-foot a { text-decoration: none; }
        .landing-foot a:hover { color: var(--text); }
        @media (max-width: 760px) {
          .landing-feats { grid-template-columns: 1fr; }
          .landing-h1 { font-size: 26px; }
        }
      `}</style>
    </div>
  );
}

// -------------------- 2. Character binding --------------------
function ScreenBinding() {
  const { go } = useRoute();
  const [step, setStep] = useS12(1); // 1 = find, 2 = verify, 3 = done
  const [selected, setSelected] = useS12(null);
  const [verifyState, setVerifyState] = useS12('idle'); // idle | checking | error | ok
  const [query, setQuery] = useS12('');

  const RESULTS = [
    { name: "Aerith Nightsong", world: 'Sargatanas', dc: 'Aether', race: 'Au Ra' },
    { name: 'Aerith Lightwhisper', world: 'Faerie', dc: 'Aether', race: 'Miqo\'te' },
    { name: 'Aerith of the Veil', world: 'Adamantoise', dc: 'Aether', race: 'Viera' },
  ];

  return (
    <div className="binding">
      <header className="b-top">
        <div className="row gap-10">
          <div className="sb-mark" style={{ width: 28, height: 28 }}><Icon.Mark /></div>
          <div style={{ fontWeight: 600, fontSize: 13.5 }}>Aether Hub</div>
        </div>
        <button className="btn ghost small" onClick={() => go('landing')}>Sign out</button>
      </header>

      <main className="b-main">
        <div style={{ textAlign: 'center', marginBottom: 6 }}>
          <div className="muted" style={{ fontSize: 12 }}>Welcome, jakob</div>
          <h1 className="b-h1">Bind your character</h1>
          <p className="b-sub">We use the Lodestone to prove ownership — no game client access, no addons.</p>
        </div>

        <div className="b-stepper">
          {['Find character', 'Verify ownership', 'Done'].map((label, i) => {
            const n = i + 1;
            const state = step > n ? 'done' : step === n ? 'active' : 'idle';
            return (
              <React.Fragment key={n}>
                <div className={`b-step ${state}`}>
                  <div className="b-step-circle">
                    {state === 'done' ? <Icon.Check /> : <span>{n}</span>}
                  </div>
                  <div className="b-step-label">{label}</div>
                </div>
                {n < 3 && <div className={`b-step-line ${step > n ? 'done' : ''}`}></div>}
              </React.Fragment>
            );
          })}
        </div>

        <div className="b-card">
          {step === 1 && (
            <div className="b-pane">
              <h3 className="b-pane-t">Find your character</h3>
              <p className="b-pane-s">Search the Lodestone by character name. World or data center is optional.</p>
              <div className="row gap-8" style={{ marginBottom: 14 }}>
                <div style={{ flex: 1 }}>
                  <Input icon={<Icon.Search />} placeholder="Character name" value={query} onChange={(e) => setQuery(e.target.value)} />
                </div>
                <select className="input" style={{ width: 160 }} defaultValue="Aether">
                  <option>Any DC</option>
                  <option>Aether</option><option>Primal</option><option>Crystal</option><option>Dynamis</option>
                  <option>Chaos</option><option>Light</option><option>Materia</option><option>Elemental</option><option>Gaia</option><option>Mana</option>
                </select>
              </div>
              <div className="b-results">
                {RESULTS.map((r, i) => (
                  <button key={i} className={`b-result ${selected === i ? 'sel' : ''}`} onClick={() => setSelected(i)}>
                    <Portrait size={48} label={r.race} />
                    <div className="b-result-info">
                      <div className="b-result-name">{r.name}</div>
                      <div className="b-result-meta">{r.world} · {r.dc} · {r.race}</div>
                    </div>
                    <div className="b-result-check">
                      {selected === i ? <Icon.Check /> : null}
                    </div>
                  </button>
                ))}
              </div>
              <div className="row" style={{ justifyContent: 'flex-end', marginTop: 18 }}>
                <button className="btn primary" disabled={selected == null} onClick={() => setStep(2)} style={selected == null ? { opacity: 0.4, cursor: 'not-allowed' } : {}}>
                  Continue <Icon.ChevR />
                </button>
              </div>
            </div>
          )}

          {step === 2 && (
            <div className="b-pane">
              <h3 className="b-pane-t">Verify ownership</h3>
              <p className="b-pane-s">
                Paste the token below into your Lodestone character profile bio, save, then click verify.
                You can remove it afterward.
              </p>
              <div className="b-token">
                <div className="b-token-label">One-time verification token</div>
                <div className="b-token-row">
                  <code className="b-token-code">aether-verify-7Q2F</code>
                  <button className="btn small"><Icon.Copy /> Copy</button>
                </div>
              </div>

              <ol className="b-howto">
                <li>Open your <a href="#">Lodestone profile <Icon.External /></a> in a new tab.</li>
                <li>Click <strong>Edit profile</strong> and paste the token into your character profile / bio.</li>
                <li>Save your profile, then come back and click <strong>Verify</strong>.</li>
              </ol>

              {verifyState === 'checking' && (
                <div className="b-status checking">
                  <Icon.Spinner />
                  <span>Looking for your token on the Lodestone… this can take up to 30 seconds.</span>
                </div>
              )}
              {verifyState === 'error' && (
                <div className="b-status error">
                  <Icon.Warning />
                  <div>
                    <div style={{ fontWeight: 600, marginBottom: 2 }}>We couldn't find the token yet</div>
                    <div className="muted" style={{ fontSize: 12 }}>Make sure your profile is saved and visible. The Lodestone caches for a few minutes — try again shortly.</div>
                  </div>
                </div>
              )}

              <div className="row" style={{ justifyContent: 'space-between', marginTop: 18 }}>
                <button className="btn ghost" onClick={() => setStep(1)}><Icon.ChevL /> Back</button>
                <div className="row gap-8">
                  {verifyState === 'idle' && (
                    <button className="btn primary" onClick={() => {
                      setVerifyState('checking');
                      setTimeout(() => setVerifyState('error'), 2200);
                    }}>Verify <Icon.Check /></button>
                  )}
                  {verifyState === 'checking' && (
                    <button className="btn primary" disabled style={{ opacity: 0.7 }}>
                      <Icon.Spinner /> Checking…
                    </button>
                  )}
                  {verifyState === 'error' && (
                    <>
                      <button className="btn" onClick={() => setVerifyState('idle')}>Try again</button>
                      <button className="btn primary" onClick={() => { setVerifyState('ok'); setTimeout(() => setStep(3), 200); }}>
                        Verified <Icon.Check />
                      </button>
                    </>
                  )}
                </div>
              </div>
            </div>
          )}

          {step === 3 && (
            <div className="b-pane b-done">
              <div className="b-done-ic"><Icon.Check /></div>
              <h3 className="b-pane-t" style={{ margin: '4px 0 8px' }}>You're bound</h3>
              <p className="b-pane-s">
                <strong style={{ color: 'var(--text-strong)' }}>{RESULTS[selected || 0].name}</strong> · {RESULTS[selected || 0].world} is now linked to your account.
                You can remove the token from your Lodestone bio whenever you like.
              </p>
              <div className="b-done-card">
                <Portrait size={56} label="character" />
                <div style={{ flex: 1 }}>
                  <div className="strong" style={{ fontSize: 14 }}>{RESULTS[selected || 0].name}</div>
                  <div className="muted" style={{ fontSize: 12 }}>{RESULTS[selected || 0].world} · {RESULTS[selected || 0].dc} · Lv 100</div>
                  <div className="row gap-6" style={{ marginTop: 8 }}>
                    <Origin kind="auto" /> <span className="muted" style={{ fontSize: 11.5 }}>Initial sync complete</span>
                  </div>
                </div>
              </div>
              <div className="row" style={{ justifyContent: 'flex-end', marginTop: 18 }}>
                <button className="btn primary large" onClick={() => go('dashboard')}>
                  Go to dashboard <Icon.ChevR />
                </button>
              </div>
            </div>
          )}
        </div>

        <p className="b-mini">
          <Icon.Info />
          We only read your <strong>public</strong> Lodestone page. We never touch the game client and never ask for your Square Enix password.
        </p>
      </main>

      <style>{`
        .binding { min-height: 100vh; background: var(--bg); }
        .b-top {
          display: flex; align-items: center; justify-content: space-between;
          padding: 16px 28px;
          border-bottom: 1px solid var(--border-soft);
        }
        .b-main {
          max-width: 680px;
          margin: 0 auto;
          padding: 40px 24px 64px;
        }
        .b-h1 {
          font-size: 24px;
          font-weight: 600;
          letter-spacing: -0.018em;
          color: var(--text-strong);
          margin: 4px 0 6px;
        }
        .b-sub { color: var(--text-muted); margin: 0 0 24px; font-size: 13px; }

        .b-stepper {
          display: flex; align-items: center;
          gap: 0;
          margin-bottom: 22px;
          padding: 0 24px;
        }
        .b-step { display: flex; align-items: center; gap: 10px; }
        .b-step-circle {
          width: 24px; height: 24px;
          border-radius: 50%;
          background: var(--surface-hi);
          border: 1px solid var(--border);
          display: grid; place-items: center;
          font-size: 11.5px;
          color: var(--text-muted);
          font-weight: 600;
        }
        .b-step-circle svg { width: 12px; height: 12px; }
        .b-step.active .b-step-circle {
          background: var(--primary);
          border-color: var(--primary);
          color: oklch(0.13 0.02 275);
        }
        .b-step.done .b-step-circle {
          background: var(--success);
          border-color: var(--success);
          color: oklch(0.16 0.02 152);
        }
        .b-step-label {
          font-size: 12px;
          font-weight: 500;
          color: var(--text-muted);
          white-space: nowrap;
        }
        .b-step.active .b-step-label { color: var(--text-strong); }
        .b-step.done .b-step-label { color: var(--text); }
        .b-step-line {
          flex: 1;
          height: 1px;
          background: var(--border);
          margin: 0 12px;
        }
        .b-step-line.done { background: var(--success); }

        .b-card {
          background: var(--surface);
          border: 1px solid var(--border-soft);
          border-radius: 14px;
          padding: 28px;
          box-shadow: var(--shadow-2);
        }
        .b-pane-t { font-size: 16px; font-weight: 600; margin: 0 0 4px; color: var(--text-strong); letter-spacing: -0.01em; }
        .b-pane-s { font-size: 13px; color: var(--text-muted); margin: 0 0 18px; line-height: 1.55; }

        .b-results { display: flex; flex-direction: column; gap: 6px; }
        .b-result {
          display: flex; align-items: center; gap: 14px;
          padding: 10px 12px;
          background: var(--bg-elev);
          border: 1px solid var(--border-soft);
          border-radius: 10px;
          cursor: pointer;
          text-align: left;
          color: inherit;
          font: inherit;
        }
        .b-result:hover { background: var(--surface-2); border-color: var(--border); }
        .b-result.sel { border-color: var(--primary); background: var(--primary-bg-2); }
        .b-result-info { flex: 1; }
        .b-result-name { font-weight: 600; font-size: 13.5px; color: var(--text-strong); }
        .b-result-meta { font-size: 12px; color: var(--text-muted); }
        .b-result-check {
          width: 22px; height: 22px;
          border-radius: 50%;
          color: var(--primary-hi);
          display: grid; place-items: center;
        }
        .b-result-check svg { width: 13px; height: 13px; }

        .b-token {
          background: var(--bg-elev);
          border: 1px dashed var(--border);
          border-radius: 10px;
          padding: 14px 16px;
          margin-bottom: 16px;
        }
        .b-token-label {
          font-size: 11px;
          font-weight: 500;
          text-transform: uppercase;
          letter-spacing: 0.06em;
          color: var(--text-faint);
          margin-bottom: 8px;
        }
        .b-token-row { display: flex; align-items: center; gap: 10px; }
        .b-token-code {
          flex: 1;
          font-family: 'Geist Mono', ui-monospace, monospace;
          font-size: 16px;
          color: var(--primary-hi);
          background: var(--primary-bg-2);
          border: 1px solid oklch(0.45 0.13 275 / 0.35);
          border-radius: 8px;
          padding: 9px 12px;
          letter-spacing: 0.03em;
        }
        .b-howto {
          margin: 0 0 16px;
          padding-left: 20px;
          font-size: 12.5px;
          color: var(--text-muted);
          line-height: 1.7;
        }
        .b-howto strong { color: var(--text); }
        .b-howto a { color: var(--primary-hi); text-decoration: none; display: inline-flex; align-items: center; gap: 3px; }
        .b-howto svg { width: 11px; height: 11px; }

        .b-status {
          display: flex; align-items: flex-start; gap: 10px;
          padding: 12px 14px;
          border-radius: 8px;
          font-size: 12.5px;
          line-height: 1.5;
        }
        .b-status.checking { background: oklch(0.34 0.07 220 / 0.25); border: 1px solid oklch(0.50 0.10 220 / 0.35); color: var(--info); }
        .b-status.checking svg { width: 14px; height: 14px; flex: 0 0 14px; margin-top: 1px; }
        .b-status.error { background: var(--warning-bg); border: 1px solid oklch(0.55 0.10 75 / 0.35); color: var(--text); align-items: flex-start; }
        .b-status.error > svg { width: 16px; height: 16px; color: var(--warning); flex: 0 0 16px; margin-top: 1px; }

        .b-done { text-align: center; padding: 12px 0; }
        .b-done-ic {
          width: 56px; height: 56px;
          margin: 8px auto 12px;
          border-radius: 50%;
          background: var(--success-bg);
          color: var(--success);
          display: grid; place-items: center;
        }
        .b-done-ic svg { width: 26px; height: 26px; }
        .b-done-card {
          display: flex; align-items: center; gap: 14px;
          margin: 18px auto 0;
          padding: 14px;
          background: var(--bg-elev);
          border: 1px solid var(--border-soft);
          border-radius: 12px;
          max-width: 420px;
          text-align: left;
        }

        .b-mini {
          margin: 20px 0 0;
          font-size: 11.5px;
          color: var(--text-faint);
          display: flex; align-items: flex-start; gap: 6px;
          line-height: 1.55;
        }
        .b-mini svg { width: 12px; height: 12px; flex: 0 0 12px; margin-top: 2px; }
        .b-mini strong { color: var(--text-muted); font-weight: 600; }

        @keyframes spin { to { transform: rotate(360deg); } }
      `}</style>
    </div>
  );
}

Object.assign(window, { ScreenLanding, ScreenBinding });