"use client";

import React, { useState } from "react";
import Link from "next/link";
import {
  Award,
  Send,
  Printer,
  ShieldCheck,
  CheckCircle2,
  BadgeCheck,
  RefreshCw,
  Clock,
  Layers,
  BookOpen,
  Users,
  FileSpreadsheet,
  Download,
} from "lucide-react";
import { toast } from "sonner";

export default function FacultyAprPage() {
  const [aprSubmitted, setAprSubmitted] = useState(false);
  const [showSubmitModal, setShowSubmitModal] = useState(false);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [refId, setRefId] = useState<string | null>(null);

  const handleSubmit = () => {
    setIsSubmitting(true);
    setTimeout(() => {
      setIsSubmitting(false);
      setAprSubmitted(true);
      setShowSubmitModal(false);
      const generated = `APR-2026-10-FAC101-${Math.floor(1000 + Math.random() * 9000)}`;
      setRefId(generated);
      toast.success("October APR successfully submitted to HOD & Academic Cell for digital sign-off!");
    }, 1200);
  };

  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">Generate &amp; Submit APR</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">
                Academic Performance Register (APR)
              </h1>
              <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-bold bg-purple-50 text-purple-700 border border-purple-200">
                Form NCHMCT/APR-4
              </span>
            </div>
            <p className="text-[14px] text-[#64748B] mt-1 font-normal">
              Official monthly instructional record submitted by faculty to HOD and Academic Cell.
            </p>
          </div>

          <div className="flex items-center gap-2.5">
            <button
              onClick={() => toast.success("Printing official Form APR-4 report preview...")}
              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 APR Form</span>
            </button>
            {aprSubmitted ? (
              <span className="px-4 py-2 rounded-lg bg-emerald-50 text-emerald-800 border border-emerald-200 text-xs font-bold flex items-center gap-1.5">
                <BadgeCheck className="w-4 h-4 text-emerald-600" />
                <span>Submitted ({refId})</span>
              </span>
            ) : (
              <button
                onClick={() => setShowSubmitModal(true)}
                className="px-4 py-2 bg-purple-700 hover:bg-purple-800 text-white rounded-lg text-xs font-semibold flex items-center gap-1.5 shadow-xs transition-colors"
              >
                <Send className="w-3.5 h-3.5" />
                <span>Submit October APR to HOD</span>
              </button>
            )}
          </div>
        </div>
      </div>

      {/* 2. Main APR Ledger Card */}
      <div className="bg-white rounded-xl border border-purple-200 shadow-xs overflow-hidden">
        <div className="p-5 border-b border-purple-100 bg-purple-50/40 flex flex-col sm:flex-row sm:items-center justify-between gap-3">
          <div>
            <h2 className="font-heading font-bold text-lg text-[#071A4D]">
              Monthly APR Statement: October 2026
            </h2>
            <p className="text-xs text-[#64748B] mt-0.5">
              Faculty: Chef Rajesh Sharma (FAC-101) • Department of Food Production &amp; Culinary Arts
            </p>
          </div>
          <div className="text-right">
            <span className="font-mono font-bold text-xs text-purple-700 block">
              {aprSubmitted ? `Submission Reference: ${refId}` : "Status: Draft Pending HOD Submission"}
            </span>
            <span className="text-[10px] text-slate-400">Institutional Review Cycle: Autumn 2026</span>
          </div>
        </div>

        <div className="p-5 space-y-6">
          {/* Key Metric Blocks */}
          <div className="grid grid-cols-2 sm:grid-cols-4 gap-3.5 text-xs">
            <div className="p-3.5 rounded-xl bg-slate-50 border border-slate-200">
              <span className="text-slate-500 block mb-1">Prescribed Load</span>
              <span className="text-xl font-bold text-[#071A4D] font-mono">18 / 18 Hours</span>
              <span className="text-[10px] text-emerald-600 font-semibold block mt-1">100% Target Delivered</span>
            </div>
            <div className="p-3.5 rounded-xl bg-slate-50 border border-slate-200">
              <span className="text-slate-500 block mb-1">Classes Conducted</span>
              <span className="text-xl font-bold text-[#071A4D] font-mono">32 Sessions</span>
              <span className="text-[10px] text-emerald-600 font-semibold block mt-1">0 Cancellations / Substitutions</span>
            </div>
            <div className="p-3.5 rounded-xl bg-slate-50 border border-slate-200">
              <span className="text-slate-500 block mb-1">Contact Hours</span>
              <span className="text-xl font-bold text-[#071A4D] font-mono">74.0 Hours</span>
              <span className="text-[10px] text-blue-600 font-semibold block mt-1">Kitchen Lab &amp; Lecture Halls</span>
            </div>
            <div className="p-3.5 rounded-xl bg-slate-50 border border-slate-200">
              <span className="text-slate-500 block mb-1">Average Attendance</span>
              <span className="text-xl font-bold text-[#071A4D] font-mono">91.8%</span>
              <span className="text-[10px] text-emerald-600 font-semibold block mt-1">NCHMCT Norms Compliant</span>
            </div>
          </div>

          {/* Breakdown Table by Subject */}
          <div className="border border-slate-200 rounded-xl overflow-hidden">
            <div className="p-3 bg-slate-50 border-b border-slate-200 font-bold text-xs text-[#071A4D]">
              Course-Wise Teaching Delivery Summary
            </div>
            <div className="overflow-x-auto">
              <table className="w-full text-left text-xs border-collapse min-w-[650px]">
              <thead>
                <tr className="bg-slate-50/50 border-b border-slate-200 text-slate-500 font-semibold">
                  <th className="py-2.5 px-3">Subject Code &amp; Name</th>
                  <th className="py-2.5 px-3">Type</th>
                  <th className="py-2.5 px-3 text-center">Periods Conducted</th>
                  <th className="py-2.5 px-3 text-center">Contact Hours</th>
                  <th className="py-2.5 px-3 text-center">Avg Attendance</th>
                  <th className="py-2.5 px-3 text-center">Syllabus Status</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-slate-100">
                <tr>
                  <td className="py-3 px-3 font-semibold text-[#071A4D]">
                    BHM201 — Food Production Operations Practical
                  </td>
                  <td className="py-3 px-3">
                    <span className="px-2 py-0.5 rounded text-[10px] font-bold bg-amber-50 text-amber-700">Practical</span>
                  </td>
                  <td className="py-3 px-3 text-center font-mono font-bold">9 Sessions</td>
                  <td className="py-3 px-3 text-center font-mono font-bold">36.0 hrs</td>
                  <td className="py-3 px-3 text-center font-mono font-bold text-emerald-600">92.4%</td>
                  <td className="py-3 px-3 text-center font-semibold text-emerald-600">Unit 1 &amp; 2 Complete (60%)</td>
                </tr>
                <tr>
                  <td className="py-3 px-3 font-semibold text-[#071A4D]">
                    BHM202 — Food &amp; Beverage Service Theory
                  </td>
                  <td className="py-3 px-3">
                    <span className="px-2 py-0.5 rounded text-[10px] font-bold bg-blue-50 text-blue-700">Theory</span>
                  </td>
                  <td className="py-3 px-3 text-center font-mono font-bold">18 Sessions</td>
                  <td className="py-3 px-3 text-center font-mono font-bold">18.0 hrs</td>
                  <td className="py-3 px-3 text-center font-mono font-bold text-emerald-600">88.5%</td>
                  <td className="py-3 px-3 text-center font-semibold text-emerald-600">Unit 1 to 3 Complete (60%)</td>
                </tr>
                <tr>
                  <td className="py-3 px-3 font-semibold text-[#071A4D]">
                    BHM203 — Bakery &amp; Confectionery Practical
                  </td>
                  <td className="py-3 px-3">
                    <span className="px-2 py-0.5 rounded text-[10px] font-bold bg-amber-50 text-amber-700">Practical</span>
                  </td>
                  <td className="py-3 px-3 text-center font-mono font-bold">5 Sessions</td>
                  <td className="py-3 px-3 text-center font-mono font-bold">20.0 hrs</td>
                  <td className="py-3 px-3 text-center font-mono font-bold text-emerald-600">94.1%</td>
                  <td className="py-3 px-3 text-center font-semibold text-emerald-600">Unit 1 &amp; 2 Complete (50%)</td>
                </tr>
              </tbody>
            </table>
            </div>
          </div>

          {/* Declaration Box */}
          <div className="p-4 rounded-xl bg-purple-50/50 border border-purple-100 text-xs text-purple-950 space-y-2">
            <div className="flex items-center gap-2 font-bold text-purple-900">
              <ShieldCheck className="w-4 h-4 text-purple-700" />
              <span>Official Certification &amp; Digital Declaration:</span>
            </div>
            <p className="text-slate-600 italic leading-relaxed">
              &ldquo;I hereby certify that all 32 lecture and practical periods recorded in this register were conducted strictly in compliance with NCHMCT syllabus standards, and student biometric records have been duly scrutinized.&rdquo;
            </p>
          </div>
        </div>
      </div>

      {/* 3. Submit Modal */}
      {showSubmitModal && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-2xs p-4">
          <div className="bg-white rounded-2xl border border-purple-200 shadow-xl w-full max-w-lg p-6 space-y-4 animate-in fade-in zoom-in-95 duration-150">
            <div className="flex items-center gap-3">
              <div className="w-10 h-10 rounded-full bg-purple-50 border border-purple-200 text-purple-700 flex items-center justify-center shrink-0">
                <Award className="w-5 h-5" />
              </div>
              <div>
                <h3 className="font-heading font-bold text-base text-[#071A4D]">
                  Submit Academic Performance Register (APR)
                </h3>
                <p className="text-xs text-slate-500">
                  Month of October 2026 • Form NCHMCT/APR-4
                </p>
              </div>
            </div>

            <div className="p-3 bg-purple-50/60 rounded-xl border border-purple-100 text-xs text-purple-950 space-y-2">
              <p className="font-bold">Faculty Declaration &amp; Certification:</p>
              <p className="text-slate-600 leading-relaxed italic">
                &ldquo;I hereby certify that all 32 lecture and practical periods recorded in this register were conducted strictly in compliance with NCHMCT syllabus standards, and student biometric records have been duly scrutinized.&rdquo;
              </p>
              <div className="pt-2 border-t border-purple-200/60 flex items-center justify-between font-mono font-bold text-[11px] text-purple-900">
                <span>Total Workload: 18h/week</span>
                <span>Contact Hours: 74.0h</span>
                <span>Avg Attendance: 91.8%</span>
              </div>
            </div>

            <div className="flex items-center justify-end gap-2 pt-2">
              <button
                onClick={() => setShowSubmitModal(false)}
                disabled={isSubmitting}
                className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg text-xs font-semibold hover:bg-slate-50 transition-colors"
              >
                Cancel
              </button>
              <button
                onClick={handleSubmit}
                disabled={isSubmitting}
                className="px-5 py-2 bg-purple-700 hover:bg-purple-800 text-white rounded-lg text-xs font-semibold transition-colors flex items-center gap-1.5 shadow-2xs"
              >
                {isSubmitting ? (
                  <>
                    <RefreshCw className="w-3.5 h-3.5 animate-spin" />
                    <span>Submitting to HOD...</span>
                  </>
                ) : (
                  <>
                    <Send className="w-3.5 h-3.5" />
                    <span>Certify &amp; Submit APR</span>
                  </>
                )}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}