import React, { useState, useEffect, useRef } from 'react';
import { 
  BookOpen, 
  Table, 
  PlusCircle, 
  CheckCircle2, 
  AlertTriangle, 
  Layers, 
  Terminal, 
  Search, 
  Trash2, 
  RefreshCw, 
  Play, 
  Check, 
  Activity, 
  Copy,
  ArrowRight
} from 'lucide-react';

interface LogEntry {
  id: string;
  type: 'user' | 'system' | 'app' | 'api';
  message: string;
  user: string;
  timestamp: string;
}

export default function MenuGuidePanel() {
  const currentMenus = [
    { name: "Jelajahi Unit Properti", val: "explore", file: "src/App.tsx", role: "Semua Pengguna / Tamu", status: "Aktif", type: "Utama" },
    { name: "Pemesanan Saya", val: "my-bookings", file: "src/App.tsx", role: "Penyewa Terdaftar", status: "Aktif", type: "Utama" },
    { name: "Dashboard Analisis", val: "dashboard", file: "src/components/DashboardView.tsx", role: "Owner, Admin, Superadmin", status: "Aktif", type: "Utama" },
    { name: "Operations Hub", val: "operations", file: "src/components/OperationsHub.tsx", role: "Admin, Superadmin", status: "Aktif", type: "Utama" },
    { name: "Superadmin Console", val: "superadmin", file: "src/components/SuperadminConsole.tsx", role: "Superadmin Only", status: "Aktif", type: "Utama" },
    { name: "Panduan & Kustomisasi Menu", val: "menu-guide", file: "src/components/MenuGuidePanel.tsx", role: "Mode Developer (Semua Admin)", status: "Aktif / Baru", type: "DevTools" },
    { name: "Master Pengguna (CRUD)", val: "users", file: "src/components/UserManagementPanel.tsx", role: "Mode Developer (Admin/Superadmin)", status: "Aktif", type: "DevTools" },
    { name: "Master Hak Izin", val: "permissions", file: "src/App.tsx", role: "Mode Developer (Admin/Superadmin)", status: "Aktif", type: "DevTools" },
    { name: "Prediksi & Keputusan AI", val: "ai-prediction", file: "src/components/AiPredictionHub.tsx", role: "Mode Developer (Admin/Superadmin)", status: "Aktif", type: "DevTools" },
    { name: "Cloud Storage Hub", val: "cloud-storage", file: "src/components/CloudStoragePanel.tsx", role: "Mode Developer (Admin/Superadmin)", status: "Aktif", type: "DevTools" },
    { name: "Master Skema MySQL", val: "schema", file: "src/components/SqlSchemaViewer.tsx", role: "Mode Developer (Admin/Superadmin)", status: "Non-Aktif / Diarsipkan", type: "DevTools" },
    { name: "CI3 & AdminLTE Files", val: "ci3-template", file: "src/components/Ci3TemplateExplorer.tsx", role: "Mode Developer (Admin/Superadmin)", status: "Non-Aktif / Diarsipkan", type: "DevTools" },
    { name: "Profiling & Log Analisis", val: "profiling", file: "src/components/ProfilingHub.tsx", role: "Mode Developer (Admin/Superadmin)", status: "Aktif", type: "DevTools" },
  ];

  // Logs state
  const [logs, setLogs] = useState<LogEntry[]>([]);
  const [loading, setLoading] = useState(false);
  const [logFilter, setLogFilter] = useState<'all' | 'api' | 'user' | 'system' | 'app'>('all');
  const [searchTerm, setSearchTerm] = useState('');
  const [autoRefresh, setAutoRefresh] = useState(true);
  const [testStatus, setTestStatus] = useState<string | null>(null);
  const [copiedId, setCopiedId] = useState<string | null>(null);

  const logsEndRef = useRef<HTMLDivElement>(null);

  const fetchLogs = async (isSilent = false) => {
    if (!isSilent) setLoading(true);
    try {
      const res = await fetch('/api/logs');
      if (res.ok) {
        const data = await res.json();
        // Sort descending so the latest is displayed at the top or bottom depending on layout.
        // We will display latest at top, but order chronologically in terminal.
        setLogs(data);
      }
    } catch (error) {
      console.error('Failed to fetch API logs:', error);
    } finally {
      if (!isSilent) setLoading(false);
    }
  };

  const clearLogs = async () => {
    if (!window.confirm('Apakah Anda yakin ingin menghapus seluruh log sistem & log API?')) return;
    setLoading(true);
    try {
      const res = await fetch('/api/logs', { method: 'DELETE' });
      if (res.ok) {
        setTestStatus('Log berhasil dibersihkan!');
        setTimeout(() => setTestStatus(null), 3000);
        await fetchLogs();
      }
    } catch (error) {
      console.error('Failed to clear logs:', error);
    } finally {
      setLoading(false);
    }
  };

  // Trigger test API endpoints to show live interception
  const triggerTestAPI = async (endpoint: string, method: 'GET' | 'POST' = 'GET') => {
    setTestStatus(`Mengirim request ke ${endpoint}...`);
    const start = Date.now();
    try {
      let res;
      if (method === 'GET') {
        res = await fetch(endpoint);
      } else {
        res = await fetch(endpoint, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ message: "Test log dari developer console" })
        });
      }
      const latency = Date.now() - start;
      if (res.ok) {
        setTestStatus(`Sukses! ${method} ${endpoint} merespons ${res.status} dalam ${latency}ms.`);
        // Immediately fetch logs after a tiny timeout to ensure file was written and saved
        setTimeout(() => fetchLogs(true), 150);
      } else {
        setTestStatus(`Error! Status: ${res.status} (${latency}ms)`);
        setTimeout(() => fetchLogs(true), 150);
      }
    } catch (e: any) {
      setTestStatus(`Koneksi Gagal: ${e.message}`);
    }
    setTimeout(() => setTestStatus(null), 4000);
  };

  const copyToClipboard = (text: string, id: string) => {
    navigator.clipboard.writeText(text);
    setCopiedId(id);
    setTimeout(() => setCopiedId(null), 1500);
  };

  // Polling logic for auto-refresh
  useEffect(() => {
    fetchLogs();
  }, []);

  useEffect(() => {
    let intervalId: any;
    if (autoRefresh) {
      intervalId = setInterval(() => {
        fetchLogs(true);
      }, 3000);
    }
    return () => {
      if (intervalId) clearInterval(intervalId);
    };
  }, [autoRefresh]);

  // Filtering logic
  const filteredLogs = logs.filter(log => {
    const matchesFilter = logFilter === 'all' || log.type === logFilter;
    const matchesSearch = 
      log.message.toLowerCase().includes(searchTerm.toLowerCase()) ||
      log.user.toLowerCase().includes(searchTerm.toLowerCase()) ||
      log.type.toLowerCase().includes(searchTerm.toLowerCase());
    return matchesFilter && matchesSearch;
  });

  return (
    <div className="p-6 max-w-7xl mx-auto space-y-6">
      {/* Header Banner */}
      <div className="bg-gradient-to-r from-slate-900 to-slate-800 rounded-2xl p-6 text-white shadow-xl border border-slate-700/50 flex flex-col md:flex-row md:items-center md:justify-between gap-4">
        <div className="space-y-1.5">
          <div className="flex items-center gap-2">
            <BookOpen className="h-6 w-6 text-emerald-400" />
            <h1 className="text-xl font-bold tracking-tight">Panduan Kustomisasi & Manajemen Menu</h1>
          </div>
          <p className="text-xs text-slate-300 leading-relaxed max-w-2xl">
            Selamat datang di Panel Arsitektur Menu. Halaman ini dibuat untuk memudahkan pengembang dalam mengelola, menyembunyikan, menonaktifkan, atau menambahkan menu navigasi baru ke dalam ekosistem aplikasi <strong>PropertyHub v3.2.0</strong>.
          </p>
        </div>
        <div className="flex gap-2">
          <span className="text-xs bg-slate-800 text-slate-300 px-3 py-1.5 rounded-xl font-mono border border-slate-700">
            Frontend: React + Vite
          </span>
          <span className="text-xs bg-emerald-950 text-emerald-400 px-3 py-1.5 rounded-xl font-mono border border-emerald-900/50 font-bold">
            Realtime Logger Aktif
          </span>
        </div>
      </div>

      {/* Grid of Contents */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        
        {/* Left Column: Menu Registry Table (Spans 2 columns) */}
        <div className="lg:col-span-2 space-y-6">
          <div className="bg-white rounded-2xl p-5 border border-slate-100 shadow-xs">
            <div className="flex items-center justify-between border-b border-slate-150 pb-4 mb-4">
              <div className="flex items-center gap-2">
                <Table className="h-5 w-5 text-blue-600" />
                <h2 className="text-sm font-bold text-slate-800">Tabel Registrasi Menu Saat Ini</h2>
              </div>
              <span className="text-[10px] bg-slate-100 text-slate-600 px-2 py-0.5 rounded font-bold uppercase tracking-wider font-mono">
                {currentMenus.length} Terdaftar
              </span>
            </div>

            <div className="overflow-x-auto">
              <table className="w-full text-left border-collapse text-xs">
                <thead>
                  <tr className="bg-slate-50 text-slate-500 font-bold border-b border-slate-150">
                    <th className="p-3">Nama Menu</th>
                    <th className="p-3">Tab ID</th>
                    <th className="p-3">Role / Akses</th>
                    <th className="p-3">Target File</th>
                    <th className="p-3 text-center">Status</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-slate-100">
                  {currentMenus.map((menu, idx) => (
                    <tr 
                      key={idx} 
                      className={`hover:bg-slate-50/50 transition-colors ${
                        menu.status.includes('Non-Aktif') ? 'bg-slate-50/30 opacity-60' : ''
                      }`}
                    >
                      <td className="p-3 font-semibold text-slate-800 flex items-center gap-1.5">
                        <span className={`h-1.5 w-1.5 rounded-full ${
                          menu.status.includes('Non-Aktif') ? 'bg-slate-400' : 'bg-emerald-500'
                        }`} />
                        <span className={menu.status.includes('Non-Aktif') ? 'line-through text-slate-400' : ''}>
                          {menu.name}
                        </span>
                      </td>
                      <td className="p-3 font-mono text-[10px] text-slate-500 bg-slate-50/20">{menu.val}</td>
                      <td className="p-3 text-slate-600 text-[11px]">{menu.role}</td>
                      <td className="p-3 font-mono text-[10px] text-blue-600 truncate max-w-[140px]" title={menu.file}>
                        {menu.file}
                      </td>
                      <td className="p-3 text-center">
                        <span className={`inline-block px-2 py-0.5 rounded text-[9px] font-bold uppercase font-mono ${
                          menu.status === 'Aktif' 
                            ? 'bg-emerald-50 text-emerald-600 border border-emerald-150'
                            : menu.status === 'Aktif / Baru'
                              ? 'bg-blue-50 text-blue-600 border border-blue-150'
                              : 'bg-red-50 text-red-500 border border-red-150 line-through'
                        }`}>
                          {menu.status === 'Aktif / Baru' ? 'BARU' : menu.status.includes('Non-Aktif') ? 'ARSIP' : 'AKTIF'}
                        </span>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>

          {/* Real-time API & Request Log Monitor Card */}
          <div className="bg-slate-950 rounded-2xl border border-slate-800 p-5 shadow-2xl space-y-4 text-slate-300">
            {/* Header section with live flashing dot */}
            <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 border-b border-slate-800 pb-4">
              <div className="flex items-center gap-2">
                <Terminal className="h-5 w-5 text-sky-400 animate-pulse" />
                <div>
                  <h3 className="text-sm font-bold text-white flex items-center gap-2">
                    <span>Live API & System Log Monitor</span>
                    <span className="flex items-center gap-1 text-[10px] font-bold text-emerald-400 uppercase tracking-widest font-mono bg-emerald-950/50 px-2 py-0.5 rounded-full border border-emerald-900/30">
                      <span className="h-1.5 w-1.5 rounded-full bg-emerald-500 animate-ping"></span>
                      <span>LIVE</span>
                    </span>
                  </h3>
                  <p className="text-[10px] text-slate-400 mt-0.5">Memantau request API, latensi HTTP, dan status respons secara waktu-nyata.</p>
                </div>
              </div>

              {/* Controls */}
              <div className="flex items-center gap-2 text-xs">
                <button
                  onClick={() => setAutoRefresh(!autoRefresh)}
                  className={`px-2.5 py-1.5 rounded-lg font-medium border transition-all flex items-center gap-1.5 cursor-pointer ${
                    autoRefresh
                      ? 'bg-emerald-950/80 text-emerald-400 border-emerald-800 hover:bg-emerald-900/50'
                      : 'bg-slate-900 text-slate-400 border-slate-800 hover:bg-slate-800'
                  }`}
                  title={autoRefresh ? "Matikan Auto Refresh" : "Aktifkan Auto Refresh"}
                >
                  <Activity className={`h-3 w-3 ${autoRefresh ? 'animate-pulse' : ''}`} />
                  <span>{autoRefresh ? "Auto On (3s)" : "Auto Off"}</span>
                </button>

                <button
                  onClick={() => fetchLogs()}
                  disabled={loading}
                  className="px-2.5 py-1.5 bg-slate-900 hover:bg-slate-800 border border-slate-800 text-slate-300 rounded-lg flex items-center gap-1 transition cursor-pointer disabled:opacity-50"
                  title="Refresh manual log sekarang"
                >
                  <RefreshCw className={`h-3 w-3 ${loading ? 'animate-spin' : ''}`} />
                  <span>Refresh</span>
                </button>

                <button
                  onClick={clearLogs}
                  disabled={loading}
                  className="px-2.5 py-1.5 bg-red-950/60 hover:bg-red-900/50 border border-red-900/40 text-red-400 rounded-lg flex items-center gap-1 transition cursor-pointer"
                  title="Bersihkan database log"
                >
                  <Trash2 className="h-3 w-3" />
                  <span>Clear</span>
                </button>
              </div>
            </div>

            {/* Quick API Simulator section */}
            <div className="bg-slate-900 p-3.5 rounded-xl border border-slate-800/80 space-y-2">
              <p className="text-[10px] font-extrabold uppercase tracking-wider text-slate-400">Simulator Trigger API (Klik untuk Menguji Latensi & Interseptor)</p>
              <div className="flex flex-wrap gap-2">
                <button
                  onClick={() => triggerTestAPI('/api/users')}
                  className="px-2.5 py-1 bg-sky-950/80 hover:bg-sky-900 border border-sky-800 text-sky-400 rounded-md font-mono text-[10px] flex items-center gap-1 transition cursor-pointer"
                >
                  <Play className="h-2.5 w-2.5" />
                  <span>GET /api/users</span>
                </button>
                <button
                  onClick={() => triggerTestAPI('/api/properties')}
                  className="px-2.5 py-1 bg-emerald-950/80 hover:bg-emerald-900 border border-emerald-800 text-emerald-400 rounded-md font-mono text-[10px] flex items-center gap-1 transition cursor-pointer"
                >
                  <Play className="h-2.5 w-2.5" />
                  <span>GET /api/properties</span>
                </button>
                <button
                  onClick={() => triggerTestAPI('/api/logs', 'POST')}
                  className="px-2.5 py-1 bg-purple-950/80 hover:bg-purple-900 border border-purple-800 text-purple-400 rounded-md font-mono text-[10px] flex items-center gap-1 transition cursor-pointer"
                >
                  <Play className="h-2.5 w-2.5" />
                  <span>POST /api/logs</span>
                </button>
              </div>

              {testStatus && (
                <div className="text-[10px] bg-slate-950 text-sky-300 p-1.5 rounded border border-slate-800/60 font-mono animate-pulse">
                  {testStatus}
                </div>
              )}
            </div>

            {/* Filters and search input */}
            <div className="flex flex-col md:flex-row md:items-center justify-between gap-3 text-xs bg-slate-900/60 p-3 rounded-xl border border-slate-900">
              {/* Type Filters */}
              <div className="flex flex-wrap gap-1.5">
                {(['all', 'api', 'system', 'user', 'app'] as const).map(type => {
                  const count = type === 'all' ? logs.length : logs.filter(l => l.type === type).length;
                  return (
                    <button
                      key={type}
                      onClick={() => setLogFilter(type)}
                      className={`px-2.5 py-1 rounded font-semibold transition-all cursor-pointer ${
                        logFilter === type
                          ? 'bg-blue-600 text-white font-bold'
                          : 'bg-slate-900 text-slate-400 hover:text-white border border-slate-800'
                      }`}
                    >
                      <span className="capitalize">{type === 'all' ? 'Semua' : type}</span>
                      <span className="ml-1 opacity-60 text-[10px]">({count})</span>
                    </button>
                  );
                })}
              </div>

              {/* Search Bar */}
              <div className="relative w-full md:w-56">
                <Search className="absolute left-2.5 top-2 h-3.5 w-3.5 text-slate-500" />
                <input
                  type="text"
                  placeholder="Cari pesan log..."
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                  className="w-full bg-slate-900 border border-slate-800 rounded-lg pl-8 pr-3 py-1.5 text-xs text-white focus:outline-none focus:border-blue-500 transition-all placeholder:text-slate-500"
                />
              </div>
            </div>

            {/* Dark Terminal Window */}
            <div className="bg-slate-950 border border-slate-900 rounded-xl overflow-hidden shadow-inner flex flex-col">
              {/* Terminal Title Bar */}
              <div className="bg-slate-900/80 px-4 py-2 border-b border-slate-900/60 flex items-center justify-between text-[11px] text-slate-500 font-mono">
                <div className="flex items-center gap-2">
                  <span className="h-2.5 w-2.5 rounded-full bg-red-500"></span>
                  <span className="h-2.5 w-2.5 rounded-full bg-yellow-500"></span>
                  <span className="h-2.5 w-2.5 rounded-full bg-green-500"></span>
                  <span className="ml-2 font-semibold text-slate-400">propertyhub_audit.log</span>
                </div>
                <span>JSON Stream</span>
              </div>

              {/* Terminal Screen log viewport */}
              <div className="p-4 font-mono text-[11px] space-y-2.5 max-h-[320px] overflow-y-auto bg-slate-950 flex flex-col-reverse divide-y divide-slate-900">
                {filteredLogs.length === 0 ? (
                  <div className="text-center py-12 text-slate-600 italic">
                    Belum ada log yang sesuai dengan filter atau kata kunci.
                  </div>
                ) : (
                  filteredLogs.map((log) => {
                    // Type color styling
                    let badgeColor = 'text-slate-500';
                    let typeLabel = '[INFO]';
                    if (log.type === 'api') {
                      badgeColor = 'text-cyan-400';
                      typeLabel = '[API REQUEST]';
                    } else if (log.type === 'system') {
                      badgeColor = 'text-amber-400';
                      typeLabel = '[SYSTEM]';
                    } else if (log.type === 'user') {
                      badgeColor = 'text-emerald-400';
                      typeLabel = '[USER]';
                    } else if (log.type === 'app') {
                      badgeColor = 'text-purple-400';
                      typeLabel = '[APP]';
                    }

                    return (
                      <div key={log.id} className="pt-2.5 flex items-start justify-between gap-4 group">
                        <div className="space-y-1 select-text leading-relaxed">
                          {/* Timestamp & Tag */}
                          <div className="flex items-center flex-wrap gap-1.5 text-[10px]">
                            <span className="text-slate-500">{log.timestamp}</span>
                            <span className={`font-bold ${badgeColor}`}>{typeLabel}</span>
                            <span className="text-slate-400">Initiator:</span>
                            <span className="text-slate-300 bg-slate-900 px-1.5 py-0.5 rounded border border-slate-800">{log.user}</span>
                          </div>
                          
                          {/* Log Message */}
                          <p className="text-slate-200 break-all">{log.message}</p>
                        </div>

                        {/* Copy log snippet button */}
                        <button
                          onClick={() => copyToClipboard(`${log.timestamp} ${typeLabel} ${log.message} (by ${log.user})`, log.id)}
                          className="text-slate-500 hover:text-slate-300 opacity-0 group-hover:opacity-100 transition p-1 hover:bg-slate-900 rounded shrink-0 cursor-pointer"
                          title="Salin Log"
                        >
                          {copiedId === log.id ? (
                            <Check className="h-3 w-3 text-emerald-400" />
                          ) : (
                            <Copy className="h-3 w-3" />
                          )}
                        </button>
                      </div>
                    );
                  })
                )}
              </div>
            </div>
          </div>
        </div>

        {/* Right Column: Step-by-Step Instructions */}
        <div className="space-y-4">
          
          {/* Tutorial Panel */}
          <div className="bg-white rounded-2xl p-5 border border-slate-100 shadow-xs space-y-4">
            <div className="flex items-center gap-2 border-b border-slate-150 pb-3">
              <PlusCircle className="h-5 w-5 text-emerald-600" />
              <h3 className="text-sm font-bold text-slate-800">Panduan Menambahkan Menu</h3>
            </div>

            <div className="space-y-4 text-xs">
              
              {/* Step 1 */}
              <div className="relative pl-6 space-y-1">
                <div className="absolute left-0 top-0.5 h-4 w-4 bg-blue-600 text-white rounded-full flex items-center justify-center text-[9px] font-bold">
                  1
                </div>
                <h4 className="font-bold text-slate-800">Daftarkan Tab ID Baru</h4>
                <p className="text-[11px] text-slate-500 leading-relaxed">
                  Buka file <code>src/App.tsx</code> dan tambahkan ID menu baru Anda di state <code>activeTab</code>:
                </p>
                <pre className="bg-slate-900 text-emerald-400 p-2 rounded-lg font-mono text-[9px] overflow-x-auto mt-1 border border-slate-800">
{`const [activeTab, setActiveTab] = useState<
  'explore' | 'my-bookings' | 'menu-baru'
>('explore');`}
                </pre>
              </div>

              {/* Step 2 */}
              <div className="relative pl-6 space-y-1">
                <div className="absolute left-0 top-0.5 h-4 w-4 bg-blue-600 text-white rounded-full flex items-center justify-center text-[9px] font-bold">
                  2
                </div>
                <h4 className="font-bold text-slate-800">Daftarkan di Tipe Properti Sidebar</h4>
                <p className="text-[11px] text-slate-500 leading-relaxed">
                  Buka file <code>src/components/Sidebar.tsx</code>, perbarui tipe properti <code>activeTab</code> di interface <code>SidebarProps</code> agar sesuai dengan deklarasi state utama.
                </p>
              </div>

              {/* Step 3 */}
              <div className="relative pl-6 space-y-1">
                <div className="absolute left-0 top-0.5 h-4 w-4 bg-blue-600 text-white rounded-full flex items-center justify-center text-[9px] font-bold">
                  3
                </div>
                <h4 className="font-bold text-slate-800">Tambahkan Tombol di Sidebar.tsx</h4>
                <p className="text-[11px] text-slate-500 leading-relaxed">
                  Tambahkan tombol navigasi JSX di dalam sidebar sesuai dengan pengelompokan yang diinginkan:
                </p>
                <pre className="bg-slate-900 text-slate-300 p-2 rounded-lg font-mono text-[8px] overflow-x-auto mt-1 border border-slate-800">
{`<button
  onClick={() => handleTabClick('menu-baru')}
  className={\`w-full px-3 py-2 rounded-lg ...\`}
>
  <Icon className="h-4 w-4" />
  <span>Nama Menu Baru</span>
</button>`}
                </pre>
              </div>

              {/* Step 4 */}
              <div className="relative pl-6 space-y-1">
                <div className="absolute left-0 top-0.5 h-4 w-4 bg-blue-600 text-white rounded-full flex items-center justify-center text-[9px] font-bold">
                  4
                </div>
                <h4 className="font-bold text-slate-800">Render Komponen di App.tsx</h4>
                <p className="text-[11px] text-slate-500 leading-relaxed">
                  Terakhir, render komponen panel Anda di dalam kontainer utama <code>App.tsx</code>:
                </p>
                <pre className="bg-slate-900 text-emerald-400 p-2 rounded-lg font-mono text-[9px] overflow-x-auto mt-1 border border-slate-800">
{`{activeTab === 'menu-baru' && (
  <KomponenBaru />
)}`}
                </pre>
              </div>

            </div>
          </div>

          {/* Quick Control Panel for Devs */}
          <div className="p-4 bg-slate-900 text-slate-300 rounded-2xl space-y-3.5 border border-slate-800 shadow-lg">
            <div className="flex items-center gap-1.5 text-xs font-bold text-white border-b border-slate-800 pb-2">
              <Layers className="h-4 w-4 text-blue-400" />
              <span>Kunci Cepat Pengembang (Shortcuts)</span>
            </div>
            <p className="text-[11px] text-slate-400 leading-relaxed">
              Anda dapat mengaktifkan atau menonaktifkan <strong>Mode Developer</strong> menggunakan tombol toggle di bagian bawah sidebar untuk menguji tampilan pengguna biasa vs pengembang langsung di layar saat ini.
            </p>
            <div className="flex items-center gap-2 text-[10px] bg-slate-950 p-2.5 rounded-xl border border-slate-800 font-mono text-emerald-400">
              <span className="h-2 w-2 rounded-full bg-emerald-500 inline-block animate-pulse shrink-0"></span>
              <span>Mode Developer: Aktif</span>
            </div>
          </div>

        </div>

      </div>
    </div>
  );
}