"use client";

import React, { useState } from "react";
import Link from "next/link";
import {
  GraduationCap,
  Search,
  RotateCcw,
  Plus,
  Eye,
  CheckCircle2,
  Clock,
  ChevronRight,
  FileSpreadsheet,
  Users,
} from "lucide-react";
import { toast } from "sonner";

interface AdmissionApplication {
  id: string;
  appNumber: string;
  applicantName: string;
  program: string;
  jeeRank: number;
  category: string;
  status: "Admitted" | "Verification" | "Pending";
  date: string;
}

const sampleApplications: AdmissionApplication[] = [
  {
    id: "adm-1",
    appNumber: "IHMK-2026-0012",
    applicantName: "Rahul Sengupta",
    program: "B.Sc. in Hospitality & Hotel Administration",
    jeeRank: 421,
    category: "General",
    status: "Admitted",
    date: "04 Aug 2026",
  },
  {
    id: "adm-2",
    appNumber: "IHMK-2026-0045",
    applicantName: "Ananya Mukherjee",
    program: "B.Sc. in Hospitality & Hotel Administration",
    jeeRank: 618,
    category: "General",
    status: "Admitted",
    date: "04 Aug 2026",
  },
  {
    id: "adm-3",
    appNumber: "IHMK-2026-0089",
    applicantName: "Debjit Roy",
    program: "M.Sc. in Hospitality Administration",
    jeeRank: 82,
    category: "OBC",
    status: "Verification",
    date: "05 Aug 2026",
  },
  {
    id: "adm-4",
    appNumber: "IHMK-2026-0104",
    applicantName: "Priyanka Chatterjee",
    program: "Diploma in Food Production",
    jeeRank: 1205,
    category: "General",
    status: "Pending",
    date: "06 Aug 2026",
  },
];

export default function AdmissionsPage() {
  const [search, setSearch] = useState("");
  const [statusFilter, setStatusFilter] = useState("All Status");

  const filtered = sampleApplications.filter((app) => {
    const matchesSearch =
      app.applicantName.toLowerCase().includes(search.toLowerCase()) ||
      app.appNumber.toLowerCase().includes(search.toLowerCase());
    const matchesStatus = statusFilter === "All Status" || app.status === statusFilter;
    return matchesSearch && matchesStatus;
  });

  return (
    <div className="space-y-5 font-sans">
      <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-4">
        <div>
          <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 className="text-[#071A4D] font-semibold">Admissions</span>
          </nav>

          <h1 className="text-3xl font-bold font-heading text-[#071A4D] tracking-tight">
            Admissions Management
          </h1>
          <p className="text-[15px] text-[#64748B] mt-1 font-normal font-sans">
            Manage student admissions, NCHM JEE counseling seat allocations, and verification.
          </p>
        </div>

        <div className="flex items-center gap-2.5 flex-wrap">
          <button
            onClick={() => toast.success("Exporting Admissions List...")}
            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 Admissions</span>
          </button>
          <button
            onClick={() => toast.info("New application entry modal...")}
            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>+ New Application</span>
          </button>
        </div>
      </div>

      <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">
        <div className="flex flex-wrap items-center gap-2.5 flex-1">
          <div className="flex flex-col">
            <label className="text-[10px] font-bold text-[#64748B] mb-0.5 uppercase tracking-wider">
              Admission Status
            </label>
            <select
              value={statusFilter}
              onChange={(e) => setStatusFilter(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]"
            >
              <option>All Status</option>
              <option>Admitted</option>
              <option>Verification</option>
              <option>Pending</option>
            </select>
          </div>

          <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={search}
                onChange={(e) => setSearch(e.target.value)}
                placeholder="Search by applicant name or application no..."
                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]"
              />
            </div>
          </div>
        </div>

        <div className="flex items-end gap-2 shrink-0 pt-3 lg:pt-0">
          <button
            onClick={() => {
              setSearch("");
              setStatusFilter("All Status");
            }}
            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>

      <div className="rounded-xl bg-white border border-[#E5EAF0] shadow-2xs overflow-hidden">
        <div className="p-4 border-b border-[#E5EAF0] flex items-center justify-between">
          <div className="flex items-center gap-2">
            <GraduationCap className="w-4 h-4 text-[#1769E8]" />
            <h2 className="text-sm font-bold font-heading text-[#071A4D]">
              Admitted Candidate Roster ({filtered.length})
            </h2>
          </div>
          <span className="text-xs text-[#64748B] font-medium">Academic Year 2026 - 2027</span>
        </div>

        <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]">
                <th className="py-3 px-3">Application No</th>
                <th className="py-3 px-3">Applicant Name</th>
                <th className="py-3 px-3">Program</th>
                <th className="py-3 px-3 text-center">NCHM Rank</th>
                <th className="py-3 px-3 text-center">Category</th>
                <th className="py-3 px-3 text-center">Status</th>
                <th className="py-3 px-3 text-center">Actions</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-[#E5EAF0] text-[#334155]">
              {filtered.map((item) => (
                <tr key={item.id} className="hover:bg-[#F8FAFC] transition-colors">
                  <td className="py-3.5 px-3 font-mono font-bold text-[#1769E8]">
                    {item.appNumber}
                  </td>
                  <td className="py-3.5 px-3 font-semibold text-[#071A4D]">
                    {item.applicantName}
                  </td>
                  <td className="py-3.5 px-3 text-[#334155]">
                    {item.program}
                  </td>
                  <td className="py-3.5 px-3 text-center font-mono font-bold text-[#071A4D]">
                    #{item.jeeRank}
                  </td>
                  <td className="py-3.5 px-3 text-center text-[#64748B]">
                    {item.category}
                  </td>
                  <td className="py-3.5 px-3 text-center">
                    <span
                      className={`inline-block px-2.5 py-0.5 rounded-full text-[11px] font-semibold ${
                        item.status === "Admitted"
                          ? "bg-[#DCFCE7] text-[#15803D]"
                          : item.status === "Verification"
                          ? "bg-[#FEF3C7] text-[#D97706]"
                          : "bg-[#E2E8F0] text-[#475569]"
                      }`}
                    >
                      {item.status}
                    </span>
                  </td>
                  <td className="py-3.5 px-3 text-center">
                    <button
                      onClick={() => toast.info(`Viewing details for ${item.applicantName}`)}
                      className="p-1 rounded text-[#1769E8] hover:bg-blue-50 transition-colors"
                      title="View Application"
                    >
                      <Eye className="w-3.5 h-3.5" />
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}