"use client";

import React, { useState } from "react";
import Link from "next/link";
import {
  Calendar,
  Clock,
  Plus,
  CheckCircle2,
  AlertCircle,
  CalendarDays,
  Sparkles,
  ChevronRight,
  Filter,
  Search,
  Building2,
  Layers,
  Edit2,
  Trash2,
  Check,
  X,
} from "lucide-react";
import { toast } from "sonner";

interface AcademicSession {
  id: string;
  name: string;
  code: string;
  term: "ODD" | "EVEN";
  startDate: string;
  endDate: string;
  totalWeeks: number;
  workingDays: number;
  status: "ACTIVE" | "UPCOMING" | "ARCHIVED";
  enrolledStudents: number;
  isCurrent: boolean;
}

export default function DeptAdminSessionsPage() {
  const [sessions, setSessions] = useState<AcademicSession[]>([
    {
      id: "sess_2024_odd",
      name: "Academic Year 2024 - 2025 (Odd Semester)",
      code: "AY-2024-25-ODD",
      term: "ODD",
      startDate: "15 Jul 2024",
      endDate: "20 Dec 2024",
      totalWeeks: 18,
      workingDays: 92,
      status: "ACTIVE",
      enrolledStudents: 384,
      isCurrent: true,
    },
    {
      id: "sess_2024_even",
      name: "Academic Year 2024 - 2025 (Even Semester)",
      code: "AY-2024-25-EVEN",
      term: "EVEN",
      startDate: "06 Jan 2025",
      endDate: "30 May 2025",
      totalWeeks: 18,
      workingDays: 94,
      status: "UPCOMING",
      enrolledStudents: 384,
      isCurrent: false,
    },
    {
      id: "sess_2023_even",
      name: "Academic Year 2023 - 2024 (Even Semester)",
      code: "AY-2023-24-EVEN",
      term: "EVEN",
      startDate: "08 Jan 2024",
      endDate: "24 May 2024",
      totalWeeks: 18,
      workingDays: 90,
      status: "ARCHIVED",
      enrolledStudents: 372,
      isCurrent: false,
    },
  ]);

  const [filterTerm, setFilterTerm] = useState<string>("ALL");
  const [searchQuery, setSearchQuery] = useState("");
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [newSessionName, setNewSessionName] = useState("");
  const [newSessionCode, setNewSessionCode] = useState("");
  const [newStartDate, setNewStartDate] = useState("");
  const [newEndDate, setNewEndDate] = useState("");
  const [newTerm, setNewTerm] = useState<"ODD" | "EVEN">("ODD");

  const filteredSessions = sessions.filter((s) => {
    const matchesTerm = filterTerm === "ALL" || s.term === filterTerm;
    const matchesSearch =
      s.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      s.code.toLowerCase().includes(searchQuery.toLowerCase());
    return matchesTerm && matchesSearch;
  });

  const handleCreateSession = (e: React.FormEvent) => {
    e.preventDefault();
    if (!newSessionName.trim() || !newSessionCode.trim()) {
      toast.error("Please fill in session name and code");
      return;
    }

    const newSess: AcademicSession = {
      id: `sess_${Date.now()}`,
      name: newSessionName,
      code: newSessionCode,
      term: newTerm,
      startDate: newStartDate || "01 Jul 2025",
      endDate: newEndDate || "15 Dec 2025",
      totalWeeks: 18,
      workingDays: 90,
      status: "UPCOMING",
      enrolledStudents: 0,
      isCurrent: false,
    };

    setSessions([newSess, ...sessions]);
    setIsModalOpen(false);
    setNewSessionName("");
    setNewSessionCode("");
    toast.success(`Created academic session: ${newSess.code}`);
  };

  const handleSetCurrent = (id: string) => {
    setSessions(
      sessions.map((s) => ({
        ...s,
        isCurrent: s.id === id,
        status: s.id === id ? "ACTIVE" : s.status === "ACTIVE" ? "ARCHIVED" : s.status,
      }))
    );
    toast.success("Active session updated for department calculations");
  };

  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">Academic Sessions</span>
          </div>
          <h1 className="text-xl sm:text-2xl font-black text-[#071A4D] tracking-tight">
            Academic Session Management
          </h1>
          <p className="text-xs text-slate-500 mt-0.5">
            Define institutional terms, active semester timelines, and working day baselines
          </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>New Academic Session</span>
        </button>
      </div>

      {/* Current Active Session Highlight */}
      <div className="p-5 rounded-xl bg-gradient-to-r from-amber-50 to-orange-50 border border-amber-200/80 shadow-xs flex flex-col md:flex-row md:items-center justify-between gap-4">
        <div className="space-y-1">
          <div className="flex items-center gap-2">
            <span className="text-[10px] font-bold uppercase tracking-wider px-2 py-0.5 rounded-full bg-[#C8A45D] text-slate-950">
              Active Session
            </span>
            <span className="text-xs font-bold text-amber-900 font-mono">AY-2024-25-ODD</span>
          </div>
          <h2 className="text-lg font-bold text-[#071A4D]">
            Academic Year 2024 - 2025 (Odd Semester: Sem 1, 3, 5)
          </h2>
          <div className="text-xs text-slate-600 flex flex-wrap items-center gap-4 pt-1">
            <span>Duration: <strong>15 Jul 2024 – 20 Dec 2024</strong></span>
            <span>•</span>
            <span>Total Teaching Weeks: <strong>18 Weeks</strong></span>
            <span>•</span>
            <span>Working Days Target: <strong>92 Days</strong></span>
          </div>
        </div>

        <div className="flex items-center gap-3 shrink-0">
          <div className="text-right">
            <div className="text-xs text-slate-500">Department Students</div>
            <div className="text-xl font-black text-[#071A4D]">384 Enrolled</div>
          </div>
          <div className="w-10 h-10 rounded-full bg-emerald-100 border border-emerald-300 flex items-center justify-center text-emerald-700">
            <CheckCircle2 className="w-6 h-6" />
          </div>
        </div>
      </div>

      {/* Filter & Search Bar */}
      <div className="flex flex-col sm: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 sm: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 sessions..."
            value={searchQuery}
            onChange={(e) => setSearchQuery(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 items-center gap-2 w-full sm:w-auto">
          <span className="text-xs font-semibold text-slate-500">Term Filter:</span>
          {["ALL", "ODD", "EVEN"].map((term) => (
            <button
              key={term}
              onClick={() => setFilterTerm(term)}
              className={`px-3 py-1 rounded-lg text-xs font-bold transition-colors ${
                filterTerm === term
                  ? "bg-[#081A2E] text-white"
                  : "bg-slate-100 text-slate-600 hover:bg-slate-200"
              }`}
            >
              {term}
            </button>
          ))}
        </div>
      </div>

      {/* Sessions 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">Session Name & Code</th>
                <th className="p-3.5">Term</th>
                <th className="p-3.5">Duration</th>
                <th className="p-3.5">Weeks / Days</th>
                <th className="p-3.5">Students</th>
                <th className="p-3.5">Status</th>
                <th className="p-3.5 text-right">Actions</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-slate-100">
              {filteredSessions.map((s) => (
                <tr key={s.id} className="hover:bg-slate-50/80 transition-colors">
                  <td className="p-3.5">
                    <div className="font-bold text-slate-900">{s.name}</div>
                    <div className="text-[11px] font-mono text-[#785E2F]">{s.code}</div>
                  </td>
                  <td className="p-3.5">
                    <span className="px-2 py-0.5 rounded-full font-bold text-[10px] bg-slate-100 text-slate-700">
                      {s.term} SEM
                    </span>
                  </td>
                  <td className="p-3.5 text-slate-700">
                    <div>{s.startDate}</div>
                    <div className="text-slate-400 text-[10px]">to {s.endDate}</div>
                  </td>
                  <td className="p-3.5 text-slate-700">
                    <div>{s.totalWeeks} Weeks</div>
                    <div className="text-slate-400 text-[10px]">{s.workingDays} Working Days</div>
                  </td>
                  <td className="p-3.5 font-bold text-[#071A4D]">
                    {s.enrolledStudents}
                  </td>
                  <td className="p-3.5">
                    <span
                      className={`px-2 py-0.5 rounded-full font-bold text-[10px] uppercase ${
                        s.status === "ACTIVE"
                          ? "bg-emerald-100 text-emerald-800 border border-emerald-300"
                          : s.status === "UPCOMING"
                          ? "bg-blue-100 text-blue-800"
                          : "bg-slate-100 text-slate-600"
                      }`}
                    >
                      {s.status}
                    </span>
                  </td>
                  <td className="p-3.5 text-right">
                    {!s.isCurrent ? (
                      <button
                        onClick={() => handleSetCurrent(s.id)}
                        className="px-2.5 py-1 rounded-md text-xs font-bold text-[#1769E8] hover:bg-blue-50 border border-blue-200"
                      >
                        Set Active
                      </button>
                    ) : (
                      <span className="text-[11px] font-bold text-emerald-600 flex items-center justify-end gap-1">
                        <Check className="w-3.5 h-3.5" /> Current
                      </span>
                    )}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      {/* Create 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 animate-in fade-in zoom-in-95 duration-150">
            <div className="flex items-center justify-between pb-3 border-b border-slate-100">
              <h3 className="font-bold text-base text-[#071A4D]">Create Academic Session</h3>
              <button
                onClick={() => setIsModalOpen(false)}
                className="p-1 rounded-lg text-slate-400 hover:text-slate-700"
              >
                <X className="w-5 h-5" />
              </button>
            </div>

            <form onSubmit={handleCreateSession} className="space-y-4 pt-4 text-xs">
              <div>
                <label className="font-bold text-slate-800 block mb-1">Session Name *</label>
                <input
                  type="text"
                  placeholder="e.g. Academic Year 2025 - 2026 (Odd Semester)"
                  value={newSessionName}
                  onChange={(e) => setNewSessionName(e.target.value)}
                  className="w-full px-3 py-2 border border-slate-200 rounded-lg focus:border-[#C8A45D] focus:outline-hidden"
                  required
                />
              </div>

              <div className="grid grid-cols-2 gap-3">
                <div>
                  <label className="font-bold text-slate-800 block mb-1">Session Code *</label>
                  <input
                    type="text"
                    placeholder="AY-2025-26-ODD"
                    value={newSessionCode}
                    onChange={(e) => setNewSessionCode(e.target.value)}
                    className="w-full px-3 py-2 border border-slate-200 rounded-lg focus:border-[#C8A45D] focus:outline-hidden"
                    required
                  />
                </div>
                <div>
                  <label className="font-bold text-slate-800 block mb-1">Term Type</label>
                  <select
                    value={newTerm}
                    onChange={(e) => setNewTerm(e.target.value as "ODD" | "EVEN")}
                    className="w-full px-3 py-2 border border-slate-200 rounded-lg focus:border-[#C8A45D] focus:outline-hidden"
                  >
                    <option value="ODD">Odd Semester (July - Dec)</option>
                    <option value="EVEN">Even Semester (Jan - May)</option>
                  </select>
                </div>
              </div>

              <div className="grid grid-cols-2 gap-3">
                <div>
                  <label className="font-bold text-slate-800 block mb-1">Start Date</label>
                  <input
                    type="date"
                    value={newStartDate}
                    onChange={(e) => setNewStartDate(e.target.value)}
                    className="w-full px-3 py-2 border border-slate-200 rounded-lg focus:border-[#C8A45D] focus:outline-hidden"
                  />
                </div>
                <div>
                  <label className="font-bold text-slate-800 block mb-1">End Date</label>
                  <input
                    type="date"
                    value={newEndDate}
                    onChange={(e) => setNewEndDate(e.target.value)}
                    className="w-full px-3 py-2 border border-slate-200 rounded-lg focus:border-[#C8A45D] focus:outline-hidden"
                  />
                </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 text-slate-600 font-bold 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 Academic Session
                </button>
              </div>
            </form>
          </div>
        </div>
      )}
    </div>
  );
}