"use client";

import React, { useState } from "react";
import Link from "next/link";
import {
  FileCheck,
  ShieldCheck,
  AlertTriangle,
  CheckCircle2,
  Send,
  Calendar,
  FileSpreadsheet,
  Award,
} from "lucide-react";
import { toast } from "sonner";

export default function StudentCondonationPage() {
  const [appealReason, setAppealReason] = useState("");
  const [isSubmitting, setIsSubmitting] = useState(false);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!appealReason.trim()) {
      toast.error("Please provide the grounds for your condonation representation.");
      return;
    }
    setIsSubmitting(true);
    setTimeout(() => {
      setIsSubmitting(false);
      toast.success("Official condonation petition submitted to Principal & Academic Committee.");
      setAppealReason("");
    }, 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="/student/dashboard" className="hover:text-[#1769E8] transition-colors">
            Student Console
          </Link>
          <span>&gt;</span>
          <span>Adjustments &amp; Leave</span>
          <span>&gt;</span>
          <span className="text-[#071A4D] font-semibold">Condonation Requests</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 Condonation Appeals
              </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]">
                Exempt from Condonation
              </span>
            </div>
            <p className="text-[14px] text-[#64748B] mt-1 font-normal">
              Formal petitions for examination eligibility review under NCHMCT Special Condonation Powers (Rule 18).
            </p>
          </div>
        </div>
      </div>

      {/* 2. Condonation Thresholds Card */}
      <div className="grid grid-cols-1 sm:grid-cols-3 gap-3.5">
        <div className="bg-white rounded-xl border border-[#E5EAF0] p-4 shadow-xs">
          <span className="text-[11px] font-bold text-[#64748B] uppercase tracking-wider block">
            Regular Exam Eligibility
          </span>
          <div className="text-2xl font-bold font-heading text-emerald-600 mt-0.5 font-mono">
            &ge; 75.0%
          </div>
          <p className="text-xs text-slate-500 mt-1">
            Normal qualification without requiring institutional review.
          </p>
        </div>

        <div className="bg-white rounded-xl border border-[#E5EAF0] p-4 shadow-xs">
          <span className="text-[11px] font-bold text-[#64748B] uppercase tracking-wider block">
            Condonable Band
          </span>
          <div className="text-2xl font-bold font-heading text-amber-600 mt-0.5 font-mono">
            65.0% – 74.9%
          </div>
          <p className="text-xs text-slate-500 mt-1">
            Permissible on medical grounds subject to Principal's approval.
          </p>
        </div>

        <div className="bg-white rounded-xl border border-[#E5EAF0] p-4 shadow-xs">
          <span className="text-[11px] font-bold text-[#64748B] uppercase tracking-wider block">
            Mandatory Detainment
          </span>
          <div className="text-2xl font-bold font-heading text-rose-600 mt-0.5 font-mono">
            &lt; 65.0%
          </div>
          <p className="text-xs text-slate-500 mt-1">
            Strictly debarred from Semester End Examinations by NCHMCT.
          </p>
        </div>
      </div>

      {/* 3. Student Current Eligibility Card */}
      <div className="bg-white rounded-xl border border-[#E5EAF0] p-5 shadow-xs space-y-3">
        <div className="flex items-center gap-2">
          <CheckCircle2 className="w-5 h-5 text-emerald-600" />
          <h2 className="font-heading font-bold text-base text-[#071A4D]">
            Your Current Standing: 88.7% Overall Attendance
          </h2>
        </div>
        <p className="text-xs text-[#334155] leading-relaxed">
          Your current attendance is well above the mandatory 75% threshold. You are fully qualified to sit for the Semester III End Examinations and do not currently require a condonation waiver.
        </p>
      </div>

      {/* 4. Petition Form for Special Consideration */}
      <div className="bg-white rounded-xl border border-[#E5EAF0] shadow-xs overflow-hidden">
        <div className="p-4 border-b border-[#E5EAF0]">
          <h2 className="font-heading font-bold text-lg text-[#071A4D]">
            Submit Representation to the Principal
          </h2>
          <p className="text-xs text-[#64748B]">
            For students with special institutional duties (sports representation, cultural festivals, bereavement).
          </p>
        </div>

        <form onSubmit={handleSubmit} className="p-5 space-y-4">
          <div>
            <label className="text-xs font-semibold text-[#071A4D] block mb-1">
              Grounds for Special Condonation Appeal:
            </label>
            <textarea
              rows={4}
              value={appealReason}
              onChange={(e) => setAppealReason(e.target.value)}
              placeholder="State the detailed circumstances, dates, and official institutional delegations..."
              className="w-full p-3 text-xs bg-slate-50 border border-slate-200 rounded-lg focus:outline-hidden focus:border-[#1769E8]"
            />
          </div>

          <div className="flex justify-end">
            <button
              type="submit"
              disabled={isSubmitting}
              className="px-5 py-2.5 bg-[#071A4D] hover:bg-[#0b2773] 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>{isSubmitting ? "Submitting Petition..." : "Submit Petition to Principal"}</span>
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}