import React, { useState, useEffect, useRef } from 'react';
import { 
  Activity, 
  Cpu, 
  Zap, 
  Bot, 
  Settings, 
  Download, 
  Wifi, 
  WifiOff, 
  Terminal, 
  Plus, 
  Trash2, 
  Play, 
  CheckCircle, 
  Send, 
  Code, 
  FileCode, 
  Sparkles,
  Server,
  RefreshCw,
  Layers,
  Check,
  Smartphone,
  Info,
  Sun,
  Moon
} from 'lucide-react';

// Mock initial nodes for workflow builder
const INITIAL_WORKFLOW_STEPS = [
  { id: '1', type: 'trigger', label: 'Webhook Diterima', icon: 'zap', desc: 'Menerima payload dari external API' },
  { id: '2', type: 'action', label: 'Ekstraksi Cerdas AI', icon: 'bot', desc: 'AIRA AI menganalisis isi pesan' },
  { id: '3', type: 'action', label: 'Simpan ke Database', icon: 'server', desc: 'Menyimpan log & analytics' }
];

const PRESET_STEPS = [
  { id: 'p1', type: 'action', label: 'Kirim Pesan WhatsApp', icon: 'send', desc: 'Mengirimkan notifikasi instan' },
  { id: 'p2', type: 'action', label: 'Kirim Email Notifikasi', icon: 'mail', desc: 'Kirim via SMTP server AIRA' },
  { id: 'p3', type: 'action', label: 'Format Payload JSON', icon: 'code', desc: 'Transformasi struktur data' },
  { id: 'p4', type: 'action', label: 'Filter Kondisi', icon: 'layers', desc: 'Logika IF/ELSE instan' },
];

