"use client";

import React, { useState } from "react";
import Link from "next/link";
import {
  Clock,
  Plus,
  Filter,
  CheckCircle2,
  ChevronRight,
  Calendar,
  UtensilsCrossed,
  DoorOpen,
  Printer,
  Download,
  X,
  Sparkles,
} from "lucide-react";
import { toast } from "sonner";

interface TimetableSlot {
  id: string;
  day: "Monday" | "Tuesday" | "Wednesday" | "Thursday" | "Friday" | "Saturday";
  timeSlot: string;
  period: string;
  subjectCode: string;
  subjectName: string;
  type: "THEORY" | "PRACTICAL";
  faculty: string;
  room: string;
  batch: string;
  semester: number;
}

export default function DeptAdminTimetablePage() {
  const [selectedSem, setSelectedSem] = useState<number>(1);
  const [selectedDay, setSelectedDay] = useState<string>("Monday");
  const [isModalOpen, setIsModalOpen] = useState(false);

  const [slots, setSlots] = useState<TimetableSlot[]>([
    {
      id: "slot_1",
      day: "Monday",
      timeSlot: "09:00 AM - 10:00 AM",
      period: "Period 1",
      subjectCode: "BHM111",
      subjectName: "Food Production Foundation",
      type: "THEORY",
      faculty: "Chef Anirban Roy",
      room: "Lecture Hall 204",
      batch: "Section A",
      semester: 1,
    },
    {
      id: "slot_2",
      day: "Monday",
      timeSlot: "10:00 AM - 01:00 PM",
      period: "Period 2-4 (3h Practical)",
      subjectCode: "BHM111P",
      subjectName: "Basic Culinary Lab - Knife Skills & Stocks",
      type: "PRACTICAL",
      faculty: "Chef Rajesh Sharma & Chef Amit Sen",
      room: "Basic Training Kitchen (BTK)",
      batch: "Batch K1",
      semester: 1,
    },
    {
      id: "slot_3",
      day: "Monday",
      timeSlot: "02:00 PM - 05:00 PM",
      period: "Period 5-7 (3h Practical)",
      subjectCode: "BHM114P",
      subjectName: "Bakery & Confectionery - Doughs & Sponges",
      type: "PRACTICAL",
      faculty: "Chef Meenakshi Iyer",
      room: "Bakery Studio Lab",
      batch: "Batch B1",
      semester: 1,
    },
    {
      id: "slot_4",
      day: "Tuesday",
      timeSlot: "09:00 AM - 10:00 AM",
      period: "Period 1",
      subjectCode: "BHM111",
      subjectName: "Food Production Foundation",
      type: "THEORY",
      faculty: "Chef Anirban Roy",
      room: "Lecture Hall 204",
      batch: "Section B",
      semester: 1,
    },
    {
      id: "slot_5",
      day: "Tuesday",
      timeSlot: "10:00 AM - 01:00 PM",
      period: "Period 2-4 (3h Practical)",
      subjectCode: "BHM111P",
      subjectName: "Basic Culinary Lab - Sauces & Soups",
      type: "PRACTICAL",
      faculty: "Chef Anirban Roy & Chef Amit Sen",
      room: "Basic Training Kitchen (BTK)",
      batch: "Batch K2",
      semester: 1,
    },
    {
      id: "slot_6",
      day: "Wednesday",
      timeSlot: "10:00 AM - 01:00 PM",
      period: "Period 2-4 (3h Practical)",
      subjectCode: "BHM211P",
      subjectName: "Quantity Food Kitchen (QFK) - Banqueting Prep",
      type: "PRACTICAL",
      faculty: "Chef Amit Sen",
      room: "Quantity Food Kitchen",
      batch: "Batch Q1",
      semester: 3,
    },
    {
      id: "slot_7",
      day: "Thursday",
      timeSlot: "10:00 AM - 01:00 PM",
      period: "Period 2-4 (3h Practical)",
      subjectCode: "BHM311P",
      subjectName: "International Culinary Arts & Charcuterie",
      type: "PRACTICAL",
      faculty: "Chef David Rozario",
      room: "Advanced Training Kitchen (ATK)",
      batch: "Batch A1",
      semester: 5,
    },
  ]);

  const [formDay, setFormDay] = useState<TimetableSlot["day"]>("Monday");
  const [formTime, setFormTime] = useState("10:00 AM - 01:00 PM");
  const [formPeriod, setFormPeriod] = useState("Period 2-4 (Practical)");
  const [formCode, setFormCode] = useState("BHM111P");
  const [formName, setFormName] = useState("Basic Culinary Lab");
  const [formType, setFormType] = useState<"THEORY" | "PRACTICAL">("PRACTICAL");
  const [formFaculty, setFormFaculty] = useState("Chef Rajesh Sharma");
  const [formRoom, setFormRoom] = useState("Basic Training Kitchen (BTK)");
  const [formBatch, setFormBatch] = useState("Batch K1");

  const days: TimetableSlot["day"][] = [
    "Monday",
    "Tuesday",
    "Wednesday",
    "Thursday",
    "Friday",
    "Saturday",
  ];

  const currentDaySlots = slots.filter(
    (s) => s.day === selectedDay && s.semester === selectedSem
  );

  const handleAddSlot = (e: React.FormEvent) => {
    e.preventDefault();
    const newSlot: TimetableSlot = {
      id: `slot_${Date.now()}`,
      day: formDay,
      timeSlot: formTime,
      period: formPeriod,
      subjectCode: formCode,
      subjectName: formName,
      type: formType,
      faculty: formFaculty,
      room: formRoom,
      batch: formBatch,
      semester: selectedSem,
    };

    setSlots([...slots, newSlot]);
    setIsModalOpen(false);
    toast.success(`Class scheduled on ${newSlot.day} for Semester ${selectedSem}`);
  };

  return (
    <div className="p-4 sm:p-6 lg:p-8 space-y-6 max-w-7xl mx-auto">
      {/* Header */}
      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
        <div>
          <div className="flex items-center gap-2 text-xs font-semibold text-slate-500 mb-1">
            <Link href="/dept-admin/dashboard" className="hover:text-[#1769E8]">
              Dashboard
            </Link>
            <ChevronRight className="w-3.5 h-3.5" />
            <span className="text-[#071A4D] font-bold">Timetable Management</span>
          </div>
          <h1 className="text-xl sm:text-2xl font-black text-[#071A4D] tracking-tight">
            Department Master Timetable
          </h1>
          <p className="text-xs text-slate-500 mt-0.5">
            Weekly class schedule, 3-hour kitchen practical slots, bakery labs, and theory lectures
          </p>
        </div>

        <div className="flex items-center gap-2">
          <button
            onClick={() => toast.success("Printing official weekly timetable")}
            className="inline-flex items-center gap-1.5 px-3 py-2 rounded-lg border border-slate-200 bg-white hover:bg-slate-50 text-slate-700 text-xs font-bold transition-all"
          >
            <Printer className="w-3.5 h-3.5" />
            <span>Print Master Grid</span>
          </button>
          <button
            onClick={() => setIsModalOpen(true)}
            className="inline-flex items-center gap-2 px-4 py-2.5 rounded-lg bg-[#C8A45D] hover:bg-[#B38F48] text-slate-950 font-bold text-xs shadow-sm transition-all"
          >
            <Plus className="w-4 h-4" />
            <span>Add Class Slot</span>
          </button>
        </div>
      </div>

      {/* Semester Selector */}
      <div className="flex items-center gap-3 bg-white p-3 rounded-xl border border-slate-200 shadow-xs">
        <span className="text-xs font-bold text-slate-700">Select Semester:</span>
        {[1, 3, 5].map((sem) => (
          <button
            key={sem}
            onClick={() => setSelectedSem(sem)}
            className={`px-3 py-1.5 rounded-lg text-xs font-bold transition-all ${
              selectedSem === sem
                ? "bg-[#081A2E] text-[#C8A45D] shadow-xs"
                : "bg-slate-100 text-slate-600 hover:bg-slate-200"
            }`}
          >
            Semester {sem} (Odd Term)
          </button>
        ))}
      </div>

      {/* Day Selector Tabs */}
      <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-2">
        {days.map((day) => {
          const count = slots.filter((s) => s.day === day && s.semester === selectedSem).length;
          const isSelected = selectedDay === day;
          return (
            <button
              key={day}
              onClick={() => setSelectedDay(day)}
              className={`p-3 rounded-xl border text-center transition-all ${
                isSelected
                  ? "bg-[#C8A45D] text-slate-950 border-[#C8A45D] shadow-sm font-bold"
                  : "bg-white text-slate-700 border-slate-200 hover:bg-slate-50 font-semibold"
              }`}
            >
              <div className="text-xs uppercase">{day}</div>
              <div className="text-[10px] mt-0.5 opacity-80">{count} Classes</div>
            </button>
          );
        })}
      </div>

      {/* Slots Timeline for Selected Day */}
      <div className="bg-white rounded-xl border border-slate-200 shadow-xs p-5 space-y-4">
        <div className="flex items-center justify-between pb-3 border-b border-slate-100">
          <h2 className="font-bold text-sm text-[#071A4D] flex items-center gap-2">
            <Calendar className="w-4 h-4 text-[#C8A45D]" />
            {selectedDay} Schedule — Semester {selectedSem}
          </h2>
          <span className="text-xs text-slate-500">
            {currentDaySlots.length} Scheduled Sessions
          </span>
        </div>

        {currentDaySlots.length === 0 ? (
          <div className="text-center py-12 text-slate-400 text-xs">
            No classes scheduled for {selectedDay} in Semester {selectedSem}.
          </div>
        ) : (
          <div className="space-y-3">
            {currentDaySlots.map((slot) => (
              <div
                key={slot.id}
                className="p-4 rounded-xl border border-slate-200 bg-slate-50/60 hover:bg-white hover:shadow-md transition-all flex flex-col md:flex-row md:items-center justify-between gap-4"
              >
                <div className="flex items-start sm:items-center gap-3">
                  <div
                    className={`w-11 h-11 rounded-lg flex items-center justify-center shrink-0 font-bold text-xs ${
                      slot.type === "PRACTICAL"
                        ? "bg-amber-100 text-amber-900 border border-amber-300"
                        : "bg-blue-100 text-blue-900 border border-blue-300"
                    }`}
                  >
                    {slot.type === "PRACTICAL" ? (
                      <UtensilsCrossed className="w-5 h-5 text-amber-800" />
                    ) : (
                      "TH"
                    )}
                  </div>
                  <div>
                    <div className="flex items-center gap-2">
                      <span className="font-mono font-bold text-sm text-[#071A4D]">
                        {slot.subjectCode}
                      </span>
                      <span className="font-bold text-sm text-slate-900">
                        {slot.subjectName}
                      </span>
                    </div>
                    <div className="text-xs text-slate-500 flex flex-wrap items-center gap-3 mt-1">
                      <span className="font-semibold text-slate-700">{slot.faculty}</span>
                      <span>•</span>
                      <span className="flex items-center gap-1">
                        <DoorOpen className="w-3 h-3 text-slate-400" />
                        {slot.room}
                      </span>
                      <span>•</span>
                      <span className="font-semibold text-[#785E2F]">{slot.batch}</span>
                    </div>
                  </div>
                </div>

                <div className="text-right shrink-0">
                  <div className="font-mono font-bold text-xs text-slate-800">
                    {slot.timeSlot}
                  </div>
                  <div className="text-[10px] text-slate-400">{slot.period}</div>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>

      {/* Modal */}
      {isModalOpen && (
        <div className="fixed inset-0 z-50 bg-slate-900/60 backdrop-blur-xs flex items-center justify-center p-4">
          <div className="bg-white rounded-2xl max-w-lg w-full p-6 shadow-2xl border border-slate-200">
            <div className="flex items-center justify-between pb-3 border-b border-slate-100">
              <h3 className="font-bold text-base text-[#071A4D]">Add Timetable Slot</h3>
              <button onClick={() => setIsModalOpen(false)}>
                <X className="w-5 h-5 text-slate-400" />
              </button>
            </div>

            <form onSubmit={handleAddSlot} className="space-y-4 pt-4 text-xs">
              <div className="grid grid-cols-2 gap-3">
                <div>
                  <label className="font-bold text-slate-800 block mb-1">Day of Week</label>
                  <select
                    value={formDay}
                    onChange={(e) => setFormDay(e.target.value as any)}
                    className="w-full px-3 py-2 border border-slate-200 rounded-lg focus:outline-hidden focus:border-[#C8A45D]"
                  >
                    {days.map((d) => (
                      <option key={d} value={d}>
                        {d}
                      </option>
                    ))}
                  </select>
                </div>
                <div>
                  <label className="font-bold text-slate-800 block mb-1">Class Type</label>
                  <select
                    value={formType}
                    onChange={(e) => setFormType(e.target.value as any)}
                    className="w-full px-3 py-2 border border-slate-200 rounded-lg focus:outline-hidden focus:border-[#C8A45D]"
                  >
                    <option value="PRACTICAL">Kitchen Practical (3 Hours)</option>
                    <option value="THEORY">Theory Lecture (1 Hour)</option>
                  </select>
                </div>
              </div>

              <div className="grid grid-cols-2 gap-3">
                <div>
                  <label className="font-bold text-slate-800 block mb-1">Time Slot</label>
                  <input
                    type="text"
                    value={formTime}
                    onChange={(e) => setFormTime(e.target.value)}
                    className="w-full px-3 py-2 border border-slate-200 rounded-lg focus:outline-hidden focus:border-[#C8A45D]"
                  />
                </div>
                <div>
                  <label className="font-bold text-slate-800 block mb-1">Period Name</label>
                  <input
                    type="text"
                    value={formPeriod}
                    onChange={(e) => setFormPeriod(e.target.value)}
                    className="w-full px-3 py-2 border border-slate-200 rounded-lg focus:outline-hidden focus:border-[#C8A45D]"
                  />
                </div>
              </div>

              <div className="grid grid-cols-2 gap-3">
                <div>
                  <label className="font-bold text-slate-800 block mb-1">Subject Code</label>
                  <input
                    type="text"
                    value={formCode}
                    onChange={(e) => setFormCode(e.target.value)}
                    className="w-full px-3 py-2 border border-slate-200 rounded-lg focus:outline-hidden focus:border-[#C8A45D]"
                  />
                </div>
                <div>
                  <label className="font-bold text-slate-800 block mb-1">Subject Name</label>
                  <input
                    type="text"
                    value={formName}
                    onChange={(e) => setFormName(e.target.value)}
                    className="w-full px-3 py-2 border border-slate-200 rounded-lg focus:outline-hidden focus:border-[#C8A45D]"
                  />
                </div>
              </div>

              <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
                <div>
                  <label className="font-bold text-slate-800 block mb-1">Faculty / Chef</label>
                  <input
                    type="text"
                    value={formFaculty}
                    onChange={(e) => setFormFaculty(e.target.value)}
                    className="w-full px-3 py-2 border border-slate-200 rounded-lg focus:outline-hidden focus:border-[#C8A45D]"
                  />
                </div>
                <div>
                  <label className="font-bold text-slate-800 block mb-1">Facility / Lab</label>
                  <input
                    type="text"
                    value={formRoom}
                    onChange={(e) => setFormRoom(e.target.value)}
                    className="w-full px-3 py-2 border border-slate-200 rounded-lg focus:outline-hidden focus:border-[#C8A45D]"
                  />
                </div>
                <div>
                  <label className="font-bold text-slate-800 block mb-1">Batch / Group</label>
                  <input
                    type="text"
                    value={formBatch}
                    onChange={(e) => setFormBatch(e.target.value)}
                    className="w-full px-3 py-2 border border-slate-200 rounded-lg focus:outline-hidden focus:border-[#C8A45D]"
                  />
                </div>
              </div>

              <div className="pt-3 border-t border-slate-100 flex justify-end gap-2">
                <button
                  type="button"
                  onClick={() => setIsModalOpen(false)}
                  className="px-4 py-2 rounded-lg border border-slate-200 font-bold text-slate-600 hover:bg-slate-50"
                >
                  Cancel
                </button>
                <button
                  type="submit"
                  className="px-4 py-2 rounded-lg bg-[#C8A45D] text-slate-950 font-bold hover:bg-[#B38F48]"
                >
                  Schedule Class
                </button>
              </div>
            </form>
          </div>
        </div>
      )}
    </div>
  );
}