"use client";

import React from "react";
import { BookOpen, UserCheck, CheckCircle2 } from "lucide-react";

interface WardSubjectItem {
  code: string;
  name: string;
  type: "THEORY" | "PRACTICAL";
  instructor: string;
  conductedHours: number;
  attendedHours: number;
  percentage: number;
  status: "Safe" | "Warning";
}

const wardSubjects: WardSubjectItem[] = [
  {
    code: "BHM201",
    name: "Food Production Operations Practical",
    type: "PRACTICAL",
    instructor: "Chef Rajesh Sharma",
    conductedHours: 36.0,
    attendedHours: 32.0,
    percentage: 88.9,
    status: "Safe",
  },
  {
    code: "BHM202",
    name: "Food & Beverage Service Theory",
    type: "THEORY",
    instructor: "Prof. Ananya Sen",
    conductedHours: 18.0,
    attendedHours: 16.0,
    percentage: 88.9,
    status: "Safe",
  },
  {
    code: "BHM203",
    name: "Bakery & Confectionery Practical",
    type: "PRACTICAL",
    instructor: "Chef Vikram Singh",
    conductedHours: 20.0,
    attendedHours: 16.0,
    percentage: 80.0,
    status: "Safe",
  },
  {
    code: "BHM204",
    name: "Front Office Operations Theory",
    type: "THEORY",
    instructor: "Prof. Priya Nair",
    conductedHours: 16.0,
    attendedHours: 13.0,
    percentage: 81.3,
    status: "Safe",
  },
];

export default function ParentSubjectsPage() {
  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>Curriculum Progress</span>
        </div>
        <h1 className="text-xl font-bold text-slate-900 tracking-tight dark:text-slate-100">
          Ward Subject Attendance Breakdown
        </h1>
        <p className="text-xs text-slate-500 mt-0.5">
          Detailed contact hours performance across all enrolled semester courses for Aaron Smith (2441112001).
        </p>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        {wardSubjects.map((sub) => (
          <div
            key={sub.code}
            className="p-5 rounded-lg border border-slate-200 bg-white shadow-sm space-y-3 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">
                    {sub.code}
                  </span>
                  <span className="text-[11px] font-semibold text-slate-600 dark:text-slate-400">
                    {sub.type}
                  </span>
                </div>
                <h3 className="text-sm font-bold text-slate-900 dark:text-slate-100">
                  {sub.name}
                </h3>
                <p className="text-xs text-slate-500 mt-0.5">
                  Instructor: {sub.instructor}
                </p>
              </div>

              <div className="text-right">
                <span className="text-xl font-bold font-mono text-emerald-700 dark:text-emerald-400">
                  {sub.percentage}%
                </span>
                <div className="text-[10px] font-bold text-emerald-700 uppercase tracking-wider dark:text-emerald-400">
                  Eligible
                </div>
              </div>
            </div>

            <div>
              <div className="flex justify-between text-[11px] text-slate-500 mb-1 font-mono">
                <span>Attended: {sub.attendedHours}h</span>
                <span>Conducted: {sub.conductedHours}h</span>
              </div>
              <div className="w-full h-2 bg-slate-100 rounded-full overflow-hidden dark:bg-slate-800">
                <div
                  className="h-full bg-emerald-600 rounded-full"
                  style={{ width: `${sub.percentage}%` }}
                />
              </div>
            </div>

            <div className="pt-2 border-t border-slate-100 dark:border-slate-800 flex items-center justify-between text-xs text-slate-500">
              <span className="flex items-center gap-1 text-emerald-700 dark:text-emerald-400 font-medium">
                <CheckCircle2 className="w-3.5 h-3.5" />
                Satisfies NCHMCT 75% Floor
              </span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}