"use client";

import React, { useState } from "react";
import Link from "next/link";
import {
  Search,
  RotateCcw,
  Plus,
  Eye,
  Trash2,
  ChevronLeft,
  ChevronRight,
  FileSpreadsheet,
  FileText,
  AlertTriangle,
  Send,
  Sparkles,
  Phone,
  Mail,
  ShieldAlert,
} from "lucide-react";
import { toast } from "sonner";

interface DefaulterStudent {
  id: string;
  nchmRollNumber: string;
  name: string;
  semester: string;
  batch: string;
  totalConductedHours: number;
  totalAttendedHours: number;
  percentage: number;
  tier: "SHORTAGE" | "CRITICAL" | "WARNING";
  hoursNeededFor75: number;
  guardianName: string;
  guardianMobile: string;
  warningSentAt?: string;
}

const mockDefaulters: DefaulterStudent[] = [
  {
    id: "def-1",
    nchmRollNumber: "2441112009",
    name: "Jayant Verma",
    semester: "Semester III",
    batch: "Batch B1",
    totalConductedHours: 48.0,
    totalAttendedHours: 28.0,
    percentage: 58.3,
    tier: "SHORTAGE",
    hoursNeededFor75: 8.0,
    guardianName: "Sunil Verma",
    guardianMobile: "+91 98100 12345",
  },
  {
    id: "def-2",
    nchmRollNumber: "2441112023",
    name: "Xavier Pinto",
    semester: "Semester III",
    batch: "Batch B2",
    totalConductedHours: 48.0,
    totalAttendedHours: 30.0,
    percentage: 62.5,
    tier: "SHORTAGE",
    hoursNeededFor75: 6.0,
    guardianName: "Francis Pinto",
    guardianMobile: "+91 98100 12346",
  },
  {
    id: "def-3",
    nchmRollNumber: "2441112015",
    name: "Prateek Saxena",
    semester: "Semester III",
    batch: "Batch B1",
    totalConductedHours: 48.0,
    totalAttendedHours: 32.0,
    percentage: 66.7,
    tier: "CRITICAL",
    hoursNeededFor75: 4.0,
    guardianName: "Alok Saxena",
    guardianMobile: "+91 98100 12347",
    warningSentAt: "2026-10-01",
  },
  {
    id: "def-4",
    nchmRollNumber: "2441112004",
    name: "Devika Sharma",
    semester: "Semester III",
    batch: "Batch B2",
    totalConductedHours: 48.0,
    totalAttendedHours: 34.0,
    percentage: 70.8,
    tier: "WARNING",
    hoursNeededFor75: 2.0,
    guardianName: "Rajeev Sharma",
    guardianMobile: "+91 98100 12348",
  },
  {
    id: "def-5",
    nchmRollNumber: "2441112018",
    name: "Sourav Ganguly",
    semester: "Semester III",
    batch: "Batch B1",
    totalConductedHours: 48.0,
    totalAttendedHours: 35.0,
    percentage: 72.9,
    tier: "WARNING",
    hoursNeededFor75: 1.0,
    guardianName: "Chandi Ganguly",
    guardianMobile: "+91 98100 12349",
  },
];

