import React, { useState } from 'react';
import { Sparkles, Copy, FileText, Hash, Lightbulb } from 'lucide-react';
import { generateInfluencerContent } from '../services/geminiService';
import { AIContentRequest } from '../types';

const ContentGenerator: React.FC = () => {
  const [topic, setTopic] = useState('');
  const [contentType, setContentType] = useState<AIContentRequest['type']>('script');
  const [platform, setPlatform] = useState<AIContentRequest['platform']>('Instagram');
  const [tone, setTone] = useState('Divertido e Autêntico');
  const [result, setResult] = useState('');
  const [loading, setLoading] = useState(false);

  const handleGenerate = async () => {
    if (!topic) return;
    setLoading(true);
    setResult('');
    
    try {
      const text = await generateInfluencerContent({
        type: contentType,
        topic,
        platform,
        tone
      });
      setResult(text);
    } catch (error) {
      setResult("Erro ao gerar conteúdo.");
    } finally {
      setLoading(false);
    }
  };

  const copyToClipboard = () => {
    navigator.clipboard.writeText(result);
    // Could add toast notification here
  };

  return (
    <div className="flex flex-col lg:grid lg:grid-cols-3 gap-6 lg:h-[calc(100vh-140px)]">
      {/* Input Section */}
      <div className="lg:col-span-1 space-y-6">
        <div>
          <h2 className="text-2xl font-bold text-white flex items-center gap-2">
            <Sparkles className="text-purple-400" />
            Criador IA
          </h2>
          <p className="text-slate-400">Gere roteiros e legendas em segundos.</p>
        </div>

        <div className="bg-slate-800 p-4 md:p-6 rounded-2xl border border-slate-700 space-y-4 shadow-lg">
          <div>
            <label className="block text-sm font-medium text-slate-300 mb-2">O que você quer criar?</label>
            <div className="grid grid-cols-3 gap-2">
              <button 
                onClick={() => setContentType('script')}
                className={`p-3 rounded-xl border flex flex-col items-center gap-2 transition-all active:scale-95 ${contentType === 'script' ? 'bg-purple-600 border-purple-500 text-white shadow-lg shadow-purple-900/50' : 'bg-slate-900 border-slate-700 text-slate-400 hover:border-purple-500/50'}`}
              >
                <FileText size={20} />
                <span className="text-[10px] md:text-xs font-medium">Roteiro</span>
              </button>
              <button 
                onClick={() => setContentType('caption')}
                className={`p-3 rounded-xl border flex flex-col items-center gap-2 transition-all active:scale-95 ${contentType === 'caption' ? 'bg-purple-600 border-purple-500 text-white shadow-lg shadow-purple-900/50' : 'bg-slate-900 border-slate-700 text-slate-400 hover:border-purple-500/50'}`}
              >
                <Hash size={20} />
                <span className="text-[10px] md:text-xs font-medium">Legenda</span>
              </button>
              <button 
                onClick={() => setContentType('ideas')}
                className={`p-3 rounded-xl border flex flex-col items-center gap-2 transition-all active:scale-95 ${contentType === 'ideas' ? 'bg-purple-600 border-purple-500 text-white shadow-lg shadow-purple-900/50' : 'bg-slate-900 border-slate-700 text-slate-400 hover:border-purple-500/50'}`}
              >
                <Lightbulb size={20} />
                <span className="text-[10px] md:text-xs font-medium">Ideias</span>
              </button>
            </div>
          </div>

          <div>
            <label className="block text-sm font-medium text-slate-300 mb-2">Tema / Assunto</label>
            <textarea
              value={topic}
              onChange={(e) => setTopic(e.target.value)}
              placeholder="Ex: Rotina de skincare matinal, Viagem para Paris, Dicas de moda..."
              className="w-full h-32 bg-slate-900 border border-slate-600 rounded-xl p-3.5 text-white placeholder-slate-600 outline-none focus:border-purple-500 resize-none text-base"
            />
          </div>

          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-slate-300 mb-2">Plataforma</label>
              <select 
                value={platform}
                onChange={(e) => setPlatform(e.target.value as any)}
                className="w-full bg-slate-900 border border-slate-600 rounded-xl p-3.5 text-white outline-none focus:border-purple-500 text-base"
              >
                <option value="Instagram">Instagram</option>
                <option value="TikTok">TikTok</option>
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-300 mb-2">Tom de Voz</label>
              <select 
                value={tone}
                onChange={(e) => setTone(e.target.value)}
                className="w-full bg-slate-900 border border-slate-600 rounded-xl p-3.5 text-white outline-none focus:border-purple-500 text-base"
              >
                <option value="Divertido">Divertido</option>
                <option value="Profissional">Profissional</option>
                <option value="Inspirador">Inspirador</option>
                <option value="Polêmico">Polêmico/Opinião</option>
              </select>
            </div>
          </div>

          <button
            onClick={handleGenerate}
            disabled={loading || !topic}
            className={`w-full py-4 rounded-xl font-bold text-white shadow-lg flex items-center justify-center gap-2 transition-all ${loading || !topic ? 'bg-slate-700 cursor-not-allowed' : 'bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-500 hover:to-pink-500 transform hover:scale-[1.02] active:scale-95 shadow-purple-900/30'}`}
          >
            {loading ? (
              <>
                <div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
                Criando Mágica...
              </>
            ) : (
              <>
                <Sparkles size={20} />
                Gerar Conteúdo
              </>
            )}
          </button>
        </div>
      </div>

      {/* Output Section */}
      <div className="lg:col-span-2 bg-slate-800 rounded-2xl border border-slate-700 flex flex-col overflow-hidden shadow-2xl min-h-[400px]">
        <div className="bg-slate-900/50 p-4 border-b border-slate-700 flex justify-between items-center sticky top-0 backdrop-blur-sm z-10">
          <span className="text-sm font-medium text-slate-400">Resultado Gerado</span>
          <button 
            onClick={copyToClipboard}
            disabled={!result}
            className="text-purple-400 hover:text-purple-300 text-sm flex items-center gap-1 disabled:opacity-50 p-2 hover:bg-purple-500/10 rounded-lg transition-colors active:scale-95"
          >
            <Copy size={16} /> Copiar
          </button>
        </div>
        <div className="flex-1 p-4 md:p-6 overflow-y-auto bg-slate-800/50">
          {result ? (
            <div className="prose prose-invert max-w-none whitespace-pre-wrap text-slate-200 text-base leading-relaxed">
              {result}
            </div>
          ) : (
            <div className="h-full flex flex-col items-center justify-center text-slate-600 p-8 text-center">
              <Sparkles size={48} className="mb-4 opacity-20" />
              <p>O conteúdo gerado pela IA aparecerá aqui.</p>
              <p className="text-sm mt-2 opacity-60">Preencha o formulário e clique em Gerar.</p>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

export default ContentGenerator;