import React, { useState } from 'react';
import { SpeakerConfig, VoiceOption } from '../types';

interface InputFormProps {
  onSubmit: (topic: string, language: string, speakers: SpeakerConfig) => void;
  isLoading: boolean;
}

const LANGUAGES = [
  { code: 'Portuguese', label: 'Português (Brasil)' },
  { code: 'English', label: 'English (US)' },
  { code: 'Spanish', label: 'Español' },
  { code: 'French', label: 'Français' },
];

const InputForm: React.FC<InputFormProps> = ({ onSubmit, isLoading }) => {
  const [topic, setTopic] = useState('');
  const [language, setLanguage] = useState('Portuguese');
  const [speakers, setSpeakers] = useState<SpeakerConfig>({
    host1: VoiceOption.KORE, // Female sounding
    host2: VoiceOption.FENRIR // Male sounding
  });

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (topic.trim()) {
      onSubmit(topic, language, speakers);
    }
  };

  return (
    <div className="w-full max-w-2xl mx-auto bg-gray-800 rounded-xl p-6 shadow-xl border border-gray-700">
      <form onSubmit={handleSubmit} className="space-y-6">
        
        {/* Topic Input */}
        <div>
          <label htmlFor="topic" className="block text-sm font-medium text-gray-300 mb-2">
            Podcast Topic / News Article
          </label>
          <textarea
            id="topic"
            rows={4}
            className="w-full bg-gray-900 border border-gray-700 rounded-lg p-3 text-white placeholder-gray-500 focus:ring-2 focus:ring-blue-500 focus:outline-none transition-all"
            placeholder="Paste a news article or describe a topic (e.g., 'The future of AI in healthcare')..."
            value={topic}
            onChange={(e) => setTopic(e.target.value)}
            disabled={isLoading}
            required
          />
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          {/* Language Selection */}
          <div>
            <label className="block text-sm font-medium text-gray-300 mb-2">
              Language
            </label>
            <div className="relative">
              <select
                value={language}
                onChange={(e) => setLanguage(e.target.value)}
                disabled={isLoading}
                className="w-full bg-gray-900 border border-gray-700 rounded-lg p-3 text-white appearance-none focus:ring-2 focus:ring-blue-500 focus:outline-none"
              >
                {LANGUAGES.map((lang) => (
                  <option key={lang.code} value={lang.code}>
                    {lang.label}
                  </option>
                ))}
              </select>
              <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-400">
                <svg className="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                  <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/>
                </svg>
              </div>
            </div>
          </div>

          {/* Voice Selection (Simplified) */}
          <div>
             <label className="block text-sm font-medium text-gray-300 mb-2">
              Host Personalities
            </label>
            <div className="flex space-x-2">
               <div className="flex-1 bg-gray-900 border border-gray-700 rounded-lg p-3 flex items-center justify-between">
                  <span className="text-sm text-blue-400 font-semibold">Alex</span>
                  <span className="text-xs text-gray-500">Female (Kore)</span>
               </div>
               <div className="flex-1 bg-gray-900 border border-gray-700 rounded-lg p-3 flex items-center justify-between">
                  <span className="text-sm text-green-400 font-semibold">Jordan</span>
                  <span className="text-xs text-gray-500">Male (Fenrir)</span>
               </div>
            </div>
          </div>
        </div>

        <button
          type="submit"
          disabled={isLoading || !topic.trim()}
          className={`w-full py-4 rounded-lg font-bold text-lg transition-all transform hover:scale-[1.01] active:scale-[0.99] ${
            isLoading || !topic.trim()
              ? 'bg-gray-700 text-gray-500 cursor-not-allowed'
              : 'bg-gradient-to-r from-blue-600 to-purple-600 text-white shadow-lg hover:shadow-blue-500/25'
          }`}
        >
          {isLoading ? 'Processing...' : 'Generate Podcast'}
        </button>
      </form>
    </div>
  );
};

export default InputForm;