import React, { useState, useEffect, useMemo } from 'react';
import { 
  Plus, 
  Trash2, 
  CheckCircle, 
  XCircle, 
  PieChart, 
  List, 
  Calendar, 
  Wallet, 
  AlertCircle, 
  TrendingUp, 
  History, 
  CreditCard, 
  Repeat, 
  Bell, 
  LogOut, 
  User, 
  Lock, 
  ArrowRight, 
  Settings, 
  Download, 
  Upload
} from 'lucide-react';

// --- KOMPONEN LOGIN SCREEN ---
const LoginScreen = ({ onLogin }) => {
  const [name, setName] = useState('');
  const [pin, setPin] = useState('');
  const [error, setError] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!name.trim()) {
      setError('Nama harus diisi');
      return;
    }
    if (pin.length < 4) {
      setError('PIN minimal 4 karakter');
      return;
    }
    onLogin(name);
  };

  return (
    <div className="min-h-screen bg-blue-600 flex items-center justify-center p-4">
      <div className="bg-white w-full max-w-md rounded-3xl shadow-2xl overflow-hidden animate-in zoom-in-95 duration-500">
        <div className="p-8 text-center">
          <div className="bg-blue-100 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6 text-blue-600">
            <Wallet size={40} />
          </div>
          <h1 className="text-2xl font-bold text-gray-800 mb-2">Selamat Datang</h1>
          <p className="text-gray-500 mb-8">Silakan masuk untuk mengelola keuangan (Offline)</p>
          
          <form onSubmit={handleSubmit} className="space-y-4 text-left">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1 ml-1">Nama Panggilan</label>
              <div className="relative">
                <User className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" size={18} />
                <input 
                  type="text" 
                  className="w-full pl-10 pr-4 py-3 rounded-xl border border-gray-200 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition outline-none"
                  placeholder="Contoh: Budi"
                  value={name}
                  onChange={(e) => setName(e.target.value)}
                />
              </div>
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1 ml-1">PIN Keamanan</label>
              <div className="relative">
                <Lock className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" size={18} />
                <input 
                  type="password" 
                  className="w-full pl-10 pr-4 py-3 rounded-xl border border-gray-200 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition outline-none"
                  placeholder="****"
                  value={pin}
                  onChange={(e) => setPin(e.target.value)}
                />
              </div>
            </div>

            {error && (
              <p className="text-red-500 text-sm text-center bg-red-50 py-2 rounded-lg">{error}</p>
            )}

            <button 
              type="submit" 
              className="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3.5 rounded-xl shadow-lg transition transform active:scale-95 flex items-center justify-center gap-2 mt-4"
            >
              Masuk Aplikasi <ArrowRight size={18} />
            </button>
          </form>
        </div>
        <div className="bg-gray-50 p-4 text-center text-xs text-gray-400 border-t">
          DompetKu v1.0 • Data Tersimpan di Browser
        </div>
      </div>
    </div>
  );
};

