// Five Nodes Hospital — Login gate
const { useState: useStateLogin } = React;

const GoogleGlyph = () => (
  <svg width="18" height="18" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
    <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
    <path fill="#FBBC05" d="M5.84 14.1c-.22-.66-.35-1.36-.35-2.1s.13-1.44.35-2.1V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.61z"/>
    <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
  </svg>
);

const Login = () => {
  const t = (k) => window.__t ? window.__t(k) : k;
  const [submitting, setSubmitting] = useStateLogin(false);
  const [error, setError] = useStateLogin('');
  const [step, setStep] = useStateLogin('email');
  const [email, setEmail] = useStateLogin('');
  const [otp, setOtp] = useStateLogin('');

  const handleGoogle = async () => {
    setError(''); setSubmitting(true);
    try { await window.__api.signInWithGoogle(); }
    catch (e) { setError(e.message || 'Sign in failed'); setSubmitting(false); }
  };

  const handleSendOtp = async (e) => {
    e.preventDefault();
    setError('');
    if (!email) { setError('Please enter your email'); return; }
    setSubmitting(true);
    try {
      await window.__api.sendEmailOtp(email);
      setStep('otp');
    } catch (err) {
      setError(err.message || 'Failed to send code');
    } finally {
      setSubmitting(false);
    }
  };

  const handleVerifyOtp = async (e) => {
    e.preventDefault();
    setError('');
    if (!otp || otp.length < 6) { setError('Enter the 6-digit code'); return; }
    setSubmitting(true);
    try {
      await window.__api.verifyEmailOtp(email, otp);
    } catch (err) {
      setError(err.message || 'Invalid or expired code');
      setSubmitting(false);
    }
  };

  const resetEmail = () => { setStep('email'); setOtp(''); setError(''); };

  return (
    <div style={{
      minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center',
      background: 'var(--bg)', color: 'var(--fg)', padding: 40
    }}>
      <div style={{
        background: 'var(--bg-elev)', border: '1px solid var(--line)', borderRadius: 14,
        padding: '48px 44px', width: '100%', maxWidth: 440,
        boxShadow: 'var(--shadow-md)', textAlign: 'center'
      }}>
        <div style={{
          width: 60, height: 60, margin: '0 auto 24px',
          background: 'var(--accent)', color: 'var(--accent-ink)',
          borderRadius: 14, display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontFamily: 'var(--serif)', fontStyle: 'italic',
          fontSize: 30, fontWeight: 600
        }}>F</div>

        <div className="mono" style={{ fontSize: 10.5, color: 'var(--fg-3)', textTransform: 'uppercase', letterSpacing: '0.2em', marginBottom: 10 }}>{t('login.tag')}</div>

        <h1 style={{ margin: '0 0 10px', fontSize: 24, fontWeight: 500, fontFamily: 'var(--sans)', letterSpacing: '-0.015em' }}>
          {t('login.title')}
        </h1>

        <p style={{ color: 'var(--fg-2)', fontSize: 14, margin: '0 0 28px', lineHeight: 1.6 }}>
          {t('login.body')}
        </p>

        <button
          onClick={handleGoogle}
          disabled={submitting}
          style={{
            width: '100%', padding: '12px 16px',
            background: 'var(--bg-elev)', color: 'var(--fg)',
            border: '1px solid var(--line-2)', borderRadius: 10,
            fontSize: 14, fontWeight: 500,
            cursor: submitting ? 'wait' : 'pointer',
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 12,
            transition: 'background 0.12s, border-color 0.12s'
          }}
          onMouseEnter={e => { if (!submitting) e.currentTarget.style.background = 'var(--bg-soft)'; }}
          onMouseLeave={e => { e.currentTarget.style.background = 'var(--bg-elev)'; }}
        >
          <GoogleGlyph />
          <span>{t('login.google')}</span>
        </button>

        <div style={{
          display: 'flex', alignItems: 'center', gap: 12,
          margin: '20px 0', color: 'var(--fg-4)', fontSize: 11,
          textTransform: 'uppercase', letterSpacing: '0.14em'
        }}>
          <div style={{ flex: 1, height: 1, background: 'var(--line)' }} />
          <span>or</span>
          <div style={{ flex: 1, height: 1, background: 'var(--line)' }} />
        </div>

        {step === 'email' ? (
          <form onSubmit={handleSendOtp}>
            <div style={{ textAlign: 'left', marginBottom: 14 }}>
              <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--fg)', marginBottom: 4 }}>
                Sign in with email
              </div>
              <div style={{ fontSize: 13, color: 'var(--fg-3)', lineHeight: 1.5 }}>
                Enter your email and we'll send you a 6-digit code to sign in.
              </div>
            </div>
            <input
              type="email" value={email} onChange={e => setEmail(e.target.value)}
              placeholder="you@example.com" autoComplete="email" required disabled={submitting}
              style={{
                width: '100%', padding: '12px 14px', boxSizing: 'border-box',
                background: 'var(--bg-elev)', color: 'var(--fg)',
                border: '1px solid var(--line-2)', borderRadius: 10,
                fontSize: 14, marginBottom: 10, outline: 'none'
              }}
            />
            <button type="submit" disabled={submitting} style={{
              width: '100%', padding: '12px 16px',
              background: 'var(--fg)', color: 'var(--bg-elev)',
              border: '1px solid var(--fg)', borderRadius: 10,
              fontSize: 14, fontWeight: 500, cursor: submitting ? 'wait' : 'pointer'
            }}>
              {submitting ? 'Sending code…' : 'Send code to email'}
            </button>
          </form>
        ) : (
          <form onSubmit={handleVerifyOtp}>
            <div style={{ textAlign: 'left', marginBottom: 14 }}>
              <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--fg)', marginBottom: 4 }}>
                Enter the 6-digit code
              </div>
              <div style={{ fontSize: 13, color: 'var(--fg-3)', lineHeight: 1.5 }}>
                We sent it to <strong style={{ color: 'var(--fg)' }}>{email}</strong>.
                {' '}
                <a href="#" onClick={(e) => { e.preventDefault(); resetEmail(); }} style={{ color: 'var(--fg)', textDecoration: 'underline' }}>
                  Use a different email
                </a>
              </div>
            </div>
            <input
              type="text" inputMode="numeric" pattern="[0-9]{6}" maxLength={6}
              value={otp} onChange={e => setOtp(e.target.value.replace(/\D/g, ''))}
              placeholder="123456" autoComplete="one-time-code" required disabled={submitting} autoFocus
              style={{
                width: '100%', padding: '12px 14px', boxSizing: 'border-box',
                background: 'var(--bg-elev)', color: 'var(--fg)',
                border: '1px solid var(--line-2)', borderRadius: 10,
                fontSize: 18, letterSpacing: '0.4em', textAlign: 'center',
                fontFamily: 'var(--mono, monospace)', marginBottom: 10, outline: 'none'
              }}
            />
            <button type="submit" disabled={submitting} style={{
              width: '100%', padding: '12px 16px',
              background: 'var(--fg)', color: 'var(--bg-elev)',
              border: '1px solid var(--fg)', borderRadius: 10,
              fontSize: 14, fontWeight: 500, cursor: submitting ? 'wait' : 'pointer'
            }}>
              {submitting ? 'Verifying…' : 'Verify and sign in'}
            </button>
          </form>
        )}

        {error && (
          <div style={{
            marginTop: 18, padding: '10px 12px',
            background: 'rgba(185,28,28,0.08)', color: 'var(--neg)',
            border: '1px solid rgba(185,28,28,0.2)', borderRadius: 8, fontSize: 13
          }}>{error}</div>
        )}
      </div>
    </div>
  );
};

window.Login = Login;