"use client";

import React, { useState } from "react";
import Link from "next/link";
import {
  FileSpreadsheet,
  Download,
  Printer,
  Calendar,
  Filter,
  Users,
  CheckCircle2,
  AlertTriangle,
  ArrowRight,
  Sparkles,
} from "lucide-react";
import { toast } from "sonner";

interface RegisterStudentRow {
  roll: string;
  name: string;
  marks: string[]; // "P", "A", "C"
  presentCount: number;
  totalClasses: number;
  pct: number;
  status: "REGULAR" | "DEFAULTER";
}

const mockRegisterRows: RegisterStudentRow[] = [
  { roll: "2441112001", name: "Aaron Smith", marks: ["P", "P", "P", "P", "P", "P", "P", "P", "P"], presentCount: 9, totalClasses: 9, pct: 100.0, status: "REGULAR" },
  { roll: "2441112002", name: "Bethany Roy", marks: ["P", "P", "P", "A", "P", "P", "P", "P", "P"], presentCount: 8, totalClasses: 9, pct: 88.9, status: "REGULAR" },
  { roll: "2441112003", name: "Chirag Banerjee", marks: ["P", "P", "P", "P", "P", "P", "P", "P", "P"], presentCount: 9, totalClasses: 9, pct: 100.0, status: "REGULAR" },
  { roll: "2441112004", name: "Devika Sharma", marks: ["P", "A", "P", "A", "P", "A", "P", "P", "P"], presentCount: 6, totalClasses: 9, pct: 66.7, status: "DEFAULTER" },
  { roll: "2441112005", name: "Farhan Ahmed", marks: ["P", "P", "A", "P", "P", "A", "P", "P", "P"], presentCount: 7, totalClasses: 9, pct: 77.8, status: "REGULAR" },
  { roll: "2441112006", name: "Gautam Sen", marks: ["P", "P", "P", "P", "P", "P", "P", "P", "P"], presentCount: 9, totalClasses: 9, pct: 100.0, status: "REGULAR" },
  { roll: "2441112007", name: "Harshavardhan Rao", marks: ["P", "P", "P", "P", "A", "P", "P", "P", "P"], presentCount: 8, totalClasses: 9, pct: 88.9, status: "REGULAR" },
  { roll: "2441112008", name: "Isha Mukherjee", marks: ["P", "P", "P", "P", "P", "P", "P", "P", "P"], presentCount: 9, totalClasses: 9, pct: 100.0, status: "REGULAR" },
  { roll: "2441112009", name: "Jayant Verma", marks: ["P", "A", "P", "P", "A", "P", "P", "P", "P"], presentCount: 7, totalClasses: 9, pct: 77.8, status: "REGULAR" },
  { roll: "2441112010", name: "Kritika Das", marks: ["P", "P", "P", "P", "P", "A", "P", "P", "P"], presentCount: 8, totalClasses: 9, pct: 88.9, status: "REGULAR" },
  { roll: "2441112011", name: "Lalit Mohan", marks: ["A", "P", "A", "P", "P", "A", "P", "P", "P"], presentCount: 6, totalClasses: 9, pct: 66.7, status: "DEFAULTER" },
  { roll: "2441112012", name: "Meera Nair", marks: ["P", "P", "P", "P", "P", "P", "P", "P", "P"], presentCount: 9, totalClasses: 9, pct: 100.0, status: "REGULAR" },
  { roll: "2441112013", name: "Nikhil Joshi", marks: ["P", "P", "A", "P", "P", "P", "P", "P", "P"], presentCount: 8, totalClasses: 9, pct: 88.9, status: "REGULAR" },
  { roll: "2441112014", name: "Oindrila Ghosh", marks: ["P", "P", "P", "P", "P", "P", "P", "P", "P"], presentCount: 9, totalClasses: 9, pct: 100.0, status: "REGULAR" },
  { roll: "2441112015", name: "Prateek Saxena", marks: ["P", "A", "P", "P", "P", "A", "P", "P", "P"], presentCount: 7, totalClasses: 9, pct: 77.8, status: "REGULAR" },
];

