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

/**
 * Forgot password form — email input to request a reset link.
 * Styled via CSS custom properties (inherits --bl-* from host app).
 */
export function ForgotPasswordForm({
  onSubmit,
  isLoading = false,
  error,
  success,
  onBack,
  className,
}: ForgotPasswordFormProps) {
  const [email, setEmail] = useState('');

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

  const inputStyle = {
    padding: '10px 12px',
    border: '1px solid var(--bl-border, #ccc)',
    borderRadius: 'var(--bl-radius, 6px)',
    fontSize: '14px',
    width: '100%',
    boxSizing: 'border-box' as const,
  };

  return (
    <div className={className} data-testid="bl-forgot-password-form">
      <form
        onSubmit={handleSubmit}
        style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}
      >
        <div style={{ fontSize: '14px', color: 'var(--bl-text, #333)' }}>
          Enter your email address and we'll send you a link to reset your password.
        </div>

        <input
          type="email"
          placeholder="Email"
          value={email}
          onChange={e => setEmail(e.target.value)}
          required
          disabled={isLoading}
          data-testid="bl-forgot-email"
          style={inputStyle}
        />

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

        {success && (
          <div
            data-testid="bl-forgot-success"
            style={{ color: 'var(--bl-success, #22c55e)', fontSize: '13px' }}
          >
            {success}
          </div>
        )}

        <button
          type="submit"
          disabled={isLoading || email.length === 0}
          data-testid="bl-forgot-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 ? 'Sending...' : 'Send reset link'}
        </button>

        {onBack && (
          <button
            type="button"
            onClick={onBack}
            data-testid="bl-forgot-back"
            style={{
              padding: '8px',
              border: 'none',
              background: 'transparent',
              color: 'var(--bl-link, #0066ff)',
              cursor: 'pointer',
              fontSize: '13px',
              textDecoration: 'underline',
            }}
          >
            Back to sign in
          </button>
        )}
      </form>
    </div>
  );
}
