"use client";

import React, { useState } from "react";
import Link from "next/link";
import {
  Search,
  RotateCcw,
  Plus,
  Eye,
  Edit2,
  Trash2,
  ChevronRight,
  FileSpreadsheet,
  FileText,
  Calendar,
  X,
  Save,
} from "lucide-react";
import { toast } from "sonner";

interface ExtendedHoliday {
  id: string;
  name: string;
  holidayDate: string;
  dayOfWeek: string;
  type: "National" | "Gazetted" | "Institutional";
  academicSession: string;
  status: "Active" | "Inactive";
  description?: string;
}

const initialHolidays: ExtendedHoliday[] = [
  {
    id: "hol-1",
    name: "Gandhi Jayanti",
    holidayDate: "2026-10-02",
    dayOfWeek: "Friday",
    type: "National",
    academicSession: "2026-2027",
    status: "Active",
    description: "National non-instructional observance celebrating Mahatma Gandhi.",
  },
  {
    id: "hol-2",
    name: "Dussehra (Maha Navami)",
    holidayDate: "2026-10-19",
    dayOfWeek: "Monday",
    type: "Gazetted",
    academicSession: "2026-2027",
    status: "Active",
    description: "Gazetted institutional holiday for Vijayadashami / Maha Navami.",
  },
  {
    id: "hol-3",
    name: "Diwali (Deepavali Break)",
    holidayDate: "2026-11-08",
    dayOfWeek: "Sunday",
    type: "Gazetted",
    academicSession: "2026-2027",
    status: "Active",
    description: "Deepavali festive holiday break.",
  },
  {
    id: "hol-4",
    name: "Guru Nanak Jayanti",
    holidayDate: "2026-11-24",
    dayOfWeek: "Tuesday",
    type: "Gazetted",
    academicSession: "2026-2027",
    status: "Active",
    description: "Gazetted holiday honoring Guru Nanak Gurpurab.",
  },
  {
    id: "hol-5",
    name: "Christmas Day",
    holidayDate: "2026-12-25",
    dayOfWeek: "Friday",
    type: "National",
    academicSession: "2026-2027",
    status: "Active",
    description: "Winter break national holiday observance.",
  },
  {
    id: "hol-6",
    name: "IHM Annual Culinary Symposium",
    holidayDate: "2027-01-15",
    dayOfWeek: "Friday",
    type: "Institutional",
    academicSession: "2026-2027",
    status: "Active",
    description: "Institute non-class event day for Annual Hospitality Convention.",
  },
  {
    id: "hol-7",
    name: "Republic Day",
    holidayDate: "2027-01-26",
    dayOfWeek: "Tuesday",
    type: "National",
    academicSession: "2026-2027",
    status: "Active",
    description: "National holiday celebrating Republic Day of India.",
  },
];

const dayNames = [
  "Sunday",
  "Monday",
  "Tuesday",
  "Wednesday",
  "Thursday",
  "Friday",
  "Saturday",
];

const computeDayOfWeek = (dateString: string) => {
  if (!dateString) return "Monday";
  const d = new Date(dateString);
  return dayNames[d.getDay()] || "Monday";
};