export default function MonthlyRegisterPage() {
  const [selectedSubject, setSelectedSubject] = useState("BHM201");
  const dates = ["01 Oct", "03 Oct", "05 Oct", "06 Oct", "08 Oct", "09 Oct", "10 Oct", "12 Oct", "13 Oct"];

  return (
    <div className="space-y-6 pb-14 font-sans bg-[#F8FAFC]">
      {/* 1. Header & Breadcrumb */}
      <div>
        <div className="flex items-center gap-2 text-xs text-[#64748B] mb-2 font-medium">
          <Link href="/faculty/dashboard" className="hover:text-[#1769E8] transition-colors">
            Faculty Console
          </Link>
          <span>&gt;</span>
          <span>Reports &amp; APR Records</span>
          <span>&gt;</span>
          <span className="text-[#071A4D] font-semibold">Monthly Attendance Register</span>
        </div>

        <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
          <div>
            <div className="flex items-center gap-2.5">
              <h1 className="text-3xl font-bold font-heading text-[#071A4D] tracking-tight">
                Monthly Attendance Register (Form 4)
              </h1>
              <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-bold bg-blue-50 text-[#1769E8] border border-blue-200">
                Official NCHMCT Ledger
              </span>
            </div>
            <p className="text-[14px] text-[#64748B] mt-1 font-normal">
              Day-by-day session attendance ledger for October 2026 • Verified against biometric turns.
            </p>
          </div>

          <div className="flex items-center gap-2.5">
            <button
              onClick={() => toast.success("Printing Form 4 Monthly Attendance Register...")}
              className="px-3.5 py-2 bg-white border border-[#E2E8F0] hover:bg-slate-50 text-slate-700 rounded-lg text-xs font-semibold flex items-center gap-1.5 shadow-2xs transition-colors"
            >
              <Printer className="w-3.5 h-3.5 text-slate-600" />
              <span>Print Form 4</span>
            </button>
            <button
              onClick={() => toast.success("Exported Monthly Attendance Register (Form 4) PDF.")}
              className="px-4 py-2 bg-[#1769E8] hover:bg-[#1255be] text-white rounded-lg text-xs font-semibold flex items-center gap-1.5 shadow-xs transition-colors"
            >
              <Download className="w-3.5 h-3.5" />
              <span>Export PDF Register</span>
            </button>
          </div>
        </div>
      </div>

      {/* 2. Filter Bar */}
      <div className="bg-white rounded-xl border border-[#E5EAF0] p-4 shadow-xs flex flex-wrap items-center justify-between gap-3">
        <div className="flex items-center gap-3">
          <label className="text-xs font-semibold text-[#071A4D]">Select Subject:</label>
          <select
            value={selectedSubject}
            onChange={(e) => setSelectedSubject(e.target.value)}
            className="px-3 py-1.5 text-xs bg-slate-50 border border-slate-200 rounded-lg font-semibold text-[#071A4D] focus:outline-hidden focus:border-[#1769E8]"
          >
            <option value="BHM201">BHM201 — Food Production Operations Practical</option>
            <option value="BHM202">BHM202 — Food &amp; Beverage Service Theory</option>
            <option value="BHM203">BHM203 — Bakery &amp; Confectionery Practical</option>
            <option value="BHM301">BHM301 — Advanced Food Production</option>
          </select>
        </div>

        <div className="flex items-center gap-2 text-xs text-[#64748B]">
          <span className="font-semibold text-[#071A4D]">Period:</span>
          <span>01 October 2026 to 31 October 2026</span>
          <span>•</span>
          <span className="text-emerald-600 font-bold">9 Sessions Conducted (36.0 Contact Hours)</span>
        </div>
      </div>

      {/* 3. Day-by-Day Grid Table Card */}
      <div className="bg-white rounded-xl border border-[#E5EAF0] shadow-xs overflow-hidden">
        <div className="p-4 border-b border-[#E5EAF0] flex items-center justify-between bg-slate-50">
          <h2 className="font-heading font-bold text-sm text-[#071A4D]">
            Form NCHMCT/ATT-4: Detailed Daily Attendance Ledger
          </h2>
          <span className="text-xs text-[#64748B]">
            P = Present (4 Units), A = Absent, C = Condoned
          </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] font-semibold">
                <th className="py-2.5 px-3 font-bold text-[#071A4D]">Roll No</th>
                <th className="py-2.5 px-3 font-bold text-[#071A4D]">Student Name</th>
                {dates.map((d) => (
                  <th key={d} className="py-2.5 px-2 text-center font-bold text-[#071A4D] text-[10px]">
                    {d}
                  </th>
                ))}
                <th className="py-2.5 px-3 font-bold text-[#071A4D] text-center">Attended / Total</th>
                <th className="py-2.5 px-3 font-bold text-[#071A4D] text-center">Attendance %</th>
                <th className="py-2.5 px-3 font-bold text-[#071A4D] text-center">Status</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-[#E5EAF0]">
              {mockRegisterRows.map((row) => (
                <tr key={row.roll} className="hover:bg-[#F8FAFC] transition-colors">
                  <td className="py-2.5 px-3 font-mono font-bold text-[#1769E8]">
                    {row.roll}
                  </td>
                  <td className="py-2.5 px-3 font-semibold text-[#071A4D]">
                    {row.name}
                  </td>
                  {row.marks.map((m, idx) => (
                    <td key={idx} className="py-2.5 px-2 text-center font-mono font-bold">
                      <span
                        className={`inline-block w-5 h-5 leading-5 rounded text-[10px] ${
                          m === "P"
                            ? "bg-[#DCFCE7] text-[#15803D]"
                            : m === "A"
                            ? "bg-rose-50 text-rose-700 font-bold"
                            : "bg-blue-50 text-blue-700"
                        }`}
                      >
                        {m}
                      </span>
                    </td>
                  ))}
                  <td className="py-2.5 px-3 text-center font-mono font-bold text-slate-800">
                    {row.presentCount} / {row.totalClasses}
                  </td>
                  <td className="py-2.5 px-3 text-center font-mono font-bold">
                    <span className={row.pct >= 75 ? "text-emerald-600" : "text-amber-600"}>
                      {row.pct.toFixed(1)}%
                    </span>
                  </td>
                  <td className="py-2.5 px-3 text-center">
                    <span
                      className={`inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold border ${
                        row.status === "REGULAR"
                          ? "bg-[#DCFCE7] text-[#15803D] border-[#BBF7D0]"
                          : "bg-amber-50 text-amber-700 border-amber-200"
                      }`}
                    >
                      {row.status === "REGULAR" ? "Eligible" : "Shortage"}
                    </span>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}