import { useState, type FormEvent } from 'react';
import { SocialButtons } from './SocialButtons.js';
import type { LoginFormProps } from './types.js';

/**
 * Email/password login form with optional social login buttons.
 * Styled via CSS custom properties (inherits --bl-* from host app).
 */
export function LoginForm({
  onSubmit,
  providers,
  onSocialLogin,
  isLoading = false,
  error,
  className,
}: LoginFormProps) {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  function handleSubmit(e: FormEvent) {
    e.preventDefault();
    onSubmit(email, password);
  }

  return (
    <div className={className} data-testid="bl-login-form">
      <form
        onSubmit={handleSubmit}
        style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}
      >
        <input
          type="email"
          placeholder="Email"
          value={email}
          onChange={e => setEmail(e.target.value)}
          required
          disabled={isLoading}
          data-testid="bl-login-email"
          style={{
            padding: '10px 12px',
            border: '1px solid var(--bl-border, #ccc)',
            borderRadius: 'var(--bl-radius, 6px)',
            fontSize: '14px',
          }}
        />
        <input
          type="password"
          placeholder="Password"
          value={password}
          onChange={e => setPassword(e.target.value)}
          required
          disabled={isLoading}
          data-testid="bl-login-password"
          style={{
            padding: '10px 12px',
            border: '1px solid var(--bl-border, #ccc)',
            borderRadius: 'var(--bl-radius, 6px)',
            fontSize: '14px',
          }}
        />

        {error && (
          <div
            data-testid="bl-login-error"
            style={{ color: 'var(--bl-error, #dc3545)', fontSize: '13px' }}
          >
            {error}
          </div>
        )}

        <button
          type="submit"
          disabled={isLoading}
          data-testid="bl-login-submit"
          style={{
            padding: '10px 16px',
            border: 'none',
            borderRadius: 'var(--bl-radius, 6px)',
            background: 'var(--bl-primary, #0066ff)',
            color: 'var(--bl-accent-foreground, #fff)',
            cursor: isLoading ? 'not-allowed' : 'pointer',
            fontSize: '14px',
            fontWeight: 600,
            opacity: isLoading ? 0.6 : 1,
          }}
        >
          {isLoading ? 'Signing in...' : 'Sign in'}
        </button>
      </form>

      {providers && providers.length > 0 && onSocialLogin && (
        <>
          <div
            style={{
              display: 'flex',
              alignItems: 'center',
              gap: '12px',
              margin: '16px 0',
              color: 'var(--bl-muted, #999)',
              fontSize: '13px',
            }}
          >
            <hr
              style={{ flex: 1, border: 'none', borderTop: '1px solid var(--bl-border, #eee)' }}
            />
            or
            <hr
              style={{ flex: 1, border: 'none', borderTop: '1px solid var(--bl-border, #eee)' }}
            />
          </div>
          <SocialButtons providers={providers} onSelect={onSocialLogin} disabled={isLoading} />
        </>
      )}
    </div>
  );
}