import React, { useState, useEffect, useRef } from 'react';
import { Printer, Save, List, Plus, Receipt, User, Calendar, CreditCard, X, MessageCircle, Share2, Download, ImageIcon, Lock, LogOut, Users, Edit2, Trash2, Shield, Database, Copy, Check } from 'lucide-react';

// ============================================================================
// KONFIGURASI SISTEM (UNTUK HOSTING & MYSQL)
// ============================================================================
// Ubah MOCK_MODE menjadi false jika API backend PHP sudah di-hosting
const CONFIG = {
  MOCK_MODE: false, 
  API_BASE_URL: 'https://qurban.brayat39.com/api.php' // Ganti dengan URL file PHP Anda di server
};

// --- SIMULASI DATABASE UNTUK PREVIEW CANVAS (DENGAN CONTOH DATA) ---
const initMockDB = () => {
  if (!localStorage.getItem('db_users')) {
    localStorage.setItem('db_users', JSON.stringify([
      { id: '1', username: 'admin', password: 'password123', name: 'Administrator Pusat', role: 'admin' },
      { id: '2', username: 'panitia1', password: 'sandi123', name: 'Budi Santoso', role: 'panitia' },
      { id: '3', username: 'panitia2', password: 'sandi123', name: 'Siti Aminah', role: 'panitia' }
    ]));
  }
  if (!localStorage.getItem('db_kwitansi') || JSON.parse(localStorage.getItem('db_kwitansi')).length === 0) {
    const year = new Date().getFullYear();
    localStorage.setItem('db_kwitansi', JSON.stringify([
      {
        id: '102',
        noKwitansi: `QBN-${year}-002`,
        namaShohibul: 'H. Abdullah bin Umar',
        alamat: 'Jl. Merdeka No. 45, Jakarta',
        jenisHewan: 'Sapi Utuh (1/1)',
        jumlahDana: 24500000,
        terbilang: 'Dua Puluh Empat Juta Lima Ratus Ribu Rupiah',
        tanggal: new Date().toISOString().split('T')[0],
        keterangan: 'Lunas, Sapi Limosin',
        namaPanitia: 'Siti Aminah'
      },
      {
        id: '101',
        noKwitansi: `QBN-${year}-001`,
        namaShohibul: 'Keluarga Bpk. Haryanto',
        alamat: 'Perum. Indah Blok B/12',
        jenisHewan: 'Sapi (1/7)',
        jumlahDana: 3500000,
        terbilang: 'Tiga Juta Lima Ratus Ribu Rupiah',
        tanggal: new Date(Date.now() - 86400000).toISOString().split('T')[0],
        keterangan: 'Kolektif Sapi ke-1',
        namaPanitia: 'Budi Santoso'
      }
    ]));
  }
};
if (CONFIG.MOCK_MODE) initMockDB();

// --- API SERVICE ---
const api = {
  login: async (username, password) => {
    if (CONFIG.MOCK_MODE) {
      return new Promise((resolve) => setTimeout(() => {
        const users = JSON.parse(localStorage.getItem('db_users'));
        const user = users.find(u => u.username === username && u.password === password);
        if (user) resolve({ success: true, user: { id: user.id, username: user.username, name: user.name, role: user.role } });
        else resolve({ success: false, message: 'Username atau password salah' });
      }, 500));
    } else {
      try {
        const res = await fetch(`${CONFIG.API_BASE_URL}?action=login`, { method: 'POST', body: JSON.stringify({ username, password }) });
        return res.json();
      } catch (err) { return { success: false, message: 'Gagal terhubung ke server PHP' }; }
    }
  },

  getUsers: async () => {
    if (CONFIG.MOCK_MODE) {
      return new Promise(resolve => setTimeout(() => {
        const users = JSON.parse(localStorage.getItem('db_users'));
        resolve({ success: true, data: users.filter(u => u.role !== 'admin') });
      }, 300));
    } else {
      const res = await fetch(`${CONFIG.API_BASE_URL}?action=get_users`);
      return res.json();
    }
  },

  saveUser: async (userData) => {
    if (CONFIG.MOCK_MODE) {
      return new Promise(resolve => setTimeout(() => {
        let users = JSON.parse(localStorage.getItem('db_users'));
        if (userData.id) {
          users = users.map(u => u.id === userData.id ? { ...u, ...userData, password: userData.password || u.password } : u);
        } else {
          const exists = users.find(u => u.username === userData.username);
          if (exists) return resolve({ success: false, message: 'Username sudah digunakan' });
          users.push({ ...userData, id: Date.now().toString(), role: 'panitia' });
        }
        localStorage.setItem('db_users', JSON.stringify(users));
        resolve({ success: true, message: 'Data panitia berhasil disimpan' });
      }, 300));
    } else {
      const res = await fetch(`${CONFIG.API_BASE_URL}?action=save_user`, { method: 'POST', body: JSON.stringify(userData) });
      return res.json();
    }
  },

  deleteUser: async (id) => {
    if (CONFIG.MOCK_MODE) {
      return new Promise(resolve => setTimeout(() => {
        let users = JSON.parse(localStorage.getItem('db_users'));
        users = users.filter(u => u.id !== id);
        localStorage.setItem('db_users', JSON.stringify(users));
        resolve({ success: true, message: 'Panitia berhasil dihapus' });
      }, 300));
    } else {
      const res = await fetch(`${CONFIG.API_BASE_URL}?action=delete_user`, { method: 'POST', body: JSON.stringify({ id }) });
      return res.json();
    }
  },

  getKwitansi: async () => {
    if (CONFIG.MOCK_MODE) {
      return new Promise(resolve => setTimeout(() => resolve({ success: true, data: JSON.parse(localStorage.getItem('db_kwitansi')) }), 300));
    } else {
      const res = await fetch(`${CONFIG.API_BASE_URL}?action=get_kwitansi`);
      return res.json();
    }
  },

  saveKwitansi: async (data) => {
    if (CONFIG.MOCK_MODE) {
      return new Promise(resolve => setTimeout(() => {
        let kwitansi = JSON.parse(localStorage.getItem('db_kwitansi'));
        kwitansi.unshift({ ...data, id: Date.now().toString() });
        localStorage.setItem('db_kwitansi', JSON.stringify(kwitansi));
        resolve({ success: true, data: kwitansi });
      }, 300));
    } else {
      const res = await fetch(`${CONFIG.API_BASE_URL}?action=save_kwitansi`, { method: 'POST', body: JSON.stringify(data) });
      return res.json();
    }
  }
};
// ============================================================================

