// firebase-auth.jsx — Login / sign-up screen

function LoginScreen() {
  const [email, setEmail]       = React.useState('');
  const [password, setPassword] = React.useState('');
  const [mode, setMode]         = React.useState('signin');
  const [error, setError]       = React.useState(null);
  const [loading, setLoading]   = React.useState(false);

  const handleGoogle = async () => {
    setLoading(true);
    setError(null);
    try {
      const provider = new firebase.auth.GoogleAuthProvider();
      await fbAuth.signInWithPopup(provider);
    } catch (e) {
      setError(e.message);
      setLoading(false);
    }
  };

  const handleEmail = async (e) => {
    e.preventDefault();
    setLoading(true);
    setError(null);
    try {
      if (mode === 'signup') {
        await fbAuth.createUserWithEmailAndPassword(email, password);
      } else {
        await fbAuth.signInWithEmailAndPassword(email, password);
      }
    } catch (e) {
      setError(e.message);
      setLoading(false);
    }
  };

  const switchMode = (next) => { setMode(next); setError(null); };

  return (
    <div className="lsw">
      <div className="lsw-card card">
        <div className="lsw-brand">
          <img src="assets/KCG.webp" alt="KCGMatch" className="brand-logo" />
          <span className="brand-name">KCGMatch</span>
        </div>

        <h2 className="lsw-h">{mode === 'signin' ? 'Sign in' : 'Create account'}</h2>
        <p className="lsw-sub">
          {mode === 'signin'
            ? 'Sign in to access your vendor context.'
            : 'Create an account to save vendor context across sessions.'}
        </p>

        <button className="btn lsw-google" onClick={handleGoogle} disabled={loading}>
          <svg width="18" height="18" viewBox="0 0 48 48" aria-hidden="true">
            <path fill="#4285F4" d="M44.5 20H24v8.5h11.8C34.7 33.9 30.1 37 24 37c-7.2 0-13-5.8-13-13s5.8-13 13-13c3.1 0 5.9 1.1 8.1 2.9l6.4-6.4C34.6 4.1 29.6 2 24 2 11.8 2 2 11.8 2 24s9.8 22 22 22c11 0 21-8 21-22 0-1.3-.2-2.7-.5-4z"/>
            <path fill="#34A853" d="M6.3 14.7l7 5.1C15.1 16.1 19.2 13 24 13c3.1 0 5.9 1.1 8.1 2.9l6.4-6.4C34.6 4.1 29.6 2 24 2 16.3 2 9.7 7.4 6.3 14.7z"/>
            <path fill="#FBBC05" d="M24 46c5.9 0 10.9-2 14.6-5.3l-6.7-5.5C29.9 37 27.1 38 24 38c-6.1 0-11.3-4.1-13.2-9.6l-7 5.4C7.5 41.7 15.2 46 24 46z"/>
            <path fill="#EA4335" d="M44.5 20H24v8.5h11.8c-.8 2.3-2.3 4.3-4.3 5.7l6.7 5.5C42.4 36 46 30.4 46 24c0-1.3-.2-2.7-.5-4z"/>
          </svg>
          Continue with Google
        </button>

        <div className="lsw-sep"><span>or</span></div>

        <form className="lsw-form" onSubmit={handleEmail}>
          <label className="label" htmlFor="lsw-email">Email</label>
          <input id="lsw-email" className="input" type="email" value={email}
                 autoComplete="email" required disabled={loading}
                 onChange={(e) => setEmail(e.target.value)} />

          <label className="label" htmlFor="lsw-pwd">Password</label>
          <input id="lsw-pwd" className="input" type="password" value={password}
                 autoComplete={mode === 'signup' ? 'new-password' : 'current-password'}
                 required minLength={6} disabled={loading}
                 onChange={(e) => setPassword(e.target.value)} />

          {error && <div className="lsw-error">{error}</div>}

          <button className="btn btn-primary lsw-submit" type="submit" disabled={loading}>
            {loading ? 'Please wait…' : mode === 'signin' ? 'Sign in' : 'Create account'}
          </button>
        </form>

        <div className="lsw-foot">
          {mode === 'signin'
            ? <>No account? <button className="lsw-link" type="button" onClick={() => switchMode('signup')}>Create one</button></>
            : <>Have an account? <button className="lsw-link" type="button" onClick={() => switchMode('signin')}>Sign in</button></>
          }
        </div>
      </div>

      <style>{`
        .lsw {
          min-height: 100vh; display: flex; align-items: center; justify-content: center;
          background: var(--bg); padding: 24px;
        }
        .lsw-card { width: 100%; max-width: 380px; padding: 32px 28px; }
        .lsw-brand { display: flex; align-items: center; gap: 10px; font-weight: 600; margin-bottom: 28px; }
        .lsw-h { margin: 0 0 6px; font-size: 22px; font-weight: 600; letter-spacing: -0.015em; }
        .lsw-sub { margin: 0 0 24px; font-size: 13px; color: var(--fg-muted); line-height: 1.5; }
        .lsw-google { width: 100%; justify-content: center; gap: 10px; height: 40px; font-size: 14px; }
        .lsw-sep {
          display: flex; align-items: center; gap: 12px;
          margin: 20px 0; color: var(--fg-dim); font-size: 12px;
        }
        .lsw-sep::before, .lsw-sep::after {
          content: ''; flex: 1; height: 1px; background: var(--border);
        }
        .lsw-form { display: flex; flex-direction: column; gap: 10px; }
        .lsw-form .label { margin-bottom: -4px; }
        .lsw-error {
          background: var(--bad-bg);
          border: 1px solid oklch(from var(--bad) l calc(c*.5) h / .4);
          color: var(--bad); border-radius: var(--r);
          padding: 8px 12px; font-size: 12.5px; line-height: 1.5;
        }
        .lsw-submit { width: 100%; justify-content: center; height: 40px; font-size: 14px; }
        .lsw-foot { margin-top: 20px; text-align: center; font-size: 13px; color: var(--fg-muted); }
        .lsw-link {
          appearance: none; border: 0; background: transparent; padding: 0;
          color: var(--accent); font: inherit; font-size: 13px;
          cursor: pointer; text-decoration: underline;
        }
        .lsw-link:hover { opacity: 0.8; }
      `}</style>
    </div>
  );
}

Object.assign(window, { LoginScreen });