import { useState } from 'preact/hooks';

interface NewRecommendationModalProps {
  onClose: () => void;
  onSubmit: (body: {
    main_prompt: string;
    liked_shows: string;
    disliked_shows: string;
    themes: string;
  }) => Promise<void>;
}

export function NewRecommendationModal({ onClose, onSubmit }: NewRecommendationModalProps) {
  const [mainPrompt, setMainPrompt] = useState('');
  const [likedShows, setLikedShows] = useState('');
  const [dislikedShows, setDislikedShows] = useState('');
  const [themes, setThemes] = useState('');
  const [loading, setLoading] = useState(false);

  const handleSubmit = async (e: Event) => {
    e.preventDefault();
    if (!mainPrompt.trim()) return;
    setLoading(true);
    try {
      await onSubmit({
        main_prompt: mainPrompt.trim(),
        liked_shows: likedShows.trim(),
        disliked_shows: dislikedShows.trim(),
        themes: themes.trim(),
      });
      onClose();
    } finally {
      setLoading(false);
    }
  };

  const handleBackdropClick = (e: MouseEvent) => {
    if ((e.target as HTMLElement).classList.contains('modal-backdrop')) {
      onClose();
    }
  };

  return (
    <div class="modal-backdrop" onClick={handleBackdropClick}>
      <div class="modal">
        <div class="modal-header">
          <h2>New Recommendation</h2>
          <button class="modal-close" onClick={onClose} aria-label="Close">×</button>
        </div>

        <form class="modal-form" onSubmit={handleSubmit}>
          <div class="form-group">
            <label for="main-prompt">What are you looking for?</label>
            <textarea
              id="main-prompt"
              class="form-textarea"
              placeholder="Describe what you want to watch. Be as specific as you like — mood, themes, setting, what you've enjoyed before..."
              value={mainPrompt}
              onInput={(e) => setMainPrompt((e.target as HTMLTextAreaElement).value)}
              rows={5}
              required
            />
          </div>

          <div class="form-row">
            <div class="form-group">
              <label for="liked-shows">Shows you liked</label>
              <input
                id="liked-shows"
                type="text"
                class="form-input"
                placeholder="e.g. Breaking Bad, The Wire"
                value={likedShows}
                onInput={(e) => setLikedShows((e.target as HTMLInputElement).value)}
              />
            </div>

            <div class="form-group">
              <label for="disliked-shows">Shows you disliked</label>
              <input
                id="disliked-shows"
                type="text"
                class="form-input"
                placeholder="e.g. Game of Thrones"
                value={dislikedShows}
                onInput={(e) => setDislikedShows((e.target as HTMLInputElement).value)}
              />
            </div>
          </div>

          <div class="form-group">
            <label for="themes">Themes and requirements</label>
            <input
              id="themes"
              type="text"
              class="form-input"
              placeholder="e.g. dramatic setting, historical, sci-fi, etc."
              value={themes}
              onInput={(e) => setThemes((e.target as HTMLInputElement).value)}
            />
          </div>

          <div class="modal-actions">
            <button type="button" class="btn-secondary" onClick={onClose} disabled={loading}>
              Cancel
            </button>
            <button type="submit" class="btn-primary" disabled={loading || !mainPrompt.trim()}>
              {loading ? 'Starting…' : 'Get Recommendations'}
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}