function terbilang(angka) {
  const bilangan = ['', 'Satu', 'Dua', 'Tiga', 'Empat', 'Lima', 'Enam', 'Tujuh', 'Delapan', 'Sembilan', 'Sepuluh', 'Sebelas'];
  let temp = '';
  if (angka < 12) temp = ' ' + bilangan[angka];
  else if (angka < 20) temp = terbilang(angka - 10) + ' Belas';
  else if (angka < 100) temp = terbilang(Math.floor(angka / 10)) + ' Puluh' + terbilang(angka % 10);
  else if (angka < 200) temp = ' Seratus' + terbilang(angka - 100);
  else if (angka < 1000) temp = terbilang(Math.floor(angka / 100)) + ' Ratus' + terbilang(angka % 100);
  else if (angka < 2000) temp = ' Seribu' + terbilang(angka - 1000);
  else if (angka < 1000000) temp = terbilang(Math.floor(angka / 1000)) + ' Ribu' + terbilang(angka % 1000);
  else if (angka < 1000000000) temp = terbilang(Math.floor(angka / 1000000)) + ' Juta' + terbilang(angka % 1000000);
  else if (angka < 1000000000000) temp = terbilang(Math.floor(angka / 1000000000)) + ' Miliar' + terbilang(angka % 1000000000);
  return temp.trim();
}

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

