import React, { useState } from 'react';
import { 
  LayoutDashboard, 
  Users, 
  Wallet, 
  Router, 
  MessageSquare, 
  Settings, 
  Bell, 
  Search, 
  Menu,
  MoreVertical,
  Plus,
  ArrowUpRight,
  ArrowDownLeft,
  Smartphone,
  MapPin,
  FileText,
  ShieldAlert,
  LogOut
} from 'lucide-react';

// --- MOCK DATA ---
const SUMMARY_STATS = {
  activeUsers: 1240,
  isolirUsers: 45,
  monthlyRevenue: 45200000,
  unpaidInvoice: 3400000,
  todayTickets: 5
};

const INVOICES = [
  { id: 'INV/10/001', user: 'Budi Santoso', date: '2024-10-01', amount: 150000, status: 'PAID', method: 'Transfer BCA' },
  { id: 'INV/10/002', user: 'Warnet Abadi', date: '2024-10-02', amount: 750000, status: 'UNPAID', method: '-' },
  { id: 'INV/10/003', user: 'Rumah Makan Padang', date: '2024-10-02', amount: 300000, status: 'PAID', method: 'Cash Reseller' },
  { id: 'INV/10/004', user: 'Kos Putri', date: '2024-10-05', amount: 200000, status: 'UNPAID', method: '-' },
];

const CUSTOMERS = [
  { id: 1, name: 'Budi Santoso', username: 'budi@net', profile: 'Home 10Mbps', price: 150000, status: 'Active', address: 'Jl. Merpati No 1', phone: '08123456789' },
  { id: 2, name: 'Siti Aminah', username: 'siti@net', profile: 'Home 20Mbps', price: 250000, status: 'Isolir', address: 'Jl. Elang No 4', phone: '08129876543' },
  { id: 3, name: 'Warnet Abadi', username: 'warnet01', profile: 'Dedicated 50M', price: 750000, status: 'Active', address: 'Ruko Blok A', phone: '08133344455' },
];

