"use client";

import React, { useState } from "react";
import Link from "next/link";
import {
  Sliders,
  CheckCircle2,
  AlertTriangle,
  ChevronRight,
  ShieldCheck,
  Lock,
  HeartPulse,
  UtensilsCrossed,
  Save,
  RotateCcw,
} from "lucide-react";
import { toast } from "sonner";

export default function DeptAdminAttendanceRulesPage() {
  const [minThreshold, setMinThreshold] = useState<number>(75);
  const [condonationMin, setCondonationMin] = useState<number>(65);
  const [medicalCeiling, setMedicalCeiling] = useState<number>(10);
  const [maxMedicalDays, setMaxMedicalDays] = useState<number>(15);
  const [lockWindowHours, setLockWindowHours] = useState<number>(24);
  const [practicalWeightage, setPracticalWeightage] = useState<number>(3);
  const [autoLockEnabled, setAutoLockEnabled] = useState<boolean>(true);
  const [enforcePerSubject, setEnforcePerSubject] = useState<boolean>(true);

  const handleSave = () => {
    toast.success("Department attendance rules updated and synchronized with NCHMCT compliance engine");
  };

  const handleReset = () => {
    setMinThreshold(75);
    setCondonationMin(65);
    setMedicalCeiling(10);
    setMaxMedicalDays(15);
    setLockWindowHours(24);
    setPracticalWeightage(3);
    setAutoLockEnabled(true);
    setEnforcePerSubject(true);
    toast.info("Restored NCHMCT standard attendance rule defaults");
  };

  return (
    <div className="p-4 sm:p-6 lg:p-8 space-y-6 max-w-7xl mx-auto">
      {/* Header */}
      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
        <div>
          <div className="flex items-center gap-2 text-xs font-semibold text-slate-500 mb-1">
            <Link href="/dept-admin/dashboard" className="hover:text-[#1769E8]">
              Dashboard
            </Link>
            <ChevronRight className="w-3.5 h-3.5" />
            <span className="text-[#071A4D] font-bold">Attendance Rules</span>
          </div>
          <h1 className="text-xl sm:text-2xl font-black text-[#071A4D] tracking-tight">
            Attendance Rules & Threshold Configuration
          </h1>
          <p className="text-xs text-slate-500 mt-0.5">
            Configure NCHMCT examination eligibility criteria, condonation limits, and kitchen practical rules
          </p>
        </div>

        <div className="flex items-center gap-2">
          <button
            onClick={handleReset}
            className="inline-flex items-center gap-1.5 px-3 py-2 rounded-lg border border-slate-200 bg-white hover:bg-slate-50 text-slate-700 text-xs font-bold transition-all"
          >
            <RotateCcw className="w-3.5 h-3.5" />
            <span>Reset Defaults</span>
          </button>
          <button
            onClick={handleSave}
            className="inline-flex items-center gap-2 px-4 py-2.5 rounded-lg bg-[#C8A45D] hover:bg-[#B38F48] text-slate-950 font-bold text-xs shadow-sm transition-all"
          >
            <Save className="w-4 h-4" />
            <span>Save Rules</span>
          </button>
        </div>
      </div>

      {/* Rules Form Cards */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        {/* Rule 1: Mandatory NCHMCT Minimum Attendance Threshold */}
        <div className="p-5 rounded-xl bg-white border border-slate-200 shadow-xs space-y-4">
          <div className="flex items-start justify-between">
            <div>
              <div className="flex items-center gap-2">
                <ShieldCheck className="w-5 h-5 text-emerald-600" />
                <h3 className="font-bold text-base text-[#071A4D]">
                  Mandatory Examination Eligibility
                </h3>
              </div>
              <p className="text-xs text-slate-500 mt-1">
                Minimum aggregate attendance required for admit card release under NCHMCT regulations.
              </p>
            </div>
            <span className="font-mono text-xl font-black text-emerald-700">
              {minThreshold}%
            </span>
          </div>

          <div className="space-y-2 pt-2">
            <input
              type="range"
              min="60"
              max="85"
              step="1"
              value={minThreshold}
              onChange={(e) => setMinThreshold(Number(e.target.value))}
              className="w-full accent-[#081A2E]"
            />
            <div className="flex justify-between text-[10px] text-slate-400">
              <span>60% (Relaxed)</span>
              <span className="font-bold text-[#071A4D]">75% (NCHMCT Standard)</span>
              <span>85% (Strict)</span>
            </div>
          </div>

          <div className="pt-3 border-t border-slate-100 flex items-center justify-between text-xs">
            <span className="font-semibold text-slate-700">Enforce 75% Per Individual Subject</span>
            <input
              type="checkbox"
              checked={enforcePerSubject}
              onChange={(e) => setEnforcePerSubject(e.target.checked)}
              className="w-4 h-4 rounded text-[#081A2E] focus:ring-0"
            />
          </div>
        </div>

        {/* Rule 2: Condonation Eligibility Band */}
        <div className="p-5 rounded-xl bg-white border border-slate-200 shadow-xs space-y-4">
          <div className="flex items-start justify-between">
            <div>
              <div className="flex items-center gap-2">
                <AlertTriangle className="w-5 h-5 text-amber-600" />
                <h3 className="font-bold text-base text-[#071A4D]">
                  Condonation Eligibility Lower Bound
                </h3>
              </div>
              <p className="text-xs text-slate-500 mt-1">
                Students scoring between this limit and {minThreshold}% may apply for condonation by Academic Council.
              </p>
            </div>
            <span className="font-mono text-xl font-black text-[#785E2F]">
              {condonationMin}%
            </span>
          </div>

          <div className="space-y-2 pt-2">
            <input
              type="range"
              min="50"
              max="74"
              step="1"
              value={condonationMin}
              onChange={(e) => setCondonationMin(Number(e.target.value))}
              className="w-full accent-[#C8A45D]"
            />
            <div className="flex justify-between text-[10px] text-slate-400">
              <span>50%</span>
              <span className="font-bold text-[#785E2F]">65% (Standard Band: 65% - 74.9%)</span>
              <span>74%</span>
            </div>
          </div>

          <div className="pt-3 border-t border-slate-100 text-xs text-slate-500">
            Students below {condonationMin}% are classified as <strong>Detained / Ineligible</strong> with no condonation appeal.
          </div>
        </div>

        {/* Rule 3: Medical Adjustment Attendance Ceiling */}
        <div className="p-5 rounded-xl bg-white border border-slate-200 shadow-xs space-y-4">
          <div className="flex items-start justify-between">
            <div>
              <div className="flex items-center gap-2">
                <HeartPulse className="w-5 h-5 text-rose-600" />
                <h3 className="font-bold text-base text-[#071A4D]">
                  Medical Attendance Credit Ceiling
                </h3>
              </div>
              <p className="text-xs text-slate-500 mt-1">
                Maximum percentage increase permitted through certified medical leave approval.
              </p>
            </div>
            <span className="font-mono text-xl font-black text-rose-700">
              {medicalCeiling}%
            </span>
          </div>

          <div className="space-y-2 pt-2">
            <input
              type="range"
              min="5"
              max="20"
              step="1"
              value={medicalCeiling}
              onChange={(e) => setMedicalCeiling(Number(e.target.value))}
              className="w-full accent-rose-600"
            />
            <div className="flex justify-between text-[10px] text-slate-400">
              <span>5%</span>
              <span className="font-bold text-rose-600">10% Maximum Concession</span>
              <span>20%</span>
            </div>
          </div>

          <div className="pt-3 border-t border-slate-100 flex items-center justify-between text-xs">
            <span className="font-semibold text-slate-700">Maximum Medical Days Allowed</span>
            <span className="font-bold text-slate-900 bg-slate-100 px-2.5 py-1 rounded-md">
              {maxMedicalDays} Days per Semester
            </span>
          </div>
        </div>

        {/* Rule 4: Kitchen Practical Weightage & Auto-Lock */}
        <div className="p-5 rounded-xl bg-white border border-slate-200 shadow-xs space-y-4">
          <div className="flex items-start justify-between">
            <div>
              <div className="flex items-center gap-2">
                <UtensilsCrossed className="w-5 h-5 text-indigo-600" />
                <h3 className="font-bold text-base text-[#071A4D]">
                  Kitchen Practical Weightage
                </h3>
              </div>
              <p className="text-xs text-slate-500 mt-1">
                Each 3-hour kitchen practical block counts as multiple session units in attendance ratios.
              </p>
            </div>
            <span className="font-mono text-xl font-black text-indigo-700">
              {practicalWeightage}x
            </span>
          </div>

          <div className="space-y-2 pt-2">
            <input
              type="range"
              min="1"
              max="4"
              step="1"
              value={practicalWeightage}
              onChange={(e) => setPracticalWeightage(Number(e.target.value))}
              className="w-full accent-indigo-600"
            />
            <div className="flex justify-between text-[10px] text-slate-400">
              <span>1x (1 credit)</span>
              <span className="font-bold text-indigo-700">3x (3 Hours = 3 Sessions)</span>
              <span>4x</span>
            </div>
          </div>

          <div className="pt-3 border-t border-slate-100 flex items-center justify-between text-xs">
            <div>
              <span className="font-semibold text-slate-700 block">Faculty Attendance Lock Window</span>
              <span className="text-[10px] text-slate-400">Auto-lock attendance after class marking</span>
            </div>
            <span className="font-mono font-bold text-slate-800 bg-slate-100 px-2.5 py-1 rounded-md">
              {lockWindowHours} Hours
            </span>
          </div>
        </div>
      </div>
    </div>
  );
}