"use client";

import React, { Suspense, useState, useEffect, useMemo, useCallback } from "react";
import Link from "next/link";
import { useParams, useRouter } from "next/navigation";
import {
  ArrowLeft,
  CheckCircle2,
  RotateCcw,
  Save,
  Send,
  Clock,
  MapPin,
  Users,
  AlertCircle,
  FileText,
  Search,
} from "lucide-react";
import { draftService } from "@/lib/draft-service";
import { toast } from "sonner";
import { cn } from "@/lib/utils";

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

// 30 mock students representative of an IHM practical kitchen batch
const mockStudents: StudentRosterItem[] = [
  { 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 AttendanceMarkingPadContent() {
  const params = useParams();
  const sessionId = (params?.id as string) || "session_1042";
  const router = useRouter();

  // Session metadata
  const sessionInfo = {
    id: sessionId,
    subjectName: "Food Production Operations Practical",
    subjectCode: "BHM201",
    roomName: "Basic Training Kitchen B",
    batchName: "Batch B1 (30 Students)",
    scheduledTime: "09:00 – 13:00",
    conductedHours: 4.0,
    attendanceUnits: 4.0,
    version: 1,
  };

  // State: attendance marks keyed by student ID
  const [marks, setMarks] = useState<Record<string, "P" | "A" | "C">>({});
  const [remarks, setRemarks] = useState<Record<string, string>>({});
  const [activeRemarkStudent, setActiveRemarkStudent] = useState<string | null>(null);
  const [searchQuery, setSearchQuery] = useState("");
  const [lastSaved, setLastSaved] = useState<string | null>(null);
  const [isSaving, setIsSaving] = useState(false);

  // Restore local draft on mount if present
  useEffect(() => {
    const existingDraft = draftService.getDraft(sessionId);
    if (existingDraft && Object.keys(existingDraft.marks).length > 0) {
      setMarks(existingDraft.marks);
      if (existingDraft.remarks) {
        setRemarks(existingDraft.remarks);
      }
      setLastSaved(new Date(existingDraft.savedAt).toLocaleTimeString());
      toast.info("Restored uncommitted attendance marks from local device draft.");
    } else {
      // Default initial state: all unmarked or default 'P'
      const initial: Record<string, "P" | "A" | "C"> = {};
      mockStudents.forEach((s) => {
        initial[s.id] = "P";
      });
      setMarks(initial);
    }
  }, [sessionId]);

  // Debounced auto-save to localStorage
  const persistDraft = useCallback(
    (currentMarks: Record<string, "P" | "A" | "C">, currentRemarks: Record<string, string>) => {
      setIsSaving(true);
      draftService.saveDraft({
        sessionId,
        version: sessionInfo.version,
        savedAt: new Date().toISOString(),
        actualConductedHours: sessionInfo.conductedHours,
        marks: currentMarks,
        remarks: currentRemarks,
      });
      setTimeout(() => {
        setIsSaving(false);
        setLastSaved(new Date().toLocaleTimeString());
      }, 300);
    },
    [sessionId, sessionInfo.conductedHours, sessionInfo.version]
  );

  const setStudentMark = (studentId: string, status: "P" | "A" | "C") => {
    setMarks((prev) => {
      const updated = { ...prev, [studentId]: status };
      persistDraft(updated, remarks);
      return updated;
    });
  };

  const handleMarkAllPresent = () => {
    const updated: Record<string, "P" | "A" | "C"> = {};
    mockStudents.forEach((s) => {
      updated[s.id] = "P";
    });
    setMarks(updated);
    persistDraft(updated, remarks);
    toast.success("All 30 students marked Present (P)");
  };

  const handleResetMarks = () => {
    if (confirm("Reset all attendance marks for this session?")) {
      const updated: Record<string, "P" | "A" | "C"> = {};
      mockStudents.forEach((s) => {
        updated[s.id] = "A";
      });
      setMarks(updated);
      persistDraft(updated, remarks);
      toast.info("Attendance marks reset to Absent (A)");
    }
  };

  // Live tally calculations
  const tally = useMemo(() => {
    let present = 0;
    let absent = 0;
    let condoned = 0;

    Object.values(marks).forEach((status) => {
      if (status === "P") present++;
      else if (status === "A") absent++;
      else if (status === "C") condoned++;
    });

    const total = mockStudents.length;
    const awardedUnits = (present + condoned) * sessionInfo.attendanceUnits;

    return { present, absent, condoned, total, awardedUnits };
  }, [marks, sessionInfo.attendanceUnits]);

  // Filter students based on search query
  const filteredStudents = useMemo(() => {
    if (!searchQuery.trim()) return mockStudents;
    const q = searchQuery.toLowerCase();
    return mockStudents.filter(
      (s) =>
        s.name.toLowerCase().includes(q) ||
        s.nchmRollNumber.toLowerCase().includes(q)
    );
  }, [searchQuery]);

  const handleFinalizeAndReview = () => {
    // Save draft first
    persistDraft(marks, remarks);
    // Navigate to pre-lock review screen
    router.push(`/faculty/classes/${sessionId}/review`);
  };

  return (
    <div className="space-y-4 pb-20">
      {/* Top Header & Breadcrumb */}
      <div className="flex items-center justify-between">
        <Link
          href="/faculty/classes/today"
          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" />
          Back to Today's Classes
        </Link>

        <span className="text-[11px] font-mono px-2 py-0.5 rounded border border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-900 text-slate-500">
          Session #{sessionId}
        </span>
      </div>

      {/* Session Details Card */}
      <div className="p-4 rounded-lg border border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-900 space-y-2">
        <div className="flex flex-wrap items-center justify-between gap-2">
          <span className="text-xs font-bold text-blue-600 font-mono 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">
            {sessionInfo.subjectCode}
          </span>
          <span className="text-xs px-2 py-0.5 rounded font-medium bg-amber-50 text-amber-700 border border-amber-200">
            DRAFT / MARKING IN PROGRESS
          </span>
        </div>

        <h1 className="text-base font-bold text-slate-900 tracking-tight dark:text-slate-100">
          {sessionInfo.subjectName}
        </h1>

        <div className="flex flex-wrap items-center gap-4 text-xs text-slate-600 dark:text-slate-400 pt-1">
          <div className="flex items-center gap-1.5">
            <MapPin className="w-3.5 h-3.5 text-slate-400 shrink-0" />
            <span>{sessionInfo.roomName}</span>
          </div>
          <div className="flex items-center gap-1.5">
            <Clock className="w-3.5 h-3.5 text-slate-400 shrink-0" />
            <span>{sessionInfo.scheduledTime}</span>
          </div>
          <div className="flex items-center gap-1.5">
            <Users className="w-3.5 h-3.5 text-slate-400 shrink-0" />
            <span>{sessionInfo.batchName}</span>
          </div>
        </div>

        {/* Prominent Multi-Hour Practical Multiplier Banner */}
        <div className="mt-3 p-2.5 rounded border border-blue-200 bg-blue-50/70 text-blue-900 text-xs flex items-center justify-between dark:bg-blue-950/40 dark:border-blue-900 dark:text-blue-200">
          <div className="flex items-center gap-2">
            <Clock className="w-4 h-4 text-blue-600 shrink-0" />
            <span className="font-semibold">
              Practical Session Contact: {sessionInfo.conductedHours} Hours = {sessionInfo.attendanceUnits} Attendance Units per student
            </span>
          </div>
          <span className="hidden sm:inline font-mono font-medium text-[11px] text-blue-700 dark:text-blue-300">
            P = 4 Units • A = 0 Units
          </span>
        </div>
      </div>

      {/* Quick Action Toolbar & Live Tally Counter */}
      <div className="p-3 rounded-lg border border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-900 space-y-3 sticky top-14 z-20 shadow-sm">
        <div className="flex flex-wrap items-center justify-between gap-2">
          {/* Quick 1-Tap Buttons */}
          <div className="flex items-center gap-2">
            <button
              onClick={handleMarkAllPresent}
              className="touch-target-action px-3 py-2 rounded bg-emerald-600 hover:bg-emerald-700 text-white text-xs font-semibold flex items-center gap-1.5 transition-colors shadow-sm"
            >
              <CheckCircle2 className="w-4 h-4" />
              <span>Mark All Present</span>
            </button>

            <button
              onClick={handleResetMarks}
              className="touch-target-action px-3 py-2 rounded border border-slate-200 bg-white hover:bg-slate-100 text-slate-600 text-xs font-semibold flex items-center gap-1.5 transition-colors dark:border-slate-800 dark:bg-slate-900 dark:text-slate-300"
            >
              <RotateCcw className="w-3.5 h-3.5" />
              <span>Reset</span>
            </button>
          </div>

          {/* Search Input */}
          <div className="relative w-full sm:w-48">
            <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-slate-400" />
            <input
              type="text"
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              placeholder="Filter roster..."
              className="w-full pl-8 pr-2.5 py-1.5 text-xs rounded border border-slate-200 bg-white placeholder:text-slate-400 focus:outline-none focus:border-slate-900 dark:border-slate-800 dark:bg-slate-950 dark:focus:border-slate-200"
            />
          </div>
        </div>

        {/* Live Tally Bar */}
        <div className="grid grid-cols-2 sm:grid-cols-4 gap-2 pt-2 border-t border-slate-100 text-center text-xs dark:border-slate-800">
          <div className="p-1 rounded bg-slate-50 dark:bg-slate-800">
            <span className="text-[10px] text-slate-400 block font-medium">Total</span>
            <span className="font-bold text-slate-800 dark:text-slate-200 tabular-nums">{tally.total}</span>
          </div>
          <div className="p-1 rounded bg-emerald-50 text-emerald-700 border border-emerald-100 dark:bg-emerald-950/30 dark:border-emerald-900 dark:text-emerald-300">
            <span className="text-[10px] block font-medium">Present (P)</span>
            <span className="font-bold tabular-nums">{tally.present}</span>
          </div>
          <div className="p-1 rounded bg-rose-50 text-rose-700 border border-rose-100 dark:bg-rose-950/30 dark:border-rose-900 dark:text-rose-300">
            <span className="text-[10px] block font-medium">Absent (A)</span>
            <span className="font-bold tabular-nums">{tally.absent}</span>
          </div>
          <div className="p-1 rounded bg-amber-50 text-amber-700 border border-amber-100 dark:bg-amber-950/30 dark:border-amber-900 dark:text-amber-300">
            <span className="text-[10px] block font-medium">Condoned (C)</span>
            <span className="font-bold tabular-nums">{tally.condoned}</span>
          </div>
        </div>
      </div>

      {/* Student Roster List */}
      <div className="space-y-2">
        {filteredStudents.map((student, idx) => {
          const currentMark = marks[student.id] || "P";
          const studentRemark = remarks[student.id];

          return (
            <div
              key={student.id}
              className="p-3 rounded-lg border border-slate-200 bg-white hover:border-slate-300 transition-colors flex flex-col sm:flex-row sm:items-center justify-between gap-3 dark:border-slate-800 dark:bg-slate-900"
            >
              {/* Student Identification */}
              <div className="flex items-center gap-3">
                <span className="w-7 h-7 rounded border border-slate-200 bg-slate-50 flex items-center justify-center text-xs font-mono font-bold text-slate-700 dark:border-slate-800 dark:bg-slate-800 dark:text-slate-300">
                  {idx + 1}
                </span>

                <div>
                  <h3 className="text-xs font-bold text-slate-900 tracking-tight dark:text-slate-100">
                    {student.name}
                  </h3>
                  <div className="flex items-center gap-2 mt-0.5">
                    <span className="text-[11px] font-mono text-slate-500">
                      Roll: {student.nchmRollNumber}
                    </span>
                    {studentRemark && (
                      <span className="text-[10px] px-1.5 py-0.2 rounded bg-amber-50 text-amber-700 border border-amber-200">
                        Note: {studentRemark}
                      </span>
                    )}
                  </div>
                </div>
              </div>

              {/* Tri-State Toggle Action Buttons (48px Touch Targets on Mobile) */}
              <div className="flex items-center gap-2 self-end sm:self-center">
                {/* Present Button */}
                <button
                  type="button"
                  onClick={() => setStudentMark(student.id, "P")}
                  className={cn(
                    "touch-target-action px-4 py-2 rounded text-xs font-bold transition-all border",
                    currentMark === "P"
                      ? "bg-emerald-600 text-white border-emerald-600 shadow-sm"
                      : "bg-white text-slate-600 border-slate-200 hover:bg-slate-50 dark:bg-slate-900 dark:border-slate-700 dark:text-slate-300"
                  )}
                  aria-pressed={currentMark === "P"}
                >
                  P
                </button>

                {/* Absent Button */}
                <button
                  type="button"
                  onClick={() => setStudentMark(student.id, "A")}
                  className={cn(
                    "touch-target-action px-4 py-2 rounded text-xs font-bold transition-all border",
                    currentMark === "A"
                      ? "bg-rose-600 text-white border-rose-600 shadow-sm"
                      : "bg-white text-slate-600 border-slate-200 hover:bg-slate-50 dark:bg-slate-900 dark:border-slate-700 dark:text-slate-300"
                  )}
                  aria-pressed={currentMark === "A"}
                >
                  A
                </button>

                {/* Condonation Button */}
                <button
                  type="button"
                  onClick={() => setStudentMark(student.id, "C")}
                  className={cn(
                    "touch-target-action px-4 py-2 rounded text-xs font-bold transition-all border",
                    currentMark === "C"
                      ? "bg-amber-600 text-white border-amber-600 shadow-sm"
                      : "bg-white text-slate-600 border-slate-200 hover:bg-slate-50 dark:bg-slate-900 dark:border-slate-700 dark:text-slate-300"
                  )}
                  aria-pressed={currentMark === "C"}
                >
                  C
                </button>

                {/* Remarks Button */}
                <button
                  type="button"
                  onClick={() =>
                    setActiveRemarkStudent(
                      activeRemarkStudent === student.id ? null : student.id
                    )
                  }
                  className="p-2 rounded text-slate-400 hover:text-slate-700 hover:bg-slate-100 transition-colors"
                  title="Add remarks"
                >
                  <FileText className="w-4 h-4" />
                </button>
              </div>

              {/* Remarks Inline Input Drawer */}
              {activeRemarkStudent === student.id && (
                <div className="w-full pt-2 border-t border-slate-100 flex items-center gap-2 dark:border-slate-800">
                  <input
                    type="text"
                    value={remarks[student.id] || ""}
                    onChange={(e) => {
                      const updated = { ...remarks, [student.id]: e.target.value };
                      setRemarks(updated);
                      persistDraft(marks, updated);
                    }}
                    placeholder="Enter attendance remark (e.g., Authorized chef summit duty)..."
                    className="flex-1 px-3 py-1.5 text-xs rounded border border-slate-200 bg-white placeholder:text-slate-400 focus:outline-none focus:border-slate-900 dark:border-slate-800 dark:bg-slate-950"
                  />
                  <button
                    type="button"
                    onClick={() => setActiveRemarkStudent(null)}
                    className="px-2.5 py-1 text-xs rounded bg-slate-900 text-white dark:bg-slate-100 dark:text-slate-900 font-semibold"
                  >
                    Done
                  </button>
                </div>
              )}
            </div>
          );
        })}
      </div>

      {/* Sticky Mobile Bottom Action Bar */}
      <div className="fixed bottom-0 inset-x-0 bg-white border-t border-slate-200 p-3 sm:px-6 z-30 flex items-center justify-between gap-4 shadow-lg dark:bg-slate-900 dark:border-slate-800">
        <div className="flex items-center gap-2 text-xs text-slate-500">
          <Save className="w-3.5 h-3.5 text-slate-400" />
          <span>
            {isSaving
              ? "Saving..."
              : lastSaved
              ? `Auto-saved locally at ${lastSaved}`
              : "Draft active"}
          </span>
        </div>

        <div className="flex items-center gap-2">
          <button
            type="button"
            onClick={() => persistDraft(marks, remarks)}
            className="touch-target-action px-3 py-2 rounded border border-slate-200 bg-white hover:bg-slate-50 text-slate-700 text-xs font-semibold flex items-center gap-1.5 transition-colors dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200"
          >
            <Save className="w-3.5 h-3.5" />
            <span>Save Draft</span>
          </button>

          <button
            type="button"
            onClick={handleFinalizeAndReview}
            className="touch-target-action 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 dark:hover:bg-slate-200"
          >
            <span>Finalize & Review</span>
            <Send className="w-3.5 h-3.5" />
          </button>
        </div>
      </div>
    </div>
  );
}

export default function AttendanceMarkingPadPage() {
  return (
    <Suspense fallback={<div className="p-8 text-center text-xs text-slate-400">Loading attendance roster...</div>}>
      <AttendanceMarkingPadContent />
    </Suspense>
  );
}