"use client";

import React, { useState } from "react";
import Link from "next/link";
import {
  Calendar,
  Search,
  RotateCcw,
  Plus,
  ChevronRight,
  ChevronLeft,
  FileSpreadsheet,
  FileText,
  Clock,
  BookOpen,
  Users,
  Building,
  UserCheck,
  X,
  Sparkles,
  Layers,
  MapPin,
  CalendarDays,
  CheckCircle2,
} from "lucide-react";
import { toast } from "sonner";

interface ScheduleSession {
  id: string;
  day: "Monday" | "Tuesday" | "Wednesday" | "Thursday" | "Friday" | "Saturday";
  timeSlot: string;
  subject: string;
  subjectCode: string;
  faculty: string;
  room: string;
  type: "Theory" | "Practical" | "Lab" | "Workshop";
  program: string;
  section: string;
}

const initialSchedule: ScheduleSession[] = [
  {
    id: "sch-1",
    day: "Monday",
    timeSlot: "08:00 AM - 09:00 AM",
    subject: "Kitchen Management",
    subjectCode: "BHM-201",
    faculty: "Chef Rajesh Sharma",
    room: "Room 101",
    type: "Theory",
    program: "B.Sc. Hospitality",
    section: "Section A",
  },
  {
    id: "sch-2",
    day: "Tuesday",
    timeSlot: "08:00 AM - 09:00 AM",
    subject: "Food Production Operations",
    subjectCode: "BHM-202",
    faculty: "Chef Amit Roy",
    room: "Basic Training Kitchen",
    type: "Practical",
    program: "B.Sc. Hospitality",
    section: "Section A",
  },
  {
    id: "sch-3",
    day: "Wednesday",
    timeSlot: "08:00 AM - 09:00 AM",
    subject: "Culinary Arts & Garde Manger",
    subjectCode: "BHM-301",
    faculty: "Chef Vikram Singh",
    room: "Room 102",
    type: "Workshop",
    program: "B.Sc. Hospitality",
    section: "Section B",
  },
  {
    id: "sch-4",
    day: "Thursday",
    timeSlot: "08:00 AM - 09:00 AM",
    subject: "Food Safety & Quality Hygiene",
    subjectCode: "BHM-103",
    faculty: "Prof. Ananya Sen",
    room: "Room 203",
    type: "Theory",
    program: "B.Sc. Hospitality",
    section: "Section A",
  },
  {
    id: "sch-5",
    day: "Friday",
    timeSlot: "08:00 AM - 09:00 AM",
    subject: "Advanced Culinary Techniques",
    subjectCode: "BHM-401",
    faculty: "Chef Rajesh Sharma",
    room: "Room 101",
    type: "Theory",
    program: "M.Sc. Hospitality",
    section: "Section A",
  },
  {
    id: "sch-6",
    day: "Monday",
    timeSlot: "10:00 AM - 11:00 AM",
    subject: "Nutrition & Food Science",
    subjectCode: "BHM-204",
    faculty: "Prof. Priya Nair",
    room: "Room 202",
    type: "Theory",
    program: "B.Sc. Hospitality",
    section: "Section B",
  },
  {
    id: "sch-7",
    day: "Wednesday",
    timeSlot: "10:00 AM - 11:00 AM",
    subject: "Front Office Operations",
    subjectCode: "BHM-105",
    faculty: "Prof. Priya Nair",
    room: "Room 104",
    type: "Theory",
    program: "B.Sc. Hospitality",
    section: "Section A",
  },
  {
    id: "sch-8",
    day: "Friday",
    timeSlot: "10:00 AM - 11:00 AM",
    subject: "Food & Beverage Service",
    subjectCode: "BHM-205",
    faculty: "Prof. Ananya Sen",
    room: "Training Restaurant",
    type: "Practical",
    program: "B.Sc. Hospitality",
    section: "Section A",
  },
  {
    id: "sch-9",
    day: "Tuesday",
    timeSlot: "12:00 PM - 01:00 PM",
    subject: "Front Office Automation",
    subjectCode: "BHM-304",
    faculty: "Prof. Priya Nair",
    room: "Computer Lab 1",
    type: "Lab",
    program: "B.Sc. Hospitality",
    section: "Section B",
  },
  {
    id: "sch-10",
    day: "Thursday",
    timeSlot: "12:00 PM - 01:00 PM",
    subject: "Bakery & Confectionery Practical",
    subjectCode: "BHM-206",
    faculty: "Chef Vikram Singh",
    room: "Bakery Lab",
    type: "Practical",
    program: "B.Sc. Hospitality",
    section: "Section A",
  },
  {
    id: "sch-11",
    day: "Monday",
    timeSlot: "02:00 PM - 03:00 PM",
    subject: "Accommodation Management",
    subjectCode: "BHM-307",
    faculty: "Ms. Moumita Bose",
    room: "Housekeeping Mock Suite",
    type: "Practical",
    program: "B.Sc. Hospitality",
    section: "Section A",
  },
  {
    id: "sch-12",
    day: "Wednesday",
    timeSlot: "02:00 PM - 03:00 PM",
    subject: "Bakery & Patisserie",
    subjectCode: "BHM-308",
    faculty: "Chef Vikram Singh",
    room: "Room 302",
    type: "Workshop",
    program: "B.Sc. Hospitality",
    section: "Section B",
  },
  {
    id: "sch-13",
    day: "Friday",
    timeSlot: "02:00 PM - 03:00 PM",
    subject: "Hospitality Research Methodology",
    subjectCode: "BHM-405",
    faculty: "Prof. Ananya Sen",
    room: "Room 301",
    type: "Theory",
    program: "M.Sc. Hospitality",
    section: "Section A",
  },
];

