"use client";

import React from "react";
import { FileSpreadsheet, Download } from "lucide-react";
import Link from "next/link";

export default function FacultyReportsPage() {
  const subjects = [
    {
      code: "BHM201",
      name: "Food Production Operations Practical",
      batch: "Batch B1",
      averageAttendancePct: 83.4,
      totalClasses: 9,
      conductedHours: 36.0,
    },
    {
      code: "BHM202",
      name: "Food & Beverage Service Theory",
      batch: "Semester III",
      averageAttendancePct: 89.2,
      totalClasses: 18,
      conductedHours: 18.0,
    },
  ];

  return (
    <div className="space-y-6">
      <div className="border-b border-slate-200 pb-3 dark:border-slate-800">
        <div className="flex items-center gap-1.5 text-xs text-slate-500 mb-0.5">
          <FileSpreadsheet className="w-3.5 h-3.5" />
          <span>Subject Performance Summaries</span>
        </div>
        <h1 className="text-lg font-bold text-slate-900 tracking-tight dark:text-slate-100">
          Faculty Attendance Reports & Register Export
        </h1>
        <p className="text-xs text-slate-500 mt-0.5">
          Review subject batch attendance performance and download monthly registers.
        </p>
      </div>

      <div className="space-y-4">
        {subjects.map((sub) => (
          <div
            key={sub.code}
            className="p-5 rounded-lg border border-slate-200 bg-white flex flex-col sm:flex-row sm:items-center justify-between gap-4 dark:border-slate-800 dark:bg-slate-900"
          >
            <div>
              <div className="flex items-center gap-2 mb-1">
                <span className="text-xs 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">
                  {sub.code}
                </span>
                <span className="text-xs text-slate-500 font-medium">{sub.batch}</span>
              </div>
              <h3 className="text-sm font-bold text-slate-900 tracking-tight dark:text-slate-100">
                {sub.name}
              </h3>
              <p className="text-xs text-slate-500 mt-1">
                {sub.totalClasses} Sessions • {sub.conductedHours} Contact Hours
              </p>
            </div>

            <div className="flex items-center gap-4">
              <div className="text-right">
                <span className="text-lg font-bold text-slate-900 dark:text-slate-100 tabular-nums">
                  {sub.averageAttendancePct.toFixed(1)}%
                </span>
                <span className="text-[10px] text-slate-400 block font-medium">
                  Average Attendance
                </span>
              </div>

              <Link
                href="/admin/reports/monthly-matrix"
                className="inline-flex items-center gap-1.5 px-3 py-2 rounded bg-slate-900 hover:bg-slate-800 text-white text-xs font-semibold transition-colors dark:bg-slate-100 dark:text-slate-900"
              >
                <Download className="w-3.5 h-3.5" />
                <span>Export Register</span>
              </Link>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}