export default function App() {
  const [activeTab, setActiveTab] = useState('dashboard');
  const [offlineMode, setOfflineMode] = useState(false);
  const [isInstalled, setIsInstalled] = useState(false);
  const [showNotification, setShowNotification] = useState(false);
  const [notificationMsg, setNotificationMsg] = useState('');
  
  const [isDarkMode, setIsDarkMode] = useState(false); // Default false = Light Mode
  
  // Dashboard states
  const [cpuUsage, setCpuUsage] = useState(32);
  const [ramUsage, setRamUsage] = useState(48);
  const [tasksCompleted, setTasksCompleted] = useState(1420);
  const [activeAgents, setActiveAgents] = useState(12);

  // Workflow Builder states
  const [workflow, setWorkflow] = useState(INITIAL_WORKFLOW_STEPS);
  const [isRunning, setIsRunning] = useState(false);
  const [runningStepIdx, setRunningStepIdx] = useState(-1);

  // Chatbot states
  const [chatInput, setChatInput] = useState('');
  const [chatMessages, setChatMessages] = useState([
    { id: '1', sender: 'aira', text: 'Halo! Saya AIRA (Aplikasi Pintar, Responsif, dan Adaptif). Ada alur otomatisasi yang bisa saya bantu buat hari ini?' }
  ]);
  const [isTyping, setIsTyping] = useState(false);
  const chatEndRef = useRef(null);

  // Copy States for Dev Center
  const [copiedFile, setCopiedFile] = useState(null);

  useEffect(() => {
    const interval = setInterval(() => {
      if (!offlineMode) {
        setCpuUsage(prev => {
          const delta = Math.floor(Math.random() * 15) - 7;
          return Math.max(10, Math.min(95, prev + delta));
        });
        setRamUsage(prev => {
          const delta = Math.floor(Math.random() * 5) - 2;
          return Math.max(30, Math.min(85, prev + delta));
        });
        if (Math.random() > 0.6) {
          setTasksCompleted(prev => prev + 1);
        }
      }
    }, 2000);
    return () => clearInterval(interval);
  }, [offlineMode]);

  useEffect(() => {
    chatEndRef.current?.scrollIntoView({ behavior: 'smooth' });
  }, [chatMessages]);

  const triggerToast = (msg) => {
    setNotificationMsg(msg);
    setShowNotification(true);
    setTimeout(() => setShowNotification(false), 3000);
  };

  // Workflow runner simulation
  const runWorkflowSimulation = async () => {
    if (workflow.length === 0) {
      triggerToast('Tambahkan minimal 1 langkah otomatisasi!');
      return;
    }
    setIsRunning(true);
    for (let i = 0; i < workflow.length; i++) {
      setRunningStepIdx(i);
      await new Promise(resolve => setTimeout(resolve, 1500));
    }
    setRunningStepIdx(-1);
    setIsRunning(false);
    setTasksCompleted(prev => prev + 1);
    triggerToast('Otomatisasi Alur Berhasil Dieksekusi!');
  };

  const addWorkflowStep = (preset) => {
    const newStep = {
      id: Date.now().toString(),
      type: preset.type,
      label: preset.label,
      icon: preset.icon,
      desc: preset.desc
    };
    setWorkflow([...workflow, newStep]);
    triggerToast(`Ditambahkan: ${preset.label}`);
  };

  const removeWorkflowStep = (id) => {
    setWorkflow(workflow.filter(step => step.id !== id));
  };

  // AI Assistant trigger response
  const handleSendMessage = () => {
    if (!chatInput.trim()) return;
    
    const userMsg = { id: Date.now().toString(), sender: 'user', text: chatInput };
    setChatMessages(prev => [...prev, userMsg]);
    setChatInput('');
    setIsTyping(true);

    setTimeout(() => {
      let aiResponseText = 'Maaf, saya sedang mempelajari modul itu. Coba tanyakan tentang "buat otomatisasi WhatsApp" atau "cek status sistem".';
      const prompt = userMsg.text.toLowerCase();

      if (prompt.includes('status') || prompt.includes('sistem') || prompt.includes('health')) {
        aiResponseText = `Kondisi AIRA saat ini sangat prima: CPU ${cpuUsage}%, Memori ${ramUsage}%, dan total ${tasksCompleted} tugas automasi telah diproses dengan lancar.`;
      } else if (prompt.includes('whatsapp') || prompt.includes('wa') || prompt.includes('otomatisasi')) {
        aiResponseText = 'Tentu! Saya bisa mengintegrasikan pemicu (trigger) Webhook ke aksi pengiriman WhatsApp instan. Anda bisa menambahkan preset "Kirim Pesan WhatsApp" pada tab Otomatisasi.';
      } else if (prompt.includes('pwa') || prompt.includes('install')) {
        aiResponseText = 'AIRA mendukung PWA secara penuh! Aplikasi ini dapat diinstal di Google Chrome Anda, responsif di handphone, dan bisa bekerja secara offline berkat Service Worker pintar kami.';
      }

      setChatMessages(prev => [...prev, {
        id: (Date.now() + 1).toString(),
        sender: 'aira',
        text: aiResponseText
      }]);
      setIsTyping(false);
    }, 1200);
  };

  // PWA Mock install
  const handleMockInstall = () => {
    setIsInstalled(true);
    triggerToast('AIRA Terinstal Sukses di Desktop Anda!');
  };

  // Code copier helper
  const copyToClipboard = (text, fileName) => {
    navigator.clipboard.writeText(text);
    setCopiedFile(fileName);
    triggerToast(`${fileName} berhasil disalin!`);
    setTimeout(() => setCopiedFile(null), 2000);
  };

  const manifestCode = `{
  "short_name": "AIRA",
  "name": "AIRA - Aplikasi Pintar, Responsif, Adaptif",
  "icons": [
    {
      "src": "icons/icon-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "icons/icon-512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": "/",
  "background_color": "#f8fafc",
  "theme_color": "#4f46e5",
  "display": "standalone",
  "orientation": "portrait-primary"
}`;

  const serviceWorkerCode = `const CACHE_NAME = 'aira-v1';
const ASSETS = [
  '/',
  '/index.html',
  '/styles.css',
  '/app.js',
  '/icons/icon-192.png'
];

self.addEventListener('install', (e) => {
  e.waitUntil(
    caches.open(CACHE_NAME).then((cache) => {
      return cache.addAll(ASSETS);
    })
  );
});

self.addEventListener('fetch', (e) => {
  e.respondWith(
    caches.match(e.request).then((cachedResponse) => {
      return cachedResponse || fetch(e.request);
    })
  );
});`;

  const themeStyles = {
    wrapper: isDarkMode ? "bg-slate-950 text-slate-100" : "bg-slate-50 text-slate-800",
    sidebar: isDarkMode ? "bg-slate-900 border-slate-800" : "bg-white border-slate-200",
    header: isDarkMode ? "border-slate-900 bg-slate-900/40" : "border-slate-200 bg-white/80",
    card: isDarkMode ? "bg-slate-900/80 border-slate-800/80" : "bg-white border-slate-200 shadow-sm",
    nestedBg: isDarkMode ? "bg-slate-950/40 border-slate-800/50" : "bg-slate-100/80 border-slate-200/60",
    subtleText: isDarkMode ? "text-slate-400" : "text-slate-600",
    brandText: isDarkMode ? "from-white to-slate-400" : "from-slate-900 to-slate-600",
    badge: isDarkMode ? "bg-slate-800 border-slate-700 text-slate-400" : "bg-slate-100 border-slate-200 text-slate-600",
    buttonSec: isDarkMode ? "bg-slate-800 hover:bg-slate-700 text-slate-100 border-slate-700/60" : "bg-slate-100 hover:bg-slate-200 text-slate-700 border-slate-300/60",
    inputBg: isDarkMode ? "bg-slate-900 border-slate-800 text-slate-100" : "bg-white border-slate-200 text-slate-800",
    codeBox: isDarkMode ? "bg-slate-950" : "bg-slate-900 text-slate-100"
  };

  return (
    <div className={`min-h-screen font-sans flex flex-col md:flex-row transition-colors duration-300 ${themeStyles.wrapper}`}>
      {/* Toast Notification */}
      {showNotification && (
        <div className="fixed top-5 right-5 z-50 bg-indigo-600 text-white px-4 py-3 rounded-xl shadow-2xl flex items-center space-x-2 border border-indigo-400 animate-bounce">
          <Sparkles className="h-5 w-5 animate-spin" />
          <span className="font-medium text-sm">{notificationMsg}</span>
        </div>
      )}

      {/* Sidebar Navigation */}
      <aside className={`w-full md:w-64 border-b md:border-b-0 md:border-r p-6 flex flex-col justify-between shrink-0 transition-colors duration-300 ${themeStyles.sidebar}`}>
        <div>
          {/* Brand Header */}
          <div className="flex items-center space-x-3 mb-8">
            <div className="bg-gradient-to-tr from-indigo-500 to-cyan-400 p-2.5 rounded-xl shadow-lg shadow-indigo-500/20">
              <Zap className="h-6 w-6 text-white" />
            </div>
            <div>
              <h1 className={`font-black text-xl tracking-wider bg-gradient-to-r bg-clip-text text-transparent ${themeStyles.brandText}`}>AIRA</h1>
              <p className="text-[10px] text-indigo-500 font-semibold tracking-widest uppercase">PWA Engine v1.0</p>
            </div>
          </div>

          {/* Nav Items */}
          <nav className="space-y-1">
            <button 
              onClick={() => setActiveTab('dashboard')}
              className={`w-full flex items-center space-x-3 px-4 py-3 rounded-xl text-sm font-medium transition-all ${activeTab === 'dashboard' ? 'bg-indigo-600 text-white shadow-md shadow-indigo-600/10' : `${themeStyles.subtleText} hover:bg-slate-500/10`}`}
            >
              <Activity className="h-4 w-4" />
              <span>Dashboard Telemetri</span>
            </button>
            <button 
              onClick={() => setActiveTab('workflow')}
              className={`w-full flex items-center space-x-3 px-4 py-3 rounded-xl text-sm font-medium transition-all ${activeTab === 'workflow' ? 'bg-indigo-600 text-white shadow-md shadow-indigo-600/10' : `${themeStyles.subtleText} hover:bg-slate-500/10`}`}
            >
              <Layers className="h-4 w-4" />
              <span>Otomatisasi Cepat</span>
            </button>
            <button 
              onClick={() => setActiveTab('ai-chat')}
              className={`w-full flex items-center space-x-3 px-4 py-3 rounded-xl text-sm font-medium transition-all ${activeTab === 'ai-chat' ? 'bg-indigo-600 text-white shadow-md shadow-indigo-600/10' : `${themeStyles.subtleText} hover:bg-slate-500/10`}`}
            >
              <Bot className="h-4 w-4" />
              <span>Asisten AI</span>
            </button>
            <button 
              onClick={() => setActiveTab('pwa-dev')}
              className={`w-full flex items-center space-x-3 px-4 py-3 rounded-xl text-sm font-medium transition-all ${activeTab === 'pwa-dev' ? 'bg-indigo-600 text-white shadow-md shadow-indigo-600/10' : `${themeStyles.subtleText} hover:bg-slate-500/10`}`}
            >
              <Smartphone className="h-4 w-4" />
              <span>PWA Dev Center</span>
            </button>
          </nav>
        </div>

        {/* Sidebar Footer Status Indicator */}
        <div className={`mt-8 pt-6 border-t space-y-4 ${isDarkMode ? 'border-slate-800/80' : 'border-slate-200'}`}>
          <div className={`rounded-xl p-3.5 border ${isDarkMode ? 'bg-slate-950 border-slate-800/80' : 'bg-slate-50 border-slate-200'}`}>
            <div className="flex items-center justify-between mb-2">
              <span className="text-[11px] text-slate-400 font-bold uppercase tracking-wider">Status Jaringan</span>
              <button 
                onClick={() => {
                  setOfflineMode(!offlineMode);
                  triggerToast(offlineMode ? "Sistem terhubung kembali online!" : "Sistem berpindah ke Offline Cache!");
                }}
                className={`relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ${offlineMode ? 'bg-amber-600' : 'bg-emerald-600'}`}
              >
                <span className={`pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out ${offlineMode ? 'translate-x-4' : 'translate-x-0'}`} />
              </button>
            </div>
            <div className="flex items-center space-x-2">
              {offlineMode ? (
                <>
                  <WifiOff className="h-4 w-4 text-amber-500 animate-pulse" />
                  <span className="text-xs text-amber-500 font-semibold">Mode Offline PWA</span>
                </>
              ) : (
                <>
                  <Wifi className="h-4 w-4 text-emerald-500 animate-pulse" />
                  <span className="text-xs text-emerald-500 font-semibold">Terhubung Online</span>
                </>
              )}
            </div>
          </div>
          
          <div className="flex items-center space-x-3 text-xs text-slate-400">
            <Info className="h-4 w-4 text-indigo-500 shrink-0" />
            <span>Pintar. Responsif. Adaptif.</span>
          </div>
        </div>
      </aside>

      {/* Main Content Area */}
      <main className="flex-1 flex flex-col min-h-0">
        {/* Header bar */}
        <header className={`h-16 border-b backdrop-blur-md px-6 flex items-center justify-between sticky top-0 z-40 transition-colors duration-300 ${themeStyles.header}`}>
          <div className="flex items-center space-x-4">
            <div className={`text-xs font-semibold py-1 px-3 rounded-full border ${themeStyles.badge}`}>
              {offlineMode ? "Lokal Offline Mode" : "Cloud Terdistribusi"}
            </div>
            {/* Theme Toggle Button */}
            <button 
              onClick={() => {
                setIsDarkMode(!isDarkMode);
                triggerToast(isDarkMode ? "Pindah ke Light Mode!" : "Pindah ke Dark Mode!");
              }}
              className={`p-1.5 rounded-lg border transition ${isDarkMode ? 'border-slate-800 hover:bg-slate-800 text-yellow-400' : 'border-slate-200 hover:bg-slate-100 text-indigo-600'}`}
              title="Ganti Tema Visual"
            >
              {isDarkMode ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
            </button>
          </div>
          <div className="flex items-center space-x-4">
            {/* Install PWA Button Simulator */}
            {!isInstalled && (
              <button 
                onClick={handleMockInstall}
                className="bg-indigo-600 hover:bg-indigo-500 text-white font-semibold text-xs py-1.5 px-3 rounded-lg flex items-center space-x-1.5 transition shadow-lg shadow-indigo-600/20"
              >
                <Download className="h-3.5 w-3.5" />
                <span>Instal AIRA</span>
              </button>
            )}
            {isInstalled && (
              <div className="text-emerald-500 text-xs font-semibold flex items-center space-x-1 bg-emerald-500/10 border border-emerald-500/20 py-1 px-2.5 rounded-lg">
                <Check className="h-3 w-3" />
                <span>Terinstal (PWA App)</span>
              </div>
            )}
            <div className="h-8 w-8 rounded-full bg-indigo-500/20 border border-indigo-500/40 flex items-center justify-center">
              <span className="text-xs font-bold text-indigo-500">AR</span>
            </div>
          </div>
        </header>

        {/* Content Tabs Switcher */}
        <div className="flex-1 p-6 md:p-8 overflow-y-auto">

          {/* TAB: DASHBOARD */}
          {activeTab === 'dashboard' && (
            <div className="space-y-6 max-w-6xl mx-auto">
              {/* Promo Banner / Overview */}
              <div className={`relative overflow-hidden border rounded-2xl p-6 md:p-8 shadow-xl transition-all ${isDarkMode ? 'bg-gradient-to-r from-indigo-900/60 via-slate-900 to-slate-900 border-indigo-500/20' : 'bg-gradient-to-r from-indigo-50 to-white border-slate-200'}`}>
                <div className="absolute -top-10 -right-10 w-40 h-40 bg-indigo-500/10 rounded-full blur-3xl"></div>
                <div className="relative z-10 max-w-2xl">
                  <span className="text-[10px] text-indigo-600 font-bold uppercase tracking-widest px-2.5 py-1 bg-indigo-100 rounded-full border border-indigo-200">Profil Platform</span>
                  <h2 className="text-2xl md:text-3xl font-black mt-3 leading-tight">AIRA: Aplikasi Pintar, Responsif, dan Adaptif</h2>
                  <p className={`text-sm mt-2 leading-relaxed ${themeStyles.subtleText}`}>
                    Sistem otomatisasi performa tinggi yang memadukan keunggulan kecerdasan buatan (*Application Intelligence*) dengan proses integrasi alur kerja super cepat (*Rapid Automation*).
                  </p>
                </div>
              </div>

              {/* Stats Cards */}
              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
                <div className={`border rounded-xl p-5 hover:border-indigo-500/40 transition-all ${themeStyles.card}`}>
                  <div className="flex justify-between items-start">
                    <div>
                      <p className="text-xs text-slate-400 font-semibold tracking-wider uppercase">CPU Core Load</p>
                      <h3 className="text-2xl font-bold mt-1">{cpuUsage}%</h3>
                    </div>
                    <div className="p-2 bg-indigo-500/10 text-indigo-500 rounded-lg">
                      <Cpu className="h-5 w-5" />
                    </div>
                  </div>
                  <div className="w-full bg-slate-200 dark:bg-slate-800 h-1.5 rounded-full mt-4 overflow-hidden">
                    <div className="bg-indigo-500 h-full transition-all duration-1000" style={{ width: `${cpuUsage}%` }}></div>
                  </div>
                </div>

                <div className={`border rounded-xl p-5 hover:border-cyan-500/40 transition-all ${themeStyles.card}`}>
                  <div className="flex justify-between items-start">
                    <div>
                      <p className="text-xs text-slate-400 font-semibold tracking-wider uppercase">Alokasi Ram</p>
                      <h3 className="text-2xl font-bold mt-1">{ramUsage}%</h3>
                    </div>
                    <div className="p-2 bg-cyan-500/10 text-cyan-500 rounded-lg">
                      <Activity className="h-5 w-5" />
                    </div>
                  </div>
                  <div className="w-full bg-slate-200 dark:bg-slate-800 h-1.5 rounded-full mt-4 overflow-hidden">
                    <div className="bg-cyan-500 h-full transition-all duration-1000" style={{ width: `${ramUsage}%` }}></div>
                  </div>
                </div>

                <div className={`border rounded-xl p-5 hover:border-emerald-500/40 transition-all ${themeStyles.card}`}>
                  <div className="flex justify-between items-start">
                    <div>
                      <p className="text-xs text-slate-400 font-semibold tracking-wider uppercase">Job Otomatisasi</p>
                      <h3 className="text-2xl font-bold mt-1">{tasksCompleted}</h3>
                    </div>
                    <div className="p-2 bg-emerald-500/10 text-emerald-500 rounded-lg">
                      <Zap className="h-5 w-5 animate-bounce" />
                    </div>
                  </div>
                  <div className="flex items-center space-x-1.5 text-xs text-emerald-600 mt-4 font-medium">
                    <CheckCircle className="h-3.5 w-3.5" />
                    <span>Seluruh alur berjalan lancar</span>
                  </div>
                </div>

                <div className={`border rounded-xl p-5 hover:border-indigo-500/40 transition-all ${themeStyles.card}`}>
                  <div className="flex justify-between items-start">
                    <div>
                      <p className="text-xs text-slate-400 font-semibold tracking-wider uppercase">Agen Cerdas Aktif</p>
                      <h3 className="text-2xl font-bold mt-1">{activeAgents}</h3>
                    </div>
                    <div className="p-2 bg-indigo-500/10 text-indigo-500 rounded-lg">
                      <Bot className="h-5 w-5" />
                    </div>
                  </div>
                  <div className="text-[11px] text-slate-400 mt-4 flex justify-between items-center">
                    <span>Model: AIRA GPT-v4</span>
                    <span className="text-emerald-500 font-bold">Online</span>
                  </div>
                </div>
              </div>

              {/* Interactive Telemetry & Feature Grid */}
              <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
                {/* Real-time Graph Box */}
                <div className={`border p-6 rounded-2xl flex flex-col justify-between transition-colors duration-300 ${themeStyles.card}`}>
                  <div>
                    <div className="flex justify-between items-center mb-6">
                      <div>
                        <h3 className="font-bold text-base">Performa Node Transmisi</h3>
                        <p className="text-slate-400 text-xs mt-0.5">Statistik muatan pesan & pemrosesan otomasi</p>
                      </div>
                      <div className="flex items-center space-x-2 text-xs">
                        <span className="inline-block w-2.5 h-2.5 rounded-full bg-indigo-500"></span>
                        <span className="text-slate-400">Node Utama</span>
                      </div>
                    </div>
                    {/* Simulated SVG Graphic Bar */}
                    <div className={`h-44 flex items-end justify-between gap-1.5 px-2 p-3 rounded-xl border transition-colors duration-300 ${themeStyles.nestedBg}`}>
                      {[40, 52, 38, 65, 80, 48, 70, 60, 55, 90, 85, 62, 77, 88, 95].map((val, idx) => (
                        <div key={idx} className="flex-1 flex flex-col items-center">
                          <div 
                            style={{ height: `${val}%` }} 
                            className={`w-full rounded-t-sm transition-all duration-1000 ${idx === 14 ? 'bg-indigo-500 shadow-lg shadow-indigo-500/40' : 'bg-indigo-200 dark:bg-slate-800 hover:bg-indigo-500/50'}`}
                          ></div>
                          <span className="text-[9px] text-slate-400 mt-1">{`T${idx + 1}`}</span>
                        </div>
                      ))}
                    </div>
                  </div>
                  <div className={`mt-4 pt-4 border-t flex flex-wrap justify-between items-center text-xs ${isDarkMode ? 'border-slate-800' : 'border-slate-100'}`}>
                    <span>Responsivitas Rata-rata: <strong className="text-indigo-600 dark:text-indigo-400">12ms</strong></span>
                    <span>Kepatuhan SLA: <strong className="text-emerald-600 dark:text-emerald-400">99.98%</strong></span>
                  </div>
                </div>

                {/* Quick Info Box */}
                <div className={`border p-6 rounded-2xl flex flex-col justify-between transition-colors duration-300 ${themeStyles.card}`}>
                  <div className="space-y-4">
                    <h3 className="font-bold text-base flex items-center space-x-2">
                      <Settings className="h-4 w-4 text-indigo-500" />
                      <span>Arsitektur Responsif</span>
                    </h3>
                    <p className={`text-xs leading-relaxed ${themeStyles.subtleText}`}>
                      Mengapa menggunakan PWA? Aplikasi berbasis PWA menjamin AIRA selalu berjalan dalam performa puncak di segala sistem operasi, ringan, dan mandiri tanpa perlu resource besar.
                    </p>
                    <ul className={`space-y-2 text-xs ${themeStyles.subtleText}`}>
                      <li className="flex items-center space-x-2">
                        <span className="text-emerald-500 font-bold">✔</span>
                        <span>Instalasi Instan & Ringan (&lt;5 MB)</span>
                      </li>
                      <li className="flex items-center space-x-2">
                        <span className="text-emerald-500 font-bold">✔</span>
                        <span>Dukungan Kerja Offline Tanpa Koneksi</span>
                      </li>
                      <li className="flex items-center space-x-2">
                        <span className="text-emerald-500 font-bold">✔</span>
                        <span>Push Notifications & Integrasi Sistem</span>
                      </li>
                    </ul>
                  </div>
                  <button 
                    onClick={() => setActiveTab('pwa-dev')}
                    className={`w-full font-semibold text-xs py-2.5 rounded-xl transition border mt-4 ${themeStyles.buttonSec}`}
                  >
                    Buka Konfigurasi PWA
                  </button>
                </div>
              </div>
            </div>
          )}

          {/* TAB: WORKFLOW */}
          {activeTab === 'workflow' && (
            <div className="space-y-6 max-w-5xl mx-auto">
              <div>
                <h2 className="text-xl md:text-2xl font-extrabold flex items-center space-x-2">
                  <Layers className="h-5 w-5 text-indigo-500" />
                  <span>Rapid Automation Builder</span>
                </h2>
                <p className="text-slate-400 text-xs mt-1">Eksperimen menyusun langkah otomatisasi secara cepat dan lihat rantai eksekusi berjalan.</p>
              </div>

              <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
                {/* Node Presets Picker */}
                <div className={`border p-5 rounded-2xl space-y-4 ${themeStyles.card}`}>
                  <h3 className="font-bold text-sm text-indigo-600 dark:text-indigo-400">Preset Aksi Otomatisasi</h3>
                  <p className="text-slate-400 text-xs">Klik salah satu preset di bawah untuk menambahkan ke alur eksekusi AIRA:</p>
                  
                  <div className="space-y-2">
                    {PRESET_STEPS.map((preset) => (
                      <button 
                        key={preset.id}
                        onClick={() => addWorkflowStep(preset)}
                        className={`w-full text-left border p-3 rounded-xl flex items-center space-x-3 transition group ${isDarkMode ? 'bg-slate-950 hover:bg-slate-800/80 border-slate-800/80' : 'bg-slate-50 hover:bg-indigo-50/50 border-slate-200'}`}
                      >
                        <div className="bg-indigo-500/10 text-indigo-500 p-2 rounded-lg group-hover:bg-indigo-500/20">
                          {preset.icon === 'send' && <Send className="h-4 w-4" />}
                          {preset.icon === 'code' && <Code className="h-4 w-4" />}
                          {preset.icon === 'layers' && <Layers className="h-4 w-4" />}
                          {preset.icon === 'mail' && <FileCode className="h-4 w-4" />}
                        </div>
                        <div>
                          <p className="text-xs font-bold flex items-center">
                            <span>{preset.label}</span>
                            <Plus className="h-3 w-3 text-indigo-500 ml-1 opacity-0 group-hover:opacity-100 transition-opacity" />
                          </p>
                          <p className="text-[10px] text-slate-400 mt-0.5">{preset.desc}</p>
                        </div>
                      </button>
                    ))}
                  </div>
                </div>

                {/* Workflow Workspace */}
                <div className={`border p-6 rounded-2xl flex flex-col justify-between ${themeStyles.card}`}>
                  <div>
                    <div className="flex justify-between items-center mb-6">
                      <h3 className="font-bold text-sm text-indigo-500">Rantai Otomatisasi Terpasang</h3>
                      <button 
                        disabled={isRunning}
                        onClick={runWorkflowSimulation}
                        className={`font-semibold text-xs py-1.5 px-3.5 rounded-lg flex items-center space-x-1.5 transition ${isRunning ? 'bg-slate-200 text-slate-400 cursor-not-allowed' : 'bg-emerald-600 hover:bg-emerald-500 text-white'}`}
                      >
                        <Play className="h-3.5 w-3.5 fill-current" />
                        <span>{isRunning ? "Menjalankan..." : "Uji Alur Kerja"}</span>
                      </button>
                    </div>

                    {/* Nodes Visual List */}
                    <div className="space-y-3 relative">
                      {workflow.map((step, idx) => (
                        <div key={step.id} className="relative">
                          {/* Connection Line */}
                          {idx < workflow.length - 1 && (
                            <div className={`absolute left-7 top-12 bottom-[-16px] w-0.5 z-0 ${isDarkMode ? 'bg-slate-800' : 'bg-slate-200'}`}></div>
                          )}

                          <div className={`relative z-10 border p-4 rounded-xl flex items-center justify-between transition-all duration-300 ${runningStepIdx === idx ? 'border-indigo-500 shadow-lg shadow-indigo-500/10 scale-102 bg-indigo-50/60 dark:bg-indigo-950/20' : `${isDarkMode ? 'bg-slate-950 border-slate-800' : 'bg-slate-50/50 border-slate-200'}`}`}>
                            <div className="flex items-center space-x-3.5">
                              {/* Icon Indicator */}
                              <div className={`p-2.5 rounded-lg ${runningStepIdx === idx ? 'bg-indigo-600 text-white animate-bounce' : 'bg-slate-100 dark:bg-slate-900 text-indigo-500'}`}>
                                {step.icon === 'zap' && <Zap className="h-4 w-4" />}
                                {step.icon === 'bot' && <Bot className="h-4 w-4" />}
                                {step.icon === 'server' && <Server className="h-4 w-4" />}
                                {step.icon === 'send' && <Send className="h-4 w-4" />}
                                {step.icon === 'code' && <Code className="h-4 w-4" />}
                                {step.icon === 'layers' && <Layers className="h-4 w-4" />}
                                {step.icon === 'mail' && <FileCode className="h-4 w-4" />}
                              </div>
                              <div>
                                <div className="flex items-center space-x-2">
                                  <span className="text-xs text-slate-400 font-mono font-bold">STEP 0{idx + 1}</span>
                                  <span className={`text-[10px] uppercase tracking-widest px-1.5 py-0.5 rounded ${step.type === 'trigger' ? 'bg-indigo-100 text-indigo-700 border border-indigo-200' : 'bg-slate-200 dark:bg-slate-800 text-slate-500'}`}>
                                    {step.type}
                                  </span>
                                </div>
                                <p className="text-sm font-bold mt-1">{step.label}</p>
                                <p className="text-xs text-slate-400 mt-0.5">{step.desc}</p>
                              </div>
                            </div>

                            {/* Remove / Status Button */}
                            {runningStepIdx === idx ? (
                              <span className="text-xs text-indigo-600 dark:text-indigo-400 animate-pulse font-semibold">Memproses...</span>
                            ) : (
                              <button 
                                disabled={isRunning}
                                onClick={() => removeWorkflowStep(step.id)}
                                className={`p-1.5 rounded-lg transition disabled:opacity-30 ${isDarkMode ? 'text-slate-500 hover:text-rose-400 hover:bg-slate-900' : 'text-slate-400 hover:text-rose-500 hover:bg-slate-100'}`}
                              >
                                <Trash2 className="h-4 w-4" />
                              </button>
                            )}
                          </div>
                        </div>
                      ))}

                      {workflow.length === 0 && (
                        <div className="border border-dashed border-slate-300 dark:border-slate-800 rounded-xl p-8 text-center text-slate-400">
                          <Layers className="h-8 w-8 mx-auto mb-2 text-slate-300 dark:text-slate-600" />
                          <p className="text-sm">Rantai otomatisasi kosong.</p>
                          <p className="text-xs mt-1">Gunakan preset aksi di samping kiri untuk merancang alur kerja.</p>
                        </div>
                      )}
                    </div>
                  </div>

                  <div className={`border-t mt-6 pt-4 text-xs text-slate-400 text-center ${isDarkMode ? 'border-slate-800' : 'border-slate-100'}`}>
                    AIRA Rapid Builder mengotomatisasi API, database, & pesan dengan penanganan cerdas.
                  </div>
                </div>
              </div>
            </div>
          )}

          {/* TAB: AI CHAT */}
          {activeTab === 'ai-chat' && (
            <div className={`max-w-4xl mx-auto h-[calc(100vh-12rem)] flex flex-col justify-between border rounded-2xl overflow-hidden ${themeStyles.card}`}>
              {/* Chat Header */}
              <div className={`px-6 py-4 border-b flex items-center justify-between ${isDarkMode ? 'bg-slate-950 border-slate-800/80' : 'bg-slate-50 border-slate-200'}`}>
                <div className="flex items-center space-x-3">
                  <div className="bg-indigo-500/10 text-indigo-500 p-2 rounded-lg">
                    <Bot className="h-5 w-5" />
                  </div>
                  <div>
                    <h3 className="font-bold text-sm">AIRA Artificial Intelligence</h3>
                    <p className="text-xs text-emerald-600 flex items-center space-x-1">
                      <span className="inline-block w-1.5 h-1.5 rounded-full bg-emerald-500 animate-ping"></span>
                      <span>Sistem Cerdas Aktif</span>
                    </p>
                  </div>
                </div>
                <div className="text-xs text-slate-400 font-mono">Model: GPT-v4</div>
              </div>

              {/* Chat Messages */}
              <div className="flex-1 overflow-y-auto p-6 space-y-4 scrollbar-thin scrollbar-thumb-slate-200">
                {chatMessages.map((msg) => (
                  <div key={msg.id} className={`flex ${msg.sender === 'user' ? 'justify-end' : 'justify-start'}`}>
                    <div className={`max-w-md p-4 rounded-2xl text-xs leading-relaxed ${msg.sender === 'user' ? 'bg-indigo-600 text-white rounded-br-none' : `${isDarkMode ? 'bg-slate-950 border-slate-800 text-slate-100' : 'bg-slate-100 border-slate-200 text-slate-800'} border rounded-bl-none`}`}>
                      {msg.text}
                    </div>
                  </div>
                ))}
                
                {isTyping && (
                  <div className="flex justify-start">
                    <div className={`border p-3 rounded-2xl rounded-bl-none flex items-center space-x-1 ${isDarkMode ? 'bg-slate-950 border-slate-800' : 'bg-slate-100 border-slate-200'}`}>
                      <div className="w-1.5 h-1.5 bg-indigo-500 rounded-full animate-bounce"></div>
                      <div className="w-1.5 h-1.5 bg-indigo-500 rounded-full animate-bounce [animation-delay:0.2s]"></div>
                      <div className="w-1.5 h-1.5 bg-indigo-500 rounded-full animate-bounce [animation-delay:0.4s]"></div>
                    </div>
                  </div>
                )}
                <div ref={chatEndRef}></div>
              </div>

              {/* Chat Input */}
              <div className={`p-4 border-t flex items-center space-x-3 ${isDarkMode ? 'bg-slate-950/60 border-slate-800' : 'bg-slate-50 border-slate-200'}`}>
                <input 
                  type="text"
                  value={chatInput}
                  onChange={(e) => setChatInput(e.target.value)}
                  onKeyDown={(e) => e.key === 'Enter' && handleSendMessage()}
                  placeholder="Tanya AIRA: 'status sistem' atau 'bantu buat otomatisasi whatsapp'..."
                  className={`flex-1 px-4 py-3 rounded-xl text-xs placeholder-slate-400 focus:outline-none focus:border-indigo-500 transition-all ${themeStyles.inputBg}`}
                />
                <button 
                  onClick={handleSendMessage}
                  className="bg-indigo-600 hover:bg-indigo-500 text-white p-3 rounded-xl shadow-lg transition"
                >
                  <Send className="h-4 w-4" />
                </button>
              </div>
            </div>
          )}

          {/* TAB: PWA DEV CENTER */}
          {activeTab === 'pwa-dev' && (
            <div className="space-y-6 max-w-5xl mx-auto">
              <div className={`border rounded-2xl p-6 flex flex-col md:flex-row justify-between items-start md:items-center gap-4 ${themeStyles.card}`}>
                <div>
                  <h2 className="text-xl md:text-2xl font-extrabold flex items-center space-x-2">
                    <Terminal className="h-5 w-5 text-indigo-500" />
                    <span>PWA Configuration Center</span>
                  </h2>
                  <p className="text-slate-400 text-xs mt-1">Semua dokumen konfigurasi esensial untuk mengaktifkan instalasi PWA AIRA di Google Chrome.</p>
                </div>
                <div className="flex items-center space-x-3">
                  <div className={`text-xs font-bold px-3 py-1.5 rounded-lg flex items-center space-x-1 border ${themeStyles.badge}`}>
                    <CheckCircle className="h-3.5 w-3.5 text-emerald-500" />
                    <span>Lolos Audit Lighthouse</span>
                  </div>
                </div>
              </div>

              {/* PWA Best Practices Guides & Config Files */}
              <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                
                {/* Manifest Codebox */}
                <div className={`border rounded-2xl overflow-hidden flex flex-col justify-between ${themeStyles.card}`}>
                  <div className={`p-5 border-b flex justify-between items-center ${isDarkMode ? 'bg-slate-950 border-slate-800' : 'bg-slate-50 border-slate-200'}`}>
                    <div className="flex items-center space-x-2">
                      <FileCode className="h-4 w-4 text-indigo-500" />
                      <span className="text-xs font-bold">manifest.json</span>
                    </div>
                    <button 
                      onClick={() => copyToClipboard(manifestCode, 'manifest.json')}
                      className={`text-xs py-1 px-2.5 rounded border transition ${isDarkMode ? 'bg-slate-900 hover:bg-slate-800 text-slate-300 border-slate-800 hover:border-indigo-500/40' : 'bg-white hover:bg-slate-100 text-slate-600 border-slate-200 hover:border-indigo-500/40'}`}
                    >
                      {copiedFile === 'manifest.json' ? 'Tersalin!' : 'Salin Kode'}
                    </button>
                  </div>
                  <div className={`p-4 font-mono text-[11px] overflow-x-auto h-80 ${themeStyles.codeBox}`}>
                    <pre>{manifestCode}</pre>
                  </div>
                  <div className="p-4 border-t border-slate-200 dark:border-slate-800 text-xs text-slate-400">
                    Menyediakan metadata konfigurasi sehingga browser Chrome mengenali website AIRA sebagai aplikasi desktop mandiri.
                  </div>
                </div>

                {/* Service Worker Codebox */}
                <div className={`border rounded-2xl overflow-hidden flex flex-col justify-between ${themeStyles.card}`}>
                  <div className={`p-5 border-b flex justify-between items-center ${isDarkMode ? 'bg-slate-950 border-slate-800' : 'bg-slate-50 border-slate-200'}`}>
                    <div className="flex items-center space-x-2">
                      <Code className="h-4 w-4 text-indigo-500" />
                      <span className="text-xs font-bold">service-worker.js</span>
                    </div>
                    <button 
                      onClick={() => copyToClipboard(serviceWorkerCode, 'service-worker.js')}
                      className={`text-xs py-1 px-2.5 rounded border transition ${isDarkMode ? 'bg-slate-900 hover:bg-slate-800 text-slate-300 border-slate-800 hover:border-indigo-500/40' : 'bg-white hover:bg-slate-100 text-slate-600 border-slate-200 hover:border-indigo-500/40'}`}
                    >
                      {copiedFile === 'service-worker.js' ? 'Tersalin!' : 'Salin Kode'}
                    </button>
                  </div>
                  <div className={`p-4 font-mono text-[11px] overflow-x-auto h-80 ${themeStyles.codeBox}`}>
                    <pre>{serviceWorkerCode}</pre>
                  </div>
                  <div className="p-4 border-t border-slate-200 dark:border-slate-800 text-xs text-slate-400">
                    Service Worker pintar yang mengamankan caching aset statis agar aplikasi AIRA termuat secepat kilat (Rapid) meski koneksi offline.
                  </div>
                </div>

              </div>

              {/* Register Script & Best Practices Instruction */}
              <div className={`border p-6 rounded-2xl ${themeStyles.card}`}>
                <h3 className="font-bold text-sm mb-3 flex items-center space-x-2">
                  <RefreshCw className="h-4 w-4 text-indigo-500" />
                  <span>Cara Registrasi di File Utama (index.html / app.js)</span>
                </h3>
                <p className="text-slate-400 text-xs leading-relaxed mb-4">
                  Salin dan masukkan potongan kode javascript ini di bagian akhir tag <code className="text-indigo-600 dark:text-indigo-400">&lt;script&gt;</code> index.html Anda untuk menyalakan mode PWA secara resmi:
                </p>
                <div className={`p-4 rounded-xl border font-mono text-[11px] overflow-x-auto ${themeStyles.codeBox}`}>
                  <pre>{`if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js')
      .then(reg => console.log('AIRA Service Worker Sukses Terdaftar!', reg))
      .catch(err => console.log('Registrasi SW gagal: ', err));
  });
}`}</pre>
                </div>
              </div>
            </div>
          )}

        </div>
      </main>
    </div>
  );
}