const timeSlots = [
  "08:00 AM - 09:00 AM",
  "10:00 AM - 11:00 AM",
  "12:00 PM - 01:00 PM",
  "02:00 PM - 03:00 PM",
  "04:00 PM - 05:00 PM",
];

const daysOfWeek: ("Monday" | "Tuesday" | "Wednesday" | "Thursday" | "Friday" | "Saturday")[] = [
  "Monday",
  "Tuesday",
  "Wednesday",
  "Thursday",
  "Friday",
  "Saturday",
];

export default function FacultySchedulePage() {
  const [scheduleList, setScheduleList] = useState<ScheduleSession[]>(initialSchedule);
  const [academicYear, setAcademicYear] = useState("2026 - 2027");
  const [department, setDepartment] = useState("All Departments");
  const [selectedFaculty, setSelectedFaculty] = useState("All Faculty");
  const [program, setProgram] = useState("All Programs");
  const [semester, setSemester] = useState("All Semesters");
  const [section, setSection] = useState("All Sections");
  const [search, setSearch] = useState("");
  const [activeView, setActiveView] = useState<"weekly" | "list">("weekly");

  // Modal State
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [viewingSession, setViewingSession] = useState<ScheduleSession | null>(null);

  const [sessionFormData, setSessionFormData] = useState<Omit<ScheduleSession, "id">>({
    day: "Monday",
    timeSlot: "08:00 AM - 09:00 AM",
    subject: "",
    subjectCode: "BHM-101",
    faculty: "Chef Rajesh Sharma",
    room: "Room 101",
    type: "Theory",
    program: "B.Sc. Hospitality",
    section: "Section A",
  });

  const filteredSessions = scheduleList.filter((s) => {
    const matchesFaculty =
      selectedFaculty === "All Faculty" || s.faculty === selectedFaculty;
    const matchesProgram =
      program === "All Programs" || s.program === program;
    const matchesSection =
      section === "All Sections" || s.section === section;
    const matchesSearch =
      search === "" ||
      s.subject.toLowerCase().includes(search.toLowerCase()) ||
      s.subjectCode.toLowerCase().includes(search.toLowerCase()) ||
      s.faculty.toLowerCase().includes(search.toLowerCase()) ||
      s.room.toLowerCase().includes(search.toLowerCase());
    return matchesFaculty && matchesProgram && matchesSection && matchesSearch;
  });

  const handleResetFilters = () => {
    setAcademicYear("2026 - 2027");
    setDepartment("All Departments");
    setSelectedFaculty("All Faculty");
    setProgram("All Programs");
    setSemester("All Semesters");
    setSection("All Sections");
    setSearch("");
    toast.info("Schedule filters reset to default");
  };

  const handleOpenAddModal = (day?: "Monday" | "Tuesday" | "Wednesday" | "Thursday" | "Friday" | "Saturday", timeSlot?: string) => {
    setSessionFormData({
      day: day || "Monday",
      timeSlot: timeSlot || "08:00 AM - 09:00 AM",
      subject: "",
      subjectCode: "BHM-101",
      faculty: "Chef Rajesh Sharma",
      room: "Room 101",
      type: "Theory",
      program: "B.Sc. Hospitality",
      section: "Section A",
    });
    setIsModalOpen(true);
  };

  const handleSaveSession = (e: React.FormEvent) => {
    e.preventDefault();
    if (!sessionFormData.subject.trim()) {
      toast.error("Please enter a subject name");
      return;
    }

    const newSession: ScheduleSession = {
      id: `sch-${Date.now()}`,
      ...sessionFormData,
    };

    setScheduleList((prev) => [newSession, ...prev]);
    setIsModalOpen(false);
    toast.success("Schedule slot successfully allocated");
  };

  const handleDeleteSession = (id: string) => {
    setScheduleList((prev) => prev.filter((s) => s.id !== id));
    if (viewingSession?.id === id) {
      setViewingSession(null);
    }
    toast.success("Schedule session removed");
  };

  const getTypeStyle = (type: string) => {
    switch (type) {
      case "Theory":
        return "bg-blue-50/90 border-blue-200 text-blue-900 hover:border-blue-400";
      case "Practical":
        return "bg-emerald-50/90 border-emerald-200 text-emerald-900 hover:border-emerald-400";
      case "Lab":
        return "bg-purple-50/90 border-purple-200 text-purple-900 hover:border-purple-400";
      case "Workshop":
        return "bg-amber-50/90 border-amber-200 text-amber-900 hover:border-amber-400";
      default:
        return "bg-slate-50 border-slate-200 text-slate-800";
    }
  };

  const getTypeBadge = (type: string) => {
    switch (type) {
      case "Theory":
        return "bg-blue-100 text-blue-800 border-blue-200";
      case "Practical":
        return "bg-emerald-100 text-emerald-800 border-emerald-200";
      case "Lab":
        return "bg-purple-100 text-purple-800 border-purple-200";
      case "Workshop":
        return "bg-amber-100 text-amber-800 border-amber-200";
      default:
        return "bg-slate-100 text-slate-800 border-slate-200";
    }
  };

  return (
    <div className="space-y-6 pb-12 font-sans bg-[#F8FAFC] min-h-screen">
      {/* 1. Header Bar */}
      <div>
        <div className="flex items-center gap-2 text-xs text-[#64748B] mb-2 font-medium">
          <Link href="/admin/dashboard" className="hover:text-[#1769E8] transition-colors">
            Home
          </Link>
          <span>&gt;</span>
          <Link href="/admin/people/faculty" className="hover:text-[#1769E8] transition-colors">
            Faculty Management
          </Link>
          <span>&gt;</span>
          <span className="text-[#071A4D] font-semibold">Faculty Schedule</span>
        </div>

        <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
          <div>
            <h1 className="text-3xl font-bold font-heading text-[#071A4D] tracking-tight">
              Faculty Schedule
            </h1>
            <p className="text-[15px] text-[#64748B] mt-1 font-normal">
              Manage master weekly faculty timetables, classroom allocations, lab shifts, and teaching hours.
            </p>
          </div>

          <div className="flex items-center gap-3">
            <button
              onClick={() => toast.success("Exporting timetable to Excel...")}
              className="px-4 py-2 bg-white border border-[#E2E8F0] rounded-lg text-sm font-medium text-[#334155] hover:bg-slate-50 transition-colors flex items-center gap-2 shadow-xs cursor-pointer"
            >
              <FileSpreadsheet className="w-4 h-4 text-emerald-600" />
              <span>Export</span>
            </button>
            <button
              onClick={() => toast.info("Generating academic timetable PDF...")}
              className="px-4 py-2 bg-white border border-[#E2E8F0] rounded-lg text-sm font-medium text-[#334155] hover:bg-slate-50 transition-colors flex items-center gap-2 shadow-xs cursor-pointer"
            >
              <FileText className="w-4 h-4 text-purple-600" />
              <span>Timetable Report</span>
            </button>
            <button
              onClick={() => handleOpenAddModal()}
              className="px-5 py-2.5 bg-[#1769E8] hover:bg-[#1255be] text-white rounded-lg text-sm font-semibold transition-colors flex items-center gap-2 shadow-sm cursor-pointer"
            >
              <Plus className="w-4 h-4" />
              <span>+ Add Schedule</span>
            </button>
          </div>
        </div>
      </div>

      {/* 2. Filter Bar */}
      <div className="bg-white rounded-xl border border-[#E5EAF0] shadow-xs p-4">
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-12 gap-3.5 items-end">
          <div className="lg:col-span-2">
            <label className="block text-[11px] font-semibold text-[#64748B] uppercase tracking-wider mb-1.5">
              Academic Year
            </label>
            <select
              value={academicYear}
              onChange={(e) => setAcademicYear(e.target.value)}
              className="w-full bg-white border border-[#E2E8F0] text-sm text-[#0F172A] rounded-lg px-3 py-2 font-medium focus:ring-2 focus:ring-[#1769E8]/20 focus:border-[#1769E8] outline-none transition-all cursor-pointer"
            >
              <option>2026 - 2027</option>
              <option>2025 - 2026</option>
            </select>
          </div>

          <div className="lg:col-span-2">
            <label className="block text-[11px] font-semibold text-[#64748B] uppercase tracking-wider mb-1.5">
              Faculty Member
            </label>
            <select
              value={selectedFaculty}
              onChange={(e) => setSelectedFaculty(e.target.value)}
              className="w-full bg-white border border-[#E2E8F0] text-sm text-[#0F172A] rounded-lg px-3 py-2 font-medium focus:ring-2 focus:ring-[#1769E8]/20 focus:border-[#1769E8] outline-none transition-all cursor-pointer"
            >
              <option>All Faculty</option>
              <option>Chef Rajesh Sharma</option>
              <option>Chef Amit Roy</option>
              <option>Prof. Ananya Sen</option>
              <option>Chef Vikram Singh</option>
              <option>Prof. Priya Nair</option>
              <option>Ms. Moumita Bose</option>
            </select>
          </div>

          <div className="lg:col-span-2">
            <label className="block text-[11px] font-semibold text-[#64748B] uppercase tracking-wider mb-1.5">
              Program
            </label>
            <select
              value={program}
              onChange={(e) => setProgram(e.target.value)}
              className="w-full bg-white border border-[#E2E8F0] text-sm text-[#0F172A] rounded-lg px-3 py-2 font-medium focus:ring-2 focus:ring-[#1769E8]/20 focus:border-[#1769E8] outline-none transition-all cursor-pointer"
            >
              <option>All Programs</option>
              <option>B.Sc. Hospitality</option>
              <option>M.Sc. Hospitality</option>
            </select>
          </div>

          <div className="lg:col-span-2">
            <label className="block text-[11px] font-semibold text-[#64748B] uppercase tracking-wider mb-1.5">
              Section
            </label>
            <select
              value={section}
              onChange={(e) => setSection(e.target.value)}
              className="w-full bg-white border border-[#E2E8F0] text-sm text-[#0F172A] rounded-lg px-3 py-2 font-medium focus:ring-2 focus:ring-[#1769E8]/20 focus:border-[#1769E8] outline-none transition-all cursor-pointer"
            >
              <option>All Sections</option>
              <option>Section A</option>
              <option>Section B</option>
              <option>Section C</option>
            </select>
          </div>

          <div className="lg:col-span-3">
            <label className="block text-[11px] font-semibold text-[#64748B] uppercase tracking-wider mb-1.5">
              Search
            </label>
            <div className="relative">
              <Search className="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-[#94A3B8]" />
              <input
                type="text"
                value={search}
                onChange={(e) => setSearch(e.target.value)}
                placeholder="Search subject, faculty, room..."
                className="w-full pl-9 pr-3 py-2 bg-white border border-[#E2E8F0] text-sm text-[#0F172A] placeholder:text-[#94A3B8] rounded-lg focus:ring-2 focus:ring-[#1769E8]/20 focus:border-[#1769E8] outline-none transition-all"
              />
            </div>
          </div>

          <div className="lg:col-span-1 flex items-center gap-2">
            <button
              onClick={handleResetFilters}
              className="w-full border border-[#E2E8F0] hover:bg-slate-50 text-[#64748B] p-2 rounded-lg text-sm font-medium transition-colors flex items-center justify-center cursor-pointer"
              title="Reset Filters"
            >
              <RotateCcw className="w-4 h-4" />
            </button>
          </div>
        </div>
      </div>

      {/* 3. Timetable Card & Legend (100% Full Width) */}
      <div className="bg-white rounded-xl border border-[#E5EAF0] shadow-xs overflow-hidden">
        {/* Top Controls Bar */}
        <div className="p-4 border-b border-[#E5EAF0] flex flex-wrap items-center justify-between gap-4">
          <div className="flex items-center gap-3">
            <div className="flex items-center gap-2 font-heading font-bold text-lg text-[#071A4D]">
              <Calendar className="w-5 h-5 text-[#1769E8]" />
              <span>Weekly Faculty Timetable</span>
            </div>

            <div className="flex items-center gap-1 border border-[#E2E8F0] rounded-lg px-2.5 py-1 text-xs text-[#334155] bg-[#F8FAFC]">
              <button className="p-0.5 hover:text-[#1769E8] cursor-pointer">
                <ChevronLeft className="w-3.5 h-3.5" />
              </button>
              <span className="font-semibold px-2">Mon - Sat Schedule Cycle</span>
              <button className="p-0.5 hover:text-[#1769E8] cursor-pointer">
                <ChevronRight className="w-3.5 h-3.5" />
              </button>
            </div>
          </div>

          <div className="flex items-center gap-3">
            {/* Legend Pills */}
            <div className="hidden sm:flex items-center gap-2 text-xs">
              <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-md bg-blue-50 border border-blue-200 text-blue-700 font-medium">
                <span className="w-1.5 h-1.5 rounded-full bg-blue-500"></span> Theory
              </span>
              <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-md bg-emerald-50 border border-emerald-200 text-emerald-700 font-medium">
                <span className="w-1.5 h-1.5 rounded-full bg-emerald-500"></span> Practical
              </span>
              <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-md bg-purple-50 border border-purple-200 text-purple-700 font-medium">
                <span className="w-1.5 h-1.5 rounded-full bg-purple-500"></span> Lab
              </span>
              <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-md bg-amber-50 border border-amber-200 text-amber-700 font-medium">
                <span className="w-1.5 h-1.5 rounded-full bg-amber-500"></span> Workshop
              </span>
            </div>

            {/* View Switcher */}
            <div className="flex items-center gap-1 bg-[#F1F5F9] p-1 rounded-lg border border-[#E2E8F0] text-xs">
              <button
                onClick={() => setActiveView("weekly")}
                className={`px-3 py-1 rounded-md font-semibold transition-all cursor-pointer ${
                  activeView === "weekly"
                    ? "bg-white text-[#071A4D] shadow-xs"
                    : "text-[#64748B] hover:text-[#071A4D]"
                }`}
              >
                Grid View
              </button>
              <button
                onClick={() => setActiveView("list")}
                className={`px-3 py-1 rounded-md font-semibold transition-all cursor-pointer ${
                  activeView === "list"
                    ? "bg-white text-[#071A4D] shadow-xs"
                    : "text-[#64748B] hover:text-[#071A4D]"
                }`}
              >
                Roster View
              </button>
            </div>
          </div>
        </div>

        {/* View 1: Weekly Timetable Grid */}
        {activeView === "weekly" ? (
          <div className="overflow-x-auto">
            <table className="w-full text-left text-xs border-collapse min-w-[900px]">
              <thead>
                <tr className="bg-[#F8FAFC] border-b border-[#E5EAF0] text-[#64748B] font-semibold">
                  <th className="py-3 px-3.5 w-28 text-center border-r border-[#E5EAF0] font-bold text-[#071A4D]">
                    Time Slot
                  </th>
                  {daysOfWeek.map((day) => (
                    <th
                      key={day}
                      className="py-3 px-3 text-center border-r last:border-r-0 border-[#E5EAF0] font-bold text-[#071A4D] w-1/6"
                    >
                      {day}
                    </th>
                  ))}
                </tr>
              </thead>
              <tbody className="divide-y divide-[#E5EAF0]">
                {timeSlots.map((slot) => (
                  <tr key={slot} className="hover:bg-slate-50/50 transition-colors">
                    <td className="py-4 px-2 text-center font-mono text-[11px] text-[#475569] font-bold bg-[#F8FAFC]/60 border-r border-[#E5EAF0]">
                      {slot}
                    </td>
                    {daysOfWeek.map((day) => {
                      const session = filteredSessions.find(
                        (s) => s.day === day && s.timeSlot === slot
                      );

                      return (
                        <td
                          key={day}
                          className="p-2 border-r last:border-r-0 border-[#E5EAF0] align-top min-h-[90px]"
                        >
                          {session ? (
                            <div
                              onClick={() => setViewingSession(session)}
                              className={`p-2.5 rounded-lg border text-xs cursor-pointer transition-all shadow-2xs hover:shadow-xs ${getTypeStyle(
                                session.type
                              )}`}
                            >
                              <div className="flex items-center justify-between gap-1 mb-1">
                                <span className="font-mono text-[10px] font-bold px-1.5 py-0.2 rounded bg-white/80 border border-current/20">
                                  {session.subjectCode}
                                </span>
                                <span className="text-[10px] font-semibold opacity-80">
                                  {session.room}
                                </span>
                              </div>
                              <div className="font-bold text-[#071A4D] text-xs line-clamp-2 leading-tight">
                                {session.subject}
                              </div>
                              <div className="text-[11px] text-slate-600 mt-1 font-medium truncate">
                                {session.faculty}
                              </div>
                              <div className="flex items-center justify-between mt-1 pt-1 border-t border-black/5 text-[10px] text-slate-500">
                                <span>{session.section}</span>
                                <span className="font-semibold uppercase tracking-wider text-[9px]">
                                  {session.type}
                                </span>
                              </div>
                            </div>
                          ) : (
                            <button
                              onClick={() => handleOpenAddModal(day, slot)}
                              className="w-full h-full min-h-[75px] rounded-lg border border-dashed border-slate-200 hover:border-[#1769E8] hover:bg-blue-50/20 text-slate-300 hover:text-[#1769E8] flex flex-col items-center justify-center gap-1 transition-all cursor-pointer group"
                            >
                              <Plus className="w-3.5 h-3.5 transition-transform group-hover:scale-125" />
                              <span className="text-[10px] font-medium hidden group-hover:inline">
                                Add Slot
                              </span>
                            </button>
                          )}
                        </td>
                      );
                    })}
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        ) : (
          /* View 2: Serial Roster List View */
          <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] font-semibold">
                  <th className="py-3 px-3.5 w-10 text-center">#</th>
                  <th className="py-3 px-3.5 font-bold text-[#071A4D]">Day &amp; Time</th>
                  <th className="py-3 px-3.5 font-bold text-[#071A4D]">Subject &amp; Code</th>
                  <th className="py-3 px-3.5 font-bold text-[#071A4D]">Faculty In-Charge</th>
                  <th className="py-3 px-3.5 font-bold text-[#071A4D]">Room / Lab</th>
                  <th className="py-3 px-3.5 font-bold text-[#071A4D]">Class / Section</th>
                  <th className="py-3 px-3.5 font-bold text-[#071A4D] text-center">Type</th>
                  <th className="py-3 px-4 font-bold text-[#071A4D] text-right">Actions</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-[#E5EAF0]">
                {filteredSessions.length === 0 ? (
                  <tr>
                    <td colSpan={8} className="py-12 text-center text-slate-400">
                      No schedule sessions match the selected filters.
                    </td>
                  </tr>
                ) : (
                  filteredSessions.map((s, idx) => (
                    <tr key={s.id} className="hover:bg-[#F8FAFC] transition-colors">
                      <td className="py-3 px-3.5 text-center text-[#94A3B8] font-medium">
                        {idx + 1}
                      </td>
                      <td className="py-3 px-3.5">
                        <div className="font-bold text-[#071A4D]">{s.day}</div>
                        <div className="font-mono text-[11px] text-[#64748B]">{s.timeSlot}</div>
                      </td>
                      <td className="py-3 px-3.5">
                        <div className="font-bold text-[#071A4D]">{s.subject}</div>
                        <div className="font-mono text-[10px] text-[#1769E8] font-semibold">
                          {s.subjectCode}
                        </div>
                      </td>
                      <td className="py-3 px-3.5 font-medium text-[#334155]">{s.faculty}</td>
                      <td className="py-3 px-3.5">
                        <span className="inline-flex items-center gap-1 font-semibold text-[#475569]">
                          <MapPin className="w-3 h-3 text-[#94A3B8]" />
                          {s.room}
                        </span>
                      </td>
                      <td className="py-3 px-3.5 text-[#64748B]">
                        <div>{s.program}</div>
                        <div className="text-[10px] text-[#94A3B8]">{s.section}</div>
                      </td>
                      <td className="py-3 px-3.5 text-center">
                        <span
                          className={`inline-block px-2.5 py-0.5 rounded-full text-[10px] font-bold border ${getTypeBadge(
                            s.type
                          )}`}
                        >
                          {s.type}
                        </span>
                      </td>
                      <td className="py-3 px-4 text-right">
                        <button
                          onClick={() => setViewingSession(s)}
                          className="px-2.5 py-1 text-[#1769E8] hover:bg-[#EFF6FF] rounded-md font-semibold text-xs transition-colors cursor-pointer"
                        >
                          View Details
                        </button>
                      </td>
                    </tr>
                  ))
                )}
              </tbody>
            </table>
          </div>
        )}
      </div>

      {/* 4. MODAL: + Add Schedule Session */}
      {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="bg-white rounded-2xl border border-[#E5EAF0] shadow-xl max-w-lg w-full overflow-hidden">
            <div className="p-4 border-b border-[#E5EAF0] flex items-center justify-between bg-[#F8FAFC]">
              <div className="flex items-center gap-2">
                <Calendar className="w-5 h-5 text-[#1769E8]" />
                <h3 className="font-heading font-bold text-base text-[#071A4D]">
                  Schedule Faculty Session
                </h3>
              </div>
              <button
                onClick={() => setIsModalOpen(false)}
                className="p-1 text-[#64748B] hover:text-[#071A4D] rounded-md transition-colors cursor-pointer"
              >
                <X className="w-5 h-5" />
              </button>
            </div>

            <form onSubmit={handleSaveSession} className="p-5 space-y-4 text-xs">
              <div className="grid grid-cols-2 gap-3">
                <div>
                  <label className="block font-semibold text-[#334155] mb-1">
                    Day of the Week <span className="text-rose-500">*</span>
                  </label>
                  <select
                    value={sessionFormData.day}
                    onChange={(e) =>
                      setSessionFormData({
                        ...sessionFormData,
                        day: e.target.value as any,
                      })
                    }
                    className="w-full px-3 py-2 border border-[#E2E8F0] rounded-lg text-sm text-[#0F172A] focus:ring-2 focus:ring-[#1769E8]/20 focus:border-[#1769E8] outline-none transition-all bg-white cursor-pointer"
                  >
                    {daysOfWeek.map((day) => (
                      <option key={day} value={day}>
                        {day}
                      </option>
                    ))}
                  </select>
                </div>

                <div>
                  <label className="block font-semibold text-[#334155] mb-1">
                    Time Slot <span className="text-rose-500">*</span>
                  </label>
                  <select
                    value={sessionFormData.timeSlot}
                    onChange={(e) =>
                      setSessionFormData({
                        ...sessionFormData,
                        timeSlot: e.target.value,
                      })
                    }
                    className="w-full px-3 py-2 border border-[#E2E8F0] rounded-lg text-sm text-[#0F172A] focus:ring-2 focus:ring-[#1769E8]/20 focus:border-[#1769E8] outline-none transition-all bg-white cursor-pointer font-mono text-xs"
                  >
                    {timeSlots.map((ts) => (
                      <option key={ts} value={ts}>
                        {ts}
                      </option>
                    ))}
                  </select>
                </div>
              </div>

              <div>
                <label className="block font-semibold text-[#334155] mb-1">
                  Subject Name <span className="text-rose-500">*</span>
                </label>
                <input
                  type="text"
                  required
                  placeholder="e.g. Continental Food Preparation"
                  value={sessionFormData.subject}
                  onChange={(e) =>
                    setSessionFormData({ ...sessionFormData, subject: e.target.value })
                  }
                  className="w-full px-3 py-2 border border-[#E2E8F0] rounded-lg text-sm text-[#0F172A] placeholder:text-[#94A3B8] focus:ring-2 focus:ring-[#1769E8]/20 focus:border-[#1769E8] outline-none transition-all"
                />
              </div>

              <div className="grid grid-cols-2 gap-3">
                <div>
                  <label className="block font-semibold text-[#334155] mb-1">
                    Subject Code
                  </label>
                  <input
                    type="text"
                    value={sessionFormData.subjectCode}
                    onChange={(e) =>
                      setSessionFormData({ ...sessionFormData, subjectCode: e.target.value })
                    }
                    className="w-full px-3 py-2 border border-[#E2E8F0] rounded-lg text-sm text-[#0F172A] uppercase font-mono focus:ring-2 focus:ring-[#1769E8]/20 focus:border-[#1769E8] outline-none transition-all"
                  />
                </div>

                <div>
                  <label className="block font-semibold text-[#334155] mb-1">
                    Faculty In-Charge
                  </label>
                  <select
                    value={sessionFormData.faculty}
                    onChange={(e) =>
                      setSessionFormData({ ...sessionFormData, faculty: e.target.value })
                    }
                    className="w-full px-3 py-2 border border-[#E2E8F0] rounded-lg text-sm text-[#0F172A] focus:ring-2 focus:ring-[#1769E8]/20 focus:border-[#1769E8] outline-none transition-all bg-white cursor-pointer"
                  >
                    <option>Chef Rajesh Sharma</option>
                    <option>Chef Amit Roy</option>
                    <option>Prof. Ananya Sen</option>
                    <option>Chef Vikram Singh</option>
                    <option>Prof. Priya Nair</option>
                    <option>Ms. Moumita Bose</option>
                  </select>
                </div>
              </div>

              <div className="grid grid-cols-2 gap-3">
                <div>
                  <label className="block font-semibold text-[#334155] mb-1">
                    Room / Lab Location
                  </label>
                  <input
                    type="text"
                    value={sessionFormData.room}
                    onChange={(e) =>
                      setSessionFormData({ ...sessionFormData, room: e.target.value })
                    }
                    placeholder="e.g. Basic Training Kitchen"
                    className="w-full px-3 py-2 border border-[#E2E8F0] rounded-lg text-sm text-[#0F172A] placeholder:text-[#94A3B8] focus:ring-2 focus:ring-[#1769E8]/20 focus:border-[#1769E8] outline-none transition-all"
                  />
                </div>

                <div>
                  <label className="block font-semibold text-[#334155] mb-1">
                    Session Format
                  </label>
                  <select
                    value={sessionFormData.type}
                    onChange={(e) =>
                      setSessionFormData({
                        ...sessionFormData,
                        type: e.target.value as any,
                      })
                    }
                    className="w-full px-3 py-2 border border-[#E2E8F0] rounded-lg text-sm text-[#0F172A] focus:ring-2 focus:ring-[#1769E8]/20 focus:border-[#1769E8] outline-none transition-all bg-white cursor-pointer"
                  >
                    <option value="Theory">Theory Lecture</option>
                    <option value="Practical">Kitchen / Lab Practical</option>
                    <option value="Lab">Computer / Tech Lab</option>
                    <option value="Workshop">Hands-on Workshop</option>
                  </select>
                </div>
              </div>

              <div className="grid grid-cols-2 gap-3">
                <div>
                  <label className="block font-semibold text-[#334155] mb-1">
                    Target Program
                  </label>
                  <select
                    value={sessionFormData.program}
                    onChange={(e) =>
                      setSessionFormData({ ...sessionFormData, program: e.target.value })
                    }
                    className="w-full px-3 py-2 border border-[#E2E8F0] rounded-lg text-sm text-[#0F172A] focus:ring-2 focus:ring-[#1769E8]/20 focus:border-[#1769E8] outline-none transition-all bg-white cursor-pointer"
                  >
                    <option>B.Sc. Hospitality</option>
                    <option>M.Sc. Hospitality</option>
                  </select>
                </div>

                <div>
                  <label className="block font-semibold text-[#334155] mb-1">
                    Section
                  </label>
                  <select
                    value={sessionFormData.section}
                    onChange={(e) =>
                      setSessionFormData({ ...sessionFormData, section: e.target.value })
                    }
                    className="w-full px-3 py-2 border border-[#E2E8F0] rounded-lg text-sm text-[#0F172A] focus:ring-2 focus:ring-[#1769E8]/20 focus:border-[#1769E8] outline-none transition-all bg-white cursor-pointer"
                  >
                    <option>Section A</option>
                    <option>Section B</option>
                    <option>Section C</option>
                  </select>
                </div>
              </div>

              <div className="flex items-center gap-2 pt-3 border-t border-[#E5EAF0]">
                <button
                  type="button"
                  onClick={() => setIsModalOpen(false)}
                  className="flex-1 py-2 px-3 border border-[#E2E8F0] text-[#64748B] hover:bg-slate-50 rounded-lg text-xs font-semibold transition-colors cursor-pointer"
                >
                  Cancel
                </button>
                <button
                  type="submit"
                  className="flex-1 py-2 px-3 bg-[#1769E8] hover:bg-[#1255be] text-white rounded-lg text-xs font-semibold transition-colors flex items-center justify-center gap-1.5 shadow-xs cursor-pointer"
                >
                  <CheckCircle2 className="w-3.5 h-3.5" />
                  <span>Assign Schedule</span>
                </button>
              </div>
            </form>
          </div>
        </div>
      )}

      {/* 5. MODAL: Session Details View */}
      {viewingSession && (
        <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="bg-white rounded-2xl border border-[#E5EAF0] shadow-xl max-w-md w-full overflow-hidden">
            <div className="p-4 border-b border-[#E5EAF0] flex items-center justify-between bg-[#F8FAFC]">
              <div className="flex items-center gap-2">
                <CalendarDays className="w-5 h-5 text-[#1769E8]" />
                <h3 className="font-heading font-bold text-base text-[#071A4D]">
                  Session Details
                </h3>
              </div>
              <button
                onClick={() => setViewingSession(null)}
                className="p-1 text-[#64748B] hover:text-[#071A4D] rounded-md transition-colors cursor-pointer"
              >
                <X className="w-5 h-5" />
              </button>
            </div>

            <div className="p-5 space-y-4 text-xs">
              <div className="flex items-center justify-between pb-3 border-b border-[#E5EAF0]">
                <div>
                  <span className="font-mono text-xs font-bold px-2 py-0.5 rounded bg-blue-50 text-[#1769E8] border border-blue-200">
                    {viewingSession.subjectCode}
                  </span>
                  <h4 className="font-heading font-bold text-base text-[#071A4D] mt-1.5">
                    {viewingSession.subject}
                  </h4>
                </div>
                <span
                  className={`px-2.5 py-1 rounded-full text-xs font-bold border ${getTypeBadge(
                    viewingSession.type
                  )}`}
                >
                  {viewingSession.type}
                </span>
              </div>

              <div className="grid grid-cols-2 gap-3 text-xs">
                <div className="bg-[#F8FAFC] p-2.5 rounded-lg border border-[#E5EAF0]">
                  <div className="text-[10px] font-semibold text-[#64748B] uppercase">Day & Time</div>
                  <div className="font-bold text-[#071A4D] mt-0.5">{viewingSession.day}</div>
                  <div className="font-mono text-[11px] text-[#475569]">{viewingSession.timeSlot}</div>
                </div>

                <div className="bg-[#F8FAFC] p-2.5 rounded-lg border border-[#E5EAF0]">
                  <div className="text-[10px] font-semibold text-[#64748B] uppercase">Room / Venue</div>
                  <div className="font-bold text-[#071A4D] mt-0.5">{viewingSession.room}</div>
                  <div className="text-[11px] text-slate-500">Academic Wing</div>
                </div>

                <div className="bg-[#F8FAFC] p-2.5 rounded-lg border border-[#E5EAF0]">
                  <div className="text-[10px] font-semibold text-[#64748B] uppercase">Faculty Member</div>
                  <div className="font-bold text-[#071A4D] mt-0.5">{viewingSession.faculty}</div>
                </div>

                <div className="bg-[#F8FAFC] p-2.5 rounded-lg border border-[#E5EAF0]">
                  <div className="text-[10px] font-semibold text-[#64748B] uppercase">Program & Section</div>
                  <div className="font-bold text-[#071A4D] mt-0.5">{viewingSession.program}</div>
                  <div className="text-[11px] text-slate-500">{viewingSession.section}</div>
                </div>
              </div>

              <div className="flex items-center gap-2 pt-3 border-t border-[#E5EAF0]">
                <button
                  type="button"
                  onClick={() => handleDeleteSession(viewingSession.id)}
                  className="py-2 px-3 bg-rose-50 hover:bg-rose-100 text-rose-700 rounded-lg text-xs font-semibold transition-colors cursor-pointer"
                >
                  Remove Slot
                </button>
                <button
                  type="button"
                  onClick={() => setViewingSession(null)}
                  className="flex-1 py-2 px-3 bg-[#1769E8] hover:bg-[#1255be] text-white rounded-lg text-xs font-semibold transition-colors text-center cursor-pointer"
                >
                  Close
                </button>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}