"use client";

import React, { useState } from "react";
import Link from "next/link";
import {
  PieChart,
  BookOpen,
  CalendarDays,
  HeartPulse,
  Bell,
  FileSpreadsheet,
  CheckCircle2,
  AlertTriangle,
  Award,
  Clock,
  ArrowRight,
  ShieldCheck,
  FileText,
  MapPin,
  Sparkles,
  BarChart3,
  Download,
  Check,
  Calculator,
  HelpCircle,
  X,
  Info,
  Pin,
  ExternalLink,
} from "lucide-react";
import { toast } from "sonner";

export default function StudentDashboardPage() {
  const [showFormulaModal, setShowFormulaModal] = useState(false);
  const [showCondonationModal, setShowCondonationModal] = useState(false);
  const [selectedNotice, setSelectedNotice] = useState<any | null>(null);
  const [noticeCategoryFilter, setNoticeCategoryFilter] = useState<string>("ALL");
  const subjects = [
    {
      code: "BHM201",
      name: "Food Production Operations Practical",
      faculty: "Chef Rajesh Sharma",
      venue: "Basic Training Kitchen B",
      attended: 36,
      conducted: 39,
      pct: 92.3,
      theoryPct: 90.0,
      practicalPct: 93.1,
      status: "SAFE",
    },
    {
      code: "BHM202",
      name: "Food & Beverage Service Theory & Ops",
      faculty: "Prof. Amit Roy",
      venue: "Lecture Hall 101",
      attended: 28,
      conducted: 32,
      pct: 87.5,
      theoryPct: 87.5,
      practicalPct: 87.5,
      status: "SAFE",
    },
    {
      code: "BHM203",
      name: "Front Office Operations",
      faculty: "Prof. Sunita Das",
      venue: "Smart Lecture Hall 204",
      attended: 24,
      conducted: 28,
      pct: 85.7,
      theoryPct: 85.7,
      practicalPct: 85.7,
      status: "SAFE",
    },
    {
      code: "BHM204",
      name: "Accommodation Operations Practical",
      faculty: "Prof. David Miller",
      venue: "Housekeeping Training Lab",
      attended: 25,
      conducted: 28,
      pct: 89.3,
      theoryPct: 88.0,
      practicalPct: 90.0,
      status: "SAFE",
    },
  ];

  const recentPunches = [
    { date: "13-Oct-2026 (Today)", time: "08:54 AM", code: "BHM201", subject: "Food Production Practical", venue: "Kitchen B Turnstile", status: "PRESENT", statusCode: "P", units: "4.0 Units" },
    { date: "12-Oct-2026", time: "08:56 AM", code: "BHM201", subject: "Food Production Practical", venue: "Kitchen B Turnstile", status: "PRESENT", statusCode: "P", units: "4.0 Units" },
    { date: "11-Oct-2026", time: "01:52 PM", code: "BHM202", subject: "Food & Beverage Service", venue: "Lecture Hall 101 Pod", status: "PRESENT", statusCode: "P", units: "1.0 Unit" },
    { date: "08-Oct-2026", time: "09:00 AM", code: "BHM203", subject: "Front Office Institutional Duty", venue: "Campus Admission Cell", status: "CONDONATION", statusCode: "C", units: "2.0 Units" },
    { date: "02-Oct-2026", time: "All Day", code: "HOLIDAY", subject: "Gandhi Jayanti (Gazetted Holiday)", venue: "Institute Campus", status: "HOLIDAY", statusCode: "H", units: "Exempted" },
  ];

  const recentNotices = [
    {
      id: "not-1",
      title: "NCHMCT Mid-Term Attendance Condonation Submission Deadline",
      refNo: "IHMK/ACAD/2026/NOT-108",
      category: "STATUTORY",
      authority: "Office of the Principal & Academic Affairs",
      date: "05-Oct-2026",
      urgent: true,
      deadline: "Cutoff: 15-Oct-2026 (17:00 IST)",
      desc: "All students in the warning tier (65%–74.9%) must submit certified medical fitness records and institutional duty representations.",
      fullContent:
        "Pursuant to NCHMCT Examination Regulations (Bylaw Rule 18), all enrolled undergraduate and diploma students whose cumulative contact-hour attendance currently falls between 65.0% and 74.9% are hereby notified to submit their formal condonation petitions along with registered medical certificates (or institutional event duty deputation orders) to the Academic Cell by no later than 15-Oct-2026, 17:00 IST. Submissions received after the cutoff will not be processed, resulting in automatic detainment from end-semester term exams.",
    },
    {
      id: "not-2",
      title: "Dussehra & Autumn Term Break Calendar Notification",
      refNo: "IHMK/ADMIN/2026/HOL-042",
      category: "HOLIDAY",
      authority: "Registrar & Administrative Directorate",
      date: "02-Oct-2026",
      urgent: false,
      deadline: "Recess: 09-Oct to 18-Oct-2026",
      desc: "Institute closed for Autumn Break. All scheduled practical and theory sessions are marked as Holiday (H) with zero shortage penalty.",
      fullContent:
        "The Institute of Hotel Management, Kolkata will observe the official Autumn / Durga Puja Vacation from 09-Oct-2026 through 18-Oct-2026. Regular classes will resume on Monday, 21-Oct-2026. All academic lecture periods and kitchen practicals falling within this duration are gazetted with the status code 'H' (Holiday) on the institutional attendance server and are strictly excluded from the student attendance denominator.",
    },
    {
      id: "not-3",
      title: "Semester III Practical Culinary Chef Uniform & Grooming Audit",
      refNo: "IHMK/FP/2026/OPS-019",
      category: "OPERATIONS",
      authority: "Department of Food Production & Culinary Arts",
      date: "28-Sep-2026",
      urgent: false,
      deadline: "Enforced for all BTK sessions",
      desc: "Mandatory double-breasted chef jackets, safety boots, and professional knives for all kitchen practicals.",
      fullContent:
        "Students attending Basic Training Kitchen (BTK) and Quantity Food Kitchen (QFK) practicals must adhere to strict hygiene and NCHMCT commercial safety protocols. Students found without complete chef whites, skull caps, or safety non-slip footwear will be marked absent (A) at the turnstile gate and refused laboratory entry.",
    },
    {
      id: "not-4",
      title: "NCHMCT Final Semester Admit Card Eligibility List Publication",
      refNo: "IHMK/EXAM/2026/PUB-007",
      category: "STATUTORY",
      authority: "Examination Committee",
      date: "22-Sep-2026",
      urgent: true,
      deadline: "Publication Date: 20-Nov-2026",
      desc: "Provisional APR clearance list will be released based on consolidated turnstile logs up to 15-Nov-2026.",
      fullContent:
        "The provisional Attendance Progress Report (APR) for the release of NCHMCT End-Semester Admit Cards will be compiled and frozen on 15-Nov-2026. Students maintaining contact-hour attendance >=75.0% will have their clearance slips digitally issued on this portal.",
    },
  ];

  return (
    <div className="space-y-6 pb-14 font-sans bg-[#F8FAFC]">
      {/* 1. Header Bar */}
      <div>
        <div className="flex items-center gap-2 text-xs text-[#64748B] mb-2 font-medium">
          <Link href="/student/dashboard" className="hover:text-[#1769E8] transition-colors">
            Student Console
          </Link>
          <span>&gt;</span>
          <span className="text-[#071A4D] font-semibold">Student Dashboard</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-2xl sm:text-3xl font-bold font-heading text-[#071A4D] tracking-tight">
                Welcome back, Aaron Smith
              </h1>
              <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-bold bg-[#DCFCE7] text-[#15803D] border border-[#BBF7D0]">
                Exam Eligible (≥75%)
              </span>
            </div>
            <p className="text-[13px] text-[#64748B] mt-1 font-normal">
              Roll No: <strong>2441112001</strong> • B.Sc. Hospitality &amp; Hotel Administration • Semester III (Batch B1) • Session: <strong>AY-2024-25-ODD</strong>
            </p>
          </div>

          <div className="flex items-center gap-2.5">
            <Link
              href="/student/adjustments/medical"
              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"
            >
              <HeartPulse className="w-3.5 h-3.5 text-rose-500" />
              <span>Submit Medical Slip</span>
            </Link>
            <Link
              href="/student/reports"
              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>Download Slip</span>
            </Link>
          </div>
        </div>
      </div>

      {/* 2. Top Academic Metric Cards (5 Cards) */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-3.5">
        {/* Card 1: Overall Attendance */}
        <Link
          href="/student/attendance/overall"
          className="bg-white rounded-xl border border-[#E5EAF0] p-4 shadow-xs hover:border-[#1769E8]/50 transition-all flex items-center justify-between"
        >
          <div>
            <span className="text-[11px] font-bold text-[#64748B] uppercase tracking-wider block">
              Overall Attendance
            </span>
            <div className="text-2xl font-bold font-heading text-emerald-600 mt-0.5 font-mono">
              88.7%
            </div>
            <span className="text-[11px] text-emerald-700 font-semibold mt-0.5 block">
              Safe (&ge;75% NCHMCT)
            </span>
          </div>
          <div className="w-10 h-10 rounded-xl bg-emerald-50 text-emerald-600 flex items-center justify-center shrink-0 border border-emerald-100">
            <PieChart className="w-5 h-5" />
          </div>
        </Link>

        {/* Card 2: Theory Attendance */}
        <Link
          href="/student/attendance/theory"
          className="bg-white rounded-xl border border-[#E5EAF0] p-4 shadow-xs hover:border-[#1769E8]/50 transition-all flex items-center justify-between"
        >
          <div>
            <span className="text-[11px] font-bold text-[#64748B] uppercase tracking-wider block">
              Theory Attendance
            </span>
            <div className="text-2xl font-bold font-heading text-[#071A4D] mt-0.5 font-mono">
              86.2%
            </div>
            <span className="text-[11px] text-blue-600 font-semibold mt-0.5 block">
              25 / 29 Lectures Held
            </span>
          </div>
          <div className="w-10 h-10 rounded-xl bg-blue-50 text-[#1769E8] flex items-center justify-center shrink-0 border border-blue-100">
            <FileText className="w-5 h-5" />
          </div>
        </Link>

        {/* Card 3: Practical Attendance */}
        <Link
          href="/student/attendance/practical"
          className="bg-white rounded-xl border border-[#E5EAF0] p-4 shadow-xs hover:border-[#1769E8]/50 transition-all flex items-center justify-between"
        >
          <div>
            <span className="text-[11px] font-bold text-[#64748B] uppercase tracking-wider block">
              Practical Attendance
            </span>
            <div className="text-2xl font-bold font-heading text-amber-700 mt-0.5 font-mono">
              90.0%
            </div>
            <span className="text-[11px] text-amber-600 font-semibold mt-0.5 block">
              36 / 40 Kitchen Units
            </span>
          </div>
          <div className="w-10 h-10 rounded-xl bg-amber-50 text-amber-600 flex items-center justify-center shrink-0 border border-amber-100">
            <Award className="w-5 h-5" />
          </div>
        </Link>

        {/* Card 4: Medical / Condonation Applied */}
        <Link
          href="/student/adjustments/medical"
          className="bg-white rounded-xl border border-[#E5EAF0] p-4 shadow-xs hover:border-[#1769E8]/50 transition-all flex items-center justify-between"
        >
          <div>
            <span className="text-[11px] font-bold text-[#64748B] uppercase tracking-wider block">
              Sanctioned Leave
            </span>
            <div className="text-2xl font-bold font-heading text-[#071A4D] mt-0.5 font-mono">
              +4.0 hrs
            </div>
            <span className="text-[11px] text-purple-600 font-semibold mt-0.5 block">
              Medical Leave Approved
            </span>
          </div>
          <div className="w-10 h-10 rounded-xl bg-purple-50 text-purple-600 flex items-center justify-center shrink-0 border border-purple-100">
            <HeartPulse className="w-5 h-5" />
          </div>
        </Link>

        {/* Card 5: Exam Eligibility */}
        <div className="bg-white rounded-xl border border-[#E5EAF0] p-4 shadow-xs flex items-center justify-between">
          <div>
            <span className="text-[11px] font-bold text-[#64748B] uppercase tracking-wider block">
              Admit Card Status
            </span>
            <div className="text-sm font-bold font-heading text-emerald-600 mt-1 flex items-center gap-1">
              <Check className="w-4 h-4 text-emerald-600" /> Cleared
            </div>
            <span className="text-[11px] text-slate-500 font-semibold mt-0.5 block">
              No Detainment Warning
            </span>
          </div>
          <div className="w-10 h-10 rounded-xl bg-emerald-50 text-emerald-600 flex items-center justify-center shrink-0 border border-emerald-100">
            <ShieldCheck className="w-5 h-5" />
          </div>
        </div>
      </div>

      {/* 2.5 NCHMCT Attendance Engine Formula & 3-Tier Compliance Scale (Matching IHM_UI_Design_Style.md §9 & §11) */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
        {/* Contact Hours Formula Card */}
        <div className="lg:col-span-2 bg-white rounded-xl border border-[#E5EAF0] p-5 shadow-xs space-y-4">
          <div className="flex flex-col sm:flex-row sm:items-center justify-between pb-3 border-b border-slate-100 gap-2">
            <div className="flex items-center gap-2">
              <div className="p-1.5 rounded-lg bg-[#C8A45D]/15 text-[#99732B]">
                <Calculator className="w-4 h-4 text-[#C8A45D]" />
              </div>
              <div>
                <h2 className="font-heading font-bold text-sm text-[#071A4D]">
                  NCHMCT Contact-Hours Calculation Engine
                </h2>
                <span className="text-[11px] text-slate-500">
                  Institutional Attendance Formula (Clause §9)
                </span>
              </div>
            </div>

            <button
              onClick={() => setShowFormulaModal(true)}
              className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-slate-100 hover:bg-slate-200 text-slate-700 text-xs font-bold transition-colors w-fit"
            >
              <HelpCircle className="w-3.5 h-3.5 text-[#1769E8]" />
              <span>How This Is Computed?</span>
            </button>
          </div>

          {/* Mathematical Fraction Equation Visualizer */}
          <div className="p-3.5 rounded-xl bg-gradient-to-r from-slate-50 via-amber-50/40 to-blue-50/40 border border-slate-200 text-center">
            <div className="inline-flex items-center gap-3 text-xs sm:text-sm font-semibold text-slate-800">
              <span className="font-bold text-[#071A4D]">Attendance % = </span>
              <div className="flex flex-col items-center">
                <span className="border-b-2 border-slate-700 px-2 pb-0.5 font-mono text-[11px] sm:text-xs">
                  <span className="text-emerald-700 font-bold">127.0h (P)</span> +{" "}
                  <span className="text-amber-700 font-bold">0.0h (C)</span> +{" "}
                  <span className="text-purple-700 font-bold">4.0h (Med)</span>
                </span>
                <span className="pt-0.5 font-mono text-[11px] sm:text-xs text-[#071A4D] font-bold">
                  148.0h Total Conducted
                </span>
              </div>
              <span className="font-mono font-bold text-[#071A4D]">× 100 = </span>
              <span className="text-lg sm:text-xl font-mono font-black text-emerald-700 bg-emerald-100 px-2.5 py-0.5 rounded-lg border border-emerald-300">
                88.7%
              </span>
            </div>
          </div>

          {/* 5 Real-Time Metric Chips */}
          <div className="grid grid-cols-2 sm:grid-cols-5 gap-2.5 text-center">
            <div className="p-2.5 rounded-lg bg-slate-50 border border-slate-200">
              <span className="text-[10px] text-slate-400 uppercase font-semibold block">Total Conducted</span>
              <span className="text-base font-bold text-[#071A4D] font-mono">148.0 hrs</span>
              <span className="text-[9px] text-slate-400 block mt-0.5">48h Th + 100h Pr</span>
            </div>
            <div className="p-2.5 rounded-lg bg-emerald-50 border border-emerald-200">
              <span className="text-[10px] text-emerald-700 uppercase font-semibold block">Present (P)</span>
              <span className="text-base font-bold text-emerald-700 font-mono">127.0 hrs</span>
              <span className="text-[9px] text-emerald-600 font-medium block mt-0.5">Biometric verified</span>
            </div>
            <div className="p-2.5 rounded-lg bg-purple-50 border border-purple-200">
              <span className="text-[10px] text-purple-700 uppercase font-semibold block">Approved Med</span>
              <span className="text-base font-bold text-purple-700 font-mono">+4.0 hrs</span>
              <span className="text-[9px] text-purple-600 font-medium block mt-0.5">Hospital sanctioned</span>
            </div>
            <div className="p-2.5 rounded-lg bg-amber-50 border border-amber-200">
              <span className="text-[10px] text-amber-700 uppercase font-semibold block">Condonation (C)</span>
              <span className="text-base font-bold text-amber-700 font-mono">0.0 hrs</span>
              <span className="text-[9px] text-amber-600 font-medium block mt-0.5">Campus event duty</span>
            </div>
            <div className="p-2.5 rounded-lg bg-blue-50 border border-blue-200">
              <span className="text-[10px] text-blue-700 uppercase font-semibold block">Holiday (H)</span>
              <span className="text-base font-bold text-blue-700 font-mono">16.0 hrs</span>
              <span className="text-[9px] text-blue-600 font-medium block mt-0.5">Zero penalty</span>
            </div>
          </div>

          {/* Theory vs Practical Breakdown Sub-Bar */}
          <div className="pt-2 border-t border-slate-100 flex flex-col sm:flex-row sm:items-center justify-between text-xs gap-3">
            <div className="flex items-center gap-4 text-[11px] text-slate-600">
              <span>Theory Contact: <strong>42.0h / 48.0h (87.5%)</strong></span>
              <span>•</span>
              <span>Kitchen Practical: <strong>85.0h (+4h med) / 100.0h (89.0%)</strong></span>
            </div>
            <Link
              href="/student/attendance/overall"
              className="text-xs font-bold text-[#1769E8] hover:underline shrink-0"
            >
              Full Calculation Statement →
            </Link>
          </div>
        </div>

        {/* 3-Tier Threshold Compliance Tracker (Task 3 & §11 Requirement) */}
        <div className="bg-gradient-to-br from-[#081A2E] via-[#0B2545] to-[#071A4D] text-white rounded-xl p-5 shadow-xs border border-[#1E3A5F] flex flex-col justify-between space-y-4">
          <div className="space-y-3">
            <div className="flex items-center justify-between">
              <span className="text-[10px] uppercase font-bold tracking-wider text-[#C8A45D] flex items-center gap-1.5">
                <ShieldCheck className="w-3.5 h-3.5 text-[#C8A45D]" />
                NCHMCT Statutory Compliance (§11)
              </span>
              <span className="inline-flex items-center gap-1.5 text-xs font-bold px-2.5 py-0.5 rounded-full bg-emerald-500/20 text-emerald-300 border border-emerald-500/40">
                <span className="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse" />
                Safe Tier (88.7%)
              </span>
            </div>

            <div>
              <h3 className="font-bold text-base text-white">Admit Card Standing</h3>
              <p className="text-xs text-slate-300 mt-0.5">
                Eligible for end-semester examinations without detention holds.
              </p>
            </div>

            {/* Buffer & Absence Runway Chips */}
            <div className="grid grid-cols-2 gap-2 pt-1">
              <div className="p-2.5 rounded-lg bg-white/5 border border-white/10">
                <span className="text-[10px] text-slate-400 block font-semibold uppercase">Safe Absence Buffer</span>
                <div className="flex items-baseline gap-1 mt-0.5">
                  <span className="text-sm sm:text-base font-bold text-emerald-400 font-mono">+13.7%</span>
                  <span className="text-[10px] text-slate-300">above 75%</span>
                </div>
              </div>
              <div className="p-2.5 rounded-lg bg-white/5 border border-white/10">
                <span className="text-[10px] text-slate-400 block font-semibold uppercase">Absence Runway</span>
                <div className="flex items-baseline gap-1 mt-0.5">
                  <span className="text-sm sm:text-base font-bold text-[#C8A45D] font-mono">26.8 hrs</span>
                  <span className="text-[10px] text-slate-300">permissible</span>
                </div>
              </div>
            </div>

            <p className="text-[11px] text-slate-400 leading-snug">
              You can miss up to <strong className="text-slate-200">26.8 contact hours</strong> (~6 full practical lab sessions) before entering the warning tier.
            </p>
          </div>

          {/* Visual 3-Tier Compliance Scale / Gauge with Exact Marker */}
          <div className="space-y-2 pt-2 border-t border-white/10">
            <div className="flex items-center justify-between text-[11px]">
              <span className="text-slate-400 font-medium">Compliance Scale</span>
              <span className="text-[#C8A45D] font-mono font-bold text-xs">Standing: 88.7%</span>
            </div>

            {/* The Track with 3 Colored Zones and Marker */}
            <div className="relative pt-6 pb-1">
              {/* Pin Indicator above the bar pointing to 88.7% */}
              <div
                className="absolute top-0 -translate-x-1/2 flex flex-col items-center transition-all duration-500"
                style={{ left: "88.7%" }}
              >
                <span className="px-1.5 py-0.5 rounded text-[9px] font-bold font-mono bg-emerald-500 text-slate-950 shadow-sm leading-none whitespace-nowrap">
                  88.7%
                </span>
                <span className="w-0 h-0 border-l-[3px] border-l-transparent border-r-[3px] border-r-transparent border-t-[4px] border-t-emerald-500" />
              </div>

              {/* 75% Cutoff Marker Line */}
              <div
                className="absolute top-4 bottom-0 w-0.5 bg-white/60 -translate-x-1/2 z-10 pointer-events-none"
                style={{ left: "75%" }}
              >
                <div className="absolute -top-3.5 -translate-x-1/2 text-[8px] font-bold text-amber-200 uppercase tracking-tighter whitespace-nowrap">
                  75%
                </div>
              </div>

              {/* Segmented Bar Track */}
              <div className="w-full h-3 rounded-full bg-white/10 overflow-hidden flex shadow-inner">
                {/* 0 to 65%: Critical (Debarred) */}
                <div
                  className="h-full bg-rose-500/90 relative group"
                  style={{ width: "65%" }}
                  title="<65%: Critical / Detention Tier"
                />
                {/* 65% to 75%: Warning (Condonation) */}
                <div
                  className="h-full bg-amber-400 relative group"
                  style={{ width: "10%" }}
                  title="65%-74.9%: Warning / Condonation Tier"
                />
                {/* 75% to 100%: Safe (Exam Eligible) */}
                <div
                  className="h-full bg-emerald-500 relative group"
                  style={{ width: "25%" }}
                  title=">=75%: Safe / Exam Cleared Tier"
                />
              </div>
            </div>

            {/* Tier Legend Labels */}
            <div className="flex justify-between text-[10px] text-slate-400 font-medium">
              <span className="text-rose-400 flex items-center gap-1">
                <span className="w-1.5 h-1.5 rounded-full bg-rose-500 inline-block" />
                &lt;65% Critical
              </span>
              <span className="text-amber-300 flex items-center gap-1">
                <span className="w-1.5 h-1.5 rounded-full bg-amber-400 inline-block" />
                65-74.9% Warning
              </span>
              <span className="text-emerald-300 font-bold flex items-center gap-1">
                <span className="w-1.5 h-1.5 rounded-full bg-emerald-400 inline-block" />
                &ge;75% Cleared
              </span>
            </div>
          </div>

          {/* Official Admit Card Clearance Stamp Box */}
          <div className="p-3 rounded-lg bg-emerald-950/40 border border-emerald-500/30 flex items-center justify-between gap-3">
            <div className="flex items-center gap-2.5">
              <div className="w-8 h-8 rounded-lg bg-emerald-500/20 text-emerald-300 flex items-center justify-center shrink-0 border border-emerald-500/30">
                <CheckCircle2 className="w-4 h-4 text-emerald-400" />
              </div>
              <div>
                <span className="text-[10px] uppercase font-bold tracking-wider text-emerald-300 block">
                  Hall Ticket Status
                </span>
                <span className="text-xs font-bold text-white block">
                  Cleared &amp; Unrestricted
                </span>
              </div>
            </div>

            <button
              onClick={() => setShowCondonationModal(true)}
              className="text-[11px] font-bold text-[#C8A45D] hover:text-amber-300 hover:underline shrink-0 flex items-center gap-1"
            >
              <span>Rule 18 Bylaws</span>
              <ArrowRight className="w-3 h-3" />
            </button>
          </div>
        </div>
      </div>

      {/* 2.6 Institutional Notices & Statutory Circulars Feed Widget (Task 2 & §14 Requirement) */}
      <div className="bg-white rounded-xl border border-[#E5EAF0] p-5 shadow-xs space-y-4">
        <div className="flex flex-col sm:flex-row sm:items-center justify-between pb-3 border-b border-slate-100 gap-3">
          <div className="flex items-center gap-2.5">
            <div className="w-8 h-8 rounded-lg bg-amber-50 text-[#C8A45D] flex items-center justify-center shrink-0 border border-amber-200">
              <Bell className="w-4 h-4 text-[#C8A45D]" />
            </div>
            <div>
              <div className="flex items-center gap-2">
                <h2 className="font-heading font-bold text-sm text-[#071A4D]">
                  Institutional Notice Board &amp; Statutory Circulars
                </h2>
                <span className="text-[10px] font-bold px-2 py-0.5 rounded-full bg-rose-50 text-rose-700 border border-rose-200">
                  Live Feed
                </span>
              </div>
              <p className="text-[11px] text-slate-500">
                Official announcements on NCHMCT exam eligibility, cutoffs, and academic directives
              </p>
            </div>
          </div>

          <div className="flex items-center gap-2">
            {/* Category Filter Chips */}
            <div className="flex items-center gap-1 bg-slate-100 p-1 rounded-lg text-[10px] font-bold">
              {["ALL", "STATUTORY", "HOLIDAY", "OPERATIONS"].map((cat) => (
                <button
                  key={cat}
                  onClick={() => setNoticeCategoryFilter(cat)}
                  className={`px-2 py-1 rounded-md transition-colors ${
                    noticeCategoryFilter === cat
                      ? "bg-[#081A2E] text-white"
                      : "text-slate-600 hover:text-slate-900"
                  }`}
                >
                  {cat}
                </button>
              ))}
            </div>

            <Link
              href="/student/notices"
              className="text-xs font-bold text-[#1769E8] hover:underline flex items-center gap-1 shrink-0 ml-1"
            >
              <span>Full Archives</span>
              <ArrowRight className="w-3.5 h-3.5" />
            </Link>
          </div>
        </div>

        {/* Notices Cards Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-3.5">
          {recentNotices
            .filter(
              (n) =>
                noticeCategoryFilter === "ALL" ||
                n.category === noticeCategoryFilter
            )
            .map((n) => (
              <div
                key={n.id}
                onClick={() => setSelectedNotice(n)}
                className="group p-4 rounded-xl border border-slate-200 bg-slate-50/50 hover:bg-white hover:border-[#1769E8]/40 hover:shadow-md transition-all cursor-pointer flex flex-col justify-between space-y-2.5"
              >
                <div>
                  <div className="flex items-center justify-between gap-2 mb-1.5">
                    <div className="flex items-center gap-2">
                      <span
                        className={`text-[9px] font-bold px-2 py-0.5 rounded-full uppercase ${
                          n.category === "STATUTORY"
                            ? "bg-purple-100 text-purple-800 border border-purple-200"
                            : n.category === "HOLIDAY"
                            ? "bg-blue-100 text-blue-800 border border-blue-200"
                            : "bg-amber-100 text-amber-900 border border-amber-200"
                        }`}
                      >
                        {n.category}
                      </span>
                      {n.urgent && (
                        <span className="text-[9px] font-bold px-2 py-0.5 rounded-full bg-rose-100 text-rose-800 animate-pulse">
                          Urgent
                        </span>
                      )}
                    </div>
                    <span className="text-[10px] font-mono text-slate-400">
                      {n.date}
                    </span>
                  </div>

                  <h3 className="font-bold text-xs text-[#071A4D] group-hover:text-[#1769E8] transition-colors leading-snug">
                    {n.title}
                  </h3>
                  <p className="text-[11px] text-slate-500 mt-1 line-clamp-2 leading-relaxed">
                    {n.desc}
                  </p>
                </div>

                <div className="pt-2 border-t border-slate-100 flex items-center justify-between text-[11px]">
                  <span className="text-[#8C6D28] font-semibold text-[10px] truncate max-w-[200px]">
                    {n.deadline || n.authority}
                  </span>
                  <span className="font-bold text-[#1769E8] group-hover:underline flex items-center gap-0.5 shrink-0">
                    <span>Read Circular</span>
                    <ExternalLink className="w-3 h-3" />
                  </span>
                </div>
              </div>
            ))}
        </div>
      </div>

      {/* 3. Subject-Wise Attendance Breakdown Cards */}
      <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">
          <div className="flex items-center gap-2.5">
            <BookOpen className="w-5 h-5 text-[#1769E8]" />
            <div>
              <h2 className="font-heading font-bold text-lg text-[#071A4D]">
                Subject-Wise Attendance Breakdown
              </h2>
              <p className="text-xs text-[#64748B]">
                Curriculum attendance across theory lectures and practical laboratories.
              </p>
            </div>
          </div>
          <Link
            href="/student/attendance/subjects"
            className="text-xs font-semibold text-[#1769E8] hover:underline flex items-center gap-1"
          >
            <span>View Full Subject Analytics</span>
            <ArrowRight className="w-3.5 h-3.5" />
          </Link>
        </div>

        <div className="p-5 grid grid-cols-1 md:grid-cols-2 gap-4">
          {subjects.map((sub) => (
            <div
              key={sub.code}
              className="p-4 rounded-xl border border-[#E2E8F0] bg-white hover:border-[#1769E8]/40 transition-all space-y-3"
            >
              <div className="flex items-center justify-between gap-2">
                <div className="flex items-center gap-2">
                  <span className="font-mono font-bold text-xs bg-[#F1F6FC] text-[#1769E8] px-2 py-0.5 rounded border border-[#D0E2FF]">
                    {sub.code}
                  </span>
                  <span className="text-xs text-slate-500 font-medium truncate max-w-[200px]">
                    {sub.venue}
                  </span>
                </div>
                <span className="text-xs font-mono font-bold text-emerald-600">
                  {sub.pct}%
                </span>
              </div>

              <div>
                <h3 className="font-heading font-bold text-sm text-[#071A4D]">
                  {sub.name}
                </h3>
                <p className="text-xs text-[#64748B] mt-0.5">Faculty: {sub.faculty}</p>
              </div>

              {/* Progress Bar */}
              <div className="space-y-1">
                <div className="w-full bg-slate-100 h-2 rounded-full overflow-hidden">
                  <div
                    className="bg-[#1769E8] h-full rounded-full transition-all"
                    style={{ width: `${sub.pct}%` }}
                  />
                </div>
                <div className="flex items-center justify-between text-[11px] text-[#64748B]">
                  <span>Attended: {sub.attended} / {sub.conducted} sessions</span>
                  <span className="font-semibold text-emerald-600">Above 75% Target</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* 4. Recent Turnstile Activity History (Showing P, C, H Codes as per §8) */}
      <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">
          <div className="flex items-center gap-2.5">
            <Clock className="w-5 h-5 text-amber-600" />
            <h2 className="font-heading font-bold text-lg text-[#071A4D]">
              Recent Attendance Sessions &amp; Turnstile Logs
            </h2>
          </div>
          <Link
            href="/student/history"
            className="text-xs font-semibold text-[#1769E8] hover:underline"
          >
            View Full Session History
          </Link>
        </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-4 font-bold text-[#071A4D]">Date &amp; Punch Time</th>
                <th className="py-3 px-4 font-bold text-[#071A4D]">Subject Code &amp; Name</th>
                <th className="py-3 px-4 font-bold text-[#071A4D]">Hardware Venue</th>
                <th className="py-3 px-4 font-bold text-[#071A4D] text-center">Credit Hours</th>
                <th className="py-3 px-4 font-bold text-[#071A4D] text-right">Attendance Status</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-[#E5EAF0]">
              {recentPunches.map((p, idx) => (
                <tr key={idx} className="hover:bg-[#F8FAFC] transition-colors">
                  <td className="py-3.5 px-4 font-semibold text-[#071A4D]">
                    {p.date} • <span className="font-mono text-slate-500">{p.time}</span>
                  </td>
                  <td className="py-3.5 px-4">
                    <span className="font-mono font-bold text-[10px] bg-[#F1F6FC] text-[#1769E8] px-1.5 py-0.5 rounded border border-[#D0E2FF] mr-1.5">
                      {p.code}
                    </span>
                    <span className="font-medium text-[#334155]">{p.subject}</span>
                  </td>
                  <td className="py-3.5 px-4 text-[#64748B]">
                    {p.venue}
                  </td>
                  <td className="py-3.5 px-4 text-center font-mono font-bold text-[#071A4D]">
                    {p.units}
                  </td>
                  <td className="py-3.5 px-4 text-right">
                    {p.statusCode === "P" && (
                      <span className="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold bg-[#DCFCE7] text-[#15803D] border border-[#BBF7D0]">
                        P • Present
                      </span>
                    )}
                    {p.statusCode === "C" && (
                      <span className="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold bg-amber-100 text-amber-900 border border-amber-300">
                        C • Condonation
                      </span>
                    )}
                    {p.statusCode === "H" && (
                      <span className="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold bg-blue-100 text-blue-900 border border-blue-300">
                        H • Holiday
                      </span>
                    )}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      {/* 5. NCHMCT Attendance Engine Explainer Modal (Clause §9 & §10) */}
      {showFormulaModal && (
        <div className="fixed inset-0 z-50 bg-slate-900/60 backdrop-blur-xs flex items-center justify-center p-4">
          <div className="bg-white rounded-2xl max-w-xl w-full p-6 shadow-2xl border border-slate-200 animate-in fade-in zoom-in-95 duration-150 max-h-[90vh] overflow-y-auto">
            <div className="flex items-center justify-between pb-3 border-b border-slate-100">
              <div className="flex items-center gap-2">
                <div className="p-2 rounded-lg bg-amber-50 text-[#C8A45D]">
                  <Calculator className="w-5 h-5 text-[#C8A45D]" />
                </div>
                <div>
                  <h3 className="font-bold text-base text-[#071A4D]">
                    NCHMCT Attendance Calculation Engine
                  </h3>
                  <span className="text-[11px] text-slate-500">
                    Official Contact-Hours Principle (§9 &amp; §10)
                  </span>
                </div>
              </div>
              <button
                onClick={() => setShowFormulaModal(false)}
                className="p-1 rounded-lg text-slate-400 hover:text-slate-700"
              >
                <X className="w-5 h-5" />
              </button>
            </div>

            <div className="space-y-4 pt-4 text-xs">
              {/* Formula Callout */}
              <div className="p-4 rounded-xl bg-[#081A2E] text-white space-y-2 text-center">
                <span className="text-[10px] uppercase font-bold text-[#C8A45D] tracking-wider block">
                  Mandatory Statutory Formula
                </span>
                <div className="font-mono text-xs sm:text-sm font-bold text-amber-100">
                  Attendance % = [(P + C + Approved Med) ÷ Total Conducted Hours] × 100
                </div>
                <div className="text-[11px] text-slate-300">
                  Computed on actual contact hours rather than generic calendar days.
                </div>
              </div>

              {/* Your Personal Computation */}
              <div className="p-3.5 rounded-xl bg-emerald-50/70 border border-emerald-200 space-y-1">
                <span className="text-[11px] font-bold text-emerald-800 uppercase block">
                  Your Current Academic Term Computation
                </span>
                <div className="font-mono text-xs text-emerald-900 font-bold">
                  (127.0h Present + 0.0h Condonation + 4.0h Medical) ÷ 148.0h Conducted
                </div>
                <div className="text-[11px] text-emerald-700">
                  = <strong>131.0 Credited Hours ÷ 148.0 Hours</strong> = <strong className="text-base text-emerald-800 font-black">88.7%</strong>
                </div>
              </div>

              {/* Explanatory Clauses */}
              <div className="space-y-2.5">
                <div className="p-3 rounded-lg bg-slate-50 border border-slate-200">
                  <h4 className="font-bold text-slate-900 flex items-center gap-1.5">
                    <span className="w-2 h-2 rounded-full bg-[#1769E8]" />
                    1. Why Contact-Hours Instead of Days?
                  </h4>
                  <p className="text-slate-600 mt-1 leading-relaxed">
                    Hospitality education requires heavy laboratory sessions. A 3-hour kitchen practical carries <strong>3.0 contact units</strong>, while a 1-hour theory lecture carries <strong>1.0 unit</strong>. Missing a single kitchen session impacts your record threefold.
                  </p>
                </div>

                <div className="p-3 rounded-lg bg-slate-50 border border-slate-200">
                  <h4 className="font-bold text-slate-900 flex items-center gap-1.5">
                    <span className="w-2 h-2 rounded-full bg-purple-600" />
                    2. Medical Concession Ceiling (Clause §10)
                  </h4>
                  <p className="text-slate-600 mt-1 leading-relaxed">
                    Sanctioned medical leave grants up to a <strong>maximum ceiling of 10% attendance credit</strong>. You currently have <strong>+4.0 hours (2.7%)</strong> credited through verified medical slips.
                  </p>
                </div>

                <div className="p-3 rounded-lg bg-slate-50 border border-slate-200">
                  <h4 className="font-bold text-slate-900 flex items-center gap-1.5">
                    <span className="w-2 h-2 rounded-full bg-amber-600" />
                    3. Condonation &amp; Official Institutional Duty (C)
                  </h4>
                  <p className="text-slate-600 mt-1 leading-relaxed">
                    Hours spent representing IHM Kolkata in culinary competitions, catering events, or authorized duties are marked with <strong>C</strong> and added to your numerator.
                  </p>
                </div>

                <div className="p-3 rounded-lg bg-slate-50 border border-slate-200">
                  <h4 className="font-bold text-slate-900 flex items-center gap-1.5">
                    <span className="w-2 h-2 rounded-full bg-blue-600" />
                    4. Holiday Hours (H)
                  </h4>
                  <p className="text-slate-600 mt-1 leading-relaxed">
                    Official gazetted holidays and vacation days carry the code <strong>H</strong> and are entirely excluded from both numerator and denominator with zero attendance shortage impact.
                  </p>
                </div>
              </div>
            </div>

            <div className="pt-4 mt-4 border-t border-slate-100 flex justify-end">
              <button
                onClick={() => setShowFormulaModal(false)}
                className="px-4 py-2 rounded-lg bg-[#081A2E] text-white font-bold text-xs hover:bg-[#123154] transition-colors"
              >
                Understood &amp; Close
              </button>
            </div>
          </div>
        </div>
      )}

      {/* 6. Official Institutional Circular Reader Dialog (Task 2) */}
      {selectedNotice && (
        <div className="fixed inset-0 z-50 bg-slate-900/60 backdrop-blur-xs flex items-center justify-center p-4">
          <div className="bg-white rounded-2xl max-w-lg w-full p-6 shadow-2xl border border-slate-200 animate-in fade-in zoom-in-95 duration-150">
            {/* Modal Header */}
            <div className="flex items-start justify-between pb-3 border-b border-slate-100 gap-3">
              <div className="flex items-center gap-3">
                <div className="w-10 h-10 rounded-full border-2 border-[#C8A45D] bg-[#081A2E] flex items-center justify-center shrink-0">
                  <Award className="w-5 h-5 text-[#C8A45D]" />
                </div>
                <div>
                  <span className="text-[10px] font-bold tracking-[0.2em] uppercase text-[#C8A45D] block">
                    INSTITUTE OF HOTEL MANAGEMENT, KOLKATA
                  </span>
                  <h3 className="font-bold text-sm text-[#071A4D]">
                    Official Institutional Notification
                  </h3>
                </div>
              </div>
              <button
                onClick={() => setSelectedNotice(null)}
                className="p-1 rounded-lg text-slate-400 hover:text-slate-700"
              >
                <X className="w-5 h-5" />
              </button>
            </div>

            {/* Circular Metadata Bar */}
            <div className="p-3 my-3.5 bg-slate-50 rounded-xl border border-slate-200 text-xs space-y-1.5">
              <div className="flex items-center justify-between text-[11px]">
                <span className="text-slate-400">Reference Number:</span>
                <span className="font-mono font-bold text-[#071A4D]">{selectedNotice.refNo}</span>
              </div>
              <div className="flex items-center justify-between text-[11px]">
                <span className="text-slate-400">Date of Publication:</span>
                <span className="font-semibold text-slate-700">{selectedNotice.date}</span>
              </div>
              <div className="flex items-center justify-between text-[11px]">
                <span className="text-slate-400">Issuing Directorate:</span>
                <span className="font-bold text-[#8C6D28]">{selectedNotice.authority}</span>
              </div>
              {selectedNotice.deadline && (
                <div className="flex items-center justify-between text-[11px] pt-1 border-t border-slate-200">
                  <span className="text-rose-600 font-semibold">Important Cutoff:</span>
                  <span className="font-bold text-rose-700 font-mono">{selectedNotice.deadline}</span>
                </div>
              )}
            </div>

            {/* Circular Title & Body */}
            <div className="space-y-3 text-xs">
              <h4 className="font-heading font-bold text-sm text-[#071A4D]">
                {selectedNotice.title}
              </h4>
              <p className="text-slate-600 leading-relaxed whitespace-pre-line bg-slate-50/50 p-3.5 rounded-lg border border-slate-200/80">
                {selectedNotice.fullContent}
              </p>
            </div>

            {/* Actions */}
            <div className="pt-4 mt-4 border-t border-slate-100 flex items-center justify-between text-xs">
              <button
                onClick={() => toast.success(`Downloading circular ${selectedNotice.refNo} (PDF)`)}
                className="inline-flex items-center gap-1.5 px-3 py-2 rounded-lg border border-slate-200 text-slate-700 hover:bg-slate-50 font-bold"
              >
                <Download className="w-3.5 h-3.5" />
                <span>Download PDF Slip</span>
              </button>
              <button
                onClick={() => setSelectedNotice(null)}
                className="px-4 py-2 rounded-lg bg-[#081A2E] text-white font-bold hover:bg-[#123154]"
              >
                Close Notice
              </button>
            </div>
          </div>
        </div>
      )}
      {/* 7. NCHMCT Rule 18 & Attendance Compliance Tiers Modal (Task 3) */}
      {showCondonationModal && (
        <div className="fixed inset-0 z-50 bg-slate-900/60 backdrop-blur-xs flex items-center justify-center p-4">
          <div className="bg-white rounded-2xl max-w-lg w-full p-6 shadow-2xl border border-slate-200 animate-in fade-in zoom-in-95 duration-150 max-h-[90vh] overflow-y-auto">
            {/* Modal Header */}
            <div className="flex items-start justify-between pb-3 border-b border-slate-100 gap-3">
              <div className="flex items-center gap-3">
                <div className="w-10 h-10 rounded-full border-2 border-[#C8A45D] bg-[#081A2E] flex items-center justify-center shrink-0">
                  <ShieldCheck className="w-5 h-5 text-[#C8A45D]" />
                </div>
                <div>
                  <span className="text-[10px] font-bold tracking-[0.2em] uppercase text-[#C8A45D] block">
                    NCHMCT EXAMINATION BYLAWS
                  </span>
                  <h3 className="font-bold text-sm text-[#071A4D]">
                    Rule 18 Condonation &amp; Compliance Tiers
                  </h3>
                </div>
              </div>
              <button
                onClick={() => setShowCondonationModal(false)}
                className="p-1 rounded-lg text-slate-400 hover:text-slate-700"
              >
                <X className="w-5 h-5" />
              </button>
            </div>

            {/* Current Standing Highlight */}
            <div className="my-4 p-3.5 rounded-xl bg-gradient-to-r from-emerald-50 via-teal-50 to-blue-50 border border-emerald-200">
              <div className="flex items-center justify-between">
                <div>
                  <span className="text-[10px] uppercase font-bold text-emerald-800 tracking-wider block">
                    Your Current Status
                  </span>
                  <span className="text-sm font-bold text-[#071A4D]">
                    Safe Tier · Unconditional Clearance
                  </span>
                </div>
                <div className="text-right">
                  <span className="text-xl font-mono font-black text-emerald-700">88.7%</span>
                  <span className="text-[10px] text-emerald-600 block font-medium">+13.7% above cutoff</span>
                </div>
              </div>
              <div className="mt-2 pt-2 border-t border-emerald-200/60 flex items-center justify-between text-[11px] text-slate-600">
                <span>Total Conducted: <strong>148.0h</strong></span>
                <span>Absence Runway: <strong className="text-emerald-700 font-mono">26.8h buffer</strong></span>
              </div>
            </div>

            {/* The 3 Statutory Tiers */}
            <div className="space-y-3 text-xs">
              <h4 className="font-bold text-slate-900 text-xs uppercase tracking-wider text-slate-400">
                Statutory Attendance Tiers (NCHMCT Clause §11)
              </h4>

              {/* Tier 1: Safe */}
              <div className="p-3 rounded-xl bg-emerald-50/70 border border-emerald-200 space-y-1">
                <div className="flex items-center justify-between">
                  <span className="font-bold text-emerald-800 flex items-center gap-1.5">
                    <span className="w-2 h-2 rounded-full bg-emerald-500" />
                    Tier 1: Safe Tier (&ge; 75.0%)
                  </span>
                  <span className="text-[10px] font-bold px-2 py-0.5 rounded-full bg-emerald-100 text-emerald-800">
                    Exam Eligible
                  </span>
                </div>
                <p className="text-slate-600 text-[11px] leading-relaxed">
                  Hall tickets (admit cards) are generated automatically. Candidates are permitted to appear in both end-semester practical vivas and theory examinations without restrictions.
                </p>
              </div>

              {/* Tier 2: Warning / Condonation */}
              <div className="p-3 rounded-xl bg-amber-50/70 border border-amber-200 space-y-1">
                <div className="flex items-center justify-between">
                  <span className="font-bold text-amber-800 flex items-center gap-1.5">
                    <span className="w-2 h-2 rounded-full bg-amber-500" />
                    Tier 2: Condonation Required (65.0% – 74.9%)
                  </span>
                  <span className="text-[10px] font-bold px-2 py-0.5 rounded-full bg-amber-100 text-amber-800">
                    Rule 18 Petition
                  </span>
                </div>
                <p className="text-slate-600 text-[11px] leading-relaxed">
                  Admit cards are withheld pending formal approval. The Principal / Academic Council may condone up to a maximum of <strong>10% shortage</strong> strictly for verified hospitalization, prolonged illness, or official representation of the Institute in recognized national events.
                </p>
              </div>

              {/* Tier 3: Critical / Debarred */}
              <div className="p-3 rounded-xl bg-rose-50/70 border border-rose-200 space-y-1">
                <div className="flex items-center justify-between">
                  <span className="font-bold text-rose-800 flex items-center gap-1.5">
                    <span className="w-2 h-2 rounded-full bg-rose-500" />
                    Tier 3: Critical Tier (&lt; 65.0%)
                  </span>
                  <span className="text-[10px] font-bold px-2 py-0.5 rounded-full bg-rose-100 text-rose-800">
                    Debarred / Detained
                  </span>
                </div>
                <p className="text-slate-600 text-[11px] leading-relaxed">
                  Mandatory detention under NCHMCT Council Regulations. No condonation is legally admissible regardless of medical grounds. The candidate must repeat the complete semester in the following academic cycle.
                </p>
              </div>
            </div>

            {/* Actions */}
            <div className="pt-4 mt-4 border-t border-slate-100 flex items-center justify-between text-xs">
              <Link
                href="/student/adjustments/condonation"
                className="inline-flex items-center gap-1.5 px-3 py-2 rounded-lg border border-slate-200 text-slate-700 hover:bg-slate-50 font-bold transition-colors"
                onClick={() => setShowCondonationModal(false)}
              >
                <span>Condonation Portal</span>
                <ExternalLink className="w-3.5 h-3.5" />
              </Link>
              <button
                onClick={() => setShowCondonationModal(false)}
                className="px-4 py-2 rounded-lg bg-[#081A2E] text-white font-bold hover:bg-[#123154] transition-colors"
              >
                Close Bylaws
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}