// app/screen-login.jsx — token-paste login, a quote from your own notes
// overlaid on photography. Responsive across desktop / tablet / mobile.

function LoginScreen() {
  const { login, layout, state, set } = useApp();
  const [token, setToken] = React.useState('');
  const [busy, setBusy] = React.useState(false);
  const isMobile = layout === 'mobile';
  const err = state.loginError;

  // Bearer auth is enforced on the live API: a wrong token rejects and login()
  // keeps us on this screen with state.loginError set. Submit clears any prior
  // error, shows a checking state, and lets the store decide success/failure.
  const submit = async (t) => {
    if (busy) return;
    if (err) set({ loginError: null });
    setBusy(true);
    await login(t);
    setBusy(false); // on success this screen has already unmounted
  };

  const photo = (
    <div style={{ position: 'relative', height: '100%', width: '100%', overflow: 'hidden' }}>
      <img src="assets/sichuan-chicken.png" alt="" style={{ width: '100%', height: '100%',
        objectFit: 'cover', display: 'block' }} />
      <div style={{ position: 'absolute', inset: 0,
        background: 'linear-gradient(180deg, rgba(12,12,14,0.35) 0%, rgba(12,12,14,0.15) 40%, rgba(12,12,14,0.85) 100%)' }} />
      <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, padding: isMobile ? '28px 22px' : '44px 44px' }}>
        <span style={{ fontFamily: 'Bricolage Grotesque', fontSize: 10, fontWeight: 600,
          letterSpacing: '0.28em', textTransform: 'uppercase', color: 'var(--olive)' }}>
          from your notes
        </span>
        <p style={{ fontFamily: 'Caveat', fontWeight: 600, fontSize: isMobile ? 25 : 30,
          lineHeight: 1.15, color: '#fff', margin: '10px 0 0', maxWidth: 430,
          textShadow: '0 4px 30px rgba(0,0,0,0.5)' }}>
          “Doubled the garlic last time — better. Save the poaching
          liquid; it's practically stock.”
        </p>
        <div style={{ fontFamily: 'Spectral', fontStyle: 'italic', fontSize: isMobile ? 13 : 15,
          color: 'rgba(255,255,255,0.7)', marginTop: 18 }}>
          Sichuan-style cold chicken · cooked 12 times
        </div>
      </div>
    </div>
  );

  const form = (
    <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center',
      height: '100%', padding: isMobile ? '32px 22px 40px' : '64px 56px',
      maxWidth: isMobile ? 'none' : 460 }}>
      <FWordmark size={isMobile ? 30 : 38} />
      <h1 style={{ fontFamily: 'Bricolage Grotesque', fontWeight: 700,
        fontSize: isMobile ? 38 : 52, lineHeight: 0.95, letterSpacing: '-0.045em',
        color: 'var(--ink)', margin: '26px 0 0' }}>
        Welcome
        <span style={{ fontFamily: 'Spectral', fontStyle: 'italic', fontWeight: 400,
          color: 'var(--olive)' }}> back.</span>
      </h1>
      <p style={{ fontFamily: 'Spectral', fontStyle: 'italic', fontSize: isMobile ? 16 : 18,
        lineHeight: 1.5, color: 'var(--ink-2)', margin: '14px 0 0' }}>
        Paste your cookbook token to unlock your library. This is your kitchen — not
        a SaaS gateway. Magic-link sign-in lands with multi-user.
      </p>

      <div style={{ marginTop: 32 }}>
        <label style={{ fontFamily: 'Bricolage Grotesque', fontSize: 10, fontWeight: 600,
          letterSpacing: '0.24em', textTransform: 'uppercase', color: 'var(--ink-3)' }}>
          Cookbook token
        </label>
        <input value={token} onChange={(e) => { setToken(e.target.value); if (err) set({ loginError: null }); }}
          placeholder="lc_live_••••••••••••••••"
          onKeyDown={(e) => { if (e.key === 'Enter') submit(token); }}
          aria-invalid={err ? 'true' : 'false'}
          style={{ width: '100%', marginTop: 10, padding: '15px 16px', borderRadius: 12,
            background: 'rgba(0,0,0,0.35)',
            border: `1px solid ${err ? 'var(--tomato)' : 'var(--hairline)'}`,
            color: 'var(--ink)', fontFamily: 'var(--mono)', fontSize: 15, outline: 'none',
            boxSizing: 'border-box' }} />
        {err && (
          <div role="alert" style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 12,
            fontFamily: 'Spectral', fontStyle: 'italic', fontSize: 14, lineHeight: 1.4,
            color: 'var(--tomato)' }}>
            <span aria-hidden="true" style={{ fontStyle: 'normal', fontSize: 13 }}>⚠</span>
            {err}
          </div>
        )}
      </div>

      <FButton size="l" onClick={() => submit(token)} disabled={busy}
        style={{ width: '100%', marginTop: 16, minHeight: 56, opacity: busy ? 0.65 : 1 }}>
        {busy ? 'Checking…' : <React.Fragment>Open my cookbook <span style={{ fontSize: 18 }}>→</span></React.Fragment>}
      </FButton>

      <button onClick={() => submit('')} style={{ marginTop: 16, background: 'transparent', border: 'none',
        cursor: 'pointer', fontFamily: 'Spectral', fontStyle: 'italic', fontSize: 14,
        color: 'var(--ink-3)', textAlign: 'left', padding: 0 }}>
        Don't have a token? <span style={{ color: 'var(--olive)' }}>Enter the demo →</span>
      </button>
    </div>
  );

  if (isMobile) {
    return (
      <Shell chrome="none">
        <div data-app-scroll style={{ flex: 1, overflowY: 'auto', minHeight: 0,
          display: 'flex', flexDirection: 'column' }}>
          <div style={{ height: 300, flexShrink: 0 }}>{photo}</div>
          {form}
        </div>
      </Shell>
    );
  }

  return (
    <Shell chrome="none">
      <div style={{ flex: 1, display: 'grid', gridTemplateColumns: '1.05fr 0.95fr',
        minHeight: 0 }}>
        <div style={{ minHeight: 0 }}>{photo}</div>
        <div data-app-scroll style={{ overflowY: 'auto', minHeight: 0 }}>{form}</div>
      </div>
    </Shell>
  );
}

Object.assign(window, { LoginScreen });