import { useState } from 'react';
import { isValidEmail } from './leadStore';
import type { WidgetTranslations } from '../i18n';

interface LeadGateViewProps {
  /** Resolves false when the address could not be saved. */
  onSubmit: (email: string) => Promise<boolean>;
  /** The way out. Remembered, so the visitor is not asked again. */
  onSkip: () => void;
  t: WidgetTranslations['lead'];
}

/**
 * The one screen between the first try-on and the rest of them.
 *
 * Three things are deliberate: the purpose is stated before the field, the
 * consent box starts unticked and is required to send, and "not now" is a
 * plain button rather than a grey afterthought. A visitor who declines keeps
 * their first try-on and their gallery.
 */
export function LeadGateView({ onSubmit, onSkip, t }: LeadGateViewProps) {
  const [email, setEmail] = useState('');
  const [consent, setConsent] = useState(false);
  const [isSending, setIsSending] = useState(false);
  const [failed, setFailed] = useState(false);

  const canSubmit = isValidEmail(email) && consent && !isSending;

  const handleSubmit = async (event: React.FormEvent) => {
    event.preventDefault();
    if (!canSubmit) return;
    setIsSending(true);
    setFailed(false);
    const saved = await onSubmit(email.trim());
    if (!saved) {
      setFailed(true);
      setIsSending(false);
    }
    // On success the parent moves us off this screen, so there is nothing to
    // reset: unsetting isSending here would only flash the button back.
  };

  return (
    <form className="aisthetix-lead" onSubmit={handleSubmit}>
      {/* No heading of its own: the modal header already carries t.title, and
          two identical headings stacked on each other is what that looked like. */}
      <p className="aisthetix-lead-purpose">{t.purpose}</p>

      <label className="aisthetix-lead-label" htmlFor="aisthetix-lead-email">
        {t.emailLabel}
      </label>
      <input
        id="aisthetix-lead-email"
        className="aisthetix-lead-input"
        type="email"
        inputMode="email"
        autoComplete="email"
        placeholder={t.emailPlaceholder}
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />

      <label className="aisthetix-lead-consent">
        <input
          type="checkbox"
          checked={consent}
          onChange={(e) => setConsent(e.target.checked)}
        />
        <span>{t.consent}</span>
      </label>

      {failed && (
        <p className="aisthetix-lead-error" role="alert">
          {t.error}
        </p>
      )}

      <div className="aisthetix-lead-actions">
        <button
          type="submit"
          disabled={!canSubmit}
          className="aisthetix-btn aisthetix-btn-primary"
        >
          {isSending ? t.sending : t.submit}
        </button>
        <button
          type="button"
          onClick={onSkip}
          className="aisthetix-btn aisthetix-btn-secondary"
        >
          {t.skip}
        </button>
      </div>
    </form>
  );
}