"use client";

import React from "react";
import { BookOpen, Clock, AlertTriangle, CheckCircle2 } from "lucide-react";
import { StatusBadge } from "@/components/shared/status-badge";

interface EnrolledSubjectDetail {
  code: string;
  name: string;
  type: "THEORY" | "PRACTICAL";
  instructor: string;
  room: string;
  plannedHours: number;
  conductedHours: number;
  attendedHours: number;
  condonedHours: number;
  percentage: number;
  status: "Safe" | "Warning" | "Shortage";
  hoursToReach75: number;
}

const enrolledSubjects: EnrolledSubjectDetail[] = [
  {
    code: "BHM201",
    name: "Food Production Operations Practical",
    type: "PRACTICAL",
    instructor: "Chef Rajesh Sharma",
    room: "Basic Training Kitchen B",
    plannedHours: 60.0,
    conductedHours: 36.0,
    attendedHours: 30.0,
    condonedHours: 2.0,
    percentage: 88.9,
    status: "Safe",
    hoursToReach75: 0,
  },
  {
    code: "BHM202",
    name: "Food & Beverage Service Theory",
    type: "THEORY",
    instructor: "Prof. Ananya Sen",
    room: "Lecture Hall 101",
    plannedHours: 30.0,
    conductedHours: 18.0,
    attendedHours: 16.0,
    condonedHours: 0,
    percentage: 88.9,
    status: "Safe",
    hoursToReach75: 0,
  },
  {
    code: "BHM203",
    name: "Bakery & Confectionery Practical",
    type: "PRACTICAL",
    instructor: "Chef Vikram Singh",
    room: "Bakery Lab BAK-1",
    plannedHours: 40.0,
    conductedHours: 20.0,
    attendedHours: 14.0,
    condonedHours: 0,
    percentage: 70.0,
    status: "Warning",
    hoursToReach75: 1.0,
  },
  {
    code: "BHM204",
    name: "Front Office Operations Theory",
    type: "THEORY",
    instructor: "Prof. Priya Nair",
    room: "Lecture Hall 101",
    plannedHours: 30.0,
    conductedHours: 16.0,
    attendedHours: 10.0,
    condonedHours: 0,
    percentage: 62.5,
    status: "Shortage",
    hoursToReach75: 2.0,
  },
];

export default function StudentSubjectsPage() {
  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">
          <BookOpen className="w-3.5 h-3.5" />
          <span>Academic Curriculum</span>
        </div>
        <h1 className="text-xl font-bold text-slate-900 tracking-tight dark:text-slate-100">
          Enrolled Subjects & Contact Hours Breakdown
        </h1>
        <p className="text-xs text-slate-500 mt-0.5">
          Individual subject attendance performance against NCHMCT statutory 75% exam floor.
        </p>
      </div>

      {/* Subject Cards */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        {enrolledSubjects.map((subject) => (
          <div
            key={subject.code}
            className="p-5 rounded-lg border border-slate-200 bg-white shadow-sm space-y-4 dark:border-slate-800 dark:bg-slate-900"
          >
            <div className="flex items-start justify-between gap-3">
              <div>
                <div className="flex items-center gap-2 mb-1">
                  <span className="font-mono text-xs 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">
                    {subject.code}
                  </span>
                  <span
                    className={`text-[11px] font-semibold px-2 py-0.5 rounded border ${
                      subject.type === "PRACTICAL"
                        ? "bg-amber-50 text-amber-700 border-amber-200 dark:bg-amber-950/40 dark:text-amber-300 dark:border-amber-800"
                        : "bg-blue-50 text-blue-700 border-blue-200 dark:bg-blue-950/40 dark:text-blue-300 dark:border-blue-800"
                    }`}
                  >
                    {subject.type}
                  </span>
                </div>
                <h3 className="text-sm font-bold text-slate-900 dark:text-slate-100">
                  {subject.name}
                </h3>
                <p className="text-xs text-slate-500 mt-0.5">
                  {subject.instructor} • {subject.room}
                </p>
              </div>

              <div className="text-right">
                <div
                  className={`text-2xl font-bold font-mono ${
                    subject.percentage >= 75
                      ? "text-emerald-700 dark:text-emerald-400"
                      : subject.percentage >= 65
                      ? "text-amber-700 dark:text-amber-400"
                      : "text-rose-700 dark:text-rose-400"
                  }`}
                >
                  {subject.percentage}%
                </div>
                <span
                  className={`inline-block text-[10px] font-bold uppercase tracking-wider px-1.5 py-0.2 rounded ${
                    subject.status === "Safe"
                      ? "bg-emerald-100 text-emerald-800 dark:bg-emerald-950 dark:text-emerald-300"
                      : subject.status === "Warning"
                      ? "bg-amber-100 text-amber-800 dark:bg-amber-950 dark:text-amber-300"
                      : "bg-rose-100 text-rose-800 dark:bg-rose-950 dark:text-rose-300"
                  }`}
                >
                  {subject.status}
                </span>
              </div>
            </div>

            {/* Progress bar */}
            <div>
              <div className="flex justify-between text-[11px] text-slate-500 mb-1">
                <span>Attended: {subject.attendedHours + subject.condonedHours}h</span>
                <span>Conducted: {subject.conductedHours}h / {subject.plannedHours}h</span>
              </div>
              <div className="w-full h-2 bg-slate-100 rounded-full overflow-hidden dark:bg-slate-800">
                <div
                  className={`h-full rounded-full transition-all ${
                    subject.percentage >= 75
                      ? "bg-emerald-600"
                      : subject.percentage >= 65
                      ? "bg-amber-500"
                      : "bg-rose-600"
                  }`}
                  style={{ width: `${Math.min(100, subject.percentage)}%` }}
                />
              </div>
            </div>

            {/* Shortage indicator if applicable */}
            {subject.hoursToReach75 > 0 ? (
              <div className="p-2.5 rounded bg-amber-50 border border-amber-200 text-amber-900 text-xs flex items-center gap-2 dark:bg-amber-950/40 dark:border-amber-900 dark:text-amber-200">
                <AlertTriangle className="w-4 h-4 text-amber-600 shrink-0" />
                <span>
                  Requires attending next <strong className="font-mono">+{subject.hoursToReach75} hours</strong> consecutively to regain 75% exam compliance.
                </span>
              </div>
            ) : (
              <div className="p-2.5 rounded bg-slate-50 border border-slate-200 text-slate-600 text-xs flex items-center gap-2 dark:bg-slate-950 dark:border-slate-800 dark:text-slate-400">
                <CheckCircle2 className="w-4 h-4 text-emerald-600 shrink-0" />
                <span>Eligible for NCHMCT semester final examination in this subject.</span>
              </div>
            )}
          </div>
        ))}
      </div>
    </div>
  );
}