export default function DefaultersPage() {
  const [defaulters, setDefaulters] = useState<DefaulterStudent[]>(mockDefaulters);
  const [filterTier, setFilterTier] = useState<string>("All Tiers");
  const [selectedSemester, setSelectedSemester] = useState<string>("All Semesters");
  const [searchQuery, setSearchQuery] = useState("");
  const [selectedRows, setSelectedRows] = useState<string[]>([]);
  const [pageSize, setPageSize] = useState("10");

  // Form State for Dispatching Notice
  const [noticeForm, setNoticeForm] = useState({
    rollNumber: "2441112009",
    studentName: "Jayant Verma",
    channel: "SMS & Email to Guardian",
    warningTier: "First Formal Statutory Notice (< 65%)",
    customMessage: "Your ward has fallen below 65% attendance. Immediate presence of guardian required at Principal office.",
  });

  const filteredDefaulters = defaulters.filter((d) => {
    const matchesTier =
      filterTier === "All Tiers" || d.tier === filterTier;
    const matchesSem =
      selectedSemester === "All Semesters" || d.semester === selectedSemester;
    const matchesSearch =
      searchQuery === "" ||
      d.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      d.nchmRollNumber.includes(searchQuery) ||
      d.guardianName.toLowerCase().includes(searchQuery.toLowerCase());
    return matchesTier && matchesSem && matchesSearch;
  });

  const handleSelectAll = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.checked) {
      setSelectedRows(filteredDefaulters.map((d) => d.id));
    } else {
      setSelectedRows([]);
    }
  };

  const handleRowSelect = (id: string) => {
    setSelectedRows((prev) =>
      prev.includes(id) ? prev.filter((r) => r !== id) : [...prev, id]
    );
  };

  const handleResetFilters = () => {
    setFilterTier("All Tiers");
    setSelectedSemester("All Semesters");
    setSearchQuery("");
    toast.info("Filters reset to default");
  };

  const handleSelectStudentForNotice = (d: DefaulterStudent) => {
    setNoticeForm({
      rollNumber: d.nchmRollNumber,
      studentName: d.name,
      channel: "SMS & Email to Guardian",
      warningTier:
        d.tier === "SHORTAGE"
          ? "Critical Severe Shortage Notice (< 65%)"
          : "Statutory Shortage Warning Notice (65-75%)",
      customMessage: `Dear ${d.guardianName}, your ward ${d.name} has recorded ${d.percentage}% attendance (${d.totalAttendedHours}/${d.totalConductedHours}h). ${d.hoursNeededFor75}h deficit must be recovered before exam debarment.`,
    });
  };

  const handleSendNotice = (e: React.FormEvent) => {
    e.preventDefault();
    setDefaulters((prev) =>
      prev.map((d) =>
        d.nchmRollNumber === noticeForm.rollNumber
          ? { ...d, warningSentAt: new Date().toISOString().split("T")[0] }
          : d
      )
    );
    toast.success(`Formal shortage notice dispatched to ${noticeForm.studentName}`);
  };

  const getTierBadge = (tier: string) => {
    switch (tier) {
      case "SHORTAGE":
        return "bg-[#FEE2E2] text-[#DC2626] border-[#FECACA]";
      case "CRITICAL":
        return "bg-[#FEF3C7] text-[#B45309] border-[#FDE68A]";
      case "WARNING":
        return "bg-[#FEF9C3] text-[#A16207] border-[#FEF08A]";
      default:
        return "bg-slate-100 text-slate-700 border-slate-200";
    }
  };

  return (
    <div className="space-y-6 pb-12 font-sans bg-[#F8FAFC] min-h-screen">
      {/* 1. Header Bar */}
      <div>
        <div className="flex items-center gap-2 text-xs text-[#64748B] mb-2 font-medium">
          <Link href="/admin/dashboard" className="hover:text-[#1769E8] transition-colors">
            Home
          </Link>
          <span>&gt;</span>
          <Link href="/admin/reports/monthly-matrix" className="hover:text-[#1769E8] transition-colors">
            Attendance Reports
          </Link>
          <span>&gt;</span>
          <span className="text-[#071A4D] font-semibold">Defaulters List</span>
        </div>

        <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
          <div>
            <h1 className="text-3xl font-bold font-heading text-[#071A4D] tracking-tight">
              Attendance Defaulters
            </h1>
            <p className="text-[15px] text-[#64748B] mt-1 font-normal">
              Identify students at risk of falling below the statutory 75% threshold, calculate shortfall hours, and issue formal notices.
            </p>
          </div>

          <div className="flex items-center gap-3">
            <button
              onClick={() => toast.success("Exporting defaulters roster to Excel...")}
              className="px-4 py-2 bg-white border border-[#E2E8F0] rounded-lg text-sm font-medium text-[#334155] hover:bg-slate-50 transition-colors flex items-center gap-2 shadow-xs cursor-pointer"
            >
              <FileSpreadsheet className="w-4 h-4 text-emerald-600" />
              <span>Export</span>
            </button>
            <button
              onClick={() => toast.info("Generating NCHMCT debarment list report...")}
              className="px-4 py-2 bg-white border border-[#E2E8F0] rounded-lg text-sm font-medium text-[#334155] hover:bg-slate-50 transition-colors flex items-center gap-2 shadow-xs cursor-pointer"
            >
              <FileText className="w-4 h-4 text-purple-600" />
              <span>Generate Report</span>
            </button>
            <button
              onClick={() => {
                toast.success("Broadcasted warning notifications to all eligible student guardians.");
              }}
              className="px-5 py-2.5 bg-[#1769E8] hover:bg-[#1255be] text-white rounded-lg text-sm font-semibold transition-colors flex items-center gap-2 shadow-sm cursor-pointer"
            >
              <Send className="w-4 h-4" />
              <span>Dispatch Batch Notice</span>
            </button>
          </div>
        </div>
      </div>

      {/* 2. Filter Bar */}
      <div className="bg-white rounded-xl border border-[#E5EAF0] shadow-xs p-4">
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-12 gap-3.5 items-end">
          <div className="lg:col-span-3">
            <label className="block text-[11px] font-semibold text-[#64748B] uppercase tracking-wider mb-1.5">
              Risk Tier
            </label>
            <select
              value={filterTier}
              onChange={(e) => setFilterTier(e.target.value)}
              className="w-full bg-white border border-[#E2E8F0] text-sm text-[#0F172A] rounded-lg px-3 py-2 font-medium focus:ring-2 focus:ring-[#1769E8]/20 focus:border-[#1769E8] outline-none transition-all cursor-pointer"
            >
              <option>All Tiers</option>
              <option value="SHORTAGE">Severe Shortage (&lt; 65%)</option>
              <option value="CRITICAL">Critical Tier (65% - 70%)</option>
              <option value="WARNING">Warning Tier (70% - 75%)</option>
            </select>
          </div>

          <div className="lg:col-span-3">
            <label className="block text-[11px] font-semibold text-[#64748B] uppercase tracking-wider mb-1.5">
              Semester
            </label>
            <select
              value={selectedSemester}
              onChange={(e) => setSelectedSemester(e.target.value)}
              className="w-full bg-white border border-[#E2E8F0] text-sm text-[#0F172A] rounded-lg px-3 py-2 font-medium focus:ring-2 focus:ring-[#1769E8]/20 focus:border-[#1769E8] outline-none transition-all cursor-pointer"
            >
              <option>All Semesters</option>
              <option>Semester I</option>
              <option>Semester III</option>
              <option>Semester V</option>
            </select>
          </div>

          <div className="lg:col-span-4">
            <label className="block text-[11px] font-semibold text-[#64748B] uppercase tracking-wider mb-1.5">
              Search
            </label>
            <div className="relative">
              <Search className="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-[#94A3B8]" />
              <input
                type="text"
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                placeholder="Search by student name, roll number, guardian..."
                className="w-full pl-9 pr-3 py-2 bg-white border border-[#E2E8F0] text-sm text-[#0F172A] placeholder:text-[#94A3B8] rounded-lg focus:ring-2 focus:ring-[#1769E8]/20 focus:border-[#1769E8] outline-none transition-all"
              />
            </div>
          </div>

          <div className="lg:col-span-2 flex items-center gap-2">
            <button
              onClick={() => toast.success(`Found ${filteredDefaulters.length} students`)}
              className="flex-1 bg-[#1769E8] hover:bg-[#1255be] text-white py-2 rounded-lg text-sm font-semibold transition-colors flex items-center justify-center gap-1.5 shadow-xs cursor-pointer"
            >
              <Search className="w-4 h-4" />
              <span>Search</span>
            </button>
            <button
              onClick={handleResetFilters}
              className="border border-[#E2E8F0] hover:bg-slate-50 text-[#64748B] p-2 rounded-lg text-sm font-medium transition-colors flex items-center justify-center cursor-pointer"
              title="Reset Filters"
            >
              <RotateCcw className="w-4 h-4" />
            </button>
          </div>
        </div>
      </div>

      {/* 3. Main Split Layout */}
      <div className="grid grid-cols-1 lg:grid-cols-12 gap-6 items-start">
        {/* Left (8 cols): Table */}
        <div className="lg:col-span-8 bg-white rounded-xl border border-[#E5EAF0] shadow-xs overflow-hidden">
          <div className="p-4 border-b border-[#E5EAF0] flex items-center justify-between">
            <div className="flex items-center gap-2.5">
              <AlertTriangle className="w-5 h-5 text-amber-500" />
              <h2 className="font-heading font-bold text-lg text-[#071A4D]">
                Students Below Statutory 75% ({filteredDefaulters.length})
              </h2>
            </div>
            <div className="flex items-center gap-2">
              <select
                value={pageSize}
                onChange={(e) => setPageSize(e.target.value)}
                className="text-xs bg-white border border-[#E2E8F0] rounded-lg px-2.5 py-1.5 font-medium text-[#475569] outline-none cursor-pointer"
              >
                <option value="10">10 per page</option>
                <option value="25">25 per page</option>
              </select>
            </div>
          </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-3 px-3.5 w-10 text-center">
                    <input
                      type="checkbox"
                      checked={
                        selectedRows.length === filteredDefaulters.length &&
                        filteredDefaulters.length > 0
                      }
                      onChange={handleSelectAll}
                      className="rounded border-[#CBD5E1] text-[#1769E8] focus:ring-0 cursor-pointer"
                    />
                  </th>
                  <th className="py-3 px-2 w-8 text-center text-[#64748B]">#</th>
                  <th className="py-3 px-3.5 font-bold text-[#071A4D]">Roll No</th>
                  <th className="py-3 px-3.5 font-bold text-[#071A4D]">Student Name</th>
                  <th className="py-3 px-3.5 font-bold text-[#071A4D]">Semester</th>
                  <th className="py-3 px-3.5 font-bold text-[#071A4D] text-center">Attendance %</th>
                  <th className="py-3 px-3.5 font-bold text-[#071A4D] text-center">Deficit Hours</th>
                  <th className="py-3 px-3.5 font-bold text-[#071A4D] text-center">Tier</th>
                  <th className="py-3 px-4 font-bold text-[#071A4D] text-right">Actions</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-[#E5EAF0]">
                {filteredDefaulters.length === 0 ? (
                  <tr>
                    <td colSpan={9} className="py-12 text-center text-slate-400">
                      No defaulters match the selected criteria.
                    </td>
                  </tr>
                ) : (
                  filteredDefaulters.map((d, idx) => (
                    <tr
                      key={d.id}
                      className={`hover:bg-[#F8FAFC] transition-colors ${
                        selectedRows.includes(d.id) ? "bg-[#EFF6FF]/40" : ""
                      }`}
                    >
                      <td className="py-3.5 px-3.5 text-center">
                        <input
                          type="checkbox"
                          checked={selectedRows.includes(d.id)}
                          onChange={() => handleRowSelect(d.id)}
                          className="rounded border-[#CBD5E1] text-[#1769E8] focus:ring-0 cursor-pointer"
                        />
                      </td>
                      <td className="py-3.5 px-2 text-center text-[#94A3B8] font-medium">
                        {idx + 1}
                      </td>
                      <td className="py-3.5 px-3.5 font-mono font-bold text-xs">
                        <span className="bg-[#F1F6FC] text-[#1769E8] px-2 py-0.5 rounded border border-[#D0E2FF]">
                          {d.nchmRollNumber}
                        </span>
                      </td>
                      <td className="py-3.5 px-3.5">
                        <div className="font-bold text-[#071A4D] text-sm">
                          {d.name}
                        </div>
                        <div className="text-[10px] text-[#64748B]">
                          Guardian: {d.guardianName} ({d.guardianMobile})
                        </div>
                      </td>
                      <td className="py-3.5 px-3.5 text-[#334155] font-medium">
                        <div>{d.semester}</div>
                        <div className="text-[10px] text-[#64748B]">{d.batch}</div>
                      </td>
                      <td className="py-3.5 px-3.5 text-center">
                        <div className="font-mono font-bold text-sm text-[#071A4D]">
                          {d.percentage.toFixed(1)}%
                        </div>
                        <div className="text-[10px] text-[#64748B] font-mono">
                          {d.totalAttendedHours}h / {d.totalConductedHours}h
                        </div>
                      </td>
                      <td className="py-3.5 px-3.5 text-center font-mono font-bold text-rose-600">
                        +{d.hoursNeededFor75.toFixed(1)}h
                      </td>
                      <td className="py-3.5 px-3.5 text-center">
                        <span
                          className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-[10px] font-bold border ${getTierBadge(
                            d.tier
                          )}`}
                        >
                          {d.tier}
                        </span>
                      </td>
                      <td className="py-3.5 px-4 text-right">
                        <div className="flex items-center justify-end gap-1.5">
                          <button
                            onClick={() => handleSelectStudentForNotice(d)}
                            className="p-1.5 text-[#1769E8] hover:bg-[#EFF6FF] rounded-md transition-colors cursor-pointer"
                            title="Draft Notice"
                          >
                            <Send className="w-3.5 h-3.5" />
                          </button>
                          <button
                            onClick={() =>
                              toast.info(`Calling guardian ${d.guardianName}: ${d.guardianMobile}`)
                            }
                            className="p-1.5 text-[#64748B] hover:text-emerald-600 hover:bg-emerald-50 rounded-md transition-colors cursor-pointer"
                            title="Call Guardian"
                          >
                            <Phone className="w-3.5 h-3.5" />
                          </button>
                        </div>
                      </td>
                    </tr>
                  ))
                )}
              </tbody>
            </table>
          </div>

          <div className="p-4 border-t border-[#E5EAF0] flex flex-col sm:flex-row items-center justify-between gap-3 text-xs text-[#64748B]">
            <div>
              Showing 1 to {filteredDefaulters.length} of {defaulters.length} defaulters
            </div>
            <div className="flex items-center gap-1">
              <button className="p-1.5 border border-[#E2E8F0] rounded-md hover:bg-slate-50 transition-colors cursor-pointer">
                <ChevronLeft className="w-3.5 h-3.5" />
              </button>
              <button className="px-3 py-1 bg-[#1769E8] text-white font-bold rounded-md text-xs">
                1
              </button>
              <button className="p-1.5 border border-[#E2E8F0] rounded-md hover:bg-slate-50 transition-colors cursor-pointer">
                <ChevronRight className="w-3.5 h-3.5" />
              </button>
            </div>
          </div>
        </div>

        {/* Right (4 cols): Dispatch Notice Form + Legend */}
        <div className="lg:col-span-4 space-y-5">
          <div className="bg-white rounded-xl border border-[#E5EAF0] shadow-xs p-5">
            <div className="flex items-center justify-between pb-3 mb-4 border-b border-[#E5EAF0]">
              <div className="flex items-center gap-2">
                <Send className="w-4 h-4 text-[#1769E8]" />
                <h3 className="font-heading font-bold text-base text-[#071A4D]">
                  Dispatch Shortage Notice
                </h3>
              </div>
            </div>

            <form onSubmit={handleSendNotice} className="space-y-4 text-xs">
              <div>
                <label className="block font-semibold text-[#334155] mb-1">
                  Recipient Student <span className="text-rose-500">*</span>
                </label>
                <input
                  type="text"
                  readOnly
                  value={`${noticeForm.studentName} (${noticeForm.rollNumber})`}
                  className="w-full px-3 py-2 border border-[#E2E8F0] bg-slate-50 rounded-lg text-sm text-[#0F172A] font-semibold outline-none"
                />
              </div>

              <div>
                <label className="block font-semibold text-[#334155] mb-1">
                  Notification Channel
                </label>
                <select
                  value={noticeForm.channel}
                  onChange={(e) =>
                    setNoticeForm({ ...noticeForm, channel: e.target.value })
                  }
                  className="w-full px-3 py-2 border border-[#E2E8F0] rounded-lg text-sm text-[#0F172A] focus:ring-2 focus:ring-[#1769E8]/20 focus:border-[#1769E8] outline-none transition-all bg-white cursor-pointer"
                >
                  <option>SMS &amp; Email to Guardian</option>
                  <option>Registered Postal Notice</option>
                  <option>Digital Portal Notification Only</option>
                </select>
              </div>

              <div>
                <label className="block font-semibold text-[#334155] mb-1">
                  Notice Tier Header
                </label>
                <input
                  type="text"
                  value={noticeForm.warningTier}
                  onChange={(e) =>
                    setNoticeForm({ ...noticeForm, warningTier: e.target.value })
                  }
                  className="w-full px-3 py-2 border border-[#E2E8F0] rounded-lg text-sm text-[#0F172A] focus:ring-2 focus:ring-[#1769E8]/20 focus:border-[#1769E8] outline-none transition-all"
                />
              </div>

              <div>
                <label className="block font-semibold text-[#334155] mb-1">
                  Statutory Advisory Message
                </label>
                <textarea
                  rows={4}
                  value={noticeForm.customMessage}
                  onChange={(e) =>
                    setNoticeForm({ ...noticeForm, customMessage: e.target.value })
                  }
                  className="w-full px-3 py-2 border border-[#E2E8F0] rounded-lg text-sm text-[#0F172A] focus:ring-2 focus:ring-[#1769E8]/20 focus:border-[#1769E8] outline-none transition-all resize-none"
                />
              </div>

              <div className="pt-2">
                <button
                  type="submit"
                  className="w-full py-2.5 px-3 bg-[#1769E8] hover:bg-[#1255be] text-white rounded-lg text-xs font-semibold transition-colors flex items-center justify-center gap-1.5 shadow-xs cursor-pointer"
                >
                  <Send className="w-3.5 h-3.5" />
                  <span>Transmit Notice to Guardian</span>
                </button>
              </div>
            </form>
          </div>

          {/* Statutory Tiers Legend Card */}
          <div className="bg-white rounded-xl border border-[#E5EAF0] shadow-xs p-4 text-xs">
            <div className="flex items-center gap-2 font-bold text-[#071A4D] mb-2.5 pb-2 border-b border-[#E5EAF0]">
              <Sparkles className="w-4 h-4 text-amber-500" />
              <span>NCHMCT Attendance Shortage Tiers</span>
            </div>
            <div className="space-y-2 text-[#475569]">
              <div className="flex items-center justify-between">
                <span className="font-medium text-emerald-700">Safe Cohort (&ge; 75%)</span>
                <span className="font-mono font-bold text-emerald-700">Admit Card Issued</span>
              </div>
              <div className="flex items-center justify-between">
                <span className="font-medium text-amber-700">Warning Tier (70% - 75%)</span>
                <span className="font-mono font-bold text-amber-700">Formal Warning</span>
              </div>
              <div className="flex items-center justify-between">
                <span className="font-medium text-orange-700">Critical Tier (65% - 70%)</span>
                <span className="font-mono font-bold text-orange-700">Condonation Required</span>
              </div>
              <div className="flex items-center justify-between">
                <span className="font-medium text-rose-700">Shortage Tier (&lt; 65%)</span>
                <span className="font-mono font-bold text-rose-700">Debarred from Exams</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}