import React, { useState } from 'react';

// Custom SVG Icons to ensure zero external dependencies and perfect rendering
const Icons = {
  Sparkles: ({ className = "w-5 h-5" }) => (
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"/></svg>
  ),
  Loader: ({ className = "w-5 h-5 animate-spin" }) => (
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>
  ),
  Copy: ({ className = "w-5 h-5" }) => (
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
  ),
  Check: ({ className = "w-5 h-5" }) => (
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><path d="M20 6 9 17l-5-5"/></svg>
  ),
  Word: ({ className = "w-5 h-5" }) => (
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><polyline points="14 2 14 8 20 8"/><path d="M8 11h8"/><path d="M8 15h8"/><path d="M8 19h8"/></svg>
  ),
  Link: ({ className = "w-5 h-5" }) => (
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
  ),
  Settings: ({ className = "w-5 h-5" }) => (
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>
  )
};

export default function AffiliateScriptApp() {
  const [url, setUrl] = useState('');
  const [count, setCount] = useState('3');
  const [style, setStyle] = useState('Santai & Kekinian (Gaul)');
  const [length, setLength] = useState('Sedang (30-60 detik)');
  
  const [isGenerating, setIsGenerating] = useState(false);
  const [results, setResults] = useState([]);
  const [error, setError] = useState('');
  const [copiedIndex, setCopiedIndex] = useState(null);

  const styleOptions = [
    'Santai & Kekinian (Gaul)',
    'Formal & Profesional',
    'Persuasif & Hard Selling (Langsung jualan)',
    'Storytelling / Curhat (Soft selling)',
    'FOMO / Mendesak (Bikin takut kehabisan)',
    'Lucu & Menghibur (Komedi)'
  ];

  const lengthOptions = [
    'Pendek (< 30 detik / Singkat, padat, jelas)',
    'Sedang (30 - 60 detik / Pas untuk TikTok/Reels)',
    'Panjang (> 60 detik / Edukatif & Detail)'
  ];

  const handleGenerate = async () => {
    if (!url.trim()) {
      setError('Masukkan link produk terlebih dahulu!');
      return;
    }

    setIsGenerating(true);
    setError('');
    setResults([]);

    try {
      const apiKey = ""; // API Key handled by environment
      const apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/gemini-3-flash-preview:generateContent?key=${apiKey}`;
      
      const systemPrompt = `Kamu adalah copywriter affiliate marketing profesional kelas atas untuk platform seperti TikTok, Instagram Reels, dan Shopee Video. Keahlianmu adalah membuat hook yang mematikan, isi yang engage, dan Call to Action (CTA) yang memaksa penonton untuk klik keranjang kuning atau link di bio.`;
      
      const userPrompt = `Buatkan ${count} variasi script konten video affiliate marketing untuk produk dari link berikut:\n${url}\n\nPanduan Ketat:\n1. Bahasa: Indonesia.\n2. Gaya/Nada Bahasa: ${style}.\n3. Panjang tulisan: ${length}.\n4. Format: Berikan output murni narasi/script yang siap dibaca (boleh tambah instruksi visual di dalam kurung siku seperti [Tunjuk keranjang kuning] tapi fokus utamanya adalah teks narasi).\n5. Jika link tidak bisa diakses/dibaca langsung, tebak produk dari URL-nya ATAU buatkan template super engaging yang relevan di mana kreator bisa dengan mudah mengisi detail spesifik produk mereka.`;

      const payload = {
        contents: [{ parts: [{ text: userPrompt }] }],
        systemInstruction: { parts: [{ text: systemPrompt }] },
        generationConfig: {
          responseMimeType: "application/json",
          responseSchema: {
            type: "ARRAY",
            items: { type: "STRING" },
            description: "Array berisi variasi script konten affiliate marketing"
          }
        }
      };

      const response = await fetch(apiUrl, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload)
      });

      if (!response.ok) {
        throw new Error('Gagal terhubung ke server AI.');
      }

      const result = await response.json();
      
      if (result.candidates && result.candidates.length > 0) {
        const jsonText = result.candidates[0].content.parts[0].text;
        const parsedResults = JSON.parse(jsonText);
        setResults(parsedResults);
      } else {
        throw new Error('Format respon tidak sesuai.');
      }
    } catch (err) {
      console.error(err);
      setError('Terjadi kesalahan saat membuat script. Silakan coba lagi. Pastikan link dapat diakses atau deskripsi URL jelas.');
    } finally {
      setIsGenerating(false);
    }
  };

  const handleCopy = (text, index) => {
    // Creating a temporary textarea is a robust way to copy text if clipboard API fails in some iframes
    try {
        navigator.clipboard.writeText(text).then(() => {
            setCopiedIndex(index);
            setTimeout(() => setCopiedIndex(null), 2000);
        });
    } catch (err) {
        const textArea = document.createElement("textarea");
        textArea.value = text;
        document.body.appendChild(textArea);
        textArea.select();
        document.execCommand("copy");
        document.body.removeChild(textArea);
        setCopiedIndex(index);
        setTimeout(() => setCopiedIndex(null), 2000);
    }
  };

  const handleExportWord = (text, index) => {
    // Wrap the text in a simple HTML structure compatible with MS Word (.doc format)
    const header = "<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'><head><meta charset='utf-8'><title>Affiliate Script</title><style>body { font-family: 'Arial', sans-serif; line-height: 1.6; }</style></head><body>";
    const footer = "</body></html>";
    // Convert newlines to HTML line breaks
    const formattedText = text.replace(/\n/g, "<br>");
    const html = header + "<p>" + formattedText + "</p>" + footer;
    
    // Create blob and download link
    const blob = new Blob(['\ufeff', html], { type: 'application/msword' });
    const blobUrl = URL.createObjectURL(blob);
    const link = document.createElement('a');
    
    link.href = blobUrl;
    link.download = `Script_Affiliate_${index + 1}.doc`;
    
    document.body.appendChild(link);
    link.click();
    
    // Cleanup
    document.body.removeChild(link);
    URL.revokeObjectURL(blobUrl);
  };

  return (
    <div className="min-h-screen bg-gray-50 text-gray-800 font-sans p-4 md:p-8">
      <div className="max-w-4xl mx-auto space-y-8">
        
        {/* Header */}
        <div className="text-center space-y-4">
          <div className="inline-flex items-center justify-center p-3 bg-blue-100 rounded-2xl text-blue-600 mb-2">
            <Icons.Sparkles className="w-8 h-8" />
          </div>
          <h1 className="text-3xl md:text-4xl font-extrabold tracking-tight text-gray-900">
            Affiliate Script Generator
          </h1>
          <p className="text-gray-500 max-w-xl mx-auto">
            Sulap link produk menjadi script video affiliate (TikTok, Reels, Shopee) yang memikat dalam hitungan detik.
          </p>
        </div>

        {/* Configuration Card */}
        <div className="bg-white rounded-3xl shadow-sm border border-gray-100 p-6 md:p-8 space-y-6">
          
          {/* URL Input */}
          <div className="space-y-2">
            <label className="text-sm font-semibold text-gray-700 flex items-center gap-2">
              <Icons.Link className="w-4 h-4 text-gray-400" />
              Link Produk
            </label>
            <input 
              type="url" 
              placeholder="Masukkan link Shopee, TikTok Shop, Tokopedia, dll..."
              className="w-full px-4 py-3 rounded-xl border border-gray-200 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all outline-none"
              value={url}
              onChange={(e) => setUrl(e.target.value)}
            />
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            {/* Count Input */}
            <div className="space-y-2">
              <label className="text-sm font-semibold text-gray-700 flex items-center gap-2">
                <Icons.Settings className="w-4 h-4 text-gray-400" />
                Jumlah Hasil
              </label>
              <select 
                className="w-full px-4 py-3 rounded-xl border border-gray-200 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all outline-none bg-white"
                value={count}
                onChange={(e) => setCount(e.target.value)}
              >
                {[1, 2, 3, 4, 5].map(num => (
                  <option key={num} value={num}>{num} Variasi</option>
                ))}
              </select>
            </div>

            {/* Style Input */}
            <div className="space-y-2">
              <label className="text-sm font-semibold text-gray-700">
                Gaya Bahasa
              </label>
              <select 
                className="w-full px-4 py-3 rounded-xl border border-gray-200 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all outline-none bg-white"
                value={style}
                onChange={(e) => setStyle(e.target.value)}
              >
                {styleOptions.map(opt => (
                  <option key={opt} value={opt}>{opt}</option>
                ))}
              </select>
            </div>

            {/* Length Input */}
            <div className="space-y-2">
              <label className="text-sm font-semibold text-gray-700">
                Panjang Tulisan
              </label>
              <select 
                className="w-full px-4 py-3 rounded-xl border border-gray-200 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all outline-none bg-white"
                value={length}
                onChange={(e) => setLength(e.target.value)}
              >
                {lengthOptions.map(opt => (
                  <option key={opt} value={opt}>{opt}</option>
                ))}
              </select>
            </div>
          </div>

          {/* Error Message */}
          {error && (
            <div className="p-4 bg-red-50 text-red-600 rounded-xl text-sm border border-red-100">
              {error}
            </div>
          )}

          {/* Generate Button */}
          <button 
            onClick={handleGenerate}
            disabled={isGenerating}
            className={`w-full py-4 px-6 rounded-xl text-white font-bold text-lg flex items-center justify-center gap-2 transition-all shadow-lg hover:shadow-blue-500/25 ${
              isGenerating ? 'bg-blue-400 cursor-not-allowed' : 'bg-blue-600 hover:bg-blue-700 active:scale-[0.98]'
            }`}
          >
            {isGenerating ? (
              <>
                <Icons.Loader className="w-6 h-6 text-white" />
                Meracik Kata-kata...
              </>
            ) : (
              <>
                <Icons.Sparkles className="w-6 h-6" />
                Generate Script
              </>
            )}
          </button>
        </div>

        {}
        {results.length > 0 && (
          <div className="space-y-6 animate-in fade-in slide-in-from-bottom-4 duration-500">
            <h2 className="text-2xl font-bold text-gray-900 flex items-center gap-2">
              Hasil Generate <span className="text-sm font-normal px-3 py-1 bg-green-100 text-green-700 rounded-full">{results.length} Script</span>
            </h2>
            
            <div className="grid grid-cols-1 gap-6">
              {results.map((script, index) => (
                <div key={index} className="bg-white rounded-3xl shadow-sm border border-gray-100 overflow-hidden flex flex-col transition-all hover:shadow-md">
                  
                  {/* Card Header */}
                  <div className="bg-gray-50 border-b border-gray-100 px-6 py-4 flex items-center justify-between">
                    <span className="font-semibold text-gray-700">Variasi #{index + 1}</span>
                    <div className="flex gap-2">
                      <button 
                        onClick={() => handleCopy(script, index)}
                        className="flex items-center gap-1.5 px-3 py-1.5 bg-white border border-gray-200 text-gray-600 rounded-lg hover:bg-gray-50 hover:text-blue-600 transition-colors text-sm font-medium"
                      >
                        {copiedIndex === index ? (
                          <><Icons.Check className="w-4 h-4 text-green-500"/> Tersalin!</>
                        ) : (
                          <><Icons.Copy className="w-4 h-4"/> Salin</>
                        )}
                      </button>
                      <button 
                        onClick={() => handleExportWord(script, index)}
                        className="flex items-center gap-1.5 px-3 py-1.5 bg-blue-50 border border-blue-100 text-blue-700 rounded-lg hover:bg-blue-100 transition-colors text-sm font-medium"
                      >
                        <Icons.Word className="w-4 h-4"/>
                        Export ke Word
                      </button>
                    </div>
                  </div>
                  
                  {/* Content Area */}
                  <div className="p-6 text-gray-700 whitespace-pre-wrap leading-relaxed">
                    {script}
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}

      </div>
    </div>
  );
}