import React, { useState, useEffect } from 'react';
import { initializeApp } from 'firebase/app';
import { getAuth, signInAnonymously, onAuthStateChanged, signInWithCustomToken } from 'firebase/auth';
import { getFirestore, doc, setDoc, getDoc, collection, onSnapshot, addDoc, deleteDoc, query } from 'firebase/firestore';
import { Home, Users, FileText, Settings, Plus, Trash2, Printer, Eye } from 'lucide-react';

// Konfigurasi Firebase dari environment
const firebaseConfig = JSON.parse(__firebase_config);
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);
const appId = typeof __app_id !== 'undefined' ? __app_id : 'mts-al-washliyah-16';

export default function App() {
  const [activeTab, setActiveTab] = useState('dashboard');
  const [user, setUser] = useState(null);
  const [guru, setGuru] = useState([]);
  const [gaji, setGaji] = useState([]);
  const [settings, setSettings] = useState({
    nama: 'MTs Al Washliyah 16',
    lokasi: 'Perbaungan',
    alamat: 'Jl. Melati No. 16, Perbaungan',
    bendahara: '',
    logo: ''
  });

  const [formGaji, setFormGaji] = useState({
    guruId: '',
    bulan: '',
    pokok: 0,
    tunjangan: 0,
    piket: 0,
    infaq: 0,
    koperasi: 0
  });

  const [previewData, setPreviewData] = useState(null);
  const [isModalGuruOpen, setIsModalGuruOpen] = useState(false);
  const [newGuru, setNewGuru] = useState({ nama: '', nuptk: '', jabatan: '', baseGaji: 0 });

  // 1. Setup Autentikasi (Rule 3)
  useEffect(() => {
    const initAuth = async () => {
      try {
        if (typeof __initial_auth_token !== 'undefined' && __initial_auth_token) {
          await signInWithCustomToken(auth, __initial_auth_token);
        } else {
          await signInAnonymously(auth);
        }
      } catch (err) {
        console.error("Auth failed:", err);
      }
    };
    initAuth();
    const unsubscribe = onAuthStateChanged(auth, setUser);
    return () => unsubscribe();
  }, []);

  // 2. Listener Data (Rule 1 & 2)
  useEffect(() => {
    if (!user) return;

    // Path genap untuk dokumen: artifacts/{id}/public/data/settings/config
    const settingsRef = doc(db, 'artifacts', appId, 'public', 'data', 'settings', 'config');
    const unsubSettings = onSnapshot(settingsRef, (docSnap) => {
      if (docSnap.exists()) {
        setSettings(docSnap.data());
      }
    }, (err) => console.error("Settings error:", err));

    const guruRef = collection(db, 'artifacts', appId, 'public', 'data', 'guru');
    const unsubGuru = onSnapshot(guruRef, (snapshot) => {
      setGuru(snapshot.docs.map(d => ({ id: d.id, ...d.data() })));
    }, (err) => console.error("Guru error:", err));

    const gajiRef = collection(db, 'artifacts', appId, 'public', 'data', 'gaji');
    const unsubGaji = onSnapshot(gajiRef, (snapshot) => {
      setGaji(snapshot.docs.map(d => ({ id: d.id, ...d.data() })));
    }, (err) => console.error("Gaji error:", err));

    return () => {
      unsubSettings();
      unsubGuru();
      unsubGaji();
    };
  }, [user]);

  // Fungsi utilitas
  const formatIDR = (val) => new Intl.NumberFormat('id-ID', { 
    style: 'currency', 
    currency: 'IDR', 
    maximumFractionDigits: 0 
  }).format(val || 0);

  const terbilang = (n) => {
    const b = ["", "satu", "dua", "tiga", "empat", "lima", "enam", "tujuh", "delapan", "sembilan", "sepuluh", "sebelas"];
    if (n < 12) return b[n];
    if (n < 20) return terbilang(n - 10) + " belas";
    if (n < 100) return terbilang(Math.floor(n / 10)) + " puluh " + terbilang(n % 10);
    if (n < 200) return "seratus " + terbilang(n - 100);
    if (n < 1000) return terbilang(Math.floor(n / 100)) + " ratus " + terbilang(n % 100);
    if (n < 2000) return "seribu " + terbilang(n - 1000);
    if (n < 1000000) return terbilang(Math.floor(n / 1000)) + " ribu " + terbilang(n % 1000);
    return "terlalu besar";
  };

  const saveSettings = async () => {
    if (!user) return;
    try {
      const settingsRef = doc(db, 'artifacts', appId, 'public', 'data', 'settings', 'config');
      await setDoc(settingsRef, settings);
    } catch (err) {
      console.error(err);
    }
  };

  const handlePreview = () => {
    const selectedGuru = guru.find(g => g.id === formGaji.guruId);
    if (!selectedGuru || !formGaji.bulan) return;
    
    const dateObj = new Date(formGaji.bulan + "-01");
    const bulanStr = dateObj.toLocaleDateString('id-ID', { month: 'long', year: 'numeric' }).toUpperCase();
    
    const totalPlus = Number(formGaji.pokok) + Number(formGaji.tunjangan) + Number(formGaji.piket);
    const totalMinus = Number(formGaji.infaq) + Number(formGaji.koperasi);
    const netto = totalPlus - totalMinus;

    setPreviewData({
      guru: selectedGuru,
      bulan: bulanStr,
      pokok: Number(formGaji.pokok),
      tunjangan: Number(formGaji.tunjangan),
      piket: Number(formGaji.piket),
      infaq: Number(formGaji.infaq),
      koperasi: Number(formGaji.koperasi),
      totalPlus,
      totalMinus,
      netto,
      terbilang: terbilang(netto) + " Rupiah"
    });
  };

  if (!user) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-slate-100">
        <div className="text-center">
          <div className="animate-spin rounded-full h-10 w-10 border-b-2 border-emerald-800 mx-auto mb-4"></div>
          <p className="text-slate-600">Menghubungkan ke Server...</p>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-slate-50 text-slate-900 pb-10">
      <nav className="bg-emerald-800 text-white shadow-md print:hidden">
        <div className="max-w-5xl mx-auto px-4 py-3 flex justify-between items-center">
          <div className="flex items-center space-x-3">
            <div className="w-10 h-10 bg-white rounded flex items-center justify-center overflow-hidden">
              {settings.logo ? <img src={settings.logo} className="w-full h-full object-cover" /> : <FileText className="text-emerald-800" />}
            </div>
            <h1 className="font-bold uppercase text-sm tracking-tight">{settings.nama}</h1>
          </div>
          <div className="flex space-x-2">
            <button onClick={() => setActiveTab('dashboard')} className={`p-2 rounded ${activeTab === 'dashboard' ? 'bg-emerald-900' : 'hover:bg-emerald-700'}`}><Home size={18}/></button>
            <button onClick={() => setActiveTab('guru')} className={`p-2 rounded ${activeTab === 'guru' ? 'bg-emerald-900' : 'hover:bg-emerald-700'}`}><Users size={18}/></button>
            <button onClick={() => setActiveTab('gaji')} className={`p-2 rounded ${activeTab === 'gaji' ? 'bg-emerald-900' : 'hover:bg-emerald-700'}`}><FileText size={18}/></button>
            <button onClick={() => setActiveTab('settings')} className={`p-2 rounded ${activeTab === 'settings' ? 'bg-emerald-900' : 'hover:bg-emerald-700'}`}><Settings size={18}/></button>
          </div>
        </div>
      </nav>

      <div className="max-w-5xl mx-auto px-4 mt-8">
        {activeTab === 'dashboard' && (
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="bg-white p-6 rounded-xl border shadow-sm">
              <h3 className="text-xs font-bold text-slate-400 uppercase">Total Guru</h3>
              <p className="text-3xl font-black">{guru.length}</p>
            </div>
            <div className="bg-white p-6 rounded-xl border shadow-sm">
              <h3 className="text-xs font-bold text-slate-400 uppercase">Slip Dibuat</h3>
              <p className="text-3xl font-black">{gaji.length}</p>
            </div>
          </div>
        )}

        {activeTab === 'guru' && (
          <div className="bg-white rounded-xl border shadow-sm overflow-hidden">
            <div className="p-4 border-b flex justify-between items-center">
              <h2 className="font-bold">Data Guru</h2>
              <button onClick={() => setIsModalGuruOpen(true)} className="bg-emerald-700 text-white px-3 py-1 rounded text-sm flex items-center gap-1"><Plus size={14}/> Tambah</button>
            </div>
            <table className="w-full text-left text-sm">
              <thead className="bg-slate-50 border-b uppercase text-[10px] font-bold text-slate-500">
                <tr>
                  <th className="px-4 py-3">Nama</th>
                  <th className="px-4 py-3">Jabatan</th>
                  <th className="px-4 py-3">Base Gaji</th>
                  <th className="px-4 py-3 text-right">Aksi</th>
                </tr>
              </thead>
              <tbody>
                {guru.map(g => (
                  <tr key={g.id} className="border-b last:border-0">
                    <td className="px-4 py-3 font-medium">{g.nama}</td>
                    <td className="px-4 py-3 text-slate-500">{g.jabatan}</td>
                    <td className="px-4 py-3">{formatIDR(g.baseGaji)}</td>
                    <td className="px-4 py-3 text-right">
                      <button onClick={async () => await deleteDoc(doc(db, 'artifacts', appId, 'public', 'data', 'guru', g.id))} className="text-rose-500"><Trash2 size={14}/></button>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}

        {activeTab === 'gaji' && (
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <div className="space-y-4 print:hidden">
              <div className="bg-white p-5 rounded-xl border shadow-sm space-y-3">
                <h3 className="text-xs font-bold border-b pb-2 uppercase">Input Gaji</h3>
                <select className="w-full border p-2 rounded text-sm" onChange={(e) => {
                  const g = guru.find(x => x.id === e.target.value);
                  setFormGaji({...formGaji, guruId: e.target.value, pokok: g?.baseGaji || 0});
                }}>
                  <option value="">Pilih Guru</option>
                  {guru.map(g => <option key={g.id} value={g.id}>{g.nama}</option>)}
                </select>
                <input type="month" className="w-full border p-2 rounded text-sm" onChange={e => setFormGaji({...formGaji, bulan: e.target.value})} />
                <div className="grid grid-cols-2 gap-2">
                  <input type="number" placeholder="Tunjangan" className="border p-2 rounded text-sm" onChange={e => setFormGaji({...formGaji, tunjangan: e.target.value})} />
                  <input type="number" placeholder="Piket" className="border p-2 rounded text-sm" onChange={e => setFormGaji({...formGaji, piket: e.target.value})} />
                </div>
                <div className="grid grid-cols-2 gap-2">
                  <input type="number" placeholder="Infaq" className="border p-2 rounded text-sm" onChange={e => setFormGaji({...formGaji, infaq: e.target.value})} />
                  <input type="number" placeholder="Koperasi" className="border p-2 rounded text-sm" onChange={e => setFormGaji({...formGaji, koperasi: e.target.value})} />
                </div>
                <button onClick={handlePreview} className="w-full bg-blue-600 text-white py-2 rounded font-bold text-sm flex items-center justify-center gap-2"><Eye size={16}/> Preview</button>
                <button onClick={() => window.print()} className="w-full bg-emerald-700 text-white py-2 rounded font-bold text-sm flex items-center justify-center gap-2"><Printer size={16}/> Cetak</button>
              </div>
            </div>
            
            <div className="lg:col-span-2">
              {previewData ? (
                <div className="bg-white border p-10 shadow-sm print:shadow-none print:border-0 print:p-0 rounded-xl">
                  <div className="flex items-center border-b-2 border-emerald-800 pb-4 mb-6">
                    <div className="w-12 h-12 bg-emerald-800 rounded mr-4 flex items-center justify-center text-white font-bold">
                      {settings.logo ? <img src={settings.logo} className="w-full h-full object-cover" /> : "AW"}
                    </div>
                    <div>
                      <h2 className="text-xl font-black text-emerald-800">{settings.nama}</h2>
                      <p className="text-[10px] text-slate-500 uppercase">{settings.alamat}</p>
                    </div>
                  </div>
                  <div className="flex justify-between items-end mb-8">
                    <div>
                      <p className="text-[10px] uppercase text-slate-400 font-bold">Penerima</p>
                      <p className="font-bold text-lg leading-tight">{previewData.guru.nama}</p>
                      <p className="text-xs text-slate-500">{previewData.guru.jabatan}</p>
                    </div>
                    <div className="text-right">
                      <p className="text-xs font-black text-emerald-700">{previewData.bulan}</p>
                      <p className="text-[10px] italic text-slate-400">Slip Gaji Digital</p>
                    </div>
                  </div>
                  <div className="grid grid-cols-2 gap-6 text-sm mb-6">
                    <div className="bg-slate-50 p-4 rounded-lg">
                      <p className="font-bold text-blue-800 border-b mb-2 text-xs">PENERIMAAN</p>
                      <div className="flex justify-between mb-1"><span>Pokok</span><span>{formatIDR(previewData.pokok)}</span></div>
                      <div className="flex justify-between mb-1"><span>Tunjangan</span><span>{formatIDR(previewData.tunjangan)}</span></div>
                      <div className="flex justify-between mb-1"><span>Piket</span><span>{formatIDR(previewData.piket)}</span></div>
                    </div>
                    <div className="bg-slate-50 p-4 rounded-lg">
                      <p className="font-bold text-rose-800 border-b mb-2 text-xs">POTONGAN</p>
                      <div className="flex justify-between mb-1"><span>Infaq</span><span>{formatIDR(previewData.infaq)}</span></div>
                      <div className="flex justify-between mb-1"><span>Koperasi</span><span>{formatIDR(previewData.koperasi)}</span></div>
                    </div>
                  </div>
                  <div className="bg-emerald-800 text-white p-5 rounded-lg flex justify-between items-center">
                    <span className="text-xs font-bold uppercase tracking-widest">Total Diterima</span>
                    <span className="text-2xl font-black">{formatIDR(previewData.netto)}</span>
                  </div>
                  <p className="mt-2 text-[10px] italic text-slate-400 uppercase">Terbilang: {previewData.terbilang}</p>
                </div>
              ) : (
                <div className="h-full min-h-[400px] border-2 border-dashed rounded-xl flex items-center justify-center text-slate-300 italic">
                  Belum ada data untuk ditampilkan
                </div>
              )}
            </div>
          </div>
        )}

        {activeTab === 'settings' && (
          <div className="max-w-md mx-auto bg-white p-6 rounded-xl border shadow-sm space-y-4">
            <h2 className="font-bold">Pengaturan Instansi</h2>
            <input placeholder="Nama Madrasah" className="w-full border p-2 rounded" value={settings.nama} onChange={e => setSettings({...settings, nama: e.target.value})} />
            <textarea placeholder="Alamat Lengkap" className="w-full border p-2 rounded" value={settings.alamat} onChange={e => setSettings({...settings, alamat: e.target.value})} />
            <input placeholder="Nama Bendahara" className="w-full border p-2 rounded" value={settings.bendahara} onChange={e => setSettings({...settings, bendahara: e.target.value})} />
            <button onClick={saveSettings} className="w-full bg-emerald-800 text-white py-2 rounded font-bold">Simpan Perubahan</button>
          </div>
        )}
      </div>

      {isModalGuruOpen && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50">
          <div className="bg-white p-6 rounded-xl w-full max-w-sm space-y-3">
            <h3 className="font-bold">Tambah Guru Baru</h3>
            <input placeholder="Nama Guru" className="w-full border p-2 rounded" onChange={e => setNewGuru({...newGuru, nama: e.target.value})} />
            <input placeholder="Jabatan" className="w-full border p-2 rounded" onChange={e => setNewGuru({...newGuru, jabatan: e.target.value})} />
            <input type="number" placeholder="Gaji Pokok" className="w-full border p-2 rounded" onChange={e => setNewGuru({...newGuru, baseGaji: Number(e.target.value)})} />
            <div className="flex gap-2">
              <button onClick={() => setIsModalGuruOpen(false)} className="flex-1 bg-slate-100 py-2 rounded">Batal</button>
              <button onClick={async () => {
                await addDoc(collection(db, 'artifacts', appId, 'public', 'data', 'guru'), newGuru);
                setIsModalGuruOpen(false);
              }} className="flex-1 bg-emerald-700 text-white py-2 rounded font-bold">Simpan</button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}