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

import React from "react";
import { User, Permit, PermitType } from "../types";
import { getIndonesianDay, formatIndonesianDate, getApiUrl } from "../utils";
import { Loader2, PlusCircle, CheckCircle, Clock, Save, FileText, CheckCircle2, AlertCircle, XCircle } from "lucide-react";

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

export default function DashboardSiswa({ currentUser, refreshPermitsTrigger, allPermits, allUsers }: DashboardSiswaProps) {
  const [permitType, setPermitType] = React.useState<PermitType>("keluar_masuk");
  const [date, setDate] = React.useState(new Date().toISOString().split("T")[0]);
  const [timeExitProposed, setTimeExitProposed] = React.useState("10:00");
  const [timeReturnProposed, setTimeReturnProposed] = React.useState("12:00");
  const [reason, setReason] = React.useState("");

  const [mapelTeacherId, setMapelTeacherId] = React.useState("");
  const [piketTeacherId, setPiketTeacherId] = React.useState("");

  const [isSubmitting, setIsSubmitting] = React.useState(false);
  const [msg, setMsg] = React.useState<{ text: string; type: "success" | "error" } | null>(null);

  // Filter teachers
  const mapelTeachers = allUsers.filter(u => u.role === "guru_mapel");
  const piketTeachers = allUsers.filter(u => u.role === "guru_piket");

  // Autofill first teachers if available
  React.useEffect(() => {
    if (mapelTeachers.length > 0 && !mapelTeacherId) {
      setMapelTeacherId(mapelTeachers[0].id);
    }
  }, [mapelTeachers]);

  React.useEffect(() => {
    if (piketTeachers.length > 0 && !piketTeacherId) {
      setPiketTeacherId(piketTeachers[0].id);
    }
  }, [piketTeachers]);

  // Read student's permits
  const myPermits = allPermits.filter(p => p.siswaId === currentUser.id);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!reason.trim()) {
      setMsg({ text: "Keterangan/Alasan izin harus diisi!", type: "error" });
      return;
    }
    if (!mapelTeacherId || !piketTeacherId) {
      setMsg({ text: "Anda harus memilih Guru Mata Pelajaran dan Guru Piket verifikator!", type: "error" });
      return;
    }

    setIsSubmitting(true);
    setMsg(null);

    const mapelTeacher = mapelTeachers.find(t => t.id === mapelTeacherId);
    const piketTeacher = piketTeachers.find(t => t.id === piketTeacherId);

    const payload = {
      siswaId: currentUser.id,
      siswaName: currentUser.name,
      siswaClass: currentUser.siswaClass || "Umum",
      siswaInduk: currentUser.indukNumber,
      permitType,
      day: getIndonesianDay(date),
      date,
      timeExitProposed,
      timeReturnProposed: permitType === "keluar_masuk" ? timeReturnProposed : undefined,
      reason,
      mapelTeacherId,
      mapelTeacherName: mapelTeacher ? mapelTeacher.name : "",
      piketTeacherId,
      piketTeacherName: piketTeacher ? piketTeacher.name : ""
    };

    try {
      const response = await fetch(getApiUrl("permits"), {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(payload)
      });

      if (!response.ok) {
        const errData = await response.json();
        throw new Error(errData.error || "Gagal mengunggah izin");
      }

      setMsg({ text: "Selesai! Permohonan izin Anda berhasil diajukan dan sedang menunggu persetujuan Guru Mata Pelajaran.", type: "success" });
      setReason("");
      refreshPermitsTrigger();
    } catch (err: any) {
      setMsg({ text: err.message, type: "error" });
    } finally {
      setIsSubmitting(false);
    }
  };

  const getStatusBadge = (status: string) => {
    switch (status) {
      case "waiting_mapel": 
        return (
          <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md bg-slate-100/80 text-slate-700 text-[10px] font-bold border border-slate-200 uppercase">
            <div className="w-1.5 h-1.5 rounded-full bg-slate-400"></div> Menunggu Guru Mapel
          </span>
        );
      case "waiting_piket": 
        return (
          <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md bg-amber-50 text-amber-700 text-[10px] font-bold border border-amber-200 uppercase">
            <div className="w-1.5 h-1.5 rounded-full bg-amber-500 animate-pulse"></div> Menunggu Guru Piket
          </span>
        );
      case "approved_to_leave": 
        return (
          <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md bg-indigo-50 text-indigo-700 text-[10px] font-bold border border-indigo-200 uppercase">
            <div className="w-1.5 h-1.5 rounded-full bg-indigo-500"></div> Disetujui, Ke Pos Satpam
          </span>
        );
      case "checked_out": 
        return (
          <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md bg-indigo-50 text-indigo-600 text-[10px] font-bold border border-indigo-200 uppercase">
            <div className="w-1.5 h-1.5 rounded-full bg-indigo-500 animate-pulse"></div> Diluar Sekolah
          </span>
        );
      case "returned": 
        return (
          <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md bg-emerald-50 text-emerald-700 text-[10px] font-bold border border-emerald-200 uppercase">
            <div className="w-1.5 h-1.5 rounded-full bg-emerald-500"></div> Selesai / Kembali
          </span>
        );
      case "rejected": 
        return (
          <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md bg-rose-50 text-rose-700 text-[10px] font-bold border border-rose-200 uppercase">
            <div className="w-1.5 h-1.5 rounded-full bg-rose-500"></div> Ditolak
          </span>
        );
      default: 
        return (
          <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md bg-slate-100 text-slate-600 text-[10px] font-bold border border-slate-200 uppercase">
            <div className="w-1.5 h-1.5 rounded-full bg-slate-400"></div> Proses
          </span>
        );
    }
  };

  return (
    <div className="space-y-8 animate-fade-in text-slate-800">
      <div className="grid grid-cols-1 lg:grid-cols-12 gap-8">
        {/* Form Permohonan */}
        <div className="lg:col-span-5 bg-white border border-slate-200 rounded-2xl shadow-sm overflow-hidden">
          <div className="bg-slate-900 p-6 text-white border-b border-slate-800">
            <h2 className="text-base font-bold flex items-center gap-2">
              <PlusCircle className="h-5 w-5 text-indigo-400" />
              Ajukan Surat Izin Baru
            </h2>
            <p className="text-xs text-slate-450 font-sans mt-0.5">Isi detail keperluan keluar kampus atau izin pulang cepat</p>
          </div>

          <form onSubmit={handleSubmit} className="p-6 space-y-4">
            {msg && (
              <div className={`p-3.5 rounded-lg text-xs font-medium flex items-start gap-2 border ${
                msg.type === "success" 
                  ? "bg-emerald-50 text-emerald-800 border-emerald-100" 
                  : "bg-rose-50 text-rose-800 border-rose-100"
              }`}>
                {msg.type === "success" ? <CheckCircle className="h-4 w-4 shrink-0 text-emerald-600" /> : <XCircle className="h-4 w-4 shrink-0 text-rose-600" />}
                <span>{msg.text}</span>
              </div>
            )}

            {/* Tipe Izin */}
            <div>
              <label className="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-2">Jenis Surat Izin</label>
              <div className="grid grid-cols-2 gap-3">
                <button
                  type="button"
                  id="siswa-type-keluar"
                  onClick={() => setPermitType("keluar_masuk")}
                  className={`p-3 rounded-lg border text-xs font-semibold text-center transition-all cursor-pointer ${
                    permitType === "keluar_masuk" 
                      ? "bg-indigo-50/50 border-indigo-600 text-indigo-600 font-extrabold" 
                      : "bg-white border-slate-200 text-slate-600 hover:bg-slate-50"
                  }`}
                >
                  Keluar Masuk Sementara
                  <span className="block text-[10px] font-normal text-slate-500 mt-1">Kembali lagi ke sekolah</span>
                </button>
                <button
                  type="button"
                  id="siswa-type-pulang"
                  onClick={() => setPermitType("pulang_cepat")}
                  className={`p-3 rounded-lg border text-xs font-semibold text-center transition-all cursor-pointer ${
                    permitType === "pulang_cepat" 
                      ? "bg-indigo-50/50 border-indigo-600 text-indigo-600 font-extrabold" 
                      : "bg-white border-slate-200 text-slate-600 hover:bg-slate-50"
                  }`}
                >
                  Pulang Cepat
                  <span className="block text-[10px] font-normal text-slate-500 mt-1">Izin langsung pulang</span>
                </button>
              </div>
            </div>

            {/* Tanggal & Hari */}
            <div className="grid grid-cols-2 gap-4">
              <div>
                <label className="block text-xs font-bold text-slate-700 uppercase tracking-widest mb-1">Tanggal</label>
                <input
                  type="date"
                  value={date}
                  onChange={(e) => setDate(e.target.value)}
                  className="w-full bg-slate-50 border border-slate-200 rounded-lg px-3 py-2 text-xs focus:ring-1 focus:ring-indigo-600 outline-hidden font-mono"
                  required
                />
              </div>
              <div>
                <label className="block text-xs font-bold text-slate-700 uppercase tracking-widest mb-1">Hari (Otomatis)</label>
                <input
                  type="text"
                  value={getIndonesianDay(date)}
                  className="w-full bg-slate-100 border border-slate-200 rounded-lg px-3 py-2 text-xs font-semibold outline-hidden cursor-not-allowed text-slate-600"
                  disabled
                />
              </div>
            </div>

            {/* Jam Keluar & Kembali */}
            <div className="grid grid-cols-2 gap-4">
              <div>
                <label className="block text-xs font-bold text-slate-700 uppercase tracking-widest mb-1">Direncanakan Keluar</label>
                <input
                  type="time"
                  value={timeExitProposed}
                  onChange={(e) => setTimeExitProposed(e.target.value)}
                  className="w-full bg-slate-50 border border-slate-200 rounded-lg px-3 py-2 text-xs focus:ring-1 focus:ring-indigo-600 outline-hidden font-mono"
                  required
                />
              </div>
              
              {permitType === "keluar_masuk" && (
                <div>
                  <label className="block text-xs font-bold text-slate-700 uppercase tracking-widest mb-1">Direncanakan Kembali</label>
                  <input
                    type="time"
                    value={timeReturnProposed}
                    onChange={(e) => setTimeReturnProposed(e.target.value)}
                    className="w-full bg-slate-50 border border-slate-200 rounded-lg px-3 py-2 text-xs focus:ring-1 focus:ring-indigo-600 outline-hidden font-mono"
                    required
                  />
                </div>
              )}
            </div>

            {/* Keterangan */}
            <div>
              <label className="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-1">Keterangan / Alasan Izin</label>
              <textarea
                value={reason}
                onChange={(e) => setReason(e.target.value)}
                placeholder="Contoh: Berobat ke RSUD dr. Moh Saleh, Keperluan fotokopi berkas mendesak, dsb."
                className="w-full bg-slate-50 border border-slate-200 rounded-lg px-3 py-2.5 text-xs focus:ring-1 focus:ring-indigo-600 outline-hidden h-24 resize-none transition-all placeholder:text-slate-400"
                required
              />
            </div>

            {/* Verifikasi Dropdown */}
            <div className="grid grid-cols-2 gap-4 pt-1">
              <div>
                <label className="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-1">Guru Mapel (Tahap 1)</label>
                <select
                  value={mapelTeacherId}
                  onChange={(e) => setMapelTeacherId(e.target.value)}
                  className="w-full bg-slate-50 border border-slate-200 rounded-lg px-3 py-2 text-xs focus:ring-1 focus:ring-indigo-600 outline-hidden cursor-pointer"
                  required
                >
                  <option value="">Pilih Guru Mapel</option>
                  {mapelTeachers.map(t => (
                    <option key={t.id} value={t.id}>{t.name}</option>
                  ))}
                </select>
              </div>

              <div>
                <label className="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-1">Guru Piket (Tahap 2)</label>
                <select
                  value={piketTeacherId}
                  onChange={(e) => setPiketTeacherId(e.target.value)}
                  className="w-full bg-slate-50 border border-slate-200 rounded-lg px-3 py-2 text-xs focus:ring-1 focus:ring-indigo-600 outline-hidden cursor-pointer"
                  required
                >
                  <option value="">Pilih Guru Piket</option>
                  {piketTeachers.map(t => (
                    <option key={t.id} value={t.id}>{t.name}</option>
                  ))}
                </select>
              </div>
            </div>

            <button
              id="siswa-btn-submit"
              type="submit"
              disabled={isSubmitting}
              className="w-full bg-indigo-600 hover:bg-indigo-700 text-white py-3 rounded-lg text-xs font-semibold shadow-sm transition-colors cursor-pointer flex items-center justify-center space-x-2"
            >
              {isSubmitting ? (
                <>
                  <Loader2 className="h-4 w-4 animate-spin text-white" />
                  <span>Sedang Mengajukan Surat...</span>
                </>
              ) : (
                <>
                  <Save className="h-4 w-4" />
                  <span>Kirim Pengajuan Izin</span>
                </>
              )}
            </button>
          </form>
        </div>

        {/* Riwayat Pengajuan */}
        <div className="lg:col-span-7 space-y-4">
          <div className="flex justify-between items-center px-2">
            <div>
              <h2 className="text-base font-bold text-slate-900">Riwayat Pengajuan Surat Izin Anda</h2>
              <p className="text-[11px] text-slate-500 font-sans">Semua riwayat surat izin keluar masuk dan pulang cepat</p>
            </div>
          </div>

          {myPermits.length === 0 ? (
            <div className="bg-white border border-slate-200 rounded-2xl p-8 flex flex-col items-center justify-center text-center shadow-sm">
              <FileText className="h-10 w-10 text-slate-300 mb-3" />
              <p className="text-sm font-semibold text-slate-700">Tidak Ada Riwayat Surat Izin</p>
              <p className="text-xs text-slate-500 max-w-sm font-sans mt-0.5">Anda belum mengajukan surat izin saat ini. Silakan gunakan formulir disebelah kiri untuk membuat izin.</p>
            </div>
          ) : (
            <div className="space-y-4">
              {myPermits.map((p) => (
                <div key={p.id} className="bg-white border border-slate-200 rounded-2xl p-5 shadow-sm hover:shadow-md transition-all">
                  <div className="flex flex-wrap justify-between items-start gap-2 border-b border-slate-100 pb-3 mb-3">
                    <div>
                      <span className={`inline-flex items-center px-2 py-0.5 rounded text-[10px] font-bold ${
                        p.permitType === "keluar_masuk" ? "bg-indigo-100 text-indigo-700" : "bg-amber-100 text-amber-700"
                      }`}>
                        {p.permitType === "keluar_masuk" ? "KELUAR-MASUK" : "PULANG CEPAT"}
                      </span>
                      <h3 className="text-sm font-bold text-slate-900 mt-1">{p.day}, {formatIndonesianDate(p.date)}</h3>
                    </div>
                    <div>
                      {getStatusBadge(p.overallStatus)}
                    </div>
                  </div>

                  {/* Details Grid */}
                  <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-xs font-sans text-slate-600">
                    <div>
                      <p className="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Keperluan / Keterangan</p>
                      <p className="font-semibold text-slate-800 mt-0.5 italic">"{p.reason}"</p>
                    </div>
                    <div>
                      <p className="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Rencana Jam</p>
                      <p className="font-mono text-slate-800 mt-0.5 font-bold">
                        {p.timeExitProposed} s/d {p.timeReturnProposed || "Selesai"}
                      </p>
                    </div>
                    <div>
                      <p className="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Verifikator 1 (Mapel)</p>
                      <div className="mt-0.5">
                        <p className="font-semibold text-slate-800 truncate">{p.mapelTeacherName}</p>
                        <span className={`text-[9px] font-bold px-1.5 py-0.2 rounded ${
                          p.statusMapel === "approved" ? "text-emerald-700 bg-emerald-50" : p.statusMapel === "rejected" ? "text-rose-700 bg-rose-50" : "text-slate-500 bg-slate-50"
                        }`}>
                          {p.statusMapel === "approved" ? `DISETUJUI (${p.timeApprovedMapel})` : p.statusMapel === "rejected" ? "DITOLAK" : "MENUNGGU"}
                        </span>
                      </div>
                    </div>
                    <div>
                      <p className="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Verifikator 2 (Piket)</p>
                      <div className="mt-0.5">
                        <p className="font-semibold text-slate-800 truncate">{p.piketTeacherName}</p>
                        <span className={`text-[9px] font-bold px-1.5 py-0.2 rounded ${
                          p.statusPiket === "approved" ? "text-emerald-700 bg-emerald-50" : p.statusPiket === "rejected" ? "text-rose-700 bg-rose-50" : "text-slate-500 bg-slate-50"
                        }`}>
                          {p.statusPiket === "approved" ? `DISETUJUI (${p.timeApprovedPiket})` : p.statusPiket === "rejected" ? "DITOLAK" : "MENUNGGU"}
                        </span>
                      </div>
                    </div>
                  </div>

                  {/* Refeusal Reason / Gate Info Section */}
                  {p.overallStatus === "rejected" && p.rejectReason && (
                    <div className="mt-4 p-2.5 bg-rose-50 rounded-lg text-xs border border-rose-100 flex items-start gap-1.5">
                      <AlertCircle className="h-4 w-4 text-rose-700 shrink-0" />
                      <div>
                        <strong className="text-rose-900 font-bold">Alasan Penolakan:</strong>
                        <span className="text-rose-800 ml-1 font-sans italic">"{p.rejectReason}"</span>
                      </div>
                    </div>
                  )}

                  {/* Gate Logging report */}
                  {(p.timeCheckedOut || p.timeCheckedIn) && (
                    <div className="mt-3 pt-3 border-t border-slate-100 flex flex-wrap gap-4 text-[10px] font-mono text-slate-500 bg-slate-50 p-2.5 rounded-lg border border-slate-100">
                      <div>
                        ⚡ <span className="font-bold text-indigo-600">Validasi Keluar Pos Satpam:</span> {p.timeCheckedOut || "-"}
                      </div>
                      <div>
                        ⚡ <span className="font-bold text-emerald-700">Validasi Kembali Pos Satpam:</span> {p.timeCheckedIn || "-"}
                      </div>
                      {p.satpamName && (
                        <div className="bg-slate-200/50 px-1.5 py-0.2 rounded text-slate-600 font-sans ml-auto font-medium">Satpam: {p.satpamName}</div>
                      )}
                    </div>
                  )}
                </div>
              ))}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}