"use client";

import React, { Suspense, useState, useEffect } from "react";
import Link from "next/link";
import { useParams, useRouter } from "next/navigation";
import {
  ArrowLeft,
  Lock,
  CheckCircle2,
  AlertTriangle,
  Clock,
  ShieldAlert,
  Loader2,
  FileSpreadsheet,
} from "lucide-react";
import { draftService } from "@/lib/draft-service";
import { StatusBadge } from "@/components/shared/status-badge";
import { toast } from "sonner";

interface StudentItem {
  id: string;
  nchmRollNumber: string;
  name: string;
}

const mockStudents: StudentItem[] = [
  { id: "s-101", nchmRollNumber: "2441112001", name: "Aaron Smith" },
  { id: "s-102", nchmRollNumber: "2441112002", name: "Bethany Roy" },
  { id: "s-103", nchmRollNumber: "2441112003", name: "Chirag Banerjee" },
  { id: "s-104", nchmRollNumber: "2441112004", name: "Devika Sharma" },
  { id: "s-105", nchmRollNumber: "2441112005", name: "Farhan Ahmed" },
  { id: "s-106", nchmRollNumber: "2441112006", name: "Gautam Sen" },
  { id: "s-107", nchmRollNumber: "2441112007", name: "Harshavardhan Rao" },
  { id: "s-108", nchmRollNumber: "2441112008", name: "Isha Mukherjee" },
  { id: "s-109", nchmRollNumber: "2441112009", name: "Jayant Verma" },
  { id: "s-110", nchmRollNumber: "2441112010", name: "Kritika Das" },
  { id: "s-111", nchmRollNumber: "2441112011", name: "Lalit Mohan" },
  { id: "s-112", nchmRollNumber: "2441112012", name: "Meera Nair" },
  { id: "s-113", nchmRollNumber: "2441112013", name: "Nikhil Joshi" },
  { id: "s-114", nchmRollNumber: "2441112014", name: "Oindrila Ghosh" },
  { id: "s-115", nchmRollNumber: "2441112015", name: "Prateek Saxena" },
  { id: "s-116", nchmRollNumber: "2441112016", name: "Qasim Ali" },
  { id: "s-117", nchmRollNumber: "2441112017", name: "Rhea Chawla" },
  { id: "s-118", nchmRollNumber: "2441112018", name: "Sourav Ganguly" },
  { id: "s-119", nchmRollNumber: "2441112019", name: "Tanvi Kulkarni" },
  { id: "s-120", nchmRollNumber: "2441112020", name: "Utkarsh Gupta" },
  { id: "s-121", nchmRollNumber: "2441112021", name: "Varun Mehta" },
  { id: "s-122", nchmRollNumber: "2441112022", name: "William D'Souza" },
  { id: "s-123", nchmRollNumber: "2441112023", name: "Xavier Pinto" },
  { id: "s-124", nchmRollNumber: "2441112024", name: "Yashasvi Paul" },
  { id: "s-125", nchmRollNumber: "2441112025", name: "Zoya Khan" },
  { id: "s-126", nchmRollNumber: "2441112026", name: "Abhinav Mishra" },
  { id: "s-127", nchmRollNumber: "2441112027", name: "Bhavya Aggarwal" },
  { id: "s-128", nchmRollNumber: "2441112028", name: "Chetan Bhagat" },
  { id: "s-129", nchmRollNumber: "2441112029", name: "Deepak Chopra" },
  { id: "s-130", nchmRollNumber: "2441112030", name: "Esha Deol" },
];

