"use client";

import React from "react";
import Link from "next/link";
import { GraduationCap, ChevronRight, FileSpreadsheet } from "lucide-react";
import { toast } from "sonner";

interface SeatAllocation {
  id: string;
  program: string;
  totalSeats: number;
  admitted: number;
  general: number;
  obc: number;
  sc: number;
  st: number;
  vacant: number;
}

const allocations: SeatAllocation[] = [
  {
    id: "seat-1",
    program: "B.Sc. in Hospitality & Hotel Administration",
    totalSeats: 280,
    admitted: 265,
    general: 135,
    obc: 72,
    sc: 40,
    st: 18,
    vacant: 15,
  },
  {
    id: "seat-2",
    program: "M.Sc. in Hospitality Administration",
    totalSeats: 30,
    admitted: 28,
    general: 14,
    obc: 8,
    sc: 4,
    st: 2,
    vacant: 2,
  },
  {
    id: "seat-3",
    program: "Diploma in Food Production",
    totalSeats: 60,
    admitted: 58,
    general: 30,
    obc: 16,
    sc: 8,
    st: 4,
    vacant: 2,
  },
  {
    id: "seat-4",
    program: "Diploma in Food & Beverage Service",
    totalSeats: 40,
    admitted: 38,
    general: 20,
    obc: 10,
    sc: 5,
    st: 3,
    vacant: 2,
  },
];

export default function SeatAllocationPage() {
  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]" />
            <Link href="/admin/admissions" className="hover:text-[#1769E8] hover:underline">
              Admissions
            </Link>
            <ChevronRight className="w-3.5 h-3.5 text-[#94A3B8]" />
            <span className="text-[#071A4D] font-semibold">Seat Allocation</span>
          </nav>

          <h1 className="text-3xl font-bold font-heading text-[#071A4D] tracking-tight">
            NCHMCT Seat Matrix & Allocation
          </h1>
          <p className="text-[15px] text-[#64748B] mt-1 font-normal font-sans">
            Quota and category-wise seat distribution matrix across hospitality degree and diploma programs.
          </p>
        </div>

        <button
          onClick={() => toast.success("Exporting Seat Matrix...")}
          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 Matrix</span>
        </button>
      </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]">
              Approved Seat Distribution (Batch 2026 - 2027)
            </h2>
          </div>
          <span className="text-xs text-[#64748B] font-medium">NCHMCT Central Counseling</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">Program</th>
                <th className="py-3 px-3 text-center">Sanctioned Seats</th>
                <th className="py-3 px-3 text-center">Filled</th>
                <th className="py-3 px-3 text-center">General</th>
                <th className="py-3 px-3 text-center">OBC</th>
                <th className="py-3 px-3 text-center">SC</th>
                <th className="py-3 px-3 text-center">ST</th>
                <th className="py-3 px-3 text-center">Vacant</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-[#E5EAF0] text-[#334155]">
              {allocations.map((a) => (
                <tr key={a.id} className="hover:bg-[#F8FAFC] transition-colors">
                  <td className="py-3.5 px-3 font-semibold text-[#071A4D]">{a.program}</td>
                  <td className="py-3.5 px-3 text-center font-bold text-[#071A4D]">{a.totalSeats}</td>
                  <td className="py-3.5 px-3 text-center font-bold text-emerald-700">{a.admitted}</td>
                  <td className="py-3.5 px-3 text-center font-mono text-[#334155]">{a.general}</td>
                  <td className="py-3.5 px-3 text-center font-mono text-[#334155]">{a.obc}</td>
                  <td className="py-3.5 px-3 text-center font-mono text-[#334155]">{a.sc}</td>
                  <td className="py-3.5 px-3 text-center font-mono text-[#334155]">{a.st}</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 bg-amber-50 text-amber-700 border border-amber-200">
                      {a.vacant} Left
                    </span>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}