"use client";

import React, { useState } from "react";
import Link from "next/link";
import {
  BookOpen,
  Plus,
  Search,
  Filter,
  CheckCircle2,
  ChevronRight,
  Clock,
  FlaskConical,
  UtensilsCrossed,
  X,
  Layers,
} from "lucide-react";
import { toast } from "sonner";

interface SubjectItem {
  id: string;
  code: string;
  name: string;
  semester: number;
  type: "THEORY" | "PRACTICAL";
  weeklyPeriods: number;
  credits: number;
  facility: string;
  allocatedFaculty: string;
}

export default function DeptAdminSubjectsPage() {
  const [subjects, setSubjects] = useState<SubjectItem[]>([
    {
      id: "sub_1",
      code: "BHM111",
      name: "Food Production Foundation",
      semester: 1,
      type: "THEORY",
      weeklyPeriods: 2,
      credits: 2,
      facility: "Lecture Hall 204",
      allocatedFaculty: "Chef Anirban Roy",
    },
    {
      id: "sub_2",
      code: "BHM111P",
      name: "Basic Culinary Lab - Kitchen Practical",
      semester: 1,
      type: "PRACTICAL",
      weeklyPeriods: 6,
      credits: 3,
      facility: "Basic Training Kitchen (BTK)",
      allocatedFaculty: "Chef Rajesh Sharma & Chef Amit Sen",
    },
    {
      id: "sub_3",
      code: "BHM114P",
      name: "Bakery & Confectionery Practical",
      semester: 1,
      type: "PRACTICAL",
      weeklyPeriods: 4,
      credits: 2,
      facility: "Bakery Studio Lab",
      allocatedFaculty: "Chef Meenakshi Iyer",
    },
    {
      id: "sub_4",
      code: "BHM211",
      name: "Quantity Food Operations & Regional Indian",
      semester: 3,
      type: "THEORY",
      weeklyPeriods: 2,
      credits: 2,
      facility: "Lecture Hall 102",
      allocatedFaculty: "Chef Amit Sen",
    },
    {
      id: "sub_5",
      code: "BHM211P",
      name: "Quantity Food Kitchen (QFK) Practical",
      semester: 3,
      type: "PRACTICAL",
      weeklyPeriods: 6,
      credits: 3,
      facility: "Quantity Food Kitchen",
      allocatedFaculty: "Chef Meenakshi Iyer & Chef David Rozario",
    },
    {
      id: "sub_6",
      code: "BHM311",
      name: "Advanced Food Production Operations",
      semester: 5,
      type: "THEORY",
      weeklyPeriods: 2,
      credits: 2,
      facility: "Auditorium Room B",
      allocatedFaculty: "Chef Rajesh Sharma",
    },
    {
      id: "sub_7",
      code: "BHM311P",
      name: "International Culinary Arts & Larder Practical",
      semester: 5,
      type: "PRACTICAL",
      weeklyPeriods: 6,
      credits: 3,
      facility: "Advanced Training Kitchen (ATK)",
      allocatedFaculty: "Chef David Rozario",
    },
  ]);

  const [search, setSearch] = useState("");
  const [selectedSem, setSelectedSem] = useState<number | "ALL">("ALL");
  const [typeFilter, setTypeFilter] = useState<"ALL" | "THEORY" | "PRACTICAL">("ALL");
  const [isModalOpen, setIsModalOpen] = useState(false);

  const [newCode, setNewCode] = useState("");
  const [newName, setNewName] = useState("");
  const [newSem, setNewSem] = useState(1);
  const [newType, setNewType] = useState<"THEORY" | "PRACTICAL">("THEORY");
  const [newPeriods, setNewPeriods] = useState(2);
  const [newCredits, setNewCredits] = useState(2);
  const [newFacility, setNewFacility] = useState("Basic Training Kitchen (BTK)");

  const filteredSubjects = subjects.filter((s) => {
    const matchesSem = selectedSem === "ALL" || s.semester === selectedSem;
    const matchesType = typeFilter === "ALL" || s.type === typeFilter;
    const matchesSearch =
      s.name.toLowerCase().includes(search.toLowerCase()) ||
      s.code.toLowerCase().includes(search.toLowerCase());
    return matchesSem && matchesType && matchesSearch;
  });

  const handleAddSubject = (e: React.FormEvent) => {
    e.preventDefault();
    if (!newCode.trim() || !newName.trim()) {
      toast.error("Please provide subject code and name");
      return;
    }

    const newSub: SubjectItem = {
      id: `sub_${Date.now()}`,
      code: newCode,
      name: newName,
      semester: Number(newSem),
      type: newType,
      weeklyPeriods: Number(newPeriods),
      credits: Number(newCredits),
      facility: newFacility,
      allocatedFaculty: "Unassigned",
    };

    setSubjects([...subjects, newSub]);
    setIsModalOpen(false);
    setNewCode("");
    setNewName("");
    toast.success(`Subject created: ${newSub.code}`);
  };

  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">Subject Management</span>
          </div>
          <h1 className="text-xl sm:text-2xl font-black text-[#071A4D] tracking-tight">
            Subject Management
          </h1>
          <p className="text-xs text-slate-500 mt-0.5">
            Curriculum subjects, weekly period loads, kitchen lab spaces, and credit distribution
          </p>
        </div>

        <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 New Subject</span>
        </button>
      </div>

      {/* Filters Bar */}
      <div className="flex flex-col md:flex-row items-center justify-between gap-3 bg-white p-3.5 rounded-xl border border-slate-200 shadow-xs">
        <div className="relative w-full md:w-72">
          <Search className="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" />
          <input
            type="text"
            placeholder="Search code or subject name..."
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            className="w-full pl-9 pr-3 py-1.5 text-xs rounded-lg border border-slate-200 focus:outline-hidden focus:border-[#C8A45D]"
          />
        </div>

        <div className="flex flex-wrap items-center gap-3 w-full md:w-auto">
          <div className="flex items-center gap-1.5 text-xs">
            <span className="font-semibold text-slate-500">Semester:</span>
            {["ALL", 1, 3, 5].map((sem) => (
              <button
                key={String(sem)}
                onClick={() => setSelectedSem(sem as any)}
                className={`px-2.5 py-1 rounded-md font-bold text-xs transition-colors ${
                  selectedSem === sem
                    ? "bg-[#081A2E] text-white"
                    : "bg-slate-100 text-slate-600 hover:bg-slate-200"
                }`}
              >
                {sem === "ALL" ? "All" : `Sem ${sem}`}
              </button>
            ))}
          </div>

          <div className="flex items-center gap-1.5 text-xs">
            <span className="font-semibold text-slate-500">Type:</span>
            {["ALL", "THEORY", "PRACTICAL"].map((t) => (
              <button
                key={t}
                onClick={() => setTypeFilter(t as any)}
                className={`px-2.5 py-1 rounded-md font-bold text-xs transition-colors ${
                  typeFilter === t
                    ? "bg-[#C8A45D] text-slate-950"
                    : "bg-slate-100 text-slate-600 hover:bg-slate-200"
                }`}
              >
                {t}
              </button>
            ))}
          </div>
        </div>
      </div>

      {/* Subjects Table */}
      <div className="bg-white rounded-xl border border-slate-200 shadow-xs overflow-hidden">
        <div className="overflow-x-auto">
          <table className="w-full text-left text-xs">
            <thead className="bg-[#081A2E] text-slate-200 uppercase tracking-wider text-[10px]">
              <tr>
                <th className="p-3.5">Subject Code</th>
                <th className="p-3.5">Subject Title</th>
                <th className="p-3.5">Semester</th>
                <th className="p-3.5">Category</th>
                <th className="p-3.5">Weekly Load / Credits</th>
                <th className="p-3.5">Lab / Facility</th>
                <th className="p-3.5">Allocated Faculty</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-slate-100">
              {filteredSubjects.map((sub) => (
                <tr key={sub.id} className="hover:bg-slate-50/80 transition-colors">
                  <td className="p-3.5 font-mono font-bold text-[#071A4D]">
                    {sub.code}
                  </td>
                  <td className="p-3.5 font-semibold text-slate-900">
                    {sub.name}
                  </td>
                  <td className="p-3.5">
                    <span className="px-2 py-0.5 rounded-md font-bold text-[10px] bg-slate-100 text-slate-700">
                      Semester {sub.semester}
                    </span>
                  </td>
                  <td className="p-3.5">
                    <span
                      className={`px-2.5 py-0.5 rounded-full font-bold text-[10px] uppercase inline-flex items-center gap-1 ${
                        sub.type === "PRACTICAL"
                          ? "bg-amber-100 text-amber-900 border border-amber-300"
                          : "bg-blue-100 text-blue-800"
                      }`}
                    >
                      {sub.type === "PRACTICAL" ? (
                        <UtensilsCrossed className="w-3 h-3 text-amber-800" />
                      ) : (
                        <BookOpen className="w-3 h-3 text-blue-700" />
                      )}
                      {sub.type}
                    </span>
                  </td>
                  <td className="p-3.5 text-slate-700">
                    <div>{sub.weeklyPeriods} Periods / wk</div>
                    <div className="text-slate-400 text-[10px]">{sub.credits} Academic Credits</div>
                  </td>
                  <td className="p-3.5 text-slate-600 font-medium">
                    {sub.facility}
                  </td>
                  <td className="p-3.5 font-bold text-slate-800">
                    {sub.allocatedFaculty}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      {/* Add 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 Department Subject</h3>
              <button onClick={() => setIsModalOpen(false)}>
                <X className="w-5 h-5 text-slate-400" />
              </button>
            </div>

            <form onSubmit={handleAddSubject} 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">Subject Code *</label>
                  <input
                    type="text"
                    placeholder="e.g. BHM115P"
                    value={newCode}
                    onChange={(e) => setNewCode(e.target.value)}
                    className="w-full px-3 py-2 border border-slate-200 rounded-lg focus:outline-hidden focus:border-[#C8A45D]"
                    required
                  />
                </div>
                <div>
                  <label className="font-bold text-slate-800 block mb-1">Category</label>
                  <select
                    value={newType}
                    onChange={(e) => setNewType(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="THEORY">Theory Lecture</option>
                    <option value="PRACTICAL">Kitchen / Lab Practical</option>
                  </select>
                </div>
              </div>

              <div>
                <label className="font-bold text-slate-800 block mb-1">Subject Title *</label>
                <input
                  type="text"
                  placeholder="e.g. Culinary Pastry Foundations"
                  value={newName}
                  onChange={(e) => setNewName(e.target.value)}
                  className="w-full px-3 py-2 border border-slate-200 rounded-lg focus:outline-hidden focus:border-[#C8A45D]"
                  required
                />
              </div>

              <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
                <div>
                  <label className="font-bold text-slate-800 block mb-1">Semester</label>
                  <select
                    value={newSem}
                    onChange={(e) => setNewSem(Number(e.target.value))}
                    className="w-full px-3 py-2 border border-slate-200 rounded-lg focus:outline-hidden focus:border-[#C8A45D]"
                  >
                    {[1, 2, 3, 4, 5, 6].map((s) => (
                      <option key={s} value={s}>
                        Sem {s}
                      </option>
                    ))}
                  </select>
                </div>
                <div>
                  <label className="font-bold text-slate-800 block mb-1">Weekly Periods</label>
                  <input
                    type="number"
                    value={newPeriods}
                    onChange={(e) => setNewPeriods(Number(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">Credits</label>
                  <input
                    type="number"
                    value={newCredits}
                    onChange={(e) => setNewCredits(Number(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>
                <label className="font-bold text-slate-800 block mb-1">Assigned Facility / Lab</label>
                <input
                  type="text"
                  value={newFacility}
                  onChange={(e) => setNewFacility(e.target.value)}
                  className="w-full px-3 py-2 border border-slate-200 rounded-lg focus:outline-hidden focus:border-[#C8A45D]"
                />
              </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]"
                >
                  Save Subject
                </button>
              </div>
            </form>
          </div>
        </div>
      )}
    </div>
  );
}