function AttendanceReviewContent() {
  const params = useParams();
  const sessionId = (params?.id as string) || "session_1042";
  const router = useRouter();

  const [marks, setMarks] = useState<Record<string, "P" | "A" | "C">>({});
  const [remarks, setRemarks] = useState<Record<string, string>>({});
  const [isLocking, setIsLocking] = useState(false);
  const [isLocked, setIsLocked] = useState(false);
  const [showConfirmModal, setShowConfirmModal] = useState(false);

  const sessionDetails = {
    id: sessionId,
    subjectCode: "BHM201",
    subjectName: "Food Production Operations Practical",
    conductedHours: 4.0,
    attendanceUnits: 4.0,
    scheduledTime: "09:00 – 13:00",
    batchName: "Batch B1",
    version: 1,
  };

  useEffect(() => {
    const draft = draftService.getDraft(sessionId);
    if (draft) {
      setMarks(draft.marks);
      if (draft.remarks) setRemarks(draft.remarks);
    } else {
      // Fallback defaults
      const fallback: Record<string, "P" | "A" | "C"> = {};
      mockStudents.forEach((s) => {
        fallback[s.id] = "P";
      });
      setMarks(fallback);
    }
  }, [sessionId]);

  // Aggregate tally
  let presentCount = 0;
  let absentCount = 0;
  let condonedCount = 0;

  Object.values(marks).forEach((st) => {
    if (st === "P") presentCount++;
    else if (st === "A") absentCount++;
    else if (st === "C") condonedCount++;
  });

  const totalUnitsAwarded = (presentCount + condonedCount) * sessionDetails.attendanceUnits;

  const handleLockSession = async () => {
    setIsLocking(true);
    try {
      // Emulate atomic backend submission & lock API call
      await new Promise((res) => setTimeout(res, 800));

      setIsLocked(true);
      setShowConfirmModal(false);
      draftService.clearDraft(sessionId);
      toast.success("Attendance successfully finalized and locked into academic records.");
    } catch {
      toast.error("Failed to lock attendance. Please verify permissions.");
    } finally {
      setIsLocking(false);
    }
  };

  return (
    <div className="space-y-6 pb-12">
      {/* Top Header */}
      <div className="flex items-center justify-between border-b border-slate-200 pb-4 dark:border-slate-800">
        <Link
          href={`/faculty/classes/${sessionId}/mark`}
          className="inline-flex items-center gap-1.5 text-xs font-semibold text-slate-600 hover:text-slate-900 transition-colors dark:text-slate-400 dark:hover:text-slate-200"
        >
          <ArrowLeft className="w-4 h-4" />
          Edit Marks on Marking Pad
        </Link>

        <StatusBadge status={isLocked ? "LOCKED" : "FINALIZED"} size="sm" />
      </div>

      {/* Summary Review Card */}
      <div className="p-6 rounded-lg border border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-900 space-y-4">
        <div>
          <span className="text-xs font-bold font-mono text-blue-600 bg-blue-50 px-2 py-0.5 rounded border border-blue-200 dark:bg-blue-950/40 dark:text-blue-300 dark:border-blue-800">
            {sessionDetails.subjectCode}
          </span>
          <h1 className="text-lg font-bold text-slate-900 tracking-tight dark:text-slate-100 mt-1">
            Pre-Lock Attendance Summary Verification
          </h1>
          <p className="text-xs text-slate-500 mt-0.5">
            {sessionDetails.subjectName} • {sessionDetails.scheduledTime} • {sessionDetails.batchName}
          </p>
        </div>

        {/* Units Calculation Breakdown Box */}
        <div className="p-4 rounded border border-slate-200 bg-slate-50 dark:border-slate-800 dark:bg-slate-950 grid grid-cols-2 sm:grid-cols-4 gap-4 text-center">
          <div>
            <span className="text-[11px] text-slate-400 block font-medium">Present (P)</span>
            <span className="text-xl font-bold text-emerald-700 dark:text-emerald-400 tabular-nums">
              {presentCount}
            </span>
            <span className="text-[10px] text-slate-400 block">
              ({presentCount * sessionDetails.attendanceUnits} units)
            </span>
          </div>
          <div>
            <span className="text-[11px] text-slate-400 block font-medium">Condoned (C)</span>
            <span className="text-xl font-bold text-amber-700 dark:text-amber-400 tabular-nums">
              {condonedCount}
            </span>
            <span className="text-[10px] text-slate-400 block">
              ({condonedCount * sessionDetails.attendanceUnits} units)
            </span>
          </div>
          <div>
            <span className="text-[11px] text-slate-400 block font-medium">Absent (A)</span>
            <span className="text-xl font-bold text-rose-700 dark:text-rose-400 tabular-nums">
              {absentCount}
            </span>
            <span className="text-[10px] text-slate-400 block">(0 units)</span>
          </div>
          <div>
            <span className="text-[11px] text-slate-400 block font-medium">Units Awarded</span>
            <span className="text-xl font-bold text-slate-900 dark:text-slate-100 tabular-nums">
              {totalUnitsAwarded}
            </span>
            <span className="text-[10px] text-slate-400 block">
              Contact Multiplier: 4.0
            </span>
          </div>
        </div>

        {/* Lock Warning Banner */}
        <div className="p-3 rounded border border-amber-300 bg-amber-50/80 text-amber-900 text-xs flex items-start gap-2.5 dark:bg-amber-950/30 dark:border-amber-900 dark:text-amber-200">
          <ShieldAlert className="w-4 h-4 text-amber-600 mt-0.5 shrink-0" />
          <div>
            <p className="font-semibold text-xs">Immutable Record Governance:</p>
            <p className="text-[11px] mt-0.5 leading-relaxed">
              Once you lock this class session, attendance units will be committed to the institutional summary cache. Subsequent corrections will require formal administrative unlock approval with justification logging.
            </p>
          </div>
        </div>
      </div>

      {/* Read-Only Student Marks Table */}
      <div className="rounded-lg border border-slate-200 bg-white overflow-hidden dark:border-slate-800 dark:bg-slate-900">
        <div className="p-4 border-b border-slate-200 bg-slate-50/70 flex items-center justify-between dark:border-slate-800 dark:bg-slate-800/40">
          <h2 className="text-xs font-bold text-slate-800 uppercase tracking-wider dark:text-slate-200">
            Student Marks Verification List ({mockStudents.length} Students)
          </h2>
          <span className="text-[11px] text-slate-500 font-mono">
            Conducted: 4.0 Hours
          </span>
        </div>

        <div className="overflow-x-auto max-h-96 overflow-y-auto">
          <table className="w-full text-left text-xs border-collapse">
            <thead className="bg-slate-50 border-b border-slate-200 sticky top-0 dark:bg-slate-800 dark:border-slate-700">
              <tr>
                <th className="px-4 py-2.5 font-semibold text-slate-600">#</th>
                <th className="px-4 py-2.5 font-semibold text-slate-600">Roll Number</th>
                <th className="px-4 py-2.5 font-semibold text-slate-600">Student Name</th>
                <th className="px-4 py-2.5 font-semibold text-slate-600">Status</th>
                <th className="px-4 py-2.5 font-semibold text-slate-600">Units Awarded</th>
                <th className="px-4 py-2.5 font-semibold text-slate-600">Remarks</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-slate-100 dark:divide-slate-800">
              {mockStudents.map((st, i) => {
                const status = marks[st.id] || "P";
                const units = status === "A" ? 0.0 : sessionDetails.attendanceUnits;
                const remark = remarks[st.id] || "—";

                return (
                  <tr key={st.id} className="hover:bg-slate-50/60 dark:hover:bg-slate-800/30">
                    <td className="px-4 py-2 font-mono text-slate-400">{i + 1}</td>
                    <td className="px-4 py-2 font-mono font-medium text-slate-700 dark:text-slate-300">
                      {st.nchmRollNumber}
                    </td>
                    <td className="px-4 py-2 font-semibold text-slate-900 dark:text-slate-100">
                      {st.name}
                    </td>
                    <td className="px-4 py-2">
                      <StatusBadge status={status} size="sm" />
                    </td>
                    <td className="px-4 py-2 font-mono font-bold text-slate-800 dark:text-slate-200">
                      {units.toFixed(1)}
                    </td>
                    <td className="px-4 py-2 text-slate-500 italic max-w-xs truncate">
                      {remark}
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </div>

      {/* Action Footer */}
      <div className="flex items-center justify-between pt-2">
        <Link
          href={`/faculty/classes/${sessionId}/mark`}
          className="px-4 py-2 rounded border border-slate-200 bg-white hover:bg-slate-50 text-slate-700 text-xs font-semibold transition-colors dark:border-slate-800 dark:bg-slate-900 dark:text-slate-200"
        >
          Return to Edit Marks
        </Link>

        {isLocked ? (
          <div className="flex items-center gap-2 text-xs font-semibold text-slate-500">
            <Lock className="w-4 h-4 text-slate-400" />
            <span>Session Locked & Saved to Institutional Cache</span>
          </div>
        ) : (
          <button
            type="button"
            onClick={() => setShowConfirmModal(true)}
            className="px-6 py-2.5 rounded bg-slate-900 hover:bg-slate-800 text-white text-xs font-semibold flex items-center gap-2 transition-colors shadow-sm dark:bg-slate-100 dark:text-slate-900 dark:hover:bg-slate-200"
          >
            <Lock className="w-4 h-4" />
            <span>Lock & Commit Attendance</span>
          </button>
        )}
      </div>

      {/* Confirmation Modal */}
      {showConfirmModal && (
        <div className="fixed inset-0 bg-slate-900/50 z-50 flex items-center justify-center p-4">
          <div className="bg-white rounded-lg border border-slate-200 max-w-md w-full p-6 shadow-xl dark:bg-slate-900 dark:border-slate-800 space-y-4">
            <div className="flex items-center gap-3">
              <div className="w-10 h-10 rounded-full bg-slate-100 flex items-center justify-center text-slate-800 dark:bg-slate-800 dark:text-slate-200">
                <Lock className="w-5 h-5" />
              </div>
              <div>
                <h3 className="text-sm font-bold text-slate-900 dark:text-slate-100">
                  Confirm Session Lock
                </h3>
                <p className="text-xs text-slate-500">
                  Institute of Hotel Management, Kolkata
                </p>
              </div>
            </div>

            <p className="text-xs text-slate-600 leading-relaxed dark:text-slate-400">
              You are committing attendance for <strong>{mockStudents.length} students</strong>:
              <br />
              • <strong>{presentCount} Present</strong> ({presentCount * 4} units)
              <br />
              • <strong>{condonedCount} Condoned</strong> ({condonedCount * 4} units)
              <br />
              • <strong>{absentCount} Absent</strong> (0 units)
            </p>

            <div className="p-3 rounded bg-amber-50 text-amber-900 text-xs border border-amber-200 dark:bg-amber-950/30 dark:border-amber-900 dark:text-amber-200">
              Once locked, further changes require administrative authorization.
            </div>

            <div className="flex items-center justify-end gap-2 pt-2">
              <button
                type="button"
                onClick={() => setShowConfirmModal(false)}
                disabled={isLocking}
                className="px-4 py-2 rounded border border-slate-200 text-slate-600 text-xs font-semibold hover:bg-slate-50 transition-colors dark:border-slate-700 dark:text-slate-300"
              >
                Cancel
              </button>
              <button
                type="button"
                onClick={handleLockSession}
                disabled={isLocking}
                className="px-4 py-2 rounded bg-slate-900 hover:bg-slate-800 text-white text-xs font-semibold flex items-center gap-1.5 transition-colors dark:bg-slate-100 dark:text-slate-900"
              >
                {isLocking ? (
                  <>
                    <Loader2 className="w-3.5 h-3.5 animate-spin" />
                    Locking Session...
                  </>
                ) : (
                  <>
                    <Lock className="w-3.5 h-3.5" />
                    Confirm & Lock
                  </>
                )}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

export default function AttendanceReviewPage() {
  return (
    <Suspense fallback={<div className="p-8 text-center text-xs text-slate-400">Loading review details...</div>}>
      <AttendanceReviewContent />
    </Suspense>
  );
}