const ReceiptCard = ({ data }) => {
  if (!data) return null;
  return (
    <div className="max-w-4xl mx-auto p-8 border-4 border-double border-emerald-800 rounded-xl relative bg-white shadow-sm print:shadow-none print:m-0 print:border-4">
      <div className="absolute inset-0 opacity-[0.03] pointer-events-none flex items-center justify-center">
        <Receipt className="w-96 h-96 text-emerald-900" />
      </div>
      <div className="flex items-center justify-between border-b-2 border-emerald-800 pb-4 mb-6 relative z-10 bg-white/80">
        <div className="flex items-center gap-4">
          <div className="bg-emerald-800 p-3 rounded-lg text-white"><Receipt className="h-10 w-10" /></div>
          <div>
            <h1 className="text-2xl font-extrabold text-emerald-900 uppercase tracking-widest">Kwitansi Qurban</h1>
            <p className="text-sm text-emerald-700 font-semibold">Panitia Penerimaan & Penyaluran Hewan Qurban</p>
          </div>
        </div>
        <div className="text-right">
          <div className="text-sm font-bold text-gray-600 uppercase tracking-wider mb-1">No. Kwitansi</div>
          <div className="text-lg font-mono font-bold text-red-600 bg-red-50 px-3 py-1 border border-red-200 rounded">{data.noKwitansi}</div>
        </div>
      </div>

      <div className="space-y-6 relative z-10 text-gray-800 bg-white/80 pb-4">
        <div className="flex items-start">
          <div className="w-48 font-semibold">Telah terima dari</div><div className="w-4">:</div>
          <div className="flex-1 border-b border-dashed border-gray-400 pb-1 font-bold text-lg">{data.namaShohibul} {data.alamat ? `— ${data.alamat}` : ''}</div>
        </div>
        <div className="flex items-start">
          <div className="w-48 font-semibold">Uang Sejumlah</div><div className="w-4">:</div>
          <div className="flex-1 border-b border-dashed border-gray-400 pb-1">
            <div className="bg-gray-100 italic px-4 py-2 rounded font-medium border border-gray-200 inline-block w-full">{data.terbilang}</div>
          </div>
        </div>
        <div className="flex items-start">
          <div className="w-48 font-semibold">Untuk Pembayaran</div><div className="w-4">:</div>
          <div className="flex-1 border-b border-dashed border-gray-400 pb-1 font-medium">
            Dana Ibadah Qurban berupa <span className="font-bold">{data.jenisHewan}</span>.
            {data.keterangan && <span className="italic block mt-1 text-sm text-gray-600">Catatan: {data.keterangan}</span>}
          </div>
        </div>
      </div>

      <div className="mt-12 flex justify-between items-end relative z-10 bg-white/80 pt-4">
        <div className="bg-emerald-50 border-2 border-emerald-800 px-6 py-3 rounded-lg shadow-sm">
          <span className="text-sm font-bold text-emerald-800 uppercase tracking-widest block mb-1">Terbilang</span>
          <span className="text-3xl font-extrabold text-emerald-900">{formatRupiah(data.jumlahDana)}</span>
        </div>
        <div className="text-center w-64">
          <p className="text-sm text-gray-600 mb-8">
            {new Date(data.tanggal).toLocaleDateString('id-ID', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}<br />Panitia Qurban / Penerima,
          </p>
          <div className="font-bold w-48 mx-auto text-emerald-900 border-b border-gray-800 pb-1 uppercase">
            {data.namaPanitia || '( ......................................... )'}
          </div>
        </div>
      </div>
      <div className="mt-8 text-center text-xs italic text-gray-500 border-t border-gray-200 pt-2 relative z-10 bg-white/80">
        "Semoga Allah SWT menerima ibadah qurban kita. Aamiin."
      </div>
    </div>
  );
};

// ============================================================================
// KOMPONEN DASHBOARD PANITIA (CRUD Kwitansi)
// ============================================================================
const PanitiaDashboard = ({ currentUser }) => {
  const [entries, setEntries] = useState([]);
  const [currentPrint, setCurrentPrint] = useState(null);
  const [showPreview, setShowPreview] = useState(false);
  const [isProcessing, setIsProcessing] = useState(false);
  const [isLoading, setIsLoading] = useState(true);
  
  const [formData, setFormData] = useState({
    noKwitansi: '', namaShohibul: '', alamat: '', jenisHewan: 'Sapi (1/7)', jumlahDana: '', tanggal: new Date().toISOString().split('T')[0], keterangan: ''
  });

  useEffect(() => { loadKwitansi(); }, []);
  useEffect(() => { generateNoKwitansi(); }, [entries]);

  const loadKwitansi = async () => {
    setIsLoading(true);
    const res = await api.getKwitansi();
    if (res.success) setEntries(res.data);
    setIsLoading(false);
  };

  const generateNoKwitansi = () => {
    const year = new Date().getFullYear();
    const count = entries.length + 1;
    const paddedCount = String(count).padStart(3, '0');
    setFormData(prev => ({ ...prev, noKwitansi: `QBN-${year}-${paddedCount}` }));
  };

  const handleInputChange = (e) => setFormData(prev => ({ ...prev, [e.target.name]: e.target.value }));

  const handleSubmit = async (e, isPrintAndSave = false) => {
    e.preventDefault();
    if (!formData.namaShohibul || !formData.jumlahDana) return;

    const newEntry = {
      ...formData,
      namaPanitia: currentUser.name,
      jumlahDana: parseFloat(formData.jumlahDana),
      terbilang: terbilang(parseFloat(formData.jumlahDana)) + ' Rupiah'
    };

    setIsProcessing(true);
    const res = await api.saveKwitansi(newEntry);
    
    if (res.success) {
      if(CONFIG.MOCK_MODE) {
        setEntries(res.data);
        setCurrentPrint(res.data[0]);
      } else {
        await loadKwitansi();
        setCurrentPrint(newEntry);
      }
      setFormData({ noKwitansi: '', namaShohibul: '', alamat: '', jenisHewan: 'Sapi (1/7)', jumlahDana: '', tanggal: formData.tanggal, keterangan: '' });
      if (isPrintAndSave) setShowPreview(true);
    } else alert('Gagal menyimpan kwitansi.');
    setIsProcessing(false);
  };

  const handlePrint = (entry) => { setCurrentPrint(entry); setShowPreview(true); };
  const triggerPrintSubmit = (e) => { handleSubmit(e, true); };

  const generateImageBlob = async () => {
    if (!window.html2canvas) return alert('Sistem sedang memuat modul gambar. Coba sebentar lagi.');
    const element = document.getElementById('receipt-print-area');
    if (!element) return null;
    try {
      const canvas = await window.html2canvas(element, { scale: 2, backgroundColor: '#ffffff', useCORS: true });
      return new Promise((resolve) => canvas.toBlob((blob) => resolve(blob), 'image/png'));
    } catch (err) { return null; }
  };

  const handleDownloadImage = async () => {
    setIsProcessing(true);
    const blob = await generateImageBlob();
    if (blob) {
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url; a.download = `Kwitansi_Qurban_${currentPrint.noKwitansi}.png`; a.click();
      URL.revokeObjectURL(url);
    }
    setIsProcessing(false);
  };

  const handleShareImage = async () => {
    setIsProcessing(true);
    const blob = await generateImageBlob();
    if (blob) {
      const file = new File([blob], `Kwitansi_Qurban_${currentPrint.noKwitansi}.png`, { type: 'image/png' });
      if (navigator.canShare && navigator.canShare({ files: [file] })) {
        try { await navigator.share({ title: `Kwitansi Qurban - ${currentPrint.namaShohibul}`, text: 'Berikut bukti kwitansi qurban.', files: [file] }); } catch (err) { }
      } else {
        alert('Fitur bagikan gambar tidak didukung di browser ini. Gambar akan diunduh.');
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a'); a.href = url; a.download = file.name; a.click();
        URL.revokeObjectURL(url);
      }
    }
    setIsProcessing(false);
  };

  return (
    <>
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
        <div className="lg:col-span-1">
          <div className="bg-white rounded-xl shadow-sm border border-emerald-100 p-6">
            <div className="flex items-center gap-2 mb-6 border-b border-emerald-50 pb-4">
              <Plus className="h-5 w-5 text-emerald-600" />
              <h2 className="text-lg font-semibold text-emerald-900">Input Data Baru</h2>
            </div>
            <form onSubmit={e => handleSubmit(e, false)} className="space-y-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">No. Kwitansi</label>
                <input type="text" name="noKwitansi" value={formData.noKwitansi} readOnly className="w-full px-3 py-2 bg-gray-50 border border-gray-300 rounded-lg text-gray-500" />
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Nama Shohibul (Penyetor) *</label>
                <div className="relative">
                  <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"><User className="h-4 w-4 text-gray-400" /></div>
                  <input type="text" name="namaShohibul" required value={formData.namaShohibul} onChange={handleInputChange} placeholder="Nama lengkap" className="w-full pl-10 px-3 py-2 border border-gray-300 rounded-lg focus:ring-emerald-500 focus:border-emerald-500" />
                </div>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Alamat / No. HP</label>
                <input type="text" name="alamat" value={formData.alamat} onChange={handleInputChange} placeholder="Opsional" className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-emerald-500 focus:border-emerald-500" />
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Jenis Hewan Qurban</label>
                <select name="jenisHewan" value={formData.jenisHewan} onChange={handleInputChange} className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-emerald-500 focus:border-emerald-500">
                  <option value="Sapi (1/7)">Sapi (Kolektif 1/7)</option>
                  <option value="Sapi Utuh (1/1)">Sapi Utuh (1/1)</option>
                  <option value="Kambing / Domba">Kambing / Domba</option>
                  <option value="Sedekah Daging">Sedekah Daging</option>
                </select>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Jumlah Dana (Rp) *</label>
                <div className="relative">
                  <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"><span className="text-gray-500 font-medium text-sm">Rp</span></div>
                  <input type="number" name="jumlahDana" required value={formData.jumlahDana} onChange={handleInputChange} placeholder="Contoh: 3500000" className="w-full pl-10 px-3 py-2 border border-gray-300 rounded-lg focus:ring-emerald-500 focus:border-emerald-500" />
                </div>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Tanggal</label>
                <div className="relative">
                  <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"><Calendar className="h-4 w-4 text-gray-400" /></div>
                  <input type="date" name="tanggal" value={formData.tanggal} onChange={handleInputChange} className="w-full pl-10 px-3 py-2 border border-gray-300 rounded-lg focus:ring-emerald-500 focus:border-emerald-500" />
                </div>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Keterangan</label>
                <input type="text" name="keterangan" value={formData.keterangan} onChange={handleInputChange} placeholder="Contoh: Lunas" className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-emerald-500 focus:border-emerald-500" />
              </div>
              <div className="pt-4 flex gap-3">
                <button type="submit" disabled={isProcessing} className="flex-1 flex justify-center items-center gap-2 bg-emerald-100 text-emerald-800 px-4 py-2 rounded-lg hover:bg-emerald-200 transition-colors font-medium">
                  <Save className="h-4 w-4" /> Simpan
                </button>
                <button type="button" onClick={triggerPrintSubmit} disabled={isProcessing} className="flex-1 flex justify-center items-center gap-2 bg-emerald-600 text-white px-4 py-2 rounded-lg hover:bg-emerald-700 transition-colors font-medium shadow-sm">
                  <Printer className="h-4 w-4" /> Cetak
                </button>
              </div>
            </form>
          </div>
        </div>

        <div className="lg:col-span-2">
          <div className="bg-white rounded-xl shadow-sm border border-emerald-100 p-6 h-full">
            <div className="flex items-center justify-between mb-6 border-b border-emerald-50 pb-4">
              <div className="flex items-center gap-2">
                <List className="h-5 w-5 text-emerald-600" />
                <h2 className="text-lg font-semibold text-emerald-900">Daftar Shohibul Terdaftar</h2>
              </div>
              <span className="bg-emerald-100 text-emerald-800 text-xs font-semibold px-2.5 py-0.5 rounded-full">{entries.length} Data</span>
            </div>

            {isLoading ? (
              <div className="text-center py-10 text-gray-500 animate-pulse">Memuat data...</div>
            ) : entries.length === 0 ? (
              <div className="flex flex-col items-center justify-center h-64 text-gray-400">
                <Receipt className="h-12 w-12 mb-3 text-gray-300" /><p>Belum ada data shohibul yang didaftarkan.</p>
              </div>
            ) : (
              <div className="overflow-x-auto">
                <table className="min-w-full divide-y divide-gray-200">
                  <thead>
                    <tr className="bg-gray-50">
                      <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">No. Kwitansi</th>
                      <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Nama Shohibul</th>
                      <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Nominal</th>
                      <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Penerima</th>
                      <th className="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase">Aksi</th>
                    </tr>
                  </thead>
                  <tbody className="bg-white divide-y divide-gray-200">
                    {entries.map((entry) => (
                      <tr key={entry.id} className="hover:bg-emerald-50 transition-colors">
                        <td className="px-4 py-3 whitespace-nowrap text-sm text-gray-500">{entry.noKwitansi}</td>
                        <td className="px-4 py-3 whitespace-nowrap">
                          <div className="text-sm font-medium text-gray-900">{entry.namaShohibul}</div>
                          <div className="text-xs text-gray-500">{entry.tanggal}</div>
                        </td>
                        <td className="px-4 py-3 whitespace-nowrap text-sm font-medium text-emerald-600">{formatRupiah(entry.jumlahDana)}</td>
                        <td className="px-4 py-3 whitespace-nowrap text-sm text-gray-500">{entry.namaPanitia}</td>
                        <td className="px-4 py-3 whitespace-nowrap text-center text-sm font-medium">
                          <button onClick={() => handlePrint(entry)} className="text-emerald-600 hover:text-emerald-900 bg-emerald-100 hover:bg-emerald-200 p-2 rounded-lg inline-flex items-center gap-1 transition-colors">
                            <Printer className="h-4 w-4" /> Cetak
                          </button>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            )}
          </div>
        </div>
      </div>

      {showPreview && currentPrint && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6 bg-slate-900/60 backdrop-blur-sm print:hidden">
          <div className="bg-white rounded-2xl shadow-2xl max-w-5xl w-full max-h-[95vh] flex flex-col overflow-hidden animate-in fade-in zoom-in duration-200">
            <div className="px-6 py-4 border-b border-gray-100 flex justify-between items-center bg-gray-50/80">
              <div><h3 className="text-xl font-bold text-emerald-900">Preview Kwitansi</h3></div>
              <button onClick={() => setShowPreview(false)} className="p-2 text-gray-400 hover:text-red-500 hover:bg-red-50 rounded-full"><X className="h-6 w-6" /></button>
            </div>
            <div className="p-4 sm:p-6 overflow-y-auto bg-gray-200 flex justify-center items-start flex-1 relative">
              <div className="w-full transform sm:scale-100 scale-95 origin-top flex justify-center">
                <div id="receipt-print-area" className="bg-white p-8 sm:p-12 w-full max-w-5xl rounded-xl shadow-sm"><ReceiptCard data={currentPrint} /></div>
              </div>
            </div>
            <div className="px-6 py-4 border-t border-gray-100 bg-white flex flex-wrap gap-3 justify-end items-center">
              <button onClick={handleDownloadImage} disabled={isProcessing} className="flex items-center gap-2 px-4 py-2.5 text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg font-medium"><Download className="h-5 w-5" /> {isProcessing ? 'Memproses...' : 'Unduh Gambar'}</button>
              <button onClick={handleShareImage} disabled={isProcessing} className="flex items-center gap-2 px-4 py-2.5 text-white bg-green-500 hover:bg-green-600 rounded-lg font-medium"><ImageIcon className="h-5 w-5" /> {isProcessing ? 'Memproses...' : 'Bagikan Gambar'}</button>
              <button onClick={() => window.print()} className="flex items-center gap-2 px-6 py-2.5 text-white bg-emerald-600 hover:bg-emerald-700 rounded-lg font-medium ml-auto sm:ml-4"><Printer className="h-5 w-5" /> Cetak Sekarang</button>
            </div>
          </div>
        </div>
      )}

      <div className="hidden print:block print:bg-white print:m-0 print:p-0"><ReceiptCard data={currentPrint} /></div>
    </>
  );
};

// ============================================================================
// KOMPONEN GENERATOR FILE AUTO-INSTALLER (PHP BACKEND)
// ============================================================================
const ServerSetup = () => {
  const [copied, setCopied] = useState(false);

  const phpInstallerCode = ``;

  const copyToClipboard = () => {
    navigator.clipboard.writeText(phpInstallerCode);
    setCopied(true);
    setTimeout(() => setCopied(false), 3000);
  };

  const downloadPHP = () => {
    const blob = new Blob([phpInstallerCode], { type: 'application/x-httpd-php' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'api.php';
    a.click();
    URL.revokeObjectURL(url);
  };

  return (
    <div className="bg-white rounded-xl shadow-sm border border-emerald-100 p-6">
      <div className="flex items-center gap-2 mb-4 border-b border-emerald-50 pb-4">
        <Database className="h-6 w-6 text-emerald-600" />
        <h2 className="text-xl font-semibold text-emerald-900">Integrasi & Auto-Install Server MySQL</h2>
      </div>
      
      <div className="bg-blue-50 text-blue-900 p-4 rounded-lg mb-6 border border-blue-200">
        <p className="font-semibold mb-2">Cara Mengaktifkan Database Asli (CPanel / Localhost):</p>
        <ol className="list-decimal list-inside space-y-1 text-sm">
          <li>Klik tombol <b>Unduh File api.php</b> di bawah ini.</li>
          <li>Upload file `api.php` tersebut ke hosting Anda (misal: di dalam folder <code>public_html/qurban/</code>) atau folder XAMPP <code>htdocs/</code>.</li>
          <li>Buka file `app.jsx` (Aplikasi React ini), lalu ubah baris <b><code>MOCK_MODE: false</code></b>.</li>
          <li>Ganti <b><code>API_BASE_URL</code></b> dengan link hosting Anda (contoh: <code>https://qurban.brayat39.com/api.php</code>).</li>
          <li>Selesai! Saat API pertama kali diakses, sistem akan <b>Otomatis Menginstall Database</b>, Tabel, dan Sample Data Shohibul & Panitia.</li>
        </ol>
      </div>

      <div className="flex gap-4 mb-4">
        <button onClick={downloadPHP} className="flex items-center gap-2 bg-emerald-600 text-white px-4 py-2 rounded-lg font-medium hover:bg-emerald-700 transition-colors">
          <Download className="h-5 w-5" /> Unduh File api.php
        </button>
        <button onClick={copyToClipboard} className="flex items-center gap-2 bg-gray-100 text-gray-700 px-4 py-2 rounded-lg font-medium hover:bg-gray-200 transition-colors border border-gray-300">
          {copied ? <Check className="h-5 w-5 text-green-600" /> : <Copy className="h-5 w-5" />} {copied ? 'Berhasil Disalin!' : 'Salin Kode PHP'}
        </button>
      </div>

      <div className="relative">
        <pre className="bg-gray-900 text-green-400 p-4 rounded-lg overflow-x-auto text-xs sm:text-sm max-h-96">
          <code>{phpInstallerCode}</code>
        </pre>
      </div>
    </div>
  );
};


// ============================================================================
// KOMPONEN DASHBOARD ADMIN (CRUD Panitia & Server)
// ============================================================================
const AdminDashboard = () => {
  const [users, setUsers] = useState([]);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [isProcessing, setIsProcessing] = useState(false);
  const [activeTab, setActiveTab] = useState('panitia'); // 'panitia' atau 'server'
  const [formData, setFormData] = useState({ id: '', username: '', name: '', password: '' });

  useEffect(() => { loadUsers(); }, []);

  const loadUsers = async () => {
    const res = await api.getUsers();
    if (res.success) setUsers(res.data);
  };

  const handleOpenModal = (user = null) => {
    if (user) setFormData({ id: user.id, username: user.username, name: user.name, password: '' });
    else setFormData({ id: '', username: '', name: '', password: '' });
    setIsModalOpen(true);
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!formData.username || !formData.name || (!formData.id && !formData.password)) return alert('Mohon lengkapi data wajib.');
    setIsProcessing(true);
    const res = await api.saveUser(formData);
    if (res.success) { setIsModalOpen(false); loadUsers(); } else alert(res.message);
    setIsProcessing(false);
  };

  const handleDelete = async (id) => {
    if (window.confirm('Yakin ingin menghapus panitia ini?')) {
      const res = await api.deleteUser(id);
      if (res.success) loadUsers();
    }
  };

  return (
    <div className="space-y-6 print:hidden">
      
      {/* Tab Navigasi Admin */}
      <div className="flex space-x-1 bg-emerald-100/50 p-1 rounded-xl w-full max-w-md mx-auto mb-8">
        <button onClick={() => setActiveTab('panitia')} className={`flex-1 py-2.5 text-sm font-bold rounded-lg transition-all ${activeTab === 'panitia' ? 'bg-white text-emerald-700 shadow' : 'text-emerald-600 hover:text-emerald-800'}`}>
          Kelola Panitia
        </button>
        <button onClick={() => setActiveTab('server')} className={`flex-1 py-2.5 text-sm font-bold rounded-lg transition-all flex items-center justify-center gap-2 ${activeTab === 'server' ? 'bg-white text-emerald-700 shadow' : 'text-emerald-600 hover:text-emerald-800'}`}>
          <Database className="h-4 w-4" /> Integrasi Server
        </button>
      </div>

      {activeTab === 'panitia' ? (
        <div className="bg-white rounded-xl shadow-sm border border-emerald-100 p-6 h-full">
          <div className="flex items-center justify-between mb-6 border-b border-emerald-50 pb-4">
            <div className="flex items-center gap-2">
              <Users className="h-6 w-6 text-emerald-600" />
              <h2 className="text-xl font-semibold text-emerald-900">Kelola Data Panitia</h2>
            </div>
            <button onClick={() => handleOpenModal()} className="bg-emerald-600 hover:bg-emerald-700 text-white px-4 py-2 rounded-lg font-medium flex items-center gap-2">
              <Plus className="h-4 w-4" /> Tambah Panitia
            </button>
          </div>

          <div className="overflow-x-auto">
            <table className="min-w-full divide-y divide-gray-200 border border-gray-200 rounded-lg">
              <thead className="bg-gray-50">
                <tr>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Nama Lengkap</th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Username (Login)</th>
                  <th className="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase">Aksi</th>
                </tr>
              </thead>
              <tbody className="bg-white divide-y divide-gray-200">
                {users.length === 0 && (
                  <tr><td colSpan="3" className="px-6 py-4 text-center text-gray-500">Belum ada data panitia terdaftar.</td></tr>
                )}
                {users.map((u) => (
                  <tr key={u.id} className="hover:bg-emerald-50">
                    <td className="px-6 py-4 whitespace-nowrap font-medium text-gray-900">{u.name}</td>
                    <td className="px-6 py-4 whitespace-nowrap text-gray-500">{u.username}</td>
                    <td className="px-6 py-4 whitespace-nowrap text-center text-sm font-medium">
                      <div className="flex justify-center gap-2">
                        <button onClick={() => handleOpenModal(u)} className="text-blue-600 bg-blue-50 hover:bg-blue-100 p-2 rounded-lg" title="Edit"><Edit2 className="h-4 w-4" /></button>
                        <button onClick={() => handleDelete(u.id)} className="text-red-600 bg-red-50 hover:bg-red-100 p-2 rounded-lg" title="Hapus"><Trash2 className="h-4 w-4" /></button>
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      ) : (
        <ServerSetup />
      )}

      {/* Modal Form CRUD Panitia */}
      {isModalOpen && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-900/60 backdrop-blur-sm">
          <div className="bg-white rounded-xl shadow-2xl max-w-md w-full overflow-hidden">
            <div className="px-6 py-4 border-b border-gray-100 flex justify-between items-center bg-gray-50">
              <h3 className="text-lg font-bold text-emerald-900">{formData.id ? 'Edit Panitia' : 'Tambah Panitia Baru'}</h3>
              <button onClick={() => setIsModalOpen(false)} className="text-gray-400 hover:text-red-500"><X className="h-5 w-5" /></button>
            </div>
            <form onSubmit={handleSubmit} className="p-6 space-y-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Nama Lengkap (Tampil di Kwitansi) *</label>
                <input type="text" required value={formData.name} onChange={e => setFormData({...formData, name: e.target.value})} className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-emerald-500 focus:border-emerald-500" placeholder="Cth: Ahmad Fulan" />
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Username (Untuk Login) *</label>
                <input type="text" required value={formData.username} onChange={e => setFormData({...formData, username: e.target.value})} disabled={!!formData.id} className={`w-full px-3 py-2 border border-gray-300 rounded-lg ${formData.id ? 'bg-gray-100' : 'focus:ring-emerald-500 focus:border-emerald-500'}`} placeholder="Cth: ahmad123" />
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">{formData.id ? 'Kata Sandi Baru (Kosongkan jika tak diubah)' : 'Kata Sandi *'}</label>
                <input type="text" required={!formData.id} value={formData.password} onChange={e => setFormData({...formData, password: e.target.value})} className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-emerald-500 focus:border-emerald-500" placeholder="Minimal 6 karakter" />
              </div>
              <div className="pt-4 flex gap-3">
                <button type="button" onClick={() => setIsModalOpen(false)} className="flex-1 px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200">Batal</button>
                <button type="submit" disabled={isProcessing} className="flex-1 px-4 py-2 bg-emerald-600 text-white rounded-lg hover:bg-emerald-700">{isProcessing ? 'Menyimpan...' : 'Simpan'}</button>
              </div>
            </form>
          </div>
        </div>
      )}
    </div>
  );
};

// ============================================================================
// KOMPONEN UTAMA (ROUTER & LOGIN)
// ============================================================================
export default function App() {
  const [currentUser, setCurrentUser] = useState(null);
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [isLoggingIn, setIsLoggingIn] = useState(false);

  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js';
    script.async = true;
    document.body.appendChild(script);
  }, []);

  const handleLogin = async (e) => {
    e.preventDefault();
    setIsLoggingIn(true);
    const res = await api.login(username, password);
    if (res.success) { setCurrentUser(res.user); } else { alert(res.message || 'Login gagal!'); }
    setIsLoggingIn(false);
  };

  const handleLogout = () => { setCurrentUser(null); setUsername(''); setPassword(''); };

  if (!currentUser) {
    return (
      <div className="min-h-screen bg-emerald-50 flex items-center justify-center p-4 font-sans text-slate-800">
        <div className="bg-white max-w-md w-full rounded-2xl shadow-xl overflow-hidden">
          <div className="bg-emerald-700 px-6 py-8 text-center">
            <div className="bg-emerald-600 p-4 rounded-full inline-block mb-4 shadow-inner"><Shield className="h-10 w-10 text-emerald-100" /></div>
            <h2 className="text-2xl font-bold text-white mb-1">Masuk Sistem</h2>
            <p className="text-emerald-100 text-sm">Aplikasi Kwitansi Qurban Digital</p>
          </div>
          <div className="p-8">
            <div className="bg-blue-50 text-blue-800 text-xs p-3 rounded-lg mb-6 border border-blue-100">
              <strong className="block mb-1">Akun Login Tersedia:</strong>
              • Admin : <b>admin</b> / sandi: <b>password123</b><br/>
              • Panitia : <b>panitia1</b> / sandi: <b>sandi123</b>
            </div>
            <form onSubmit={handleLogin} className="space-y-5">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Username</label>
                <div className="relative">
                  <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"><User className="h-5 w-5 text-gray-400" /></div>
                  <input type="text" required value={username} onChange={(e) => setUsername(e.target.value)} placeholder="Masukkan username" className="w-full pl-10 px-4 py-3 bg-gray-50 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500" />
                </div>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Kata Sandi</label>
                <div className="relative">
                  <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"><Lock className="h-5 w-5 text-gray-400" /></div>
                  <input type="password" required value={password} onChange={(e) => setPassword(e.target.value)} placeholder="Masukkan kata sandi" className="w-full pl-10 px-4 py-3 bg-gray-50 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500" />
                </div>
              </div>
              <button type="submit" disabled={isLoggingIn} className="w-full bg-emerald-600 hover:bg-emerald-700 text-white font-bold py-3 px-4 rounded-lg transition-colors shadow-md mt-4">
                {isLoggingIn ? 'Memeriksa...' : 'Login'}
              </button>
            </form>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-emerald-50 text-slate-800 font-sans">
      <header className="bg-emerald-700 text-white shadow-md print:hidden">
        <div className="max-w-7xl mx-auto px-4 py-6 sm:px-6 lg:px-8 flex justify-between items-center gap-3">
          <div className="flex items-center gap-3">
            <Receipt className="h-8 w-8 text-emerald-300" />
            <div>
              <h1 className="text-2xl font-bold">Sistem Kwitansi Qurban</h1>
              <p className="text-emerald-100 text-sm">Mode: {currentUser.role === 'admin' ? 'Administrator' : 'Panitia Penerima'}</p>
            </div>
          </div>
          <div className="flex items-center gap-4">
            <div className="text-right hidden sm:block">
              <p className="text-xs text-emerald-200">Login sebagai:</p>
              <p className="font-semibold text-sm">{currentUser.name}</p>
            </div>
            <button onClick={handleLogout} className="bg-emerald-800 hover:bg-emerald-900 p-2 rounded-lg transition-colors flex items-center gap-2 text-sm font-medium" title="Keluar">
              <LogOut className="h-4 w-4" /> <span className="hidden sm:inline">Keluar</span>
            </button>
          </div>
        </div>
      </header>

      <main className="max-w-7xl mx-auto px-4 py-8 sm:px-6 lg:px-8">
        {currentUser.role === 'admin' ? <AdminDashboard /> : <PanitiaDashboard currentUser={currentUser} />}
      </main>
    </div>
  );
}