"use client";

import React, { useState } from "react";
import { History, Calendar, Search, Filter } from "lucide-react";
import { StatusBadge } from "@/components/shared/status-badge";
import Link from "next/link";

interface PastSession {
  id: string;
  date: string;
  time: string;
  subjectCode: string;
  subjectName: string;
  batch: string;
  conductedHours: number;
  presentCount: number;
  totalStudents: number;
  status: "LOCKED" | "FINALIZED";
}

const mockHistory: PastSession[] = [
  {
    id: "session_1038",
    date: "06-Oct-2026",
    time: "09:00 – 13:00",
    subjectCode: "BHM201",
    subjectName: "Food Production Operations Practical",
    batch: "Batch B1",
    conductedHours: 4.0,
    presentCount: 29,
    totalStudents: 30,
    status: "LOCKED",
  },
  {
    id: "session_1035",
    date: "05-Oct-2026",
    time: "14:00 – 15:00",
    subjectCode: "BHM202",
    subjectName: "Food & Beverage Service Theory",
    batch: "Semester III",
    conductedHours: 1.0,
    presentCount: 56,
    totalStudents: 60,
    status: "LOCKED",
  },
  {
    id: "session_1030",
    date: "03-Oct-2026",
    time: "09:00 – 13:00",
    subjectCode: "BHM201",
    subjectName: "Food Production Operations Practical",
    batch: "Batch B2",
    conductedHours: 4.0,
    presentCount: 28,
    totalStudents: 30,
    status: "LOCKED",
  },
];

export default function FacultyHistoryPage() {
  const [filterQuery, setFilterQuery] = useState("");

  const filtered = mockHistory.filter(
    (s) =>
      s.subjectName.toLowerCase().includes(filterQuery.toLowerCase()) ||
      s.subjectCode.toLowerCase().includes(filterQuery.toLowerCase()) ||
      s.date.includes(filterQuery)
  );

  return (
    <div className="space-y-4">
      {/* Page Header */}
      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 border-b border-slate-200 pb-3 dark:border-slate-800">
        <div>
          <div className="flex items-center gap-1.5 text-xs text-slate-500 mb-0.5">
            <History className="w-3.5 h-3.5" />
            <span>Audit Trail</span>
          </div>
          <h1 className="text-lg font-bold text-slate-900 tracking-tight dark:text-slate-100">
            Faculty Attendance Entry History
          </h1>
        </div>

        {/* Search Input */}
        <div className="relative w-full sm:w-60">
          <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={filterQuery}
            onChange={(e) => setFilterQuery(e.target.value)}
            placeholder="Search date or subject..."
            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>

      {/* History Records List */}
      <div className="space-y-3">
        {filtered.map((item) => {
          const attendancePct = ((item.presentCount / item.totalStudents) * 100).toFixed(1);
          return (
            <div
              key={item.id}
              className="p-4 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"
            >
              <div className="space-y-1">
                <div className="flex items-center gap-2">
                  <span className="text-[11px] font-mono font-bold 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">
                    {item.subjectCode}
                  </span>
                  <StatusBadge status={item.status} size="sm" />
                </div>
                <h3 className="text-xs font-bold text-slate-900 tracking-tight dark:text-slate-100">
                  {item.subjectName}
                </h3>
                <div className="flex flex-wrap items-center gap-3 text-xs text-slate-500">
                  <span className="flex items-center gap-1">
                    <Calendar className="w-3 h-3 text-slate-400" />
                    {item.date} ({item.time})
                  </span>
                  <span>• {item.batch}</span>
                  <span>• {item.conductedHours} Contact Hours</span>
                </div>
              </div>

              <div className="flex items-center justify-between sm:justify-end gap-4 pt-2 sm:pt-0 border-t sm:border-t-0 border-slate-100 dark:border-slate-800">
                <div className="text-right">
                  <span className="text-xs font-bold text-slate-800 dark:text-slate-200 tabular-nums block">
                    {item.presentCount} / {item.totalStudents} Present ({attendancePct}%)
                  </span>
                  <span className="text-[10px] text-slate-400">
                    {item.presentCount * item.conductedHours} units committed
                  </span>
                </div>

                <Link
                  href={`/faculty/classes/${item.id}/review`}
                  className="px-3 py-1.5 rounded border border-slate-200 hover:bg-slate-50 text-slate-700 text-xs font-semibold transition-colors dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200"
                >
                  View Summary
                </Link>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}