import React, { useState, useEffect, useRef } from 'react';
import { 
  Camera, 
  Type, 
  ArrowLeft, 
  Sparkles, 
  Copy, 
  RefreshCw, 
  Check, 
  Upload, 
  ChevronRight,
  Loader2,
  AlertCircle
} from 'lucide-react';

const API_KEY = ""; // Environment menyediakan API Key otomatis

export default function App() {
  const [step, setStep] = useState(1);
  const [inputMode, setInputMode] = useState(null);
  const [isLoading, setIsLoading] = useState(false);
  const [result, setResult] = useState(null);
  const [copySuccess, setCopySuccess] = useState(false);
  const [errorMessage, setErrorMessage] = useState("");

  const [formData, setFormData] = useState({
    productName: '',
    productDesc: '',
    userIdea: '',
    photoData: null,
    style: 'Story Telling',
    format: 'Ngomong ke Kamera',
    duration: '30',
    target: 'Audiens Umum',
    platform: 'TikTok'
  });

  const fileInputRef = useRef(null);

  const styles = ['Story Telling', 'Santai atau Kasual', 'Edukasi', 'Soft Selling', 'Hard Selling', 'Review Produk'];
  const formats = ['Ngomong ke Kamera', 'Voice Over', 'Masalah dan Solusi', 'Hook > Jelaskan > CTA'];
  const durations = ['15', '30', '60'];
  const targets = [
    'Cowok 18-24 tahun (Gen Z)', 
    'Cewek 18-24 tahun (Gen Z)', 
    'Cowok 25-34 tahun', 
    'Cewek 25-34 tahun', 
    'Bapak-bapak dan Ibu-ibu', 
    'Audiens Umum'
  ];
  const platforms = ['TikTok', 'Instagram', 'Facebook', 'YouTube'];

  const handleInputChange = (field, value) => {
    setFormData(prev => ({ ...prev, [field]: value }));
  };

  const handleFileUpload = (e) => {
    const file = e.target.files[0];
    if (file) {
      if (file.size > 4 * 1024 * 1024) {
        setErrorMessage("Ukuran foto terlalu besar (maks 4MB)");
        return;
      }
      const reader = new FileReader();
      reader.onloadend = () => {
        handleInputChange('photoData', reader.result);
        setErrorMessage("");
      };
      reader.readAsDataURL(file);
    }
  };

  const generateScript = async () => {
    setIsLoading(true);
    setResult(null);
    setErrorMessage("");

    const systemPrompt = `Kamu adalah pakar Viral Copywriter. Buat script video pendek. 
    Output WAJIB JSON murni: 
    {
      "hook": "1 kalimat pancingan",
      "content": "naskah inti",
      "cta": "ajakan bertindak",
      "longCaption": "caption 3 paragraf persuasif",
      "hashtags": "#tag1 #tag2 #tag3"
    }`;

    const userPrompt = `Produk: ${formData.productName}. Deskripsi: ${formData.productDesc}. Ide: ${formData.userIdea}. Gaya: ${formData.style}. Format: ${formData.format}. Durasi: ${formData.duration}s. Target: ${formData.target}. Platform: ${formData.platform}.`;

    const fetchWithRetry = async (retries = 3, backoff = 1000) => {
      try {
        const isPhoto = inputMode === 'photo' && formData.photoData;
        const response = await fetch(
          `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent?key=${API_KEY}`,
          {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
              contents: [{
                parts: [
                  { text: userPrompt },
                  ...(isPhoto ? [{ inlineData: { mimeType: "image/png", data: formData.photoData.split(',')[1] } }] : [])
                ]
              }],
              systemInstruction: { parts: [{ text: systemPrompt }] },
              generationConfig: { responseMimeType: "application/json" }
            })
          }
        );

        if (!response.ok) throw new Error(`HTTP Error ${response.status}`);
        
        const data = await response.json();
        const textResponse = data.candidates?.[0]?.content?.parts?.[0]?.text;
        
        if (!textResponse) throw new Error("AI tidak memberikan respon teks.");
        
        const parsedData = JSON.parse(textResponse);
        setResult(parsedData);
        setStep(3);
      } catch (error) {
        if (retries > 0) {
          await new Promise(r => setTimeout(r, backoff));
          return fetchWithRetry(retries - 1, backoff * 2);
        }
        setErrorMessage("Gagal membuat script. Silakan periksa koneksi atau coba deskripsi yang lebih pendek.");
        console.error(error);
      } finally {
        setIsLoading(false);
      }
    };

    fetchWithRetry();
  };

  const copyToClipboard = () => {
    const textToCopy = `[HOOK]\n${result.hook}\n\n[ISI]\n${result.content}\n\n[CTA]\n${result.cta}\n\n[CAPTION]\n${result.longCaption}\n\n[TAGS]\n${result.hashtags}`;
    const textArea = document.createElement("textarea");
    textArea.value = textToCopy;
    document.body.appendChild(textArea);
    textArea.select();
    document.execCommand('copy');
    document.body.removeChild(textArea);
    setCopySuccess(true);
    setTimeout(() => setCopySuccess(false), 2000);
  };

  return (
    <div className="min-h-screen bg-slate-50 text-slate-900 font-sans p-4 md:p-8">
      <div className="max-w-2xl mx-auto bg-white rounded-3xl shadow-2xl overflow-hidden border border-slate-100">
        
        {/* Header */}
        <div className="bg-gradient-to-r from-blue-600 to-indigo-700 p-6 text-white flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div className="p-2 bg-white/20 rounded-xl backdrop-blur-sm">
              <Sparkles className="w-6 h-6 fill-white" />
            </div>
            <h1 className="text-xl font-bold tracking-tight">Ardi'Script Generator</h1>
          </div>
          {step > 1 && !isLoading && (
            <button 
              onClick={() => { setStep(step - 1); setErrorMessage(""); }}
              className="flex items-center gap-1 text-sm bg-black/10 hover:bg-black/20 py-1.5 px-3 rounded-full transition-all"
            >
              <ArrowLeft size={16} /> Kembali
            </button>
          )}
        </div>

        <div className="p-6 md:p-8">
          {errorMessage && (
            <div className="mb-6 p-4 bg-red-50 border border-red-100 text-red-600 rounded-2xl flex items-center gap-3 animate-in fade-in zoom-in-95">
              <AlertCircle size={20} />
              <p className="text-sm font-medium">{errorMessage}</p>
            </div>
          )}
          
          {step === 1 && (
            <div className="space-y-6">
              <div className="text-center mb-8">
                <h2 className="text-2xl font-extrabold text-slate-800">Mulai Konten Viral!</h2>
                <p className="text-slate-500 mt-2">Pilih metode input untuk naskah AI Anda.</p>
              </div>

              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <button 
                  onClick={() => { setInputMode('text'); setStep(2); }}
                  className="group relative flex flex-col items-center justify-center p-8 rounded-2xl border-2 border-slate-100 hover:border-blue-500 hover:bg-blue-50/50 transition-all text-center"
                >
                  <div className="w-16 h-16 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
                    <Type size={32} />
                  </div>
                  <h3 className="font-bold text-lg text-slate-800">Ide Script</h3>
                  <p className="text-sm text-slate-500 mt-2">Ketik konsep Anda.</p>
                  <ChevronRight className="absolute right-4 text-slate-300 group-hover:text-blue-500 transition-colors" />
                </button>

                <button 
                  onClick={() => { setInputMode('photo'); setStep(2); }}
                  className="group relative flex flex-col items-center justify-center p-8 rounded-2xl border-2 border-slate-100 hover:border-indigo-500 hover:bg-indigo-50/50 transition-all text-center"
                >
                  <div className="w-16 h-16 bg-indigo-100 text-indigo-600 rounded-full flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
                    <Camera size={32} />
                  </div>
                  <h3 className="font-bold text-lg text-slate-800">Foto Produk</h3>
                  <p className="text-sm text-slate-500 mt-2">Analisis foto produk.</p>
                  <ChevronRight className="absolute right-4 text-slate-300 group-hover:text-indigo-500 transition-colors" />
                </button>
              </div>
            </div>
          )}

          {step === 2 && (
            <div className="space-y-6">
              <div className="bg-slate-50 p-5 rounded-2xl border border-slate-200">
                <label className="block text-sm font-bold text-slate-700 mb-2 uppercase tracking-wider">
                  {inputMode === 'text' ? 'Apa Ide Anda?' : 'Upload Foto Produk'}
                </label>
                
                {inputMode === 'text' ? (
                  <textarea 
                    placeholder="Contoh: Tutorial cara pakai hijab instan agar terlihat tirus..."
                    className="w-full h-24 p-3 bg-white border border-slate-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:outline-none resize-none text-sm"
                    value={formData.userIdea}
                    onChange={(e) => handleInputChange('userIdea', e.target.value)}
                  />
                ) : (
                  <div 
                    onClick={() => fileInputRef.current.click()}
                    className="w-full h-32 border-2 border-dashed border-slate-300 rounded-xl flex flex-col items-center justify-center gap-2 cursor-pointer hover:bg-white transition-colors overflow-hidden"
                  >
                    <input 
                      type="file" 
                      ref={fileInputRef} 
                      className="hidden" 
                      accept="image/*" 
                      onChange={handleFileUpload} 
                    />
                    {formData.photoData ? (
                      <img src={formData.photoData} alt="Preview" className="w-full h-full object-contain" />
                    ) : (
                      <>
                        <Upload className="text-slate-400" />
                        <span className="text-xs text-slate-500 font-medium">Klik untuk pilih foto</span>
                      </>
                    )}
                  </div>
                )}
              </div>

              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <label className="block text-xs font-bold text-slate-500 mb-1">Nama Produk</label>
                  <input 
                    type="text"
                    className="w-full p-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
                    placeholder="Nama produk"
                    value={formData.productName}
                    onChange={(e) => handleInputChange('productName', e.target.value)}
                  />
                </div>
                <div>
                  <label className="block text-xs font-bold text-slate-500 mb-1">Target Audiens</label>
                  <select 
                    className="w-full p-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm"
                    value={formData.target}
                    onChange={(e) => handleInputChange('target', e.target.value)}
                  >
                    {targets.map(t => <option key={t} value={t}>{t}</option>)}
                  </select>
                </div>
              </div>

              <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
                <div className="col-span-1">
                  <label className="block text-[10px] font-bold text-slate-400 mb-1">Platform</label>
                  <select className="w-full p-2 bg-white border rounded-lg text-xs" value={formData.platform} onChange={e => handleInputChange('platform', e.target.value)}>
                    {platforms.map(p => <option key={p} value={p}>{p}</option>)}
                  </select>
                </div>
                <div className="col-span-1">
                  <label className="block text-[10px] font-bold text-slate-400 mb-1">Gaya</label>
                  <select className="w-full p-2 bg-white border rounded-lg text-xs" value={formData.style} onChange={e => handleInputChange('style', e.target.value)}>
                    {styles.map(s => <option key={s} value={s}>{s}</option>)}
                  </select>
                </div>
                <div className="col-span-1">
                   <label className="block text-[10px] font-bold text-slate-400 mb-1">Durasi</label>
                   <select className="w-full p-2 bg-white border rounded-lg text-xs" value={formData.duration} onChange={e => handleInputChange('duration', e.target.value)}>
                    {durations.map(d => <option key={d} value={d}>{d}s</option>)}
                  </select>
                </div>
                <div className="col-span-1">
                   <label className="block text-[10px] font-bold text-slate-400 mb-1">Format</label>
                   <select className="w-full p-2 bg-white border rounded-lg text-xs" value={formData.format} onChange={e => handleInputChange('format', e.target.value)}>
                    {formats.map(f => <option key={f} value={f}>{f}</option>)}
                  </select>
                </div>
              </div>

              <button 
                onClick={generateScript}
                disabled={isLoading}
                className={`w-full py-4 rounded-2xl flex items-center justify-center gap-2 font-bold text-lg shadow-lg transition-all ${isLoading ? 'bg-slate-200 text-slate-400 cursor-wait' : 'bg-blue-600 hover:bg-blue-700 text-white'}`}
              >
                {isLoading ? <><Loader2 className="animate-spin" /> Menghasilkan...</> : <><Sparkles /> Buat Script</>}
              </button>
            </div>
          )}

          {step === 3 && result && (
            <div className="space-y-5 animate-in zoom-in-95">
              <div className="flex items-center justify-between">
                <h3 className="text-lg font-bold text-slate-800">Script Siap!</h3>
                <div className="flex gap-2">
                  <button 
                    onClick={copyToClipboard}
                    className={`p-2 rounded-xl flex items-center gap-2 text-xs font-bold transition-all ${copySuccess ? 'bg-green-100 text-green-700' : 'bg-slate-100 text-slate-700 hover:bg-slate-200'}`}
                  >
                    {copySuccess ? <Check size={16} /> : <Copy size={16} />}
                    Salin Semua
                  </button>
                  <button 
                    onClick={generateScript}
                    disabled={isLoading}
                    className="p-2 bg-blue-50 text-blue-600 rounded-xl hover:bg-blue-100 text-xs font-bold flex items-center gap-2"
                  >
                    <RefreshCw size={16} className={isLoading ? 'animate-spin' : ''} />
                    Ulang
                  </button>
                </div>
              </div>

              <div className="space-y-4">
                <div className="bg-slate-50 rounded-2xl border border-slate-200 overflow-hidden">
                   <div className="bg-slate-100 px-4 py-2 text-[10px] font-bold text-slate-500 uppercase tracking-widest border-b border-slate-200">Video Script</div>
                   <div className="p-4 space-y-3">
                      <div>
                        <span className="text-orange-600 text-[10px] font-black block mb-1">HOOK</span>
                        <p className="text-slate-900 font-bold text-sm">"{result.hook}"</p>
                      </div>
                      <div>
                        <span className="text-blue-600 text-[10px] font-black block mb-1">INTI</span>
                        <p className="text-slate-700 text-xs whitespace-pre-wrap leading-relaxed">{result.content}</p>
                      </div>
                      <div>
                        <span className="text-emerald-600 text-[10px] font-black block mb-1">CTA</span>
                        <p className="text-slate-800 font-bold text-xs underline">{result.cta}</p>
                      </div>
                   </div>
                </div>

                <div className="bg-slate-50 rounded-2xl border border-slate-200 overflow-hidden">
                   <div className="bg-slate-100 px-4 py-2 text-[10px] font-bold text-slate-500 uppercase tracking-widest border-b border-slate-200">Post Description</div>
                   <div className="p-4">
                      <p className="text-slate-700 text-xs leading-relaxed mb-3 whitespace-pre-wrap">{result.longCaption}</p>
                      <p className="text-blue-600 text-xs font-mono font-medium">{result.hashtags}</p>
                   </div>
                </div>
              </div>

              <button onClick={() => { setStep(1); setResult(null); }} className="w-full py-3 text-slate-400 font-bold text-sm hover:text-slate-600 transition-colors">
                Mulai Ulang dari Awal
              </button>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}