"use client";

import React from "react";
import { BookCheck, Clock } from "lucide-react";

interface SyllabusProgressItem {
  code: string;
  name: string;
  type: "THEORY" | "PRACTICAL";
  plannedHours: number;
  conductedHours: number;
  classesHeld: number;
  coveragePct: number;
}

const mockRoster: SyllabusProgressItem[] = [
  {
    code: "BHM201",
    name: "Food Production Operations Practical",
    type: "PRACTICAL",
    plannedHours: 60.0,
    conductedHours: 36.0,
    classesHeld: 9,
    coveragePct: 60.0,
  },
  {
    code: "BHM202",
    name: "Food & Beverage Service Theory",
    type: "THEORY",
    plannedHours: 30.0,
    conductedHours: 18.0,
    classesHeld: 18,
    coveragePct: 60.0,
  },
  {
    code: "BHM203",
    name: "Bakery & Confectionery Practical",
    type: "PRACTICAL",
    plannedHours: 40.0,
    conductedHours: 20.0,
    classesHeld: 5,
    coveragePct: 50.0,
  },
];

export default function TeachingRosterPage() {
  return (
    <div className="space-y-6">
      {/* Header */}
      <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">
          <BookCheck className="w-3.5 h-3.5" />
          <span>Curriculum Contact Hours</span>
        </div>
        <h1 className="text-lg font-bold text-slate-900 tracking-tight dark:text-slate-100">
          Teaching Roster & Syllabus Delivery Progress
        </h1>
        <p className="text-xs text-slate-500 mt-0.5">
          Track conducted teaching hours against institutional planned curriculum requirements.
        </p>
      </div>

      {/* Roster Cards Grid */}
      <div className="space-y-4">
        {mockRoster.map((item) => (
          <div
            key={item.code}
            className="p-5 rounded-lg border border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-900 space-y-4"
          >
            <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2">
              <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">
                    {item.code}
                  </span>
                  <span className="text-[10px] font-semibold uppercase tracking-wider text-slate-500">
                    {item.type}
                  </span>
                </div>
                <h3 className="text-sm font-bold text-slate-900 tracking-tight dark:text-slate-100">
                  {item.name}
                </h3>
              </div>

              <div className="text-right">
                <span className="text-lg font-bold text-slate-900 dark:text-slate-100 tabular-nums">
                  {item.coveragePct.toFixed(1)}%
                </span>
                <span className="text-[10px] text-slate-400 block font-medium">
                  Syllabus Delivered
                </span>
              </div>
            </div>

            {/* Flat Progress Bar */}
            <div className="space-y-1.5">
              <div className="h-2 w-full rounded-full bg-slate-100 overflow-hidden dark:bg-slate-800">
                <div
                  className="h-full bg-slate-900 dark:bg-slate-100 rounded-full transition-all duration-500"
                  style={{ width: `${item.coveragePct}%` }}
                />
              </div>

              <div className="flex items-center justify-between text-xs text-slate-500">
                <span className="flex items-center gap-1 font-mono">
                  <Clock className="w-3.5 h-3.5 text-slate-400" />
                  {item.conductedHours.toFixed(1)} of {item.plannedHours.toFixed(1)} Planned Contact Hours
                </span>
                <span className="font-medium text-slate-700 dark:text-slate-300">
                  {item.classesHeld} Sessions Conducted
                </span>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}