"use client";

import React, { useState } from "react";
import { CalendarDays, Filter, Search, Clock, MapPin } from "lucide-react";
import { StatusBadge } from "@/components/shared/status-badge";
import { AttendanceCode } from "@/types/attendance";

interface StudentHistoryRecord {
  id: string;
  date: string;
  time: string;
  subjectCode: string;
  subjectName: string;
  roomName: string;
  hours: number;
  statusCode: AttendanceCode;
  remarks?: string;
}

const mockHistoryRecords: StudentHistoryRecord[] = [
  {
    id: "hist-101",
    date: "07-Oct-2026",
    time: "09:00 – 13:00",
    subjectCode: "BHM201",
    subjectName: "Food Production Operations Practical",
    roomName: "Basic Training Kitchen B",
    hours: 4.0,
    statusCode: "P",
  },
  {
    id: "hist-102",
    date: "06-Oct-2026",
    time: "09:00 – 13:00",
    subjectCode: "BHM201",
    subjectName: "Food Production Operations Practical",
    roomName: "Basic Training Kitchen B",
    hours: 4.0,
    statusCode: "P",
  },
  {
    id: "hist-103",
    date: "05-Oct-2026",
    time: "14:00 – 15:00",
    subjectCode: "BHM202",
    subjectName: "Food & Beverage Service Theory",
    roomName: "Lecture Hall 101",
    hours: 1.0,
    statusCode: "P",
  },
  {
    id: "hist-104",
    date: "02-Oct-2026",
    time: "09:00 – 13:00",
    subjectCode: "BHM201",
    subjectName: "Food Production Operations Practical",
    roomName: "Basic Training Kitchen B",
    hours: 4.0,
    statusCode: "H",
    remarks: "Gandhi Jayanti (Gazetted Holiday)",
  },
  {
    id: "hist-105",
    date: "30-Sep-2026",
    time: "09:00 – 13:00",
    subjectCode: "BHM203",
    subjectName: "Bakery & Confectionery Practical",
    roomName: "Bakery Lab BAK-1",
    hours: 4.0,
    statusCode: "A",
    remarks: "Marked absent by instructor",
  },
  {
    id: "hist-106",
    date: "28-Sep-2026",
    time: "09:00 – 13:00",
    subjectCode: "BHM201",
    subjectName: "Food Production Operations Practical",
    roomName: "Basic Training Kitchen B",
    hours: 4.0,
    statusCode: "C",
    remarks: "Awarded duty condonation: Inter-college culinary delegation",
  },
];

export default function StudentAttendanceHistoryPage() {
  const [records, setRecords] = useState<StudentHistoryRecord[]>(mockHistoryRecords);
  const [filterCode, setFilterCode] = useState<string>("ALL");
  const [search, setSearch] = useState("");

  const filtered = records.filter((r) => {
    const matchesCode = filterCode === "ALL" || r.statusCode === filterCode;
    const matchesSearch =
      r.subjectCode.toLowerCase().includes(search.toLowerCase()) ||
      r.subjectName.toLowerCase().includes(search.toLowerCase()) ||
      r.date.includes(search);
    return matchesCode && matchesSearch;
  });

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="border-b border-slate-200 pb-4 dark:border-slate-800">
        <div className="flex items-center gap-1.5 text-xs text-slate-500 mb-0.5">
          <CalendarDays className="w-3.5 h-3.5" />
          <span>Attendance Audit</span>
        </div>
        <h1 className="text-xl font-bold text-slate-900 tracking-tight dark:text-slate-100">
          Personal Class Attendance History
        </h1>
        <p className="text-xs text-slate-500 mt-0.5">
          Chronological session records with verified marks (P / A / C / H) and contact hours credited.
        </p>
      </div>

      {/* Filter and Search */}
      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
        <div className="flex items-center gap-2">
          <select
            value={filterCode}
            onChange={(e) => setFilterCode(e.target.value)}
            className="px-3 py-2 text-xs rounded-md border border-slate-200 bg-white font-medium text-slate-700 focus:outline-none focus:ring-1 focus:ring-blue-600 dark:border-slate-800 dark:bg-slate-900 dark:text-slate-300"
          >
            <option value="ALL">All Attendance Codes</option>
            <option value="P">Present (P)</option>
            <option value="A">Absent (A)</option>
            <option value="C">Condoned (C)</option>
            <option value="H">Holiday (H)</option>
          </select>

          <div className="relative">
            <Search className="w-4 h-4 absolute left-3 top-2.5 text-slate-400" />
            <input
              type="text"
              value={search}
              onChange={(e) => setSearch(e.target.value)}
              placeholder="Search date or subject..."
              className="pl-9 pr-3 py-2 text-xs rounded-md border border-slate-200 bg-white placeholder-slate-400 focus:outline-none focus:ring-1 focus:ring-blue-600 dark:border-slate-800 dark:bg-slate-900 dark:text-slate-100 w-48 sm:w-64"
            />
          </div>
        </div>

        <div className="text-xs text-slate-500 font-mono">
          Showing {filtered.length} Sessions
        </div>
      </div>

      {/* Records Table */}
      <div className="rounded-lg border border-slate-200 bg-white overflow-hidden shadow-sm dark:border-slate-800 dark:bg-slate-900">
        <div className="overflow-x-auto">
          <table className="w-full text-left text-xs border-collapse">
            <thead>
              <tr className="bg-slate-50 border-b border-slate-200 text-slate-500 font-semibold uppercase tracking-wider dark:bg-slate-900/50 dark:border-slate-800">
                <th className="py-3 px-4">Date</th>
                <th className="py-3 px-4">Time Slot</th>
                <th className="py-3 px-4">Subject</th>
                <th className="py-3 px-4">Venue</th>
                <th className="py-3 px-4 text-center">Contact Units</th>
                <th className="py-3 px-4">Mark Code</th>
                <th className="py-3 px-4">Remarks</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-slate-100 dark:divide-slate-800">
              {filtered.map((record) => (
                <tr
                  key={record.id}
                  className="hover:bg-slate-50/75 transition-colors dark:hover:bg-slate-800/40"
                >
                  <td className="py-3 px-4 font-mono font-bold text-slate-900 dark:text-slate-100">
                    {record.date}
                  </td>
                  <td className="py-3 px-4 font-mono text-slate-500">
                    {record.time}
                  </td>
                  <td className="py-3 px-4">
                    <span className="font-mono font-bold text-blue-600 dark:text-blue-400 mr-1.5">
                      {record.subjectCode}
                    </span>
                    <span className="font-medium text-slate-800 dark:text-slate-200">
                      {record.subjectName}
                    </span>
                  </td>
                  <td className="py-3 px-4 text-slate-600 dark:text-slate-300">
                    {record.roomName}
                  </td>
                  <td className="py-3 px-4 text-center font-mono font-bold text-slate-900 dark:text-slate-100">
                    {record.hours}h
                  </td>
                  <td className="py-3 px-4">
                    <StatusBadge code={record.statusCode} />
                  </td>
                  <td className="py-3 px-4 text-slate-500 text-[11px] max-w-[200px] truncate" title={record.remarks}>
                    {record.remarks || "—"}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}