// --- KOMPONEN UTAMA (APP) ---
export default function App() {
  // State Login
  const [user, setUser] = useState(() => {
    const savedUser = localStorage.getItem('dompetKuUser');
    return savedUser ? JSON.parse(savedUser) : null;
  });

  // State Data Tagihan
  const [bills, setBills] = useState(() => {
    const saved = localStorage.getItem('myBills');
    const today = new Date();
    const tomorrow = new Date(today);
    tomorrow.setDate(tomorrow.getDate() + 1);
    
    return saved ? JSON.parse(saved) : [
      { 
        id: 1, 
        title: 'Internet IndiHome', 
        amount: 350000, 
        dueDate: tomorrow.toISOString().split('T')[0], 
        category: 'Internet', 
        status: 'unpaid', 
        isRecurring: true 
      },
      { id: 2, title: 'Cicilan HP', amount: 1500000, dueDate: '2023-10-05', category: 'Cicilan', status: 'paid', currentTenor: 3, totalTenor: 12 },
    ];
  });

  const [view, setView] = useState('dashboard');
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [isSettingsOpen, setIsSettingsOpen] = useState(false); 
  const [filter, setFilter] = useState('all');

  // State Form Input
  const [newBill, setNewBill] = useState({
    title: '',
    amount: '',
    dueDate: '',
    category: 'Umum',
    currentTenor: '',
    totalTenor: '',
    isRecurring: false
  });

  // Effects (Simpan otomatis ke LocalStorage)
  useEffect(() => {
    localStorage.setItem('myBills', JSON.stringify(bills));
  }, [bills]);

  useEffect(() => {
    if (user) {
      localStorage.setItem('dompetKuUser', JSON.stringify(user));
    } else {
      localStorage.removeItem('dompetKuUser');
    }
  }, [user]);

  // Auth Handlers
  const handleLogin = (userName) => {
    setUser({ name: userName });
  };

  const handleLogout = () => {
    if (window.confirm('Apakah Anda yakin ingin keluar?')) {
      setUser(null);
    }
  };

  // --- FEATURE: BACKUP & RESTORE ---
  const handleBackup = () => {
    const dataToSave = {
      user: user,
      bills: bills,
      backupDate: new Date().toISOString()
    };
    
    const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(dataToSave));
    const downloadAnchorNode = document.createElement('a');
    downloadAnchorNode.setAttribute("href", dataStr);
    downloadAnchorNode.setAttribute("download", `DompetKu_Backup_${new Date().toISOString().split('T')[0]}.json`);
    document.body.appendChild(downloadAnchorNode);
    downloadAnchorNode.click();
    downloadAnchorNode.remove();
    setIsSettingsOpen(false);
  };

  const handleRestore = (event) => {
    const fileReader = new FileReader();
    const file = event.target.files[0];

    if (!file) return;

    fileReader.readAsText(file, "UTF-8");
    fileReader.onload = (e) => {
      try {
        const parsedData = JSON.parse(e.target.result);
        if (parsedData.bills && Array.isArray(parsedData.bills)) {
          if (window.confirm(`Ditemukan backup tanggal ${parsedData.backupDate ? parsedData.backupDate.split('T')[0] : 'Unknown'}. Timpa data saat ini?`)) {
            setBills(parsedData.bills);
            // Opsional: Restore user name juga
            // if (parsedData.user) setUser(parsedData.user);
            alert("Data berhasil dipulihkan!");
            setIsSettingsOpen(false);
          }
        } else {
          alert("Format file tidak valid.");
        }
      } catch (error) {
        alert("Gagal membaca file backup.");
      }
    };
  };

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

  const formatDate = (dateString) => {
    const options = { day: 'numeric', month: 'long', year: 'numeric' };
    return new Date(dateString).toLocaleDateString('id-ID', options);
  };

  const getDaysDiff = (dateString) => {
    const today = new Date();
    today.setHours(0, 0, 0, 0);
    const due = new Date(dateString);
    due.setHours(0, 0, 0, 0);
    const diffTime = due - today;
    return Math.ceil(diffTime / (1000 * 60 * 60 * 24));
  };

  // Logic Notifikasi
  const upcomingBills = useMemo(() => {
    return bills.filter(bill => {
      if (bill.status === 'paid') return false;
      const days = getDaysDiff(bill.dueDate);
      return days >= 0 && days <= 3;
    });
  }, [bills]);

  // Logic Statistik
  const stats = useMemo(() => {
    const totalBills = bills.reduce((acc, curr) => acc + curr.amount, 0);
    const totalPaid = bills.filter(b => b.status === 'paid').reduce((acc, curr) => acc + curr.amount, 0);
    const totalUnpaid = bills.filter(b => b.status === 'unpaid').reduce((acc, curr) => acc + curr.amount, 0);
    const categoryBreakdown = bills.reduce((acc, curr) => {
      acc[curr.category] = (acc[curr.category] || 0) + curr.amount;
      return acc;
    }, {});
    return { totalBills, totalPaid, totalUnpaid, categoryBreakdown };
  }, [bills]);

  // Logic Filter
  const filteredBills = bills.filter(bill => {
    if (filter === 'all') return true;
    return bill.status === filter;
  }).sort((a, b) => new Date(a.dueDate) - new Date(b.dueDate));

  // CRUD Handlers (Lokal Array Operation)
  const handleAddBill = (e) => {
    e.preventDefault();
    if (!newBill.title || !newBill.amount || !newBill.dueDate) return;

    const bill = {
      id: Date.now(),
      title: newBill.title,
      amount: parseFloat(newBill.amount),
      dueDate: newBill.dueDate,
      category: newBill.category,
      status: 'unpaid',
      isRecurring: newBill.isRecurring,
      currentTenor: !newBill.isRecurring && newBill.currentTenor ? parseInt(newBill.currentTenor) : null,
      totalTenor: !newBill.isRecurring && newBill.totalTenor ? parseInt(newBill.totalTenor) : null
    };

    setBills([bill, ...bills]);
    setNewBill({ title: '', amount: '', dueDate: '', category: 'Umum', currentTenor: '', totalTenor: '', isRecurring: false });
    setIsModalOpen(false);
  };

  const handleDelete = (id) => {
    if (window.confirm('Yakin ingin menghapus tagihan ini?')) {
        setBills(bills.filter(b => b.id !== id));
    }
  };

  const toggleStatus = (id) => {
    setBills(bills.map(b => b.id === id ? { ...b, status: b.status === 'paid' ? 'unpaid' : 'paid' } : b));
  };

  // --- RENDER UTAMA ---
  
  if (!user) {
    return <LoginScreen onLogin={handleLogin} />;
  }

  return (
    <div className="min-h-screen bg-gray-50 font-sans text-gray-800 pb-20">
      {/* Header Aplikasi */}
      <header className="bg-blue-600 text-white p-6 shadow-lg rounded-b-3xl relative overflow-hidden">
        {/* Dekorasi Background Header */}
        <div className="absolute top-0 right-0 w-32 h-32 bg-white opacity-5 rounded-full -mr-10 -mt-10"></div>
        <div className="absolute bottom-0 left-0 w-24 h-24 bg-white opacity-5 rounded-full -ml-10 -mb-10"></div>

        <div className="flex justify-between items-start mb-6 relative z-10">
          <div>
            <h1 className="text-2xl font-bold flex items-center gap-2">
              <Wallet size={28} /> DompetKu
            </h1>
            <p className="text-blue-100 text-sm mt-1 flex items-center gap-1">
              Halo, <span className="font-semibold text-white bg-blue-500 px-2 py-0.5 rounded-md">{user.name}</span>
            </p>
          </div>
          <div className="flex gap-2">
             <button 
              onClick={() => setIsSettingsOpen(true)}
              className="bg-blue-500 hover:bg-blue-400 text-white p-2.5 rounded-xl shadow-md transition"
              title="Pengaturan & Data"
            >
              <Settings size={20} />
            </button>
            <button 
              onClick={() => setIsModalOpen(true)}
              className="bg-white text-blue-600 p-2.5 rounded-xl shadow-md hover:bg-blue-50 transition active:scale-95"
            >
              <Plus size={24} />
            </button>
          </div>
        </div>

        {/* Kartu Ringkasan Atas */}
        <div className="grid grid-cols-2 gap-4 relative z-10">
          <div className="bg-white/10 backdrop-blur-md p-4 rounded-2xl border border-white/20 shadow-inner">
            <p className="text-xs text-blue-100 mb-1">Total Harus Dibayar</p>
            <p className="text-lg font-bold text-white">{formatRupiah(stats.totalUnpaid)}</p>
          </div>
          <div className="bg-white/10 backdrop-blur-md p-4 rounded-2xl border border-white/20 shadow-inner">
            <p className="text-xs text-blue-100 mb-1">Sudah Dibayar</p>
            <p className="text-lg font-bold text-green-300">{formatRupiah(stats.totalPaid)}</p>
          </div>
        </div>
      </header>

      {/* Konten Utama */}
      <main className="p-4 max-w-3xl mx-auto -mt-2">
        
        {/* Notifikasi H-3 */}
        {upcomingBills.length > 0 && (
          <div className="mb-6 bg-orange-50 border-l-4 border-orange-500 p-4 rounded-r-xl shadow-sm animate-in slide-in-from-top-2">
            <h3 className="text-orange-800 font-bold flex items-center gap-2 mb-3 text-sm uppercase tracking-wide">
              <Bell size={18} className="animate-bounce" /> Segera Jatuh Tempo
            </h3>
            <div className="space-y-2">
              {upcomingBills.map(bill => {
                 const days = getDaysDiff(bill.dueDate);
                 let label = '';
                 let colorClass = 'text-orange-700';
                 if (days === 0) { label = 'HARI INI!'; colorClass = 'text-red-600 font-extrabold'; }
                 else if (days === 1) { label = 'Besok'; colorClass = 'text-orange-700 font-bold'; }
                 else { label = `${days} hari lagi`; }
                 
                 return (
                   <div key={bill.id} className="flex justify-between items-center bg-white/60 p-2 rounded-lg border border-orange-100">
                     <div className="flex flex-col">
                        <span className="text-gray-800 font-medium text-sm">{bill.title}</span>
                        <span className="text-xs text-gray-500">{formatRupiah(bill.amount)}</span>
                     </div>
                     <span className={`text-xs px-2 py-1 rounded-full bg-orange-100 ${colorClass}`}>
                        {label}
                     </span>
                   </div>
                 )
              })}
            </div>
          </div>
        )}

        {/* Navigasi Tab */}
        <div className="flex bg-white p-1 rounded-xl shadow-sm mb-6 border border-gray-100 sticky top-4 z-20">
          <button 
            onClick={() => setView('dashboard')}
            className={`flex-1 py-2 text-sm font-medium rounded-lg flex items-center justify-center gap-2 transition ${view === 'dashboard' ? 'bg-blue-100 text-blue-700' : 'text-gray-500 hover:bg-gray-50'}`}
          >
            <List size={18} /> Daftar Tagihan
          </button>
          <button 
            onClick={() => setView('report')}
            className={`flex-1 py-2 text-sm font-medium rounded-lg flex items-center justify-center gap-2 transition ${view === 'report' ? 'bg-blue-100 text-blue-700' : 'text-gray-500 hover:bg-gray-50'}`}
          >
            <PieChart size={18} /> Laporan & Rekap
          </button>
        </div>

        {view === 'dashboard' ? (
          <>
            <div className="flex gap-2 mb-4 overflow-x-auto pb-2 scrollbar-hide">
              {['all', 'unpaid', 'paid'].map((f) => (
                <button
                  key={f}
                  onClick={() => setFilter(f)}
                  className={`px-4 py-1.5 rounded-full text-xs font-semibold capitalize border whitespace-nowrap transition ${
                    filter === f ? 'bg-blue-600 text-white border-blue-600' : 'bg-white text-gray-500 border-gray-200 hover:border-blue-300'
                  }`}
                >
                  {f === 'all' ? 'Semua' : f === 'unpaid' ? 'Belum Lunas' : 'Lunas'}
                </button>
              ))}
            </div>

            <div className="space-y-3">
              {filteredBills.length === 0 ? (
                <div className="text-center py-12 opacity-50">
                  <History size={48} className="mx-auto mb-2 text-gray-300" />
                  <p>Tidak ada tagihan yang ditemukan.</p>
                </div>
              ) : (
                filteredBills.map(bill => (
                  <div key={bill.id} className={`bg-white p-4 rounded-xl shadow-sm border-l-4 flex justify-between items-center transition hover:shadow-md ${
                    bill.status === 'paid' ? 'border-green-500' : new Date(bill.dueDate) < new Date() ? 'border-red-500' : 'border-yellow-500'
                  }`}>
                    <div className="flex-1">
                      <div className="flex items-center flex-wrap gap-2 mb-1">
                        <span className={`text-xs px-2 py-0.5 rounded text-white ${
                            bill.category === 'Internet' ? 'bg-purple-500' :
                            bill.category === 'Listrik' ? 'bg-yellow-500' :
                            bill.category === 'Air' ? 'bg-cyan-500' :
                            'bg-gray-500'
                        }`}>{bill.category}</span>
                        {bill.totalTenor && (
                          <span className="text-xs px-2 py-0.5 rounded bg-indigo-50 text-indigo-600 font-medium flex items-center gap-1">
                            <CreditCard size={10} /> {bill.currentTenor} / {bill.totalTenor}
                          </span>
                        )}
                        {bill.isRecurring && (
                          <span className="text-xs px-2 py-0.5 rounded bg-sky-50 text-sky-600 font-medium flex items-center gap-1">
                            <Repeat size={10} /> Bulanan
                          </span>
                        )}
                        {bill.status === 'unpaid' && getDaysDiff(bill.dueDate) < 0 && (
                          <span className="text-xs font-bold text-red-500 flex items-center gap-1">
                            <AlertCircle size={12} /> Terlambat
                          </span>
                        )}
                      </div>
                      <h3 className={`font-bold ${bill.status === 'paid' ? 'text-gray-400 line-through' : 'text-gray-800'}`}>{bill.title}</h3>
                      <p className="text-sm text-gray-500 flex items-center gap-1 mt-1"><Calendar size={12} /> {formatDate(bill.dueDate)}</p>
                      <p className="font-mono font-semibold text-blue-600 mt-1">{formatRupiah(bill.amount)}</p>
                    </div>
                    <div className="flex flex-col gap-2 ml-2">
                      <button onClick={() => toggleStatus(bill.id)} className={`p-2 rounded-full transition ${bill.status === 'paid' ? 'bg-green-100 text-green-600' : 'bg-gray-100 text-gray-400 hover:text-green-500'}`}><CheckCircle size={20} /></button>
                      <button onClick={() => handleDelete(bill.id)} className="p-2 rounded-full bg-red-50 text-red-500 hover:bg-red-100 transition"><Trash2 size={20} /></button>
                    </div>
                  </div>
                ))
              )}
            </div>
          </>
        ) : (
          <div className="space-y-6 animate-in fade-in slide-in-from-bottom-4 duration-500">
            <div className="bg-white p-5 rounded-xl shadow-sm border border-gray-100">
              <h3 className="text-lg font-bold mb-4 flex items-center gap-2"><TrendingUp size={20} className="text-blue-600" /> Ringkasan Pengeluaran</h3>
              <div className="space-y-4">
                <div className="flex justify-between items-end border-b pb-2"><span className="text-gray-500">Total Tagihan</span><span className="text-xl font-bold">{formatRupiah(stats.totalBills)}</span></div>
                <div className="flex justify-between items-end border-b pb-2"><span className="text-gray-500">Sisa Kewajiban</span><span className="text-xl font-bold text-red-500">{formatRupiah(stats.totalUnpaid)}</span></div>
                <div className="flex justify-between items-end pb-2"><span className="text-gray-500">Progress Pembayaran</span><span className="text-xl font-bold text-green-600">{stats.totalBills > 0 ? Math.round((stats.totalPaid / stats.totalBills) * 100) : 0}%</span></div>
                <div className="w-full bg-gray-200 rounded-full h-2.5"><div className="bg-blue-600 h-2.5 rounded-full transition-all duration-1000" style={{ width: `${stats.totalBills > 0 ? (stats.totalPaid / stats.totalBills) * 100 : 0}%` }}></div></div>
              </div>
            </div>
            <div className="bg-white p-5 rounded-xl shadow-sm border border-gray-100">
              <h3 className="text-lg font-bold mb-4">Per Kategori</h3>
              <div className="space-y-3">
                {Object.entries(stats.categoryBreakdown).map(([cat, amount]) => (
                  <div key={cat}>
                    <div className="flex justify-between text-sm mb-1"><span className="font-medium">{cat}</span><span className="font-mono text-gray-600">{formatRupiah(amount)}</span></div>
                    <div className="w-full bg-gray-100 rounded-full h-2"><div className={`h-2 rounded-full ${cat === 'Internet' ? 'bg-purple-400' : cat === 'Listrik' ? 'bg-yellow-400' : 'bg-blue-400'}`} style={{ width: `${(amount / stats.totalBills) * 100}%` }}></div></div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        )}
      </main>

      {/* Modal Settings / Data */}
      {isSettingsOpen && (
        <div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4 z-50">
          <div className="bg-white rounded-2xl p-6 w-full max-w-sm shadow-2xl animate-in zoom-in-95 duration-200">
            <div className="flex justify-between items-center mb-6">
              <h2 className="text-xl font-bold text-gray-800 flex items-center gap-2">
                <Settings size={20} /> Pengaturan
              </h2>
              <button onClick={() => setIsSettingsOpen(false)} className="text-gray-400 hover:text-gray-600"><XCircle size={24} /></button>
            </div>
            
            <div className="space-y-4">
              <div className="bg-blue-50 p-4 rounded-xl border border-blue-100">
                <h3 className="font-bold text-blue-800 mb-1">Backup & Restore</h3>
                <p className="text-xs text-blue-600 mb-3">
                  Gunakan fitur ini untuk memindahkan data ke perangkat lain (misal: Laptop ke HP).
                </p>
                
                <div className="flex gap-2 mb-3">
                  <button onClick={handleBackup} className="flex-1 bg-blue-600 text-white py-2 rounded-lg text-sm font-medium flex items-center justify-center gap-2 hover:bg-blue-700 transition">
                    <Download size={16} /> Backup (Simpan)
                  </button>
                </div>
                
                <div className="relative">
                  <input 
                    type="file" 
                    accept=".json"
                    onChange={handleRestore}
                    className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
                  />
                  <div className="bg-white border border-dashed border-gray-300 text-gray-600 py-2 rounded-lg text-sm font-medium flex items-center justify-center gap-2 hover:bg-gray-50 transition">
                    <Upload size={16} /> Restore (Buka File)
                  </div>
                </div>
              </div>

              <div className="border-t pt-4">
                <button 
                  onClick={() => {
                    handleLogout();
                    setIsSettingsOpen(false);
                  }}
                  className="w-full bg-red-100 text-red-600 py-3 rounded-xl font-bold hover:bg-red-200 transition flex items-center justify-center gap-2"
                >
                  <LogOut size={18} /> Keluar Aplikasi
                </button>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Modal Tambah Tagihan */}
      {isModalOpen && (
        <div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4 z-50">
          <div className="bg-white rounded-2xl p-6 w-full max-w-sm shadow-2xl animate-in zoom-in-95 duration-200">
            <div className="flex justify-between items-center mb-6">
              <h2 className="text-xl font-bold text-gray-800">Tambah Tagihan</h2>
              <button onClick={() => setIsModalOpen(false)} className="text-gray-400 hover:text-gray-600"><XCircle size={24} /></button>
            </div>
            <form onSubmit={handleAddBill} className="space-y-4">
              <div><label className="block text-sm font-medium text-gray-700 mb-1">Nama Tagihan</label><input type="text" required placeholder="Contoh: Listrik" className="w-full p-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 outline-none" value={newBill.title} onChange={(e) => setNewBill({...newBill, title: e.target.value})} /></div>
              <div className="grid grid-cols-2 gap-4">
                <div><label className="block text-sm font-medium text-gray-700 mb-1">Jumlah (Rp)</label><input type="number" required placeholder="0" className="w-full p-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 outline-none" value={newBill.amount} onChange={(e) => setNewBill({...newBill, amount: e.target.value})} /></div>
                <div><label className="block text-sm font-medium text-gray-700 mb-1">Kategori</label><select className="w-full p-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 outline-none bg-white" value={newBill.category} onChange={(e) => setNewBill({...newBill, category: e.target.value})}><option value="Umum">Umum</option><option value="Listrik">Listrik</option><option value="Internet">Internet</option><option value="Air">Air</option><option value="Cicilan">Cicilan</option><option value="Langganan">Langganan</option></select></div>
              </div>
              <div className="space-y-3 pt-2">
                <div className="flex items-center gap-2"><div className="relative flex items-center"><input type="checkbox" id="isRecurring" className="peer h-5 w-5 cursor-pointer appearance-none rounded-md border border-gray-300 transition-all checked:border-blue-600 checked:bg-blue-600" checked={newBill.isRecurring} onChange={(e) => { setNewBill({ ...newBill, isRecurring: e.target.checked, currentTenor: e.target.checked ? '' : newBill.currentTenor, totalTenor: e.target.checked ? '' : newBill.totalTenor }) }} /><div className="pointer-events-none absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-white opacity-0 peer-checked:opacity-100"><svg xmlns="http://www.w3.org/2000/svg" className="h-3.5 w-3.5" viewBox="0 0 20 20" fill="currentColor"><path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" /></svg></div></div><label htmlFor="isRecurring" className="text-sm font-medium text-gray-700 cursor-pointer select-none">Tagihan Berulang (Bulanan)</label></div>
                {!newBill.isRecurring && (<div className="grid grid-cols-2 gap-4 bg-gray-50 p-3 rounded-lg border border-gray-200 animate-in fade-in slide-in-from-top-2"><div><label className="block text-xs font-medium text-gray-600 mb-1">Cicilan Ke-</label><input type="number" placeholder="1" className="w-full p-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 outline-none text-sm" value={newBill.currentTenor} onChange={(e) => setNewBill({...newBill, currentTenor: e.target.value})} /></div><div><label className="block text-xs font-medium text-gray-600 mb-1">Total Tenor</label><input type="number" placeholder="12" className="w-full p-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 outline-none text-sm" value={newBill.totalTenor} onChange={(e) => setNewBill({...newBill, totalTenor: e.target.value})} /></div></div>)}
              </div>
              <div><label className="block text-sm font-medium text-gray-700 mb-1">Jatuh Tempo</label><input type="date" required className="w-full p-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 outline-none" value={newBill.dueDate} onChange={(e) => setNewBill({...newBill, dueDate: e.target.value})} /></div>
              <button type="submit" className="w-full bg-blue-600 text-white font-bold py-3 rounded-xl shadow-lg hover:bg-blue-700 transition transform active:scale-95 mt-2">Simpan Tagihan</button>
            </form>
          </div>
        </div>
      )}
    </div>
  );
}