// login.jsx — Fire Lingo Face-to-Face device login.
//
// First-run screen after install. Traduality staff enter a provisioning
// code here; tablets ship to partners already logged in as a kiosk, so
// end customers never see this. Deliberately plain — one field, one
// button, no branding beyond the Traduality lockup.

function LoginScreen({ onLogin }) {
  const [code, setCode] = React.useState('');
  const [busy, setBusy] = React.useState(false);
  const [error, setError] = React.useState(false);
  const inputRef = React.useRef(null);

  React.useEffect(() => {
    const t = setTimeout(() => inputRef.current && inputRef.current.focus(), 400);
    return () => clearTimeout(t);
  }, []);

  const submit = (e) => {
    if (e) e.preventDefault();
    if (!code.trim() || busy) return;
    setBusy(true);
    setError(false);
    // Mock verification — replace with the real provisioning call.
    setTimeout(() => {
      setBusy(false);
      onLogin && onLogin(code.trim());
    }, 900);
  };

  return (
    <div style={{
      width: '100%', height: '100%',
      background: 'linear-gradient(180deg, #ffffff 0%, var(--td-slate-50) 100%)',
      display: 'flex', flexDirection: 'column', alignItems: 'center',
      padding: '56px 48px 28px', position: 'relative', overflow: 'hidden',
    }}>
      {/* Brand lockup */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 22, flexShrink: 0 }}>
        <BrandMark size={84} tone="light" />
        <div>
          <div style={{
            fontFamily: 'var(--font-display)', fontSize: 52, fontWeight: 900,
            color: 'var(--td-navy)', letterSpacing: '-0.02em', lineHeight: 1,
          }}>Traduality</div>
          <div style={{
            fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 700,
            textTransform: 'uppercase', letterSpacing: '0.16em',
            color: 'var(--td-blue)', marginTop: 7,
          }}>Get closer to your people</div>
        </div>
      </div>

      {/* Centered form */}
      <div style={{
        flex: 1, display: 'flex', flexDirection: 'column',
        alignItems: 'center', justifyContent: 'center', minHeight: 0, width: '100%',
      }}>
        <form onSubmit={submit} style={{
          display: 'flex', flexDirection: 'column', alignItems: 'center',
          gap: 22, width: '100%', maxWidth: 420,
        }}>
          <div style={{ textAlign: 'center' }}>
            <div className="eyebrow" style={{
              fontFamily: 'var(--font-sans)', fontSize: 11, fontWeight: 700,
              textTransform: 'uppercase', letterSpacing: '0.16em',
              color: 'var(--td-blue)',
            }}>Fire Lingo · Face-to-Face</div>
            <h2 style={{
              margin: '10px 0 0',
              fontFamily: 'var(--font-display)', fontSize: 26, fontWeight: 700,
              color: 'var(--td-navy)', letterSpacing: '-0.01em', lineHeight: 1.3,
            }}>
              Enter your login code for Fire&nbsp;Lingo Face-to-Face
            </h2>
          </div>

          <input
            ref={inputRef}
            type="text"
            value={code}
            onChange={(e) => { setCode(e.target.value); setError(false); }}
            placeholder="Login code"
            autoComplete="one-time-code"
            autoCapitalize="characters"
            spellCheck="false"
            aria-label="Login code"
            style={{
              width: '100%', height: 68, padding: '0 22px',
              fontFamily: 'var(--font-mono)', fontSize: 22, fontWeight: 600,
              letterSpacing: '0.14em', textAlign: 'center',
              color: 'var(--td-navy)', background: '#fff',
              border: `1.5px solid ${error ? 'var(--danger)' : 'var(--border-strong)'}`,
              borderRadius: 'var(--radius-lg)',
              boxShadow: 'var(--shadow-xs)', outline: 'none',
              transition: 'border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out)',
            }}
            onFocus={(e) => { e.target.style.borderColor = 'var(--td-blue)'; e.target.style.boxShadow = 'var(--ring-focus)'; }}
            onBlur={(e) => { e.target.style.borderColor = error ? 'var(--danger)' : 'var(--border-strong)'; e.target.style.boxShadow = 'var(--shadow-xs)'; }}
          />

          <button
            type="submit"
            disabled={!code.trim() || busy}
            style={{
              width: '100%', minHeight: 64,
              background: (!code.trim() || busy)
                ? 'var(--td-slate-400)'
                : 'linear-gradient(180deg, var(--td-blue) 0%, var(--td-blue-600) 100%)',
              color: (!code.trim() || busy) ? 'var(--td-slate-700)' : '#fff', border: 'none', borderRadius: 'var(--radius-lg)',
              fontFamily: 'var(--font-display)', fontSize: 20, fontWeight: 800,
              letterSpacing: '-0.01em',
              cursor: (!code.trim() || busy) ? 'not-allowed' : 'pointer',
              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
              boxShadow: (!code.trim() || busy)
                ? 'none'
                : '0 10px 24px rgba(37,100,152,0.32), inset 0 -3px 8px rgba(0,0,0,0.16), inset 0 2px 4px rgba(255,255,255,0.2)',
              transition: 'all 180ms var(--ease-out)',
              WebkitTapHighlightColor: 'transparent',
            }}>
            {busy && (
              <svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round"
                style={{ animation: 'fl-spin 900ms linear infinite' }}>
                <path d="M21 12a9 9 0 1 1-6.22-8.56" />
              </svg>
            )}
            {busy ? 'Signing in…' : 'Log in'}
          </button>
        </form>
      </div>

      {/* Footer */}
      <div style={{
        flexShrink: 0, display: 'flex', alignItems: 'center', gap: 14,
        fontFamily: 'var(--font-sans)', fontSize: 13,
      }}>
        <a href="#" onClick={(e) => e.preventDefault()}>Privacy policy</a>
        <span style={{ width: 1, height: 12, background: 'var(--border)' }} />
        <span style={{ color: 'var(--fg2)' }}>Tablet ID <span style={{
          fontFamily: 'var(--font-mono)', fontSize: 12,
          background: 'var(--td-slate-100)', padding: '2px 6px', borderRadius: 4,
        }}>#TRAD-IP02</span></span>
      </div>
    </div>
  );
}

Object.assign(window, { LoginScreen });