export default function App() {
  const [activeMenu, setActiveMenu] = useState('dashboard');
  const [sidebarOpen, setSidebarOpen] = useState(true);

  // Format Rupiah
  const formatRupiah = (number) => {
    return new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR' }).format(number);
  };

  // --- COMPONENT: SIDEBAR ITEM ---
  const SidebarItem = ({ id, icon: Icon, label, notif }) => (
    <button 
      onClick={() => setActiveMenu(id)}
      className={`w-full flex items-center justify-between px-4 py-3 text-sm transition-colors duration-200 ${
        activeMenu === id 
        ? 'bg-blue-600 text-white shadow-lg shadow-blue-500/30' 
        : 'text-slate-400 hover:bg-slate-800 hover:text-white'
      }`}
    >
      <div className="flex items-center gap-3">
        <Icon size={18} />
        <span className={!sidebarOpen ? 'hidden' : ''}>{label}</span>
      </div>
      {notif && sidebarOpen && (
        <span className="bg-red-500 text-white text-xs px-2 py-0.5 rounded-full">{notif}</span>
      )}
    </button>
  );

  // --- VIEW: DASHBOARD ---
  const DashboardView = () => (
    <div className="space-y-6">
      {/* Top Stats */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
        <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-slate-500 text-sm">Total Omset Bulan Ini</p>
              <h3 className="text-2xl font-bold text-slate-800 mt-1">{formatRupiah(SUMMARY_STATS.monthlyRevenue)}</h3>
            </div>
            <div className="p-3 bg-green-50 text-green-600 rounded-lg">
              <ArrowUpRight size={20} />
            </div>
          </div>
          <p className="text-green-600 text-xs mt-4 flex items-center gap-1">
            <span className="font-bold">+12%</span> dari bulan lalu
          </p>
        </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-slate-500 text-sm">Tagihan Belum Lunas</p>
              <h3 className="text-2xl font-bold text-slate-800 mt-1">{formatRupiah(SUMMARY_STATS.unpaidInvoice)}</h3>
            </div>
            <div className="p-3 bg-red-50 text-red-600 rounded-lg">
              <Wallet size={20} />
            </div>
          </div>
          <p className="text-slate-400 text-xs mt-4">45 Invoice menunggu pembayaran</p>
        </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-slate-500 text-sm">Pelanggan Aktif</p>
              <h3 className="text-2xl font-bold text-slate-800 mt-1">{SUMMARY_STATS.activeUsers}</h3>
            </div>
            <div className="p-3 bg-blue-50 text-blue-600 rounded-lg">
              <Users size={20} />
            </div>
          </div>
          <p className="text-slate-400 text-xs mt-4">Total 1285 Terdaftar</p>
        </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-slate-500 text-sm">Tiket Kendala</p>
              <h3 className="text-2xl font-bold text-slate-800 mt-1">{SUMMARY_STATS.todayTickets}</h3>
            </div>
            <div className="p-3 bg-orange-50 text-orange-600 rounded-lg">
              <ShieldAlert size={20} />
            </div>
          </div>
          <p className="text-orange-600 text-xs mt-4 font-medium">Perlu penanganan segera</p>
        </div>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {/* Main Chart Area (Mockup) */}
        <div className="lg:col-span-2 bg-white p-6 rounded-xl shadow-sm border border-slate-100">
          <div className="flex justify-between items-center mb-6">
            <h3 className="font-bold text-slate-800">Traffic Realtime (L2TP Tunnel)</h3>
            <select className="text-sm border-gray-200 rounded-lg bg-gray-50 p-2">
              <option>Mikrotik Pusat</option>
              <option>Mikrotik Cabang A</option>
            </select>
          </div>
          <div className="h-64 flex items-end justify-between space-x-2 px-2">
            {[30, 45, 32, 50, 70, 40, 50, 65, 80, 55, 45, 60, 70, 85, 90, 60, 50, 40, 30, 60].map((h, i) => (
              <div key={i} className="w-full bg-blue-100 rounded-t-sm relative group">
                <div 
                  className="absolute bottom-0 w-full bg-blue-500 rounded-t-sm transition-all duration-500 group-hover:bg-blue-600"
                  style={{ height: `${h}%` }}
                ></div>
              </div>
            ))}
          </div>
          <div className="flex justify-between mt-4 text-xs text-slate-400 font-mono">
            <span>00:00</span>
            <span>12:00</span>
            <span>23:59</span>
          </div>
        </div>

        {/* Quick Actions / WA Status */}
        <div className="space-y-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">
              <Smartphone size={18} className="text-green-600" />
              WhatsApp Gateway
            </h3>
            <div className="flex items-center gap-3 mb-4">
              <div className="w-3 h-3 rounded-full bg-green-500 animate-pulse"></div>
              <span className="text-sm text-green-700 bg-green-50 px-3 py-1 rounded-full font-medium">Terhubung</span>
            </div>
            <p className="text-xs text-slate-500 mb-4">Device: Samsung A50 (0812-XXXX-XXXX)</p>
            <div className="space-y-2">
              <button className="w-full py-2 text-sm border border-slate-200 rounded-lg hover:bg-slate-50 text-slate-600">Scan QR Ulang</button>
              <button className="w-full py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700">Kirim Pesan Massal</button>
            </div>
          </div>
          
           <div className="bg-gradient-to-br from-slate-800 to-slate-900 p-6 rounded-xl shadow-lg text-white">
            <h3 className="font-bold mb-2">Upgrade Pro?</h3>
            <p className="text-xs text-slate-300 mb-4">Dapatkan fitur Mobile App untuk pelanggan Anda cek tagihan sendiri.</p>
            <button className="text-xs bg-white text-slate-900 px-4 py-2 rounded-lg font-bold w-full">Lihat Penawaran</button>
          </div>
        </div>
      </div>
    </div>
  );

  // --- VIEW: PELANGGAN ---
  const CustomerView = () => (
    <div className="bg-white rounded-xl shadow-sm border border-slate-100">
      <div className="p-6 border-b border-slate-100 flex flex-col md:flex-row justify-between md:items-center gap-4">
        <div>
          <h2 className="text-xl font-bold text-slate-800">Data Pelanggan</h2>
          <p className="text-sm text-slate-500">Kelola data PPPoE & Hotspot</p>
        </div>
        <div className="flex gap-2">
           <button className="flex items-center gap-2 px-4 py-2 bg-white border border-slate-200 text-slate-600 rounded-lg hover:bg-slate-50 text-sm">
            <FileText size={16} /> Import Excel
          </button>
          <button className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-sm shadow-lg shadow-blue-500/30">
            <Plus size={16} /> Tambah Pelanggan
          </button>
        </div>
      </div>

      {/* Filters */}
      <div className="p-4 bg-slate-50 border-b border-slate-100 flex gap-4">
        <div className="relative flex-1 max-w-md">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" size={18} />
          <input 
            type="text" 
            placeholder="Cari nama, username, atau no HP..." 
            className="w-full pl-10 pr-4 py-2 rounded-lg border border-slate-200 focus:outline-none focus:border-blue-500"
          />
        </div>
        <select className="px-4 py-2 rounded-lg border border-slate-200 text-sm text-slate-600 bg-white">
          <option>Semua Status</option>
          <option>Aktif</option>
          <option>Isolir</option>
          <option>Expired</option>
        </select>
        <select className="px-4 py-2 rounded-lg border border-slate-200 text-sm text-slate-600 bg-white">
          <option>Semua Router</option>
          <option>Mikrotik Pusat</option>
        </select>
      </div>

      <div className="overflow-x-auto">
        <table className="w-full text-left text-sm">
          <thead className="bg-slate-50 text-slate-600 font-medium">
            <tr>
              <th className="px-6 py-4">Nama Pelanggan</th>
              <th className="px-6 py-4">Paket Langganan</th>
              <th className="px-6 py-4">Tagihan</th>
              <th className="px-6 py-4">Status</th>
              <th className="px-6 py-4 text-center">Aksi</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-slate-100">
            {CUSTOMERS.map((cust) => (
              <tr key={cust.id} className="hover:bg-slate-50">
                <td className="px-6 py-4">
                  <div className="font-medium text-slate-800">{cust.name}</div>
                  <div className="text-slate-500 text-xs">{cust.username} | {cust.phone}</div>
                </td>
                <td className="px-6 py-4">
                  <div className="text-slate-800">{cust.profile}</div>
                  <div className="text-xs text-slate-500 bg-slate-100 inline-block px-1 rounded">PPPoE</div>
                </td>
                <td className="px-6 py-4 font-mono text-slate-600">
                  {formatRupiah(cust.price)}
                </td>
                <td className="px-6 py-4">
                  <span className={`px-2 py-1 rounded-full text-xs font-medium ${
                    cust.status === 'Active' 
                    ? 'bg-green-100 text-green-700' 
                    : 'bg-red-100 text-red-700'
                  }`}>
                    {cust.status}
                  </span>
                </td>
                <td className="px-6 py-4 flex justify-center gap-2">
                   <button className="p-2 text-slate-500 hover:text-blue-600 bg-white border border-slate-200 rounded hover:bg-blue-50" title="Edit">
                     <Settings size={16} />
                   </button>
                   <button className="p-2 text-slate-500 hover:text-green-600 bg-white border border-slate-200 rounded hover:bg-green-50" title="Kirim WA">
                     <MessageSquare size={16} />
                   </button>
                   <button className="p-2 text-slate-500 hover:text-red-600 bg-white border border-slate-200 rounded hover:bg-red-50" title="Isolir Manual">
                     <ShieldAlert size={16} />
                   </button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      
      {/* Pagination */}
      <div className="p-4 border-t border-slate-100 flex justify-between items-center text-sm text-slate-500">
        <span>Menampilkan 1-10 dari 1285 data</span>
        <div className="flex gap-2">
          <button className="px-3 py-1 border rounded hover:bg-slate-50">Prev</button>
          <button className="px-3 py-1 bg-blue-600 text-white rounded">1</button>
          <button className="px-3 py-1 border rounded hover:bg-slate-50">2</button>
          <button className="px-3 py-1 border rounded hover:bg-slate-50">Next</button>
        </div>
      </div>
    </div>
  );

  // --- VIEW: INVOICE ---
  const InvoiceView = () => (
    <div className="bg-white rounded-xl shadow-sm border border-slate-100">
      <div className="p-6 border-b border-slate-100 flex justify-between items-center">
        <div>
          <h2 className="text-xl font-bold text-slate-800">Tagihan & Keuangan</h2>
          <p className="text-sm text-slate-500">Monitor pembayaran pelanggan</p>
        </div>
        <button className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-sm shadow-lg shadow-blue-500/30">
            <Plus size={16} /> Buat Tagihan Manual
        </button>
      </div>
      <div className="overflow-x-auto">
        <table className="w-full text-left text-sm">
          <thead className="bg-slate-50 text-slate-600 font-medium">
            <tr>
              <th className="px-6 py-4">No. Invoice</th>
              <th className="px-6 py-4">Tanggal</th>
              <th className="px-6 py-4">Pelanggan</th>
              <th className="px-6 py-4">Nominal</th>
              <th className="px-6 py-4">Status</th>
              <th className="px-6 py-4">Metode Bayar</th>
              <th className="px-6 py-4">Cetak</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-slate-100">
            {INVOICES.map((inv) => (
              <tr key={inv.id} className="hover:bg-slate-50">
                <td className="px-6 py-4 font-mono text-blue-600 font-medium">{inv.id}</td>
                <td className="px-6 py-4 text-slate-600">{inv.date}</td>
                <td className="px-6 py-4 font-medium text-slate-800">{inv.user}</td>
                <td className="px-6 py-4 font-medium text-slate-800">{formatRupiah(inv.amount)}</td>
                <td className="px-6 py-4">
                   <span className={`px-2 py-1 rounded-full text-xs font-bold ${
                    inv.status === 'PAID' 
                    ? 'bg-green-100 text-green-700' 
                    : 'bg-red-100 text-red-700'
                  }`}>
                    {inv.status}
                  </span>
                </td>
                <td className="px-6 py-4 text-slate-500 text-xs">{inv.method}</td>
                <td className="px-6 py-4">
                  <button className="text-slate-400 hover:text-blue-600"><FileText size={18}/></button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );

  return (
    <div className="flex h-screen bg-slate-50 font-sans text-slate-900">
      
      {/* Sidebar Navigation */}
      <aside className={`${sidebarOpen ? 'w-64' : 'w-20'} bg-slate-900 text-slate-300 flex flex-col transition-all duration-300 border-r border-slate-800`}>
        <div className="h-16 flex items-center justify-center border-b border-slate-800">
          {sidebarOpen ? (
            <h1 className="text-xl font-bold text-white tracking-wider">NET<span className="text-blue-500">RADIUS</span></h1>
          ) : (
            <div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center font-bold text-white">N</div>
          )}
        </div>

        <nav className="flex-1 overflow-y-auto py-4 space-y-1">
          <p className={`px-4 text-xs font-bold text-slate-500 uppercase mb-2 ${!sidebarOpen && 'hidden'}`}>Main Menu</p>
          <SidebarItem id="dashboard" icon={LayoutDashboard} label="Dashboard" />
          <SidebarItem id="customers" icon={Users} label="Data Pelanggan" />
          <SidebarItem id="finance" icon={Wallet} label="Keuangan & Invoice" notif="45" />
          <SidebarItem id="map" icon={MapPin} label="Peta ODP/Area" />
          
          <p className={`px-4 text-xs font-bold text-slate-500 uppercase mb-2 mt-6 ${!sidebarOpen && 'hidden'}`}>Teknis</p>
          <SidebarItem id="routers" icon={Router} label="Daftar Router (NAS)" />
          <SidebarItem id="tickets" icon={MessageSquare} label="Tiket Komplain" notif="2" />
          
          <p className={`px-4 text-xs font-bold text-slate-500 uppercase mb-2 mt-6 ${!sidebarOpen && 'hidden'}`}>Pengaturan</p>
          <SidebarItem id="settings" icon={Settings} label="Konfigurasi App" />
          <SidebarItem id="whatsapp" icon={Smartphone} label="WhatsApp Gateway" />
        </nav>

        <div className="p-4 border-t border-slate-800">
           <button className="flex items-center gap-3 text-red-400 hover:text-red-300 w-full px-2">
             <LogOut size={18} />
             <span className={!sidebarOpen ? 'hidden' : ''}>Logout</span>
           </button>
        </div>
      </aside>

      {/* Main Content Area */}
      <div className="flex-1 flex flex-col overflow-hidden">
        
        {/* Top Header */}
        <header className="h-16 bg-white border-b border-slate-200 flex items-center justify-between px-6 shadow-sm z-10">
          <button onClick={() => setSidebarOpen(!sidebarOpen)} className="p-2 hover:bg-slate-100 rounded-lg text-slate-600">
            <Menu size={20} />
          </button>

          <div className="flex items-center gap-4">
            <div className="hidden md:flex flex-col items-end mr-2">
              <span className="text-xs font-bold text-blue-600 bg-blue-50 px-2 py-0.5 rounded">VPN Connected</span>
              <span className="text-[10px] text-slate-400">Server: 10.10.10.1</span>
            </div>
            <button className="relative p-2 hover:bg-slate-100 rounded-full text-slate-500">
              <Bell size={20} />
              <span className="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full border border-white"></span>
            </button>
            <div className="w-8 h-8 bg-slate-800 rounded-full flex items-center justify-center text-white text-xs font-bold border-2 border-slate-200">
              AD
            </div>
          </div>
        </header>

        {/* Dynamic Content */}
        <main className="flex-1 overflow-y-auto p-6">
          {activeMenu === 'dashboard' && <DashboardView />}
          {activeMenu === 'customers' && <CustomerView />}
          {activeMenu === 'finance' && <InvoiceView />}
          
          {/* Placeholder for other menus */}
          {['routers', 'tickets', 'settings', 'map', 'whatsapp'].includes(activeMenu) && (
            <div className="flex flex-col items-center justify-center h-full text-center">
              <div className="w-16 h-16 bg-slate-100 rounded-full flex items-center justify-center mb-4">
                <Settings className="text-slate-400" size={32} />
              </div>
              <h3 className="text-lg font-bold text-slate-700">Modul {activeMenu.charAt(0).toUpperCase() + activeMenu.slice(1)}</h3>
              <p className="text-slate-500 max-w-md mt-2">
                Halaman ini akan memuat fitur lanjutan yang terhubung ke Backend Node.js dan Database MySQL.
              </p>
            </div>
          )}
        </main>

      </div>
    </div>
  );
}