export default function HolidaysPage() {
  const [holidays, setHolidays] = useState<ExtendedHoliday[]>(initialHolidays);
  const [selectedType, setSelectedType] = useState("All Types");
  const [selectedSession, setSelectedSession] = useState("All Sessions");
  const [selectedStatus, setSelectedStatus] = useState("All Status");
  const [searchQuery, setSearchQuery] = useState("");
  const [selectedRows, setSelectedRows] = useState<string[]>([]);
  const [pageSize, setPageSize] = useState("10 per page");

  // Modal State
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [modalMode, setModalMode] = useState<"create" | "edit" | "view">("create");
  const [editingId, setEditingId] = useState<string | null>(null);
  const [viewingHoliday, setViewingHoliday] = useState<ExtendedHoliday | null>(null);

  // Form Fields
  const [formName, setFormName] = useState("");
  const [formDate, setFormDate] = useState("2026-10-02");
  const [formDayOfWeek, setFormDayOfWeek] = useState("Friday");
  const [formType, setFormType] = useState<ExtendedHoliday["type"]>("National");
  const [formSession, setFormSession] = useState("2026-2027");
  const [formStatus, setFormStatus] = useState<ExtendedHoliday["status"]>("Active");
  const [formDescription, setFormDescription] = useState("");

  const filteredHolidays = holidays.filter((h) => {
    const matchesType =
      selectedType === "All Types" || h.type === selectedType;
    const matchesSession =
      selectedSession === "All Sessions" || h.academicSession === selectedSession;
    const matchesStatus =
      selectedStatus === "All Status" || h.status === selectedStatus;
    const matchesSearch =
      searchQuery === "" ||
      h.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      h.holidayDate.includes(searchQuery) ||
      h.dayOfWeek.toLowerCase().includes(searchQuery.toLowerCase());
    return matchesType && matchesSession && matchesStatus && matchesSearch;
  });

  const handleSelectAll = () => {
    if (selectedRows.length === filteredHolidays.length && filteredHolidays.length > 0) {
      setSelectedRows([]);
    } else {
      setSelectedRows(filteredHolidays.map((h) => h.id));
    }
  };

  const handleRowSelect = (id: string) => {
    setSelectedRows((prev) =>
      prev.includes(id) ? prev.filter((r) => r !== id) : [...prev, id]
    );
  };

  const handleResetFilters = () => {
    setSelectedType("All Types");
    setSelectedSession("All Sessions");
    setSelectedStatus("All Status");
    setSearchQuery("");
  };

  const handleDelete = (id: string) => {
    setHolidays((prev) => prev.filter((h) => h.id !== id));
    toast.success("Holiday removed from academic calendar.");
  };

  const openCreateModal = () => {
    setModalMode("create");
    setEditingId(null);
    setViewingHoliday(null);
    setFormName("");
    setFormDate("2026-10-02");
    setFormDayOfWeek("Friday");
    setFormType("National");
    setFormSession("2026-2027");
    setFormStatus("Active");
    setFormDescription("");
    setIsModalOpen(true);
  };

  const openEditModal = (h: ExtendedHoliday) => {
    setModalMode("edit");
    setEditingId(h.id);
    setViewingHoliday(null);
    setFormName(h.name);
    setFormDate(h.holidayDate);
    setFormDayOfWeek(h.dayOfWeek);
    setFormType(h.type);
    setFormSession(h.academicSession);
    setFormStatus(h.status);
    setFormDescription(h.description || "");
    setIsModalOpen(true);
  };

  const openViewModal = (h: ExtendedHoliday) => {
    setViewingHoliday(h);
    setModalMode("view");
    setIsModalOpen(true);
  };

  const handleDateChange = (val: string) => {
    setFormDate(val);
    setFormDayOfWeek(computeDayOfWeek(val));
  };

  const handleSaveForm = (e: React.FormEvent) => {
    e.preventDefault();

    if (!formName.trim() || !formDate) {
      toast.error("Please enter holiday name and date.");
      return;
    }

    const calculatedDay = computeDayOfWeek(formDate);

    if (editingId) {
      setHolidays((prev) =>
        prev.map((h) =>
          h.id === editingId
            ? {
                ...h,
                name: formName,
                holidayDate: formDate,
                dayOfWeek: calculatedDay,
                type: formType,
                academicSession: formSession,
                status: formStatus,
                description: formDescription,
              }
            : h
        )
      );
      toast.success("Holiday updated successfully.");
    } else {
      const newHoliday: ExtendedHoliday = {
        id: `hol-${Date.now()}`,
        name: formName,
        holidayDate: formDate,
        dayOfWeek: calculatedDay,
        type: formType,
        academicSession: formSession,
        status: formStatus,
        description: formDescription,
      };
      setHolidays((prev) => [newHoliday, ...prev]);
      toast.success("New holiday added to calendar.");
    }

    setIsModalOpen(false);
  };

  const getTypeBadge = (type: ExtendedHoliday["type"]) => {
    switch (type) {
      case "National":
        return "bg-[#DCFCE7] text-[#15803D]";
      case "Gazetted":
        return "bg-[#E0F2FE] text-[#0369A1]";
      case "Institutional":
        return "bg-[#FEF3C7] text-[#B45309]";
      default:
        return "bg-slate-100 text-slate-700";
    }
  };

  return (
    <div className="space-y-5 font-sans">
      {/* ============================================================ */}
      {/* 1. TOP HEADER & BREADCRUMB                                   */}
      {/* ============================================================ */}
      <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-4">
        <div>
          {/* Breadcrumb */}
          <nav className="flex items-center gap-1.5 text-[13px] text-[#64748B] mb-1 font-medium font-sans">
            <Link href="/admin/dashboard" className="hover:text-[#1769E8] hover:underline">
              Home
            </Link>
            <ChevronRight className="w-3.5 h-3.5 text-[#94A3B8]" />
            <span>Academic Management</span>
            <ChevronRight className="w-3.5 h-3.5 text-[#94A3B8]" />
            <span className="text-[#071A4D] font-semibold">Holiday Calendar</span>
          </nav>

          <h1 className="text-3xl font-bold font-heading text-[#071A4D] tracking-tight">
            Holiday Calendar
          </h1>
          <p className="text-[15px] text-[#64748B] mt-1 font-normal font-sans">
            Official institutional non-instructional days, national observances, and term vacations.
          </p>
        </div>

        {/* Action Buttons Top Right */}
        <div className="flex items-center gap-2.5 flex-wrap font-sans">
          <button
            onClick={() => toast.success("Exporting Holiday Calendar to CSV...")}
            className="inline-flex items-center gap-1.5 px-3.5 py-2 text-xs font-semibold text-[#071A4D] bg-white border border-[#E5EAF0] rounded-lg hover:bg-slate-50 transition-colors shadow-2xs cursor-pointer"
          >
            <FileSpreadsheet className="w-4 h-4 text-emerald-600" />
            <span>Export</span>
          </button>

          <button
            onClick={() => toast.success("Generating holiday compliance audit report...")}
            className="inline-flex items-center gap-1.5 px-3.5 py-2 text-xs font-semibold text-[#071A4D] bg-white border border-[#E5EAF0] rounded-lg hover:bg-slate-50 transition-colors shadow-2xs cursor-pointer"
          >
            <FileText className="w-4 h-4 text-[#9333EA]" />
            <span>Generate Report</span>
          </button>

          <button
            onClick={openCreateModal}
            className="inline-flex items-center gap-1.5 px-4 py-2 text-xs font-semibold text-white bg-[#1769E8] hover:bg-[#1257C7] rounded-lg shadow-sm transition-colors cursor-pointer"
          >
            <Plus className="w-4 h-4" />
            <span>+ Add Holiday</span>
          </button>
        </div>
      </div>

      {/* ============================================================ */}
      {/* 2. FILTER AND SEARCH BAR                                     */}
      {/* ============================================================ */}
      <div className="p-4 rounded-xl bg-white border border-[#E5EAF0] shadow-xs flex flex-col lg:flex-row items-stretch lg:items-center justify-between gap-3 font-sans">
        <div className="flex flex-wrap items-center gap-2.5 flex-1">
          {/* Holiday Category Dropdown */}
          <div className="flex flex-col">
            <label className="text-[10px] font-bold text-[#64748B] mb-0.5 uppercase tracking-wider">
              Category
            </label>
            <select
              value={selectedType}
              onChange={(e) => setSelectedType(e.target.value)}
              className="h-9 px-3 rounded-lg border border-[#D8E0EA] bg-white text-xs font-medium text-[#334155] focus:outline-none focus:border-[#1769E8] focus:ring-1 focus:ring-[#1769E8]/20 cursor-pointer"
            >
              <option>All Types</option>
              <option>National</option>
              <option>Gazetted</option>
              <option>Institutional</option>
            </select>
          </div>

          {/* Academic Session Dropdown */}
          <div className="flex flex-col">
            <label className="text-[10px] font-bold text-[#64748B] mb-0.5 uppercase tracking-wider">
              Session
            </label>
            <select
              value={selectedSession}
              onChange={(e) => setSelectedSession(e.target.value)}
              className="h-9 px-3 rounded-lg border border-[#D8E0EA] bg-white text-xs font-medium text-[#334155] focus:outline-none focus:border-[#1769E8] focus:ring-1 focus:ring-[#1769E8]/20 cursor-pointer"
            >
              <option>All Sessions</option>
              <option>2026-2027</option>
              <option>2025-2026</option>
              <option>2027-2028</option>
            </select>
          </div>

          {/* Status Dropdown */}
          <div className="flex flex-col">
            <label className="text-[10px] font-bold text-[#64748B] mb-0.5 uppercase tracking-wider">
              Status
            </label>
            <select
              value={selectedStatus}
              onChange={(e) => setSelectedStatus(e.target.value)}
              className="h-9 px-3 rounded-lg border border-[#D8E0EA] bg-white text-xs font-medium text-[#334155] focus:outline-none focus:border-[#1769E8] focus:ring-1 focus:ring-[#1769E8]/20 cursor-pointer"
            >
              <option>All Status</option>
              <option>Active</option>
              <option>Inactive</option>
            </select>
          </div>

          {/* Search Box */}
          <div className="flex flex-col flex-1 min-w-[220px]">
            <label className="text-[10px] font-bold text-[#64748B] mb-0.5 uppercase tracking-wider opacity-0">
              Search
            </label>
            <div className="relative">
              <Search className="w-4 h-4 text-[#94A3B8] absolute left-3 top-1/2 -translate-y-1/2" />
              <input
                type="text"
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                placeholder="Search by holiday name, date (YYYY-MM-DD), or day..."
                className="h-9 w-full rounded-lg border border-[#D8E0EA] bg-white pl-9 pr-3 text-xs text-[#334155] placeholder:text-[#94A3B8] focus:outline-none focus:border-[#1769E8] focus:ring-1 focus:ring-[#1769E8]/20"
              />
            </div>
          </div>
        </div>

        {/* Action Buttons */}
        <div className="flex items-end gap-2 shrink-0 pt-3 lg:pt-0 font-sans">
          <button
            onClick={() => {}}
            className="h-9 px-4 rounded-lg bg-[#1769E8] hover:bg-[#1257C7] text-white text-xs font-semibold flex items-center gap-1.5 shadow-xs transition-colors cursor-pointer"
          >
            <Search className="w-3.5 h-3.5" />
            <span>Search</span>
          </button>

          <button
            onClick={handleResetFilters}
            className="h-9 px-4 rounded-lg border border-[#E5EAF0] hover:bg-slate-50 text-[#334155] text-xs font-semibold flex items-center gap-1.5 transition-colors shadow-2xs cursor-pointer"
          >
            <RotateCcw className="w-3.5 h-3.5 text-[#64748B]" />
            <span>Reset</span>
          </button>
        </div>
      </div>

      {/* ============================================================ */}
      {/* 3. FULL WIDTH HOLIDAYS TABLE - ALL DETAILS IN A LINE         */}
      {/* ============================================================ */}
      <div className="rounded-xl bg-white border border-[#E5EAF0] shadow-xs overflow-hidden">
        {/* Table Header Controls */}
        <div className="p-4 border-b border-[#E5EAF0] flex items-center justify-between">
          <div className="flex items-center gap-2">
            <Calendar className="w-4 h-4 text-[#1769E8]" />
            <h2 className="text-sm font-bold font-heading text-[#071A4D]">
              Scheduled Holidays ({filteredHolidays.length})
            </h2>
          </div>

          <select
            value={pageSize}
            onChange={(e) => setPageSize(e.target.value)}
            className="h-8 px-2.5 rounded-lg border border-[#D8E0EA] bg-white text-xs text-[#64748B] focus:outline-none focus:border-[#1769E8] cursor-pointer"
          >
            <option>10 per page</option>
            <option>25 per page</option>
            <option>50 per page</option>
          </select>
        </div>

        {/* Table Data */}
        <div className="overflow-x-auto">
          <table className="w-full text-left text-xs border-collapse">
            <thead>
              <tr className="bg-[#F8FAFC] border-b border-[#E5EAF0] text-[#64748B] uppercase tracking-wider font-bold text-[11px] whitespace-nowrap">
                <th className="py-3 px-3.5 text-center w-10">
                  <input
                    type="checkbox"
                    checked={
                      selectedRows.length === filteredHolidays.length &&
                      filteredHolidays.length > 0
                    }
                    onChange={handleSelectAll}
                    className="rounded border-[#D8E0EA] text-[#1769E8] focus:ring-[#1769E8] cursor-pointer"
                  />
                </th>
                <th className="py-3 px-2 text-center w-10">#</th>
                <th className="py-3 px-4">Date</th>
                <th className="py-3 px-4">Day</th>
                <th className="py-3 px-4">Holiday Title</th>
                <th className="py-3 px-4">Category</th>
                <th className="py-3 px-4">Academic Session</th>
                <th className="py-3 px-4">Description</th>
                <th className="py-3 px-4 text-center">Status</th>
                <th className="py-3 px-4 text-center">Actions</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-[#E5EAF0] text-[#334155]">
              {filteredHolidays.length === 0 ? (
                <tr>
                  <td colSpan={10} className="py-12 text-center text-slate-400">
                    No holidays match the filter criteria.
                  </td>
                </tr>
              ) : (
                filteredHolidays.map((h, idx) => {
                  const isSelected = selectedRows.includes(h.id);
                  return (
                    <tr
                      key={h.id}
                      className={`hover:bg-[#F8FAFC] transition-colors whitespace-nowrap ${
                        isSelected ? "bg-blue-50/40" : ""
                      }`}
                    >
                      <td className="py-3.5 px-3.5 text-center">
                        <input
                          type="checkbox"
                          checked={isSelected}
                          onChange={() => handleRowSelect(h.id)}
                          className="rounded border-[#D8E0EA] text-[#1769E8] focus:ring-[#1769E8] cursor-pointer"
                        />
                      </td>
                      <td className="py-3.5 px-2 text-center text-slate-400 font-medium">
                        {idx + 1}
                      </td>
                      <td className="py-3.5 px-4 font-bold">
                        <span className="font-mono bg-blue-50 text-[#1769E8] px-2.5 py-0.5 rounded text-[11px] border border-blue-100">
                          {h.holidayDate}
                        </span>
                      </td>
                      <td className="py-3.5 px-4 font-semibold text-[#334155]">
                        {h.dayOfWeek}
                      </td>
                      <td className="py-3.5 px-4 font-bold text-[#071A4D]">
                        {h.name}
                      </td>
                      <td className="py-3.5 px-4">
                        <span
                          className={`inline-block px-2.5 py-0.5 rounded-full text-[11px] font-semibold ${getTypeBadge(
                            h.type
                          )}`}
                        >
                          {h.type}
                        </span>
                      </td>
                      <td className="py-3.5 px-4 font-mono text-[#475569]">
                        {h.academicSession}
                      </td>
                      <td className="py-3.5 px-4 text-[#64748B] max-w-xs truncate">
                        {h.description || "—"}
                      </td>
                      <td className="py-3.5 px-4 text-center">
                        {h.status === "Active" ? (
                          <span className="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-[11px] font-semibold bg-[#DCFCE7] text-[#15803D]">
                            <span className="w-1.5 h-1.5 rounded-full bg-[#15803D]"></span>
                            Active
                          </span>
                        ) : (
                          <span className="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-[11px] font-semibold bg-[#FEE2E2] text-[#DC2626]">
                            <span className="w-1.5 h-1.5 rounded-full bg-[#DC2626]"></span>
                            Inactive
                          </span>
                        )}
                      </td>
                      <td className="py-3.5 px-4 text-center">
                        <div className="flex items-center justify-center gap-1.5">
                          {/* View Action */}
                          <button
                            onClick={() => openViewModal(h)}
                            className="p-1.5 rounded-lg text-[#1769E8] hover:bg-blue-50 transition-colors"
                            title="View holiday details"
                          >
                            <Eye className="w-4 h-4" />
                          </button>

                          {/* Edit Action */}
                          <button
                            onClick={() => openEditModal(h)}
                            className="p-1.5 rounded-lg text-[#1769E8] hover:bg-blue-50 transition-colors"
                            title="Edit holiday"
                          >
                            <Edit2 className="w-4 h-4" />
                          </button>

                          {/* Delete Action */}
                          <button
                            onClick={() => handleDelete(h.id)}
                            className="p-1.5 rounded-lg text-[#DC2626] hover:bg-red-50 transition-colors"
                            title="Delete holiday"
                          >
                            <Trash2 className="w-4 h-4" />
                          </button>
                        </div>
                      </td>
                    </tr>
                  );
                })
              )}
            </tbody>
          </table>
        </div>

        {/* Pagination Footer */}
        <div className="p-3.5 px-4 border-t border-[#E5EAF0] flex items-center justify-between text-xs text-[#64748B]">
          <div>
            Showing 1 to {filteredHolidays.length} of {holidays.length} holidays
          </div>
          <div className="flex items-center gap-1">
            <button
              disabled
              className="px-2.5 py-1 rounded border border-[#E5EAF0] text-slate-300 cursor-not-allowed"
            >
              &lt;
            </button>
            <button className="px-3 py-1 rounded bg-[#1769E8] text-white font-bold">
              1
            </button>
            <button
              disabled
              className="px-2.5 py-1 rounded border border-[#E5EAF0] text-slate-300 cursor-not-allowed"
            >
              &gt;
            </button>
          </div>
        </div>
      </div>

      {/* ============================================================ */}
      {/* 4. POPUP MODAL: CREATE / EDIT / VIEW HOLIDAY                 */}
      {/* ============================================================ */}
      {isModalOpen && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-xs p-4 animate-in fade-in duration-150">
          <div className="w-full max-w-lg bg-white rounded-2xl shadow-2xl border border-[#E5EAF0] overflow-hidden flex flex-col max-h-[90vh]">
            {/* Modal Header */}
            <div className="px-6 py-4 border-b border-[#E5EAF0] flex items-center justify-between bg-slate-50/60">
              <div className="flex items-center gap-2.5">
                <div className="w-9 h-9 rounded-xl bg-blue-50 text-[#1769E8] flex items-center justify-center">
                  <Calendar className="w-5 h-5" />
                </div>
                <div>
                  <h3 className="font-heading font-bold text-base text-[#071A4D]">
                    {modalMode === "create" && "Add New Holiday"}
                    {modalMode === "edit" && "Edit Holiday"}
                    {modalMode === "view" && "Holiday Details"}
                  </h3>
                  <p className="text-[12px] text-[#64748B]">
                    {modalMode === "create" && "Register a new non-instructional day in the calendar."}
                    {modalMode === "edit" && "Update holiday date, category, or session details."}
                    {modalMode === "view" && "Complete overview of the scheduled holiday."}
                  </p>
                </div>
              </div>
              <button
                onClick={() => setIsModalOpen(false)}
                className="w-8 h-8 rounded-lg text-slate-400 hover:text-slate-700 hover:bg-slate-100 flex items-center justify-center transition-colors cursor-pointer"
              >
                <X className="w-4 h-4" />
              </button>
            </div>

            {/* Modal Body */}
            <div className="p-6 overflow-y-auto space-y-4">
              {modalMode === "view" && viewingHoliday ? (
                <div className="space-y-4 text-xs">
                  <div className="grid grid-cols-2 gap-4 p-4 rounded-xl bg-slate-50 border border-slate-100">
                    <div className="col-span-2">
                      <span className="text-[10px] uppercase font-bold text-[#64748B] block">Holiday Title</span>
                      <span className="text-sm font-bold text-[#071A4D]">{viewingHoliday.name}</span>
                    </div>
                    <div>
                      <span className="text-[10px] uppercase font-bold text-[#64748B] block">Date</span>
                      <span className="text-xs font-mono font-bold text-[#1769E8]">{viewingHoliday.holidayDate}</span>
                    </div>
                    <div>
                      <span className="text-[10px] uppercase font-bold text-[#64748B] block">Day of Week</span>
                      <span className="text-xs font-semibold text-[#334155]">{viewingHoliday.dayOfWeek}</span>
                    </div>
                    <div>
                      <span className="text-[10px] uppercase font-bold text-[#64748B] block">Category</span>
                      <span className={`inline-block mt-0.5 px-2.5 py-0.5 rounded-full font-semibold text-[10px] ${getTypeBadge(viewingHoliday.type)}`}>
                        {viewingHoliday.type}
                      </span>
                    </div>
                    <div>
                      <span className="text-[10px] uppercase font-bold text-[#64748B] block">Academic Session</span>
                      <span className="text-xs font-mono font-semibold text-[#334155]">{viewingHoliday.academicSession}</span>
                    </div>
                    <div>
                      <span className="text-[10px] uppercase font-bold text-[#64748B] block">Status</span>
                      <span className={`inline-block mt-0.5 px-2.5 py-0.5 rounded-full font-semibold text-[10px] ${
                        viewingHoliday.status === "Active"
                          ? "bg-[#DCFCE7] text-[#15803D]"
                          : "bg-[#FEE2E2] text-[#DC2626]"
                      }`}>
                        {viewingHoliday.status}
                      </span>
                    </div>
                  </div>

                  <div>
                    <span className="text-[10px] uppercase font-bold text-[#64748B] block mb-1">Description / Notes</span>
                    <p className="text-xs text-[#334155] leading-relaxed p-3 rounded-lg border border-slate-100 bg-white">
                      {viewingHoliday.description || "No description provided."}
                    </p>
                  </div>
                </div>
              ) : (
                <form id="holiday-form" onSubmit={handleSaveForm} className="space-y-4">
                  {/* Holiday Title */}
                  <div>
                    <label className="block text-xs font-bold text-[#334155] mb-1">
                      Holiday Title <span className="text-[#DC2626]">*</span>
                    </label>
                    <input
                      type="text"
                      required
                      value={formName}
                      onChange={(e) => setFormName(e.target.value)}
                      placeholder="e.g. Gandhi Jayanti"
                      className="h-10 w-full px-3 text-xs rounded-lg border border-[#D8E0EA] bg-white text-[#334155] placeholder:text-[#94A3B8] focus:outline-none focus:border-[#1769E8] focus:ring-1 focus:ring-[#1769E8]/20"
                    />
                  </div>

                  {/* Date & Day of Week */}
                  <div className="grid grid-cols-2 gap-3">
                    <div>
                      <label className="block text-xs font-bold text-[#334155] mb-1">
                        Date <span className="text-[#DC2626]">*</span>
                      </label>
                      <input
                        type="date"
                        required
                        value={formDate}
                        onChange={(e) => handleDateChange(e.target.value)}
                        className="h-10 w-full px-3 text-xs rounded-lg border border-[#D8E0EA] bg-white text-[#334155] focus:outline-none focus:border-[#1769E8] focus:ring-1 focus:ring-[#1769E8]/20 font-mono"
                      />
                    </div>
                    <div>
                      <label className="block text-xs font-bold text-[#334155] mb-1">
                        Day of Week
                      </label>
                      <input
                        type="text"
                        disabled
                        value={formDayOfWeek}
                        className="h-10 w-full px-3 text-xs rounded-lg border border-[#D8E0EA] bg-slate-50 text-[#64748B] font-semibold cursor-not-allowed"
                      />
                    </div>
                  </div>

                  {/* Category Type & Academic Session */}
                  <div className="grid grid-cols-2 gap-3">
                    <div>
                      <label className="block text-xs font-bold text-[#334155] mb-1">
                        Category Type <span className="text-[#DC2626]">*</span>
                      </label>
                      <select
                        value={formType}
                        onChange={(e) =>
                          setFormType(e.target.value as ExtendedHoliday["type"])
                        }
                        className="h-10 w-full px-3 text-xs rounded-lg border border-[#D8E0EA] bg-white text-[#334155] focus:outline-none focus:border-[#1769E8] focus:ring-1 focus:ring-[#1769E8]/20 cursor-pointer"
                      >
                        <option value="National">National</option>
                        <option value="Gazetted">Gazetted</option>
                        <option value="Institutional">Institutional</option>
                      </select>
                    </div>

                    <div>
                      <label className="block text-xs font-bold text-[#334155] mb-1">
                        Academic Session <span className="text-[#DC2626]">*</span>
                      </label>
                      <select
                        value={formSession}
                        onChange={(e) => setFormSession(e.target.value)}
                        className="h-10 w-full px-3 text-xs rounded-lg border border-[#D8E0EA] bg-white text-[#334155] focus:outline-none focus:border-[#1769E8] focus:ring-1 focus:ring-[#1769E8]/20 cursor-pointer font-mono"
                      >
                        <option value="2026-2027">2026-2027</option>
                        <option value="2025-2026">2025-2026</option>
                        <option value="2027-2028">2027-2028</option>
                      </select>
                    </div>
                  </div>

                  {/* Description */}
                  <div>
                    <label className="block text-xs font-bold text-[#334155] mb-1">
                      Description / Notes
                    </label>
                    <textarea
                      rows={2}
                      value={formDescription}
                      onChange={(e) => setFormDescription(e.target.value)}
                      placeholder="Enter holiday observance details or notes..."
                      maxLength={500}
                      className="w-full p-3 text-xs rounded-lg border border-[#D8E0EA] bg-white text-[#334155] placeholder:text-[#94A3B8] focus:outline-none focus:border-[#1769E8] focus:ring-1 focus:ring-[#1769E8]/20 resize-none"
                    />
                    <div className="text-[10px] text-[#64748B] text-right mt-0.5">
                      {formDescription.length}/500
                    </div>
                  </div>

                  {/* Status Radio Buttons */}
                  <div>
                    <label className="block text-xs font-bold text-[#334155] mb-2">
                      Status
                    </label>
                    <div className="flex items-center gap-5 text-xs">
                      <label className="flex items-center gap-1.5 cursor-pointer text-[#334155]">
                        <input
                          type="radio"
                          name="holidayStatus"
                          checked={formStatus === "Active"}
                          onChange={() => setFormStatus("Active")}
                          className="text-[#1769E8] focus:ring-[#1769E8]"
                        />
                        <span className="font-medium">Active Non-Instructional Day</span>
                      </label>

                      <label className="flex items-center gap-1.5 cursor-pointer text-[#334155]">
                        <input
                          type="radio"
                          name="holidayStatus"
                          checked={formStatus === "Inactive"}
                          onChange={() => setFormStatus("Inactive")}
                          className="text-[#1769E8] focus:ring-[#1769E8]"
                        />
                        <span className="font-medium">Inactive</span>
                      </label>
                    </div>
                  </div>
                </form>
              )}
            </div>

            {/* Modal Footer */}
            <div className="px-6 py-3.5 border-t border-[#E5EAF0] flex items-center justify-end gap-2.5 bg-slate-50/50">
              <button
                type="button"
                onClick={() => setIsModalOpen(false)}
                className="px-4 py-2 text-xs font-semibold text-[#64748B] bg-white hover:bg-slate-100 border border-[#E5EAF0] rounded-lg transition-colors cursor-pointer"
              >
                {modalMode === "view" ? "Close" : "Cancel"}
              </button>

              {modalMode !== "view" && (
                <button
                  type="submit"
                  form="holiday-form"
                  className="px-5 py-2 text-xs font-bold text-white bg-[#1769E8] hover:bg-[#1257C7] rounded-lg transition-colors flex items-center gap-1.5 shadow-xs cursor-pointer"
                >
                  <Save className="w-3.5 h-3.5" />
                  <span>{modalMode === "create" ? "Add Holiday" : "Save Changes"}</span>
                </button>
              )}
            </div>
          </div>
        </div>
      )}
    </div>
  );
}