import React, { useState, useEffect, useRef } from 'react';
import { 
  LayoutDashboard, 
  MessageSquare, 
  Smartphone, 
  Send, 
  Plus, 
  Trash2, 
  CheckCircle, 
  XCircle, 
  Loader2, 
  QrCode,
  LogOut,
  Save,
  Activity,
  Users
} from 'lucide-react';

// --- Components ---

// 1. Sidebar Component
const Sidebar = ({ activeTab, setActiveTab }) => {
  const menus = [
    { id: 'dashboard', label: 'Dashboard', icon: <LayoutDashboard size={20} /> },
    { id: 'templates', label: 'Template Pesan', icon: <MessageSquare size={20} /> },
    { id: 'device', label: 'Koneksi WhatsApp', icon: <Smartphone size={20} /> },
    { id: 'sender', label: 'Kirim Pesan (Blast)', icon: <Send size={20} /> },
  ];

  return (
    <div className="w-64 bg-slate-900 text-white h-screen fixed left-0 top-0 flex flex-col shadow-xl z-10">
      <div className="p-6 border-b border-slate-800 flex items-center gap-3">
        <div className="w-8 h-8 bg-green-500 rounded-lg flex items-center justify-center">
          <MessageSquare size={18} className="text-white" />
        </div>
        <h1 className="text-xl font-bold tracking-tight">WABlaster<span className="text-green-500">.pro</span></h1>
      </div>
      <nav className="flex-1 p-4 space-y-2">
        {menus.map((menu) => (
          <button
            key={menu.id}
            onClick={() => setActiveTab(menu.id)}
            className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg transition-all duration-200 ${
              activeTab === menu.id 
                ? 'bg-green-600 text-white shadow-md shadow-green-900/20' 
                : 'text-slate-400 hover:bg-slate-800 hover:text-white'
            }`}
          >
            {menu.icon}
            <span className="font-medium">{menu.label}</span>
          </button>
        ))}
      </nav>
      <div className="p-4 border-t border-slate-800">
        <div className="bg-slate-800 rounded-lg p-3 text-xs text-slate-400">
          <p>Status Server: <span className="text-green-400 font-bold">Online</span></p>
          <p className="mt-1">v1.0.5 Beta</p>
        </div>
      </div>
    </div>
  );
};

// 2. Dashboard Stats
const DashboardStats = ({ templates, logs, isConnected }) => {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
      <div className="bg-white p-6 rounded-xl shadow-sm border border-slate-100">
        <div className="flex justify-between items-start">
          <div>
            <p className="text-sm font-medium text-slate-500">Status Perangkat</p>
            <h3 className={`text-2xl font-bold mt-2 ${isConnected ? 'text-green-600' : 'text-red-500'}`}>
              {isConnected ? 'Terhubung' : 'Terputus'}
            </h3>
          </div>
          <div className={`p-3 rounded-lg ${isConnected ? 'bg-green-100 text-green-600' : 'bg-red-100 text-red-500'}`}>
            <Activity size={24} />
          </div>
        </div>
      </div>

      <div className="bg-white p-6 rounded-xl shadow-sm border border-slate-100">
        <div className="flex justify-between items-start">
          <div>
            <p className="text-sm font-medium text-slate-500">Total Template</p>
            <h3 className="text-2xl font-bold mt-2 text-slate-800">{templates.length}</h3>
          </div>
          <div className="p-3 bg-blue-100 text-blue-600 rounded-lg">
            <MessageSquare size={24} />
          </div>
        </div>
      </div>

      <div className="bg-white p-6 rounded-xl shadow-sm border border-slate-100">
        <div className="flex justify-between items-start">
          <div>
            <p className="text-sm font-medium text-slate-500">Pesan Terkirim</p>
            <h3 className="text-2xl font-bold mt-2 text-slate-800">
              {logs.filter(l => l.status === 'success').length}
            </h3>
          </div>
          <div className="p-3 bg-indigo-100 text-indigo-600 rounded-lg">
            <Send size={24} />
          </div>
        </div>
      </div>

       <div className="bg-white p-6 rounded-xl shadow-sm border border-slate-100">
        <div className="flex justify-between items-start">
          <div>
            <p className="text-sm font-medium text-slate-500">Total Kontak</p>
            <h3 className="text-2xl font-bold mt-2 text-slate-800">
               {logs.length > 0 ? new Set(logs.map(l => l.number)).size : 0}
            </h3>
          </div>
          <div className="p-3 bg-orange-100 text-orange-600 rounded-lg">
            <Users size={24} />
          </div>
        </div>
      </div>
    </div>
  );
};

// 3. Main App Logic
export default function App() {
  const [activeTab, setActiveTab] = useState('dashboard');
  const [isConnected, setIsConnected] = useState(false);
  const [qrLoading, setQrLoading] = useState(false);
  const [showQr, setShowQr] = useState(false);
  
  // Data States
  const [templates, setTemplates] = useState([
    { id: 1, title: 'Welcome Message', content: 'Halo, terima kasih telah menghubungi kami. Ada yang bisa dibantu?' },
    { id: 2, title: 'Promo Diskon', content: 'Halo! Dapatkan diskon 50% khusus hari ini. Jangan lewatkan!' },
  ]);
  const [logs, setLogs] = useState([]);

  // Form States
  const [newTemplateTitle, setNewTemplateTitle] = useState('');
  const [newTemplateContent, setNewTemplateContent] = useState('');
  const [targetNumbers, setTargetNumbers] = useState('');
  const [selectedTemplate, setSelectedTemplate] = useState('');
  const [isSending, setIsSending] = useState(false);
  const [progress, setProgress] = useState(0);

  // --- Handlers ---

  const handleConnect = () => {
    if (isConnected) {
      setIsConnected(false);
      setShowQr(false);
      return;
    }
    setQrLoading(true);
    // Simulasi loading QR Code
    setTimeout(() => {
      setQrLoading(false);
      setShowQr(true);
      // Simulasi scan otomatis setelah 3 detik (demo experience)
      setTimeout(() => {
        setShowQr(false);
        setIsConnected(true);
      }, 3000);
    }, 1500);
  };

  const handleAddTemplate = () => {
    if (!newTemplateTitle || !newTemplateContent) return;
    const newTemp = {
      id: Date.now(),
      title: newTemplateTitle,
      content: newTemplateContent
    };
    setTemplates([...templates, newTemp]);
    setNewTemplateTitle('');
    setNewTemplateContent('');
  };

  const handleDeleteTemplate = (id) => {
    setTemplates(templates.filter(t => t.id !== id));
  };

  const handleSendMessages = async () => {
    if (!selectedTemplate) {
      alert("Pilih template terlebih dahulu!");
      return;
    }
    if (!targetNumbers) {
      alert("Masukan nomor tujuan!");
      return;
    }
    if (!isConnected) {
      alert("Mohon koneksikan WhatsApp terlebih dahulu di menu 'Koneksi Perangkat'.");
      setActiveTab('device');
      return;
    }

    const numbers = targetNumbers.split('\n').filter(n => n.trim().length > 0);
    const template = templates.find(t => t.id === parseInt(selectedTemplate));

    setIsSending(true);
    setProgress(0);

    // Simulasi Pengiriman
    for (let i = 0; i < numbers.length; i++) {
      const number = numbers[i].trim();
      
      // Simulasi delay jaringan
      await new Promise(r => setTimeout(r, 1000));
      
      const status = Math.random() > 0.1 ? 'success' : 'failed'; // 90% sukses simulasi
      const log = {
        id: Date.now() + i,
        number,
        message: template.content,
        time: new Date().toLocaleTimeString(),
        status
      };

      setLogs(prev => [log, ...prev]);
      setProgress(((i + 1) / numbers.length) * 100);
    }

    setIsSending(false);
    alert("Proses pengiriman selesai!");
  };

  // --- Render Sections ---

  const renderDashboard = () => (
    <div>
      <h2 className="text-2xl font-bold text-slate-800 mb-6">Dashboard Ringkasan</h2>
      <DashboardStats templates={templates} logs={logs} isConnected={isConnected} />
      
      <div className="bg-white rounded-xl shadow-sm border border-slate-100 overflow-hidden">
        <div className="p-6 border-b border-slate-100 flex justify-between items-center">
          <h3 className="font-bold text-slate-800">Riwayat Pengiriman Terakhir</h3>
          <button onClick={() => setLogs([])} className="text-sm text-red-500 hover:text-red-700">Bersihkan Log</button>
        </div>
        <div className="overflow-x-auto">
          <table className="w-full text-left text-sm text-slate-600">
            <thead className="bg-slate-50 text-slate-700 uppercase font-bold text-xs">
              <tr>
                <th className="px-6 py-4">Waktu</th>
                <th className="px-6 py-4">Nomor Tujuan</th>
                <th className="px-6 py-4">Pesan</th>
                <th className="px-6 py-4">Status</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-slate-100">
              {logs.length === 0 ? (
                <tr>
                  <td colSpan="4" className="px-6 py-8 text-center text-slate-400">Belum ada data pengiriman.</td>
                </tr>
              ) : (
                logs.slice(0, 5).map((log) => (
                  <tr key={log.id} className="hover:bg-slate-50">
                    <td className="px-6 py-4">{log.time}</td>
                    <td className="px-6 py-4 font-mono">{log.number}</td>
                    <td className="px-6 py-4 truncate max-w-xs">{log.message}</td>
                    <td className="px-6 py-4">
                      {log.status === 'success' ? (
                        <span className="inline-flex items-center gap-1 text-green-600 bg-green-50 px-2 py-1 rounded-full text-xs font-bold border border-green-100">
                          <CheckCircle size={12} /> Terkirim
                        </span>
                      ) : (
                        <span className="inline-flex items-center gap-1 text-red-600 bg-red-50 px-2 py-1 rounded-full text-xs font-bold border border-red-100">
                          <XCircle size={12} /> Gagal
                        </span>
                      )}
                    </td>
                  </tr>
                ))
              )}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );

  const renderTemplates = () => (
    <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
      {/* Form Buat Template */}
      <div className="lg:col-span-1">
        <div className="bg-white p-6 rounded-xl shadow-sm border border-slate-100 sticky top-6">
          <h3 className="font-bold text-lg text-slate-800 mb-4 flex items-center gap-2">
            <Plus size={20} className="text-green-600" />
            Buat Template Baru
          </h3>
          <div className="space-y-4">
            <div>
              <label className="block text-sm font-medium text-slate-600 mb-1">Judul Template</label>
              <input 
                type="text" 
                value={newTemplateTitle}
                onChange={(e) => setNewTemplateTitle(e.target.value)}
                placeholder="Misal: Promo Lebaran"
                className="w-full px-4 py-2 rounded-lg border border-slate-200 focus:border-green-500 focus:ring-2 focus:ring-green-200 outline-none transition-all"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-600 mb-1">Isi Pesan</label>
              <textarea 
                value={newTemplateContent}
                onChange={(e) => setNewTemplateContent(e.target.value)}
                placeholder="Tulis pesan anda disini..."
                rows="6"
                className="w-full px-4 py-2 rounded-lg border border-slate-200 focus:border-green-500 focus:ring-2 focus:ring-green-200 outline-none transition-all resize-none"
              ></textarea>
              <p className="text-xs text-slate-400 mt-2">Tips: Pesan yang personal meningkatkan respon.</p>
            </div>
            <button 
              onClick={handleAddTemplate}
              disabled={!newTemplateTitle || !newTemplateContent}
              className="w-full bg-green-600 hover:bg-green-700 text-white font-bold py-3 rounded-lg flex items-center justify-center gap-2 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
            >
              <Save size={18} /> Simpan Template
            </button>
          </div>
        </div>
      </div>

      {/* List Template */}
      <div className="lg:col-span-2">
        <h3 className="font-bold text-xl text-slate-800 mb-4">Daftar Template Tersedia</h3>
        <div className="grid gap-4">
          {templates.map((t) => (
            <div key={t.id} className="bg-white p-5 rounded-xl border border-slate-200 hover:border-green-400 transition-all group relative">
              <div className="flex justify-between items-start mb-2">
                <h4 className="font-bold text-slate-700">{t.title}</h4>
                <button 
                  onClick={() => handleDeleteTemplate(t.id)}
                  className="text-slate-400 hover:text-red-500 p-1 rounded-md hover:bg-red-50 transition-colors"
                >
                  <Trash2 size={18} />
                </button>
              </div>
              <div className="bg-slate-50 p-3 rounded-lg text-slate-600 text-sm whitespace-pre-wrap border border-slate-100">
                {t.content}
              </div>
            </div>
          ))}
          {templates.length === 0 && (
            <div className="text-center py-12 bg-white rounded-xl border border-dashed border-slate-300">
              <MessageSquare size={48} className="mx-auto text-slate-300 mb-3" />
              <p className="text-slate-500">Belum ada template. Silahkan buat baru.</p>
            </div>
          )}
        </div>
      </div>
    </div>
  );

  const renderDevice = () => (
    <div className="max-w-4xl mx-auto">
      <div className="bg-white rounded-2xl shadow-lg border border-slate-200 overflow-hidden">
        {/* Header Device */}
        <div className="bg-slate-50 p-6 border-b border-slate-100 text-center">
          <h2 className="text-2xl font-bold text-slate-800">Koneksi WhatsApp</h2>
          <p className="text-slate-500 mt-1">Hubungkan nomor pengirim anda untuk mulai mengirim pesan.</p>
        </div>

        <div className="p-8">
          <div className="flex flex-col md:flex-row items-center gap-12">
             {/* Left: Instructions */}
             <div className="flex-1 space-y-6">
                <div className="flex items-start gap-4">
                  <div className="w-8 h-8 rounded-full bg-green-100 text-green-700 font-bold flex items-center justify-center shrink-0">1</div>
                  <p className="text-slate-600 pt-1">Buka WhatsApp di HP Anda.</p>
                </div>
                <div className="flex items-start gap-4">
                  <div className="w-8 h-8 rounded-full bg-green-100 text-green-700 font-bold flex items-center justify-center shrink-0">2</div>
                  <p className="text-slate-600 pt-1">Ketuk menu <strong>Titik Tiga</strong> (Android) atau <strong>Pengaturan</strong> (iPhone).</p>
                </div>
                <div className="flex items-start gap-4">
                  <div className="w-8 h-8 rounded-full bg-green-100 text-green-700 font-bold flex items-center justify-center shrink-0">3</div>
                  <p className="text-slate-600 pt-1">Pilih <strong>Perangkat Tertaut</strong> lalu <strong>Tautkan Perangkat</strong>.</p>
                </div>
                <div className="flex items-start gap-4">
                  <div className="w-8 h-8 rounded-full bg-green-100 text-green-700 font-bold flex items-center justify-center shrink-0">4</div>
                  <p className="text-slate-600 pt-1">Arahkan kamera ke QR Code di layar ini.</p>
                </div>
             </div>

             {/* Right: QR Display */}
             <div className="flex-1 flex flex-col items-center justify-center">
                <div className="w-64 h-64 bg-slate-100 rounded-xl border-2 border-dashed border-slate-300 flex items-center justify-center relative overflow-hidden group">
                  {isConnected ? (
                    <div className="text-center">
                      <div className="w-20 h-20 bg-green-500 rounded-full flex items-center justify-center mx-auto mb-4 animate-bounce">
                        <CheckCircle size={40} className="text-white" />
                      </div>
                      <p className="font-bold text-green-600">Terhubung!</p>
                      <p className="text-xs text-slate-500 mt-1">Siap mengirim pesan</p>
                    </div>
                  ) : showQr ? (
                    <div className="relative bg-white p-2 animate-in fade-in zoom-in duration-300">
                      {/* Fake QR Pattern */}
                      <div className="grid grid-cols-6 gap-1 w-48 h-48">
                         {[...Array(36)].map((_, i) => (
                           <div key={i} className={`rounded-sm ${Math.random() > 0.5 ? 'bg-black' : 'bg-transparent'}`}></div>
                         ))}
                      </div>
                      {/* Logo Overlay */}
                      <div className="absolute inset-0 flex items-center justify-center">
                        <div className="bg-white p-1 rounded-full shadow-lg">
                           <MessageSquare size={24} className="text-green-500" />
                        </div>
                      </div>
                    </div>
                  ) : qrLoading ? (
                    <div className="flex flex-col items-center gap-2">
                       <Loader2 size={32} className="animate-spin text-green-600" />
                       <span className="text-sm text-slate-500">Membuat sesi QR...</span>
                    </div>
                  ) : (
                    <div className="text-center px-6">
                      <QrCode size={48} className="text-slate-300 mx-auto mb-2" />
                      <p className="text-sm text-slate-400">QR Code akan muncul disini</p>
                    </div>
                  )}
                </div>

                <button 
                  onClick={handleConnect}
                  className={`mt-6 w-64 py-3 rounded-lg font-bold flex items-center justify-center gap-2 transition-all ${
                    isConnected 
                      ? 'bg-red-100 text-red-600 hover:bg-red-200' 
                      : 'bg-green-600 text-white hover:bg-green-700 shadow-lg hover:shadow-green-900/20'
                  }`}
                >
                  {isConnected ? (
                    <><LogOut size={18} /> Putuskan Koneksi</>
                  ) : (
                    <><QrCode size={18} /> {qrLoading ? 'Memproses...' : 'Tampilkan QR Code'}</>
                  )}
                </button>
             </div>
          </div>
        </div>
      </div>
    </div>
  );

  const renderSender = () => (
    <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 h-full">
      {/* Kolom Kiri: Konfigurasi */}
      <div className="flex flex-col gap-6">
        <div className="bg-white p-6 rounded-xl shadow-sm border border-slate-100">
          <h3 className="font-bold text-slate-800 mb-4 flex items-center gap-2">
            <Send size={20} className="text-blue-500" />
            Konfigurasi Pengiriman
          </h3>
          
          <div className="space-y-4">
            {/* Template Selector */}
            <div>
              <label className="block text-sm font-medium text-slate-600 mb-1">Pilih Template</label>
              <select 
                value={selectedTemplate}
                onChange={(e) => setSelectedTemplate(e.target.value)}
                className="w-full px-4 py-2 rounded-lg border border-slate-200 focus:border-blue-500 outline-none bg-slate-50"
              >
                <option value="">-- Pilih Pesan --</option>
                {templates.map(t => (
                  <option key={t.id} value={t.id}>{t.title}</option>
                ))}
              </select>
              {selectedTemplate && (
                <div className="mt-2 p-3 bg-blue-50 rounded-lg text-xs text-blue-800 border border-blue-100 italic">
                  Preview: "{templates.find(t => t.id === parseInt(selectedTemplate))?.content}"
                </div>
              )}
            </div>

            {/* Numbers Input */}
            <div>
              <label className="block text-sm font-medium text-slate-600 mb-1">Daftar Nomor Tujuan</label>
              <textarea 
                value={targetNumbers}
                onChange={(e) => setTargetNumbers(e.target.value)}
                placeholder="08123456789&#10;08198765432&#10;..."
                rows="8"
                className="w-full px-4 py-2 rounded-lg border border-slate-200 focus:border-blue-500 outline-none font-mono text-sm"
              ></textarea>
              <div className="flex justify-between items-center mt-2">
                <span className="text-xs text-slate-400">Satu nomor per baris</span>
                <span className="text-xs font-bold text-slate-600">
                  {targetNumbers ? targetNumbers.split('\n').filter(n => n.trim()).length : 0} Nomor terdeteksi
                </span>
              </div>
            </div>

            {/* Action Button */}
            <button 
              onClick={handleSendMessages}
              disabled={isSending || !isConnected}
              className={`w-full py-4 rounded-xl font-bold flex items-center justify-center gap-2 text-lg shadow-lg transition-all ${
                isSending 
                  ? 'bg-slate-100 text-slate-400 cursor-wait' 
                  : !isConnected
                    ? 'bg-slate-200 text-slate-400 cursor-not-allowed'
                    : 'bg-blue-600 hover:bg-blue-700 text-white hover:shadow-blue-500/30'
              }`}
            >
               {isSending ? (
                 <><Loader2 className="animate-spin" /> Sedang Mengirim ({Math.round(progress)}%)...</>
               ) : (
                 <><Send /> Mulai Blast Pesan</>
               )}
            </button>
            
            {!isConnected && (
              <p className="text-center text-xs text-red-500 bg-red-50 p-2 rounded">
                Perangkat belum terkoneksi. Silahkan scan QR Code di menu Koneksi.
              </p>
            )}
          </div>
        </div>
      </div>

      {/* Kolom Kanan: Live Log */}
      <div className="bg-slate-900 rounded-xl shadow-lg border border-slate-700 flex flex-col overflow-hidden h-[600px] lg:h-auto">
        <div className="p-4 bg-slate-800 border-b border-slate-700 flex justify-between items-center">
           <h3 className="font-mono text-green-400 font-bold flex items-center gap-2">
             <span className="w-2 h-2 rounded-full bg-green-500 animate-pulse"></span>
             TERMINAL LOG
           </h3>
           <span className="text-xs text-slate-400">Live Status</span>
        </div>
        <div className="flex-1 p-4 overflow-y-auto font-mono text-sm space-y-2 scrollbar-thin scrollbar-thumb-slate-700">
           {logs.length === 0 && (
             <div className="text-slate-600 text-center mt-20 italic">Menunggu perintah eksekusi...</div>
           )}
           {logs.map((log) => (
             <div key={log.id} className="flex gap-3 animate-in slide-in-from-left-2 duration-300">
               <span className="text-slate-500">[{log.time}]</span>
               <span className="text-yellow-400">Sending to {log.number}...</span>
               {log.status === 'success' ? (
                 <span className="text-green-500 font-bold">OK [200]</span>
               ) : (
                 <span className="text-red-500 font-bold">FAIL [TIMEOUT]</span>
               )}
             </div>
           ))}
           {isSending && (
             <div className="text-blue-400 animate-pulse">Processing next queue...</div>
           )}
        </div>
      </div>
    </div>
  );

  return (
    <div className="flex min-h-screen bg-slate-50 font-sans">
      <Sidebar activeTab={activeTab} setActiveTab={setActiveTab} />
      
      <main className="flex-1 ml-64 p-8">
        <header className="flex justify-between items-center mb-8">
          <div>
            <h1 className="text-2xl font-bold text-slate-800 capitalize">
              {activeTab === 'dashboard' && 'Ringkasan Aktivitas'}
              {activeTab === 'templates' && 'Manajemen Pesan'}
              {activeTab === 'device' && 'Status Perangkat'}
              {activeTab === 'sender' && 'Kirim Pesan Massal'}
            </h1>
            <p className="text-slate-500 text-sm">Kelola kampanye WhatsApp marketing anda dengan mudah.</p>
          </div>
          <div className="flex items-center gap-3 bg-white px-4 py-2 rounded-full border border-slate-200 shadow-sm">
            <div className={`w-3 h-3 rounded-full ${isConnected ? 'bg-green-500 animate-pulse' : 'bg-red-500'}`}></div>
            <span className="text-sm font-medium text-slate-600">
              {isConnected ? '+62 812-XXXX-8899' : 'Offline'}
            </span>
          </div>
        </header>

        <div className="animate-in fade-in duration-500">
          {activeTab === 'dashboard' && renderDashboard()}
          {activeTab === 'templates' && renderTemplates()}
          {activeTab === 'device' && renderDevice()}
          {activeTab === 'sender' && renderSender()}
        </div>
      </main>
    </div>
  );
}