import React, { useState } from 'react';
import { Copy, Sparkles, User, Briefcase, MessageSquare, ShieldAlert, CheckCircle, RefreshCcw, Layout, Smartphone, Quote, Trash2 } from 'lucide-react';

const App = () => {
  // Konstanta Awal
  const initialData = {
    targetAudiens: "Aparatur Sipil Negara (ASN/PNS) dan Pegawai BUMN",
    bisnisKonsep: "Pola 1-1-1 Shuang Hor",
    deskripsiBisnis: "Sistem substitusi konsumsi kopi/produk kesehatan menjadi aset produktif dengan membangun jaringan secara konsisten selama 1 tahun.",
    expertPersona: "Pakar Komunikasi Publik dan Digital Marketer Senior",
    tone: "Formal, Edukatif, dan Berwibawa",
    terminologi: "Akselerasi, Mitigasi Risiko, Akuntabilitas, Portofolio, Integritas",
    larangan: "Bahasa agresif, janji cepat kaya, gaya jualan hard-sell",
    framework: 'aida',
    platform: 'ig'
  };

  const categories = [
    { 
      id: 'asn',
      label: "ASN / BUMN", 
      value: "Aparatur Sipil Negara (ASN/PNS) dan Pegawai BUMN", 
      expert: "Pakar Komunikasi Publik dan Digital Marketer Senior", 
      tone: "Formal, Edukatif, dan Berwibawa",
      terminologi: "Akselerasi, Mitigasi Risiko, Akuntabilitas, Portofolio, Integritas"
    },
    { 
      id: 'karyawan',
      label: "Karyawan Swasta", 
      value: "Karyawan Swasta Millennial & Gen-Z", 
      expert: "Strategist Karir & Business Coach", 
      tone: "Profesional namun Santai (Semi-Formal)",
      terminologi: "Work-Life Balance, Passive Income, Side Hustle, Financial Freedom, Eskalasi"
    },
    { 
      id: 'irt',
      label: "Ibu Rumah Tangga", 
      value: "Ibu Rumah Tangga yang ingin produktif", 
      expert: "Mompreneur Mentor & Financial Planner Keluarga", 
      tone: "Empatik, Hangat, dan Menginspirasi",
      terminologi: "Dana Pendidikan, Manajemen Waktu, Fleksibilitas, Kesejahteraan Keluarga"
    }
  ];

  const frameworks = [
    { id: 'aida', label: 'AIDA', desc: 'Attention, Interest, Desire, Action' },
    { id: 'pas', label: 'PAS', desc: 'Problem, Agitation, Solution' },
    { id: 'storytelling', label: 'Storytelling', desc: 'Personal Transformation Journey' }
  ];

  const platforms = [
    { id: 'ig', label: 'Instagram', icon: '📸' },
    { id: 'linkedin', label: 'LinkedIn', icon: '💼' },
    { id: 'fb', label: 'Facebook', icon: '👥' },
    { id: 'tiktok', label: 'TikTok (Script)', icon: '📱' }
  ];

  const [formData, setFormData] = useState(initialData);
  const [generatedPrompt, setGeneratedPrompt] = useState("");
  const [isCopied, setIsCopied] = useState(false);

  const handleCategorySelect = (cat) => {
    setFormData({
      ...formData,
      targetAudiens: cat.value,
      expertPersona: cat.expert,
      tone: cat.tone,
      terminologi: cat.terminologi
    });
  };

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

  const resetForm = () => {
    setFormData(initialData);
    setGeneratedPrompt("");
  };

  const generatePrompt = () => {
    const selectedPlatform = platforms.find(p => p.id === formData.platform)?.label;
    const selectedFramework = frameworks.find(f => f.id === formData.framework);

    const prompt = `Bertindaklah sebagai ${formData.expertPersona || "seorang pakar komunikasi bisnis"}. Spesialisasi Anda adalah menciptakan konten yang sangat relevan untuk audiens: ${formData.targetAudiens}.

Tujuan: Buatkan Copywriting ${selectedPlatform} menggunakan Framework ${selectedFramework.label} (${selectedFramework.desc}).

Konteks Bisnis:
Konsep: "${formData.bisnisKonsep}"
Deskripsi: ${formData.deskripsiBisnis}

Gunakan Framework ${selectedFramework.label} dengan detail berikut:
${formData.framework === 'aida' ? 
`- Attention: Buat headline yang memicu rasa penasaran sesuai keresahan ${formData.targetAudiens}.
- Interest: Sajikan fakta atau data tentang pentingnya solusi ini bagi mereka.
- Desire: Hubungkan manfaat ${formData.bisnisKonsep} dengan impian masa depan mereka.
- Action: Instruksi langkah selanjutnya yang profesional.` : ''}
${formData.framework === 'pas' ? 
`- Problem: Identifikasi kesulitan ekonomi atau tekanan waktu yang dihadapi ${formData.targetAudiens}.
- Agitation: Jelaskan konsekuensi jangka panjang jika masalah ini tidak segera dicari solusinya.
- Solution: Hadirkan ${formData.bisnisKonsep} sebagai jalan keluar yang aman dan logis.` : ''}
${formData.framework === 'storytelling' ? 
`- Pembuka: Gunakan hook naratif tentang seseorang yang memiliki profil mirip ${formData.targetAudiens}.
- Konflik: Tantangan dalam mencari penghasilan tambahan tanpa mengganggu integritas/waktu utama.
- Resolusi: Bagaimana ${formData.bisnisKonsep} mengubah perspektif dan kondisi finansialnya.` : ''}

Database Kutipan (Integrasikan salah satu sebagai penguat narasi):
1. Robert Kiyosaki: "Orang kaya membangun jaringan, yang lain mencari pekerjaan."
2. Warren Buffett: "Jika tak menghasilkan uang saat tidur, Anda akan bekerja sampai akhir hayat."

Kriteria Teknis:
- Karakter/Tone: ${formData.tone}.
- Terminologi yang harus muncul: ${formData.terminologi}.
- Optimasi Platform: Sesuaikan gaya bahasa untuk ${selectedPlatform}.
- LARANGAN: ${formData.larangan}.

Output yang diminta:
1. Headline yang menarik.
2. Body Copy lengkap sesuai framework.
3. Call to Action (CTA).
4. Rekomendasi 5-7 Hashtag yang relevan.`;
    
    setGeneratedPrompt(prompt);
  };

  const copyToClipboard = () => {
    const textArea = document.createElement("textarea");
    textArea.value = generatedPrompt;
    document.body.appendChild(textArea);
    textArea.select();
    document.execCommand('copy');
    setIsCopied(true);
    setTimeout(() => setIsCopied(false), 2000);
    document.body.removeChild(textArea);
  };

  return (
    <div className="min-h-screen bg-slate-50 p-4 md:p-6 font-sans text-slate-900">
      <div className="max-w-7xl mx-auto">
        {/* Navbar */}
        <div className="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-8">
          <div className="flex items-center gap-3">
            <div className="bg-indigo-600 p-2.5 rounded-2xl shadow-lg shadow-indigo-200">
              <Sparkles className="text-white w-6 h-6" />
            </div>
            <div>
              <h1 className="text-2xl font-black text-slate-800 tracking-tight">AI PROMPT MASTER PRO</h1>
              <p className="text-xs text-slate-500 font-medium">Versi 2.5 • Fungsi & Framework Terverifikasi</p>
            </div>
          </div>
          <button 
            onClick={resetForm}
            className="flex items-center gap-2 text-slate-400 hover:text-red-500 transition-colors text-sm font-bold px-4 py-2"
          >
            <Trash2 className="w-4 h-4" /> Reset Form
          </button>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-12 gap-6">
          {/* Left Panel: Configuration */}
          <div className="lg:col-span-7 space-y-6">
            <div className="bg-white p-6 md:p-8 rounded-[2.5rem] shadow-sm border border-slate-200">
              <div className="space-y-8">
                
                {/* 1. Audiens Chips */}
                <div className="space-y-4">
                  <label className="text-xs font-black uppercase text-slate-400 tracking-widest flex items-center gap-2">
                    <User className="w-3 h-3 text-indigo-500" /> Target Audiens Utama
                  </label>
                  <div className="flex flex-wrap gap-2">
                    {categories.map(c => (
                      <button 
                        key={c.id}
                        onClick={() => handleCategorySelect(c)}
                        className={`px-5 py-2.5 rounded-2xl text-sm font-bold transition-all border ${formData.targetAudiens === c.value ? 'bg-indigo-600 text-white border-indigo-600 shadow-xl shadow-indigo-100' : 'bg-slate-50 border-slate-200 text-slate-600 hover:border-indigo-300'}`}
                      >
                        {c.label}
                      </button>
                    ))}
                  </div>
                  <input 
                    name="targetAudiens"
                    value={formData.targetAudiens}
                    onChange={handleInputChange}
                    className="w-full p-4 bg-slate-50 border border-slate-200 rounded-2xl focus:ring-2 focus:ring-indigo-500 outline-none font-medium text-slate-700"
                    placeholder="Atau ketik target audiens manual..."
                  />
                </div>

                {/* 2. Framework & Platform */}
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6 pt-4 border-t border-slate-100">
                  <div className="space-y-3">
                    <label className="text-xs font-black uppercase text-slate-400 tracking-widest flex items-center gap-2">
                      <Layout className="w-3 h-3 text-indigo-500" /> Pilih Framework
                    </label>
                    <select 
                      name="framework"
                      value={formData.framework}
                      onChange={handleInputChange}
                      className="w-full p-4 bg-white border border-slate-200 rounded-2xl outline-none focus:ring-2 focus:ring-indigo-500 font-bold text-slate-700 appearance-none shadow-sm"
                    >
                      {frameworks.map(f => <option key={f.id} value={f.id}>{f.label} - {f.desc}</option>)}
                    </select>
                  </div>
                  <div className="space-y-3">
                    <label className="text-xs font-black uppercase text-slate-400 tracking-widest flex items-center gap-2">
                      <Smartphone className="w-3 h-3 text-indigo-500" /> Pilih Platform
                    </label>
                    <div className="grid grid-cols-4 gap-2">
                      {platforms.map(p => (
                        <button 
                          key={p.id}
                          onClick={() => setFormData({...formData, platform: p.id})}
                          className={`py-3 rounded-2xl text-xl border transition-all flex items-center justify-center ${formData.platform === p.id ? 'bg-indigo-600 border-indigo-600 text-white shadow-lg' : 'bg-slate-50 border-slate-200 hover:bg-white'}`}
                        >
                          {p.icon}
                        </button>
                      ))}
                    </div>
                  </div>
                </div>

                {/* 3. Bisnis Context */}
                <div className="space-y-5 pt-4 border-t border-slate-100">
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <label className="text-xs font-black text-slate-400 uppercase tracking-widest">Nama Konsep</label>
                      <input 
                        name="bisnisKonsep"
                        value={formData.bisnisKonsep}
                        onChange={handleInputChange}
                        className="w-full p-3 bg-slate-50 border border-slate-200 rounded-xl focus:ring-2 focus:ring-indigo-500 outline-none font-medium"
                      />
                    </div>
                    <div className="space-y-2">
                      <label className="text-xs font-black text-slate-400 uppercase tracking-widest">Expert Persona</label>
                      <input 
                        name="expertPersona"
                        value={formData.expertPersona}
                        onChange={handleInputChange}
                        className="w-full p-3 bg-slate-50 border border-slate-200 rounded-xl focus:ring-2 focus:ring-indigo-500 outline-none text-sm"
                      />
                    </div>
                  </div>
                  <div className="space-y-2">
                    <label className="text-xs font-black text-slate-400 uppercase tracking-widest">Deskripsi Solusi</label>
                    <textarea 
                      name="deskripsiBisnis"
                      value={formData.deskripsiBisnis}
                      onChange={handleInputChange}
                      rows="3"
                      className="w-full p-4 bg-slate-50 border border-slate-200 rounded-2xl focus:ring-2 focus:ring-indigo-500 outline-none resize-none font-medium text-slate-700"
                    />
                  </div>
                </div>

                {/* 4. Tone & Terminology */}
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <label className="text-xs font-black text-slate-400 uppercase tracking-widest">Tone Suara</label>
                    <input name="tone" value={formData.tone} onChange={handleInputChange} className="w-full p-3 bg-slate-50 border border-slate-200 rounded-xl text-sm" />
                  </div>
                  <div className="space-y-2">
                    <label className="text-xs font-black text-slate-400 uppercase tracking-widest">Terminologi Wajib</label>
                    <input name="terminologi" value={formData.terminologi} onChange={handleInputChange} className="w-full p-3 bg-slate-50 border border-slate-200 rounded-xl text-sm" />
                  </div>
                </div>

                <button 
                  onClick={generatePrompt}
                  className="w-full py-5 bg-indigo-600 hover:bg-indigo-700 text-white font-black rounded-3xl shadow-2xl shadow-indigo-200 transition-all flex items-center justify-center gap-3 transform active:scale-[0.97] text-lg"
                >
                  <RefreshCcw className="w-6 h-6" /> GENERATE MASTER PROMPT
                </button>

              </div>
            </div>
          </div>

          {/* Right Panel: Output */}
          <div className="lg:col-span-5 flex flex-col gap-6">
            <div className="bg-slate-900 rounded-[3rem] p-8 shadow-2xl h-full flex flex-col border border-slate-800 relative overflow-hidden sticky top-6">
              
              {/* Decorative background elements */}
              <div className="absolute top-0 right-0 w-32 h-32 bg-indigo-500/10 blur-3xl rounded-full -mr-10 -mt-10"></div>
              
              <div className="flex justify-between items-center mb-8 relative z-10">
                <h2 className="text-white font-black text-xl flex items-center gap-3">
                  <Quote className="w-5 h-5 text-indigo-400" /> Hasil Master Prompt
                </h2>
                <div className="flex gap-2">
                  <span className="bg-indigo-500/20 text-indigo-400 text-[10px] font-black px-3 py-1.5 rounded-full border border-indigo-500/30 tracking-tighter uppercase">
                    {formData.platform}
                  </span>
                </div>
              </div>

              <div className="flex-1 overflow-auto bg-black/40 rounded-[2rem] p-6 mb-8 border border-white/5 scrollbar-thin scrollbar-thumb-slate-800 relative z-10">
                {generatedPrompt ? (
                  <div className="text-slate-300 text-sm font-mono leading-relaxed whitespace-pre-wrap">
                    {generatedPrompt}
                  </div>
                ) : (
                  <div className="h-full flex flex-col items-center justify-center text-slate-500 text-center px-6">
                    <div className="bg-slate-800 w-16 h-16 rounded-3xl flex items-center justify-center mb-6 border border-slate-700">
                      <Sparkles className="w-8 h-8 opacity-40 text-indigo-400" />
                    </div>
                    <p className="text-sm font-bold uppercase tracking-widest opacity-40">Belum ada prompt</p>
                    <p className="text-xs mt-2 leading-relaxed italic">Isi konfigurasi di sebelah kiri untuk menghasilkan instruksi AI terbaik Anda.</p>
                  </div>
                )}
              </div>

              {generatedPrompt && (
                <button 
                  onClick={copyToClipboard}
                  className={`py-5 rounded-2xl font-black text-lg flex items-center justify-center gap-3 transition-all relative z-10 transform active:scale-95 ${
                    isCopied 
                      ? 'bg-emerald-500 text-white shadow-lg shadow-emerald-200' 
                      : 'bg-white text-slate-900 hover:bg-indigo-50 shadow-xl'
                  }`}
                >
                  {isCopied ? (
                    <><CheckCircle className="w-6 h-6" /> PROMPT DISALIN!</>
                  ) : (
                    <><Copy className="w-6 h-6" /> SALIN MASTER PROMPT</>
                  )}
                </button>
              )}
            </div>

            <div className="bg-slate-200/50 p-6 rounded-[2rem] border border-slate-200">
              <h4 className="text-[10px] font-black uppercase text-slate-400 mb-3 tracking-widest flex items-center gap-2">
                <ShieldAlert className="w-3 h-3 text-slate-500" /> Petunjuk Keamanan
              </h4>
              <p className="text-[11px] text-slate-600 leading-relaxed font-medium italic">
                Pastikan hasil draf copywriting tetap dikalibrasi ulang dengan data terkini regulasi institusi masing-masing target audiens Anda.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default App;