/**
 * @license
 * SPDX-License-Identifier: Apache-2.0
 */

import React from "react";
import { User, Permit, UserRole } from "../types";
import { formatIndonesianDate, exportToCSV, triggerPrint, getApiUrl } from "../utils";
import { 
  Users, FileSpreadsheet, FileDown, Upload, Trash2, Edit, Plus, Check, Loader2, Search, Printer,
  Filter, Calendar, ChevronRight, GraduationCap, CalendarDays, Award
} from "lucide-react";

interface DashboardAdminProps {
  currentUser: User;
  refreshUsersTrigger: () => void;
  refreshPermitsTrigger: () => void;
  allUsers: User[];
  allPermits: Permit[];
}

export default function DashboardAdmin({ 
  currentUser, 
  refreshUsersTrigger, 
  refreshPermitsTrigger, 
  allUsers, 
  allPermits 
}: DashboardAdminProps) {
  // Tabs
  const [activeSubTab, setActiveSubTab] = React.useState<"users" | "import_export" | "reports">("users");

  // User CRUD states
  const [isAddingUser, setIsAddingUser] = React.useState(false);
  const [editingUserId, setEditingUserId] = React.useState<string | null>(null);
  const [userSearchText, setUserSearchText] = React.useState("");

  // Form Fields
  const [formRole, setFormRole] = React.useState<UserRole>("siswa");
  const [formName, setFormName] = React.useState("");
  const [formUsername, setFormUsername] = React.useState("");
  const [formPassword, setFormPassword] = React.useState("");
  const [formInduk, setFormInduk] = React.useState("");
  const [formClass, setFormClass] = React.useState("");
  const [isSubmittingUser, setIsSubmittingUser] = React.useState(false);
  const [crudError, setCrudError] = React.useState<string | null>(null);

  // CSV Import States
  const [csvPaste, setCsvPaste] = React.useState("");
  const [importDefaultClass, setImportDefaultClass] = React.useState("");
  const [importAction, setImportAction] = React.useState<"append" | "override">("append");
  const [importMsg, setImportMsg] = React.useState<{ text: string; type: "success" | "error" } | null>(null);
  const [isImporting, setIsImporting] = React.useState(false);

  // User List Filters (for managing per class & per role)
  const [userFilterRole, setUserFilterRole] = React.useState<string>("all");
  const [userFilterClass, setUserFilterClass] = React.useState<string>("all");

  // Reports Filter States
  const [filterSiswaId, setFilterSiswaId] = React.useState<string>("all");
  const [filterMonth, setFilterMonth] = React.useState<string>("all"); // "all", "2026-05", etc.
  const [filterType, setFilterType] = React.useState<string>("all"); // "all", "keluar_masuk", "pulang_cepat"

  // Load all users on mount including password context securely for admin
  const [usersWithPasswords, setUsersWithPasswords] = React.useState<User[]>([]);
  const loadAdminUsers = () => {
    fetch(getApiUrl("admin/users"))
      .then(res => res.json())
      .then(data => setUsersWithPasswords(data))
      .catch(err => console.error("Gagal memuat password kredensial", err));
  };

  React.useEffect(() => {
    loadAdminUsers();
  }, [allUsers]);

  // Handle User Submit (Add/Edit)
  const handleUserSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!formName || !formUsername || !formPassword || !formInduk) {
      setCrudError("Semua kolom bertanda bintang wajib diisi.");
      return;
    }

    setIsSubmittingUser(true);
    setCrudError(null);

    const payload = {
      role: formRole,
      name: formName,
      username: formUsername,
      password: formPassword,
      indukNumber: formInduk,
      siswaClass: formRole === "siswa" ? formClass : undefined
    };

    try {
      let url = getApiUrl("users");
      let method = "POST";

      if (editingUserId) {
        url = getApiUrl(`users/${editingUserId}`);
        method = "PUT";
      }

      const res = await fetch(url, {
        method,
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(payload)
      });

      if (!res.ok) {
        const errorData = await res.json();
        throw new Error(errorData.error || "Gagal menyimpan data pengguna");
      }

      // Reset
      resetUserForm();
      refreshUsersTrigger();
      loadAdminUsers();
    } catch (err: any) {
      setCrudError(err.message);
    } finally {
      setIsSubmittingUser(false);
    }
  };

  const resetUserForm = () => {
    setIsAddingUser(false);
    setEditingUserId(null);
    setFormRole("siswa");
    setFormName("");
    setFormUsername("");
    setFormPassword("");
    setFormInduk("");
    setFormClass("");
    setCrudError(null);
  };

  const handleEditClick = (u: User) => {
    setEditingUserId(u.id);
    setIsAddingUser(true);
    setFormRole(u.role);
    setFormName(u.name);
    setFormUsername(u.username);
    // Find matching user with password
    const match = usersWithPasswords.find(wp => wp.id === u.id);
    setFormPassword((match as any)?.password || "");
    setFormInduk(u.indukNumber);
    setFormClass(u.siswaClass || "");
  };

  const handleDeleteUser = async (id: string, name: string) => {
    if (!confirm(`Apakah Anda yakin ingin menghapus pengguna '${name}'? Tindakan ini tidak dapat dibatalkan.`)) {
      return;
    }

    try {
      const res = await fetch(getApiUrl(`users/${id}`), { method: "DELETE" });
      if (!res.ok) throw new Error("Gagal menghapus pengguna");
      refreshUsersTrigger();
      loadAdminUsers();
    } catch (err: any) {
      alert("Error: " + err.message);
    }
  };

  // CSV Import Submit
  const handleCSVImportSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!csvPaste.trim()) {
      setImportMsg({ text: "Kotak input CSV bersangkutan kosong!", type: "error" });
      return;
    }

    setIsImporting(true);
    setImportMsg(null);

    try {
      const res = await fetch(getApiUrl("users/import"), {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ 
          csvData: csvPaste, 
          action: importAction,
          defaultClass: importDefaultClass
        })
      });

      const data = await res.json();
      if (!res.ok) throw new Error(data.error || "Gagal memproses pengimporan CSV");

      setImportMsg({ text: `Impor berhasil! ${data.message}`, type: "success" });
      setCsvPaste("");
      refreshUsersTrigger();
      loadAdminUsers();
    } catch (err: any) {
      setImportMsg({ text: err.message, type: "error" });
    } finally {
      setIsImporting(false);
    }
  };

  // Export Users & Permits to Local Sheets
  const handleExportUsers = () => {
    exportToCSV(usersWithPasswords, "data_pengguna_sman1_bantaran");
  };

  const handleExportPermits = () => {
    const tableData = filteredPermits.map(p => ({
      ID_Izin: p.id,
      Nama_Siswa: p.siswaName,
      Kelas: p.siswaClass,
      NISN: p.siswaInduk,
      Tipe_Izin: p.permitType,
      Hari: p.day,
      Tanggal: p.date,
      Rencana_Keluar: p.timeExitProposed,
      Rencana_Masuk: p.timeReturnProposed || "-",
      Keterangan: p.reason,
      Guru_Mapel: p.mapelTeacherName,
      Status_Mapel: p.statusMapel,
      Guru_Piket: p.piketTeacherName,
      Status_Piket: p.statusPiket,
      Jam_Keluar_Gerbang: p.timeCheckedOut || "-",
      Jam_Kembali_Gerbang: p.timeCheckedIn || "-",
      Status_Akhir: p.overallStatus
    }));
    exportToCSV(tableData, "data_laporan_izin_sman1_bantaran");
  };

  // Extract all unique classes for filtering and auto-completion
  const existingClasses = React.useMemo(() => {
    const classes = usersWithPasswords
      .filter(u => u.role === "siswa" && u.siswaClass)
      .map(u => u.siswaClass?.trim());
    return Array.from(new Set(classes)).filter(Boolean).sort() as string[];
  }, [usersWithPasswords]);

  // Filter lists
  const filteredUsers = usersWithPasswords.filter(u => {
    // Search Filter
    if (userSearchText.trim()) {
      const s = userSearchText.toLowerCase();
      const matchSearch = u.name.toLowerCase().includes(s) || 
                          u.username.toLowerCase().includes(s) || 
                          u.indukNumber.includes(s) ||
                          (u.siswaClass && u.siswaClass.toLowerCase().includes(s));
      if (!matchSearch) return false;
    }

    // Role Filter
    if (userFilterRole !== "all" && u.role !== userFilterRole) {
      return false;
    }

    // Class Filter
    if (userFilterClass !== "all") {
      if (u.role !== "siswa" || u.siswaClass !== userFilterClass) {
        return false;
      }
    }

    return true;
  });

  // Filter permits for report generating
  const filteredPermits = allPermits.filter(p => {
    const matchSiswa = filterSiswaId === "all" || p.siswaId === filterSiswaId;
    const matchMonth = filterMonth === "all" || p.date.substring(0, 7) === filterMonth;
    const matchType = filterType === "all" || p.permitType === filterType;
    return matchSiswa && matchMonth && matchType;
  });

  // Calculate stats for filtered reports
  const totalReports = filteredPermits.length;
  const totalKeluarMasuk = filteredPermits.filter(p => p.permitType === "keluar_masuk").length;
  const totalPulangCepat = filteredPermits.filter(p => p.permitType === "pulang_cepat").length;
  const totalSelesai = filteredPermits.filter(p => p.overallStatus === "returned").length;
  const totalDitolak = filteredPermits.filter(p => p.overallStatus === "rejected").length;

  const handlePrintTriggerClick = () => {
    triggerPrint();
  };

  return (
    <div className="space-y-6 text-slate-800 animate-fade-in print:p-0">
      
      {/* Sub Tabs Navigation */}
      <div className="flex border-b border-slate-200 gap-6 print:hidden">
        <button
          onClick={() => setActiveSubTab("users")}
          className={`pb-3 text-xs font-bold tracking-wider uppercase border-b-2 transition-all cursor-pointer ${
            activeSubTab === "users" ? "border-indigo-600 text-indigo-600" : "border-transparent text-slate-500 hover:text-slate-900"
          }`}
        >
          <div className="flex items-center gap-1.5">
            <Users className="h-4 w-4" />
            Manajemen Master Pengguna
          </div>
        </button>

        <button
          onClick={() => setActiveSubTab("import_export")}
          className={`pb-3 text-xs font-bold tracking-wider uppercase border-b-2 transition-all cursor-pointer ${
            activeSubTab === "import_export" ? "border-indigo-600 text-indigo-600" : "border-transparent text-slate-500 hover:text-slate-900"
          }`}
        >
          <div className="flex items-center gap-1.5">
            <FileSpreadsheet className="h-4 w-4" />
            Ekspor & Impor CSV
          </div>
        </button>

        <button
          onClick={() => setActiveSubTab("reports")}
          className={`pb-3 text-xs font-bold tracking-wider uppercase border-b-2 transition-all cursor-pointer ${
            activeSubTab === "reports" ? "border-indigo-600 text-indigo-600" : "border-transparent text-slate-500 hover:text-slate-900"
          }`}
        >
          <div className="flex items-center gap-1.5">
            <Printer className="h-4 w-4" />
            Laporan Izin Siswa SMANIB
          </div>
        </button>
      </div>

      {/* ----------------- SUB TAB 1: MANAGE USERS ----------------- */}
      {activeSubTab === "users" && (
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 print:hidden">
          
          {/* User Form Container */}
          <div className="lg:col-span-4 bg-white border border-slate-200 rounded-2xl p-6 shadow-sm flex flex-col h-fit">
            <div className="mb-4">
              <h3 className="text-sm font-bold text-slate-900">
                {editingUserId ? "Modifikasi Akun Pengguna" : "Daftarkan Pengguna Baru"}
              </h3>
              <p className="text-[11px] text-slate-500 font-sans">Tambah atau edit wewenang verifikator sekolah</p>
            </div>

            <form onSubmit={handleUserSubmit} className="space-y-4 text-xs">
              {crudError && (
                <p className="text-xs text-red-600 bg-red-50 p-2.5 rounded border border-red-100 font-medium">
                  {crudError}
                </p>
              )}

              {/* Peran */}
              <div>
                <label className="block text-[10px] font-bold text-gray-500 uppercase tracking-widest mb-1.5">Peran Sistem *</label>
                <select
                  value={formRole}
                  onChange={(e) => setFormRole(e.target.value as UserRole)}
                  className="w-full bg-slate-50 border border-gray-300 rounded px-3 py-1.5 font-medium cursor-pointer"
                  disabled={editingUserId !== null}
                >
                  <option value="siswa">Siswa (Pemohon Izin)</option>
                  <option value="guru_mapel">Guru Mata Pelajaran (Verifikator 1)</option>
                  <option value="guru_piket">Guru Piket (Verifikator 2)</option>
                  <option value="satpam">Satpam Gate (Validator Akhir)</option>
                  <option value="admin">Administrator (Tata Usaha)</option>
                </select>
              </div>

              {/* Nama Lengkap */}
              <div>
                <label className="block text-[10px] font-bold text-gray-500 uppercase tracking-widest mb-1.5">Nama Lengkap *</label>
                <input
                  type="text"
                  value={formName}
                  onChange={(e) => setFormName(e.target.value)}
                  placeholder="Contoh: Drs. Bambang Santoso, M.Pd"
                  className="w-full bg-slate-50 border border-gray-300 rounded px-3 py-1.5 font-medium outline-hidden"
                  required
                />
              </div>

              {/* NISN / NIP */}
              <div>
                <label className="block text-[10px] font-bold text-gray-500 uppercase tracking-widest mb-1.5">
                  {formRole === "siswa" ? "NISN Siswa *" : "NIP / Nomor Induk Staff *"}
                </label>
                <input
                  type="text"
                  value={formInduk}
                  onChange={(e) => setFormInduk(e.target.value)}
                  placeholder={formRole === "siswa" ? "0071234567" : "197405122005011003"}
                  className="w-full bg-slate-50 border border-gray-300 rounded px-3 py-1.5 font-medium outline-hidden"
                  required
                />
              </div>

              {/* Kelas (Hanya untuk Siswa) */}
              {formRole === "siswa" && (
                <div>
                  <label className="block text-[10px] font-bold text-gray-500 uppercase tracking-widest mb-1.5">Kelas Siswa (Khusus Siswa) *</label>
                  <input
                    type="text"
                    value={formClass}
                    onChange={(e) => setFormClass(e.target.value)}
                    placeholder="Contoh: XII MIPA 2, XI IPS 1"
                    className="w-full bg-slate-50 border border-gray-300 rounded px-3 py-1.5 font-medium outline-hidden"
                    required
                  />
                  {existingClasses.length > 0 && (
                    <div className="mt-1.5 space-y-1">
                      <p className="text-[10px] text-slate-400 font-sans">Klik kelas terdaftar untuk menyalin:</p>
                      <div className="flex flex-wrap gap-1">
                        {existingClasses.map(cl => (
                          <button
                            key={cl}
                            type="button"
                            onClick={() => setFormClass(cl)}
                            className="bg-slate-100 hover:bg-slate-200 text-slate-700 text-[10px] px-1.5 py-0.5 rounded transition-all cursor-pointer font-medium"
                          >
                            + {cl}
                          </button>
                        ))}
                      </div>
                    </div>
                  )}
                </div>
              )}

              {/* Username */}
              <div>
                <label className="block text-[10px] font-bold text-gray-500 uppercase tracking-widest mb-1.5">Username Login *</label>
                <input
                  type="text"
                  value={formUsername}
                  onChange={(e) => setFormUsername(e.target.value)}
                  placeholder="budi_pratama"
                  className="w-full bg-slate-50 border border-gray-300 rounded px-3 py-1.5 font-medium outline-hidden"
                  required
                />
              </div>

              {/* Password */}
              <div>
                <label className="block text-[10px] font-bold text-gray-500 uppercase tracking-widest mb-1.5">Password Login *</label>
                <input
                  type="text"
                  value={formPassword}
                  onChange={(e) => setFormPassword(e.target.value)}
                  placeholder="Atur sandi masuk"
                  className="w-full bg-slate-50 border border-gray-300 rounded px-3 py-1.5 font-medium outline-hidden"
                  required
                />
              </div>

              <div className="flex gap-2.5 pt-2">
                <button
                  id="admin-user-btn-save"
                  type="submit"
                  disabled={isSubmittingUser}
                  className="flex-1 bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-2 rounded-lg transition-colors text-xs flex items-center justify-center gap-1 cursor-pointer"
                >
                  {isSubmittingUser ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : null}
                  Simpan Akun
                </button>
                <button
                  id="admin-user-btn-reset"
                  type="button"
                  onClick={resetUserForm}
                  className="px-3 py-2 bg-slate-200 hover:bg-slate-300 text-slate-700 font-semibold rounded-lg transition-colors text-xs cursor-pointer"
                >
                  Batal
                </button>
              </div>
            </form>
          </div>

          {/* User List Container */}
          <div className="lg:col-span-8 space-y-4 flex flex-col">
            <div className="flex flex-wrap justify-between items-center gap-3">
              <div>
                <h3 className="text-sm font-bold text-slate-900">Daftar Akun Sekolah SMAN 1 Bantaran</h3>
                <p className="text-[11px] text-slate-500">
                  Total terdaftar: <strong>{usersWithPasswords.length}</strong> pengguna (Menampilkan: <strong>{filteredUsers.length}</strong>)
                </p>
              </div>

              {/* Filters & Search Row */}
              <div className="flex flex-wrap items-center gap-2 w-full md:w-auto">
                {/* Filter Peran */}
                <select
                  value={userFilterRole}
                  onChange={(e) => {
                    setUserFilterRole(e.target.value);
                    if (e.target.value !== "all" && e.target.value !== "siswa") {
                      setUserFilterClass("all");
                    }
                  }}
                  className="bg-slate-50 border border-slate-250 text-slate-700 text-xs rounded-lg px-2.5 py-1.5 focus:border-indigo-505 hover:bg-slate-100 cursor-pointer font-sans"
                >
                  <option value="all">Semua Peran</option>
                  <option value="siswa">Siswa</option>
                  <option value="guru_mapel">Guru Mapel</option>
                  <option value="guru_piket">Guru Piket</option>
                  <option value="satpam">Satpam</option>
                  <option value="admin">Admin</option>
                </select>

                {/* Filter Kelas */}
                <select
                  value={userFilterClass}
                  onChange={(e) => setUserFilterClass(e.target.value)}
                  disabled={userFilterRole !== "all" && userFilterRole !== "siswa"}
                  className="bg-slate-50 border border-slate-250 text-slate-700 text-xs rounded-lg px-2.5 py-1.5 focus:border-indigo-505 hover:bg-slate-100 cursor-pointer disabled:opacity-50 font-sans"
                >
                  <option value="all">Semua Kelas</option>
                  {existingClasses.map(cl => (
                    <option key={cl} value={cl}>{cl}</option>
                  ))}
                </select>

                {/* User Search Input */}
                <div className="relative w-full sm:w-48 md:w-56">
                  <Search className="absolute left-2.5 top-2 h-3.5 w-3.5 text-slate-400" />
                  <input
                    type="text"
                    value={userSearchText}
                    onChange={(e) => setUserSearchText(e.target.value)}
                    placeholder="Cari user (Nama/Username/NIP/Class)..."
                    className="w-full bg-slate-50 border border-slate-205 rounded-lg pl-8 pr-3 py-1.5 text-xs outline-hidden focus:border-indigo-505 text-slate-800"
                  />
                </div>
              </div>
            </div>

            <div className="bg-white border border-slate-200 rounded-2xl overflow-hidden shadow-sm flex-1 max-h-[600px] overflow-y-auto">
              <table className="min-w-full divide-y divide-slate-200 text-xs text-left">
                <thead className="bg-slate-50 sticky top-0 z-10">
                  <tr>
                    <th className="px-5 py-3 text-[10px] font-bold text-slate-400 uppercase tracking-widest">NIP / NISN</th>
                    <th className="px-5 py-3 text-[10px] font-bold text-slate-400 uppercase tracking-widest">Nama / Peran</th>
                    <th className="px-5 py-3 text-[10px] font-bold text-slate-400 uppercase tracking-widest">Username / Sandi</th>
                    <th className="px-5 py-3 text-[10px] font-bold text-slate-400 uppercase tracking-widest">Kelas</th>
                    <th className="px-5 py-3 text-right text-[10px] font-bold text-slate-400 uppercase tracking-widest">Aksi</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-slate-200/60 text-slate-800">
                  {filteredUsers.map(u => (
                    <tr key={u.id} className="hover:bg-slate-50/50">
                      <td className="px-5 py-4 font-mono font-medium text-slate-500">{u.indukNumber}</td>
                      <td className="px-5 py-4">
                        <p className="font-bold text-slate-900">{u.name}</p>
                        <span className={`inline-block px-1.5 py-0.2 text-[9px] font-bold rounded mt-0.5 border ${
                          u.role === "siswa" ? "bg-indigo-50 text-indigo-700 border-indigo-100" :
                          u.role === "guru_mapel" ? "bg-emerald-50 text-emerald-800 border-emerald-100" :
                          u.role === "guru_piket" ? "bg-amber-50 text-amber-800 border-amber-100" :
                          u.role === "satpam" ? "bg-slate-100 text-slate-600 border-slate-200" : "bg-rose-50 text-rose-800 border-rose-100"
                        }`}>
                          {u.role.toUpperCase()}
                        </span>
                      </td>
                      <td className="px-5 py-4">
                        <p className="font-medium text-gray-700">un: <span className="text-blue-900 font-bold">{u.username}</span></p>
                        <p className="font-mono text-gray-400 text-[10px]">pw: <span className="text-gray-600 font-bold">{String((u as any).password || "")}</span></p>
                      </td>
                       <td className="px-5 py-4 font-semibold text-slate-800">{u.siswaClass || "-"}</td>
                      <td className="px-5 py-4 text-right whitespace-nowrap space-x-1">
                        <button
                          id={`admin-btn-edit-${u.username}`}
                          onClick={() => handleEditClick(u)}
                          className="p-1 hover:bg-slate-100 text-slate-500 hover:text-indigo-600 inline-block rounded cursor-pointer"
                          title="Edit"
                        >
                          <Edit className="h-4 w-4" />
                        </button>
                        {u.username !== "admin" && (
                          <button
                            id={`admin-btn-delete-${u.username}`}
                            onClick={() => handleDeleteUser(u.id, u.name)}
                            className="p-1 hover:bg-rose-50 text-rose-500 hover:text-rose-700 inline-block rounded cursor-pointer"
                            title="Hapus"
                          >
                            <Trash2 className="h-4 w-4" />
                          </button>
                        )}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        </div>
      )}

      {/* ----------------- SUB TAB 2: IMPORT/EXPORT CSV ----------------- */}
      {activeSubTab === "import_export" && (
        <div className="bg-white border border-slate-200 rounded-2xl p-6 shadow-sm space-y-6 print:hidden">
          <div>
            <h3 className="text-base font-bold text-slate-900 flex items-center gap-1.5">
              <FileSpreadsheet className="h-5 w-5 text-indigo-600" />
              Sistem Ekspor & Impor Data Massal (Template CSV)
            </h3>
            <p className="text-xs text-slate-500 font-sans mt-0.5">Memudahkan Admin Sekolah SMAN 1 Bantaran mengunggah ratusan biodata siswa atau guru sekaligus dari Excel/Google Sheets.</p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 text-xs">
            {/* Guide & Export */}
            <div className="space-y-4">
              <div className="bg-indigo-50/50 p-4 rounded-xl border border-indigo-100 space-y-3 font-sans">
                <h4 className="font-bold text-indigo-600 text-xs">Petunjuk Penggunaan Template CSV:</h4>
                <p className="text-slate-600 leading-relaxed text-[11px]">
                  Format penulisan kolom pada dokumen CSV Anda harus persis seperti di bawah ini (disarankan tanpa spasi kosong setelah koma):
                </p>
                <div className="bg-slate-900 text-white p-3 rounded font-mono text-[10px] select-all">
                  role,username,password,name,indukNumber,siswaClass
                </div>
                <div className="space-y-1.5 text-slate-600 text-[11px]">
                  <p>• <strong className="text-slate-800">role:</strong> Isi salah satu dari: `siswa`, `guru_mapel`, `guru_piket`, `satpam`, atau `admin`</p>
                  <p>• <strong className="text-slate-800">indukNumber:</strong> NISN untung siswa, NIP/ID untuk guru atau satpam</p>
                  <p>• <strong className="text-slate-800">siswaClass:</strong> Khusus baris `siswa`, isi dengan nama kelas (contoh: XII MIPA 2). Untuk peran lain, biarkan kosong.</p>
                </div>
                
                <h4 className="font-bold text-slate-800 text-[11px] pt-1">Contoh Baris Pengisian Template:</h4>
                <div className="bg-slate-800 text-amber-400 p-2.5 rounded font-mono text-[9px] overflow-x-auto whitespace-nowrap">
                  siswa,budi,123,Budi Santoso,0071234567,XII MIPA 1<br />
                  guru_mapel,bambang,111,Drs. Bambang Wijaya,197405122005011003,<br />
                  satpam,joko,sec1,Joko Susilo,SEC-01,
                </div>
              </div>

              {/* Export Trigger buttons */}
              <div className="bg-slate-50 p-4 rounded-xl border border-slate-200/60 text-slate-700 flex flex-col space-y-3">
                <h4 className="font-bold text-slate-900 text-xs">Ekspor Data Cadangan SIKAD:</h4>
                <p className="text-[11px] text-slate-500 font-sans">Unduh seluruh basis data siswa/staff saat ini langsung menjadi file Spreadsheet (.CSV) kapan saja untuk kebutuhan cadangan fisik.</p>
                <div className="flex gap-3">
                  <button
                    id="admin-export-users"
                    onClick={handleExportUsers}
                    className="flex-1 bg-slate-900 hover:bg-slate-800 text-white text-xs font-bold py-2.5 px-4 rounded-lg flex items-center justify-center gap-1.5 transition-colors cursor-pointer"
                  >
                    <FileDown className="h-4 w-4" />
                    Unduh Akun Pengguna (.CSV)
                  </button>
                </div>
              </div>
            </div>

            {/* Paste & Import Form */}
            <form onSubmit={handleCSVImportSubmit} className="space-y-4">
              {/* Optional Default Class for Per-Class Upload */}
              <div className="bg-indigo-50/40 p-3.5 rounded-xl border border-indigo-100 space-y-2 font-sans text-xs">
                <label className="block text-[11px] font-bold text-slate-800">
                  Beri Kelas Default (Sangat Mempermudah Impor Per Kelas):
                </label>
                <div className="flex gap-2 items-center">
                  <input
                    type="text"
                    value={importDefaultClass}
                    onChange={(e) => setImportDefaultClass(e.target.value)}
                    placeholder="Contoh: XII MIPA 2, XI IPS 1"
                    className="flex-1 bg-white border border-slate-200 rounded-lg px-3 py-1.5 text-xs focus:border-indigo-500 outline-hidden font-medium text-slate-800"
                  />
                  {importDefaultClass && (
                    <button
                      type="button"
                      onClick={() => setImportDefaultClass("")}
                      className="text-[10px] text-slate-500 hover:text-rose-600 font-semibold underline cursor-pointer"
                    >
                      Bebaskan
                    </button>
                  )}
                </div>
                <p className="text-[10px] text-slate-500 leading-normal">
                  Jika Anda memiliki dokumen Excel per kelas, Anda tidak perlu mengisi kolom kelas di setiap baris dokumen CSV. Cukup ketik nama kelas di atas (misal: <strong>{importDefaultClass || "XI IPS 1"}</strong>) lalu paste isi data siswa Anda di bawah. Kolom kelas akan terisi secara otomatis!
                </p>
              </div>

              <div>
                <label className="block text-[11px] font-bold text-slate-800 mb-1.5">Paste Isi Baris Dokumen CSV Anda:</label>
                <textarea
                  value={csvPaste}
                  onChange={(e) => setCsvPaste(e.target.value)}
                  placeholder="role,username,password,name,indukNumber,siswaClass&#10;siswa,ahmad_fauzi,1234,Ahmad Fauzi,00811223,&#10;siswa,riska,1234,Riska,00811224,"
                  className="w-full h-56 bg-white border border-slate-350 rounded-lg p-3 font-mono text-xs focus:ring-1 focus:ring-indigo-500 outline-hidden"
                />
              </div>

              <div className="flex items-center gap-4 bg-slate-50 p-3 rounded-lg border border-slate-200">
                <span className="font-bold text-slate-700 text-[11px]">Metode Impor:</span>
                <div className="flex gap-4">
                  <label className="flex items-center gap-1.5 cursor-pointer font-semibold text-slate-700">
                    <input
                      type="radio"
                      name="importAction"
                      checked={importAction === "append"}
                      onChange={() => setImportAction("append")}
                      className="cursor-pointer text-indigo-600 accent-indigo-600"
                    />
                    Tambahkan (Append)
                  </label>
                  <label className="flex items-center gap-1.5 cursor-pointer font-semibold text-slate-700">
                    <input
                      type="radio"
                      name="importAction"
                      checked={importAction === "override"}
                      onChange={() => setImportAction("override")}
                      className="cursor-pointer text-indigo-600 accent-indigo-600"
                    />
                    Timpa Seluruh Akun (Override)
                  </label>
                </div>
              </div>

              {importMsg && (
                <div className={`p-3 rounded-lg border ${
                  importMsg.type === "success" 
                    ? "bg-emerald-50 text-emerald-800 border-emerald-100" 
                    : "bg-rose-50 text-rose-850 border-rose-105"
                }`}>
                  {importMsg.text}
                </div>
              )}

              <button
                id="admin-csv-btn-import"
                type="submit"
                disabled={isImporting}
                className="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-3 px-4 rounded-lg flex items-center justify-center gap-2 transition-colors cursor-pointer shadow-sm"
              >
                {isImporting ? (
                  <>
                    <Loader2 className="h-4 w-4 animate-spin text-white" />
                    Memproses Impor Baris...
                  </>
                ) : (
                  <>
                    <Upload className="h-4 w-4" />
                    Proses Impor CSV Masuk Sistem
                  </>
                )}
              </button>
            </form>
          </div>
        </div>
      )}

      {/* ----------------- SUB TAB 3: REPORT VIEW / PRINT GENERATOR ----------------- */}
      {activeSubTab === "reports" && (
        <div className="space-y-6">
          
          {/* Controls Box - HIDDEN on print */}
          <div className="bg-white border border-slate-200 rounded-2xl p-6 shadow-sm flex flex-wrap gap-4 items-end justify-between print:hidden text-xs">
            <div className="flex flex-wrap gap-4 items-center">
              
              {/* Filter Siswa */}
              <div>
                <label className="block text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-1.5">Siswa</label>
                <select
                  value={filterSiswaId}
                  onChange={(e) => setFilterSiswaId(e.target.value)}
                  className="bg-slate-50 border border-slate-250 rounded px-2.5 py-1.5 font-semibold cursor-pointer text-slate-700"
                >
                  <option value="all">Semua Siswa</option>
                  {usersWithPasswords.filter(u => u.role === "siswa").map(s => (
                    <option key={s.id} value={s.id}>{s.name} ({s.siswaClass})</option>
                  ))}
                </select>
              </div>

              {/* Filter Bulan */}
              <div>
                <label className="block text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-1.5">Bulan Terpilih</label>
                <select
                  value={filterMonth}
                  onChange={(e) => setFilterMonth(e.target.value)}
                  className="bg-slate-50 border border-slate-250 rounded px-2.5 py-1.5 font-semibold cursor-pointer text-slate-700 font-sans"
                >
                  <option value="all">Semua Periode</option>
                  <option value="2026-05">Mei 2026 (Minggu & Bulan Ini)</option>
                  <option value="2026-06">Juni 2026</option>
                  <option value="2026-04">April 2026</option>
                </select>
              </div>

              {/* Filter Tipe */}
              <div>
                <label className="block text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-1.5">Jenis Izin</label>
                <select
                  value={filterType}
                  onChange={(e) => setFilterType(e.target.value)}
                  className="bg-slate-50 border border-slate-250 rounded px-2.5 py-1.5 font-semibold cursor-pointer text-slate-700 font-sans"
                >
                  <option value="all">Semua Jenis</option>
                  <option value="keluar_masuk">Izin Keluar-Masuk Sementara</option>
                  <option value="pulang_cepat">Izin Pulang Cepat</option>
                </select>
              </div>
            </div>

            {/* Quick Actions (Export Excel CSV, Print) */}
            <div className="flex gap-2 w-full sm:w-auto mt-2 sm:mt-0 font-sans">
              <button
                id="admin-export-excel"
                onClick={handleExportPermits}
                className="flex-1 bg-emerald-50 hover:bg-emerald-100 text-emerald-800 border border-emerald-250 font-semibold py-2 px-3 rounded-lg text-[11px] flex items-center justify-center gap-1 cursor-pointer transition-colors"
              >
                <FileSpreadsheet className="h-4 w-4" />
                Ekspor Datasheet (.CSV)
              </button>

              <button
                id="admin-btn-print"
                onClick={handlePrintTriggerClick}
                className="flex-1 bg-indigo-650 hover:bg-indigo-700 text-white font-semibold py-2 px-4 rounded-lg text-[11px] flex items-center justify-center gap-1 cursor-pointer transition-colors shadow-sm"
              >
                <Printer className="h-4 w-4 text-amber-300" />
                Cetak Laporan / Simpan PDF
              </button>
            </div>
          </div>

          {/* Quick Metrics Cards - HIDDEN on Print */}
          <div className="grid grid-cols-2 sm:grid-cols-5 gap-4 print:hidden text-xs">
            <div className="bg-white border border-slate-200 p-4 rounded-xl shadow-sm">
              <p className="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Total Log Izin</p>
              <p className="text-xl font-bold font-mono text-slate-800 mt-1">{totalReports}</p>
            </div>
            <div className="bg-white border border-slate-200 p-4 rounded-xl shadow-sm">
              <p className="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Keluar Masuk</p>
              <p className="text-xl font-bold font-mono text-slate-700 mt-1">{totalKeluarMasuk}</p>
            </div>
            <div className="bg-white border border-slate-200 p-4 rounded-xl shadow-sm">
              <p className="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Pulang Cepat</p>
              <p className="text-xl font-bold font-mono text-slate-705 mt-1">{totalPulangCepat}</p>
            </div>
            <div className="bg-white border border-emerald-200 p-4 rounded-xl shadow-sm bg-emerald-50/10">
              <p className="text-[10px] font-bold text-emerald-600 uppercase tracking-wider">Terselesaikan</p>
              <p className="text-xl font-bold font-mono text-emerald-700 mt-1">{totalSelesai}</p>
            </div>
            <div className="bg-white border border-rose-200 p-4 rounded-xl shadow-sm bg-rose-50/10">
              <p className="text-[10px] font-bold text-rose-650 uppercase tracking-wider">Ditolak Siswa</p>
              <p className="text-xl font-bold font-mono text-rose-700 mt-1">{totalDitolak}</p>
            </div>
          </div>

          {/* ==================== OFFICIAL PRINT REVIEW CARD (A4 PREVIEW) ==================== */}
          <div className="bg-white border border-slate-250 rounded-2xl p-8 sm:p-12 shadow-sm font-serif max-w-4xl mx-auto print:border-none print:shadow-none print:p-0">
            
            {/* Kop Surat Header */}
            <div className="flex items-center justify-between border-b-4 border-double border-black pb-5 mb-6 text-center text-black">
              {/* Left Logo Placehoder */}
              <div className="h-20 w-20 border-2 border-slate-900 rounded-full flex items-center justify-center font-bold font-sans text-xs shrink-0 self-center">
                PEMPROV
              </div>

              {/* Main official header details */}
              <div className="flex-1 px-4 text-center">
                <h3 className="text-sm font-bold uppercase tracking-tight font-sans leading-3">PEMERINTAH PROVINSI JAWA TIMUR</h3>
                <h3 className="text-sm font-bold uppercase tracking-tight font-sans leading-4 mt-0.5">DINAS PENDIDIKAN</h3>
                <h2 className="text-base sm:text-lg font-extrabold uppercase tracking-tight font-sans leading-5 mt-0.5">SEKOLAH MENENGAH ATAS NEGERI 1 BANTARAN</h2>
                <p className="text-[11px] font-sans text-slate-750 mt-1 font-semibold leading-3 border-transparent">
                  Jl. Raya Bantaran No. 57, Bantaran, Kabupaten Probolinggo, Kode Pos: 67261
                </p>
                <p className="text-[10px] font-sans text-slate-500 italic">
                  Surat Elektronik: sman1bantaran@yahoo.co.id
                </p>
              </div>

              {/* Right Logo placeholder for Tut Wuri or SMAN 1 */}
              <div className="h-20 w-20 border-2 border-slate-900 rounded-lg flex items-center justify-center font-bold font-sans text-xs shrink-0 self-center">
                SMAN1B
              </div>
            </div>

            {/* Document Title */}
            <div className="text-center mb-6">
              <h1 className="text-base font-bold uppercase text-black underline tracking-wide">LAPORAN REKAPITULASI SURAT IZIN SISWA</h1>
              <p className="text-[11px] font-sans text-slate-600 mt-0.5">
                Periode Rekap: {filterMonth === "all" ? "Semua Bulan" : filterMonth === "2026-05" ? "Mei 2026 (Mingguan & Bulanan)" : filterMonth}
              </p>
            </div>

            {/* Main content table */}
            {filteredPermits.length === 0 ? (
              <div className="py-20 text-center font-sans text-sm text-gray-500 italic">
                -- Tidak ada catatan surat izin sekolah siswa yang cocok untuk cetak cetak rekap --
              </div>
            ) : (
              <div className="space-y-6">
                <table className="min-w-full text-black text-[10px] sm:text-xs">
                  <thead>
                    <tr className="border-t border-b border-black font-bold">
                      <th className="py-2.5 text-left font-serif px-2">No.</th>
                      <th className="py-2.5 text-left font-serif px-2">Siswa / Kelas</th>
                      <th className="py-2.5 text-left font-serif px-2">Hari, Tanggal</th>
                      <th className="py-2.5 text-left font-serif px-2">Waktu Izin</th>
                      <th className="py-2.5 text-left font-serif px-2">Keterangan / Keperluan</th>
                      <th className="py-2.5 text-left font-serif px-2">Verifikator / Jam Log</th>
                      <th className="py-2.5 text-right font-serif px-2">Keterangan Akhir</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-gray-300">
                    {filteredPermits.map((p, index) => (
                      <tr key={p.id} className="align-top font-sans">
                        <td className="py-3 px-2 text-gray-700">{index + 1}.</td>
                        <td className="py-3 px-2">
                          <strong className="text-black font-bold">{p.siswaName}</strong>
                          <p className="text-[10px] text-gray-500 font-medium">Kelas {p.siswaClass} | NISN: {p.siswaInduk}</p>
                        </td>
                        <td className="py-3 px-2 text-slate-800">{p.day}, {p.date}</td>
                        <td className="py-3 px-2 text-slate-800 font-mono text-[10px]">
                          {p.timeExitProposed} s/d {p.timeReturnProposed || "Selesai"}
                        </td>
                        <td className="py-3 px-2 text-black font-sans italic">"{p.reason}"</td>
                        <td className="py-3 px-2">
                          <div className="space-y-0.5 text-[9px]">
                            <p>✓ Mapel: {p.mapelTeacherName} ({p.timeApprovedMapel || "Pnd"})</p>
                            <p>✓ Piket: {p.piketTeacherName} ({p.timeApprovedPiket || "Pnd"})</p>
                            {p.timeCheckedOut && (
                              <p className="font-mono text-blue-900">Gerbang Out: {p.timeCheckedOut} (Satpam: {p.satpamName || "Yes"})</p>
                            )}
                            {p.timeCheckedIn && (
                              <p className="font-mono text-emerald-800">Gerbang In: {p.timeCheckedIn}</p>
                            )}
                          </div>
                        </td>
                        <td className="py-3 px-2 text-right">
                          <span className="font-bold uppercase text-[9px] bg-slate-100 px-1 py-0.5 rounded">
                            {p.overallStatus === "returned" ? "Selesai" : 
                             p.overallStatus === "checked_out" ? "Sedang Diluar" : 
                             p.overallStatus === "rejected" ? "Ditolak" : "Persetujuan"}
                          </span>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>

                {/* Print Signatures - Standard school procedures */}
                <div className="pt-8 grid grid-cols-3 gap-6 text-black text-[11px] sm:text-xs text-center font-sans mt-12 page-break-inside-avoid">
                  <div>
                    <p className="text-gray-500">Mengetahui,</p>
                    <p className="font-bold uppercase text-slate-900 tracking-tight">Kepala Sekolah SMAN 1 Bantaran</p>
                    <div className="h-16"></div>
                    <p className="font-bold underline text-black">H. AGUS SALIM, M.Pd</p>
                    <p className="text-[10px] text-gray-550">Pembina Tk. I <br/> NIP. 196803151991031008</p>
                  </div>
                  <div>
                    <p className="text-gray-500">Mengesahkan,</p>
                    <p className="font-bold uppercase text-slate-900 tracking-tight">Koordinator Guru Piket SIKAD</p>
                    <div className="h-16"></div>
                    <p className="font-semibold underline text-black">[.................................................]</p>
                    <p className="text-[10px] text-gray-550">NIP Jabatan Tertera Atas</p>
                  </div>
                  <div>
                    <p className="text-gray-600">Bantaran, 20 Mei 2026</p>
                    <p className="font-bold uppercase text-slate-900 tracking-tight">Petugas Admin Tata Usaha</p>
                    <div className="h-16"></div>
                    <p className="font-bold text-black underline">{currentUser.name}</p>
                    <p className="text-[10px] text-gray-500 font-mono">ID: {currentUser.indukNumber}</p>
                  </div>
                </div>

              </div>
            )}
          </div>
          
        </div>
      )}

    </div>
  );
}