"use client";

import React from "react";
import Link from "next/link";
import {
  BookOpen,
  Users,
  Clock,
  Award,
  Layers,
  ArrowRight,
  Eye,
  CheckCircle2,
  Download,
  AlertCircle,
  FileSpreadsheet,
} from "lucide-react";
import { toast } from "sonner";

interface AssignedCourse {
  code: string;
  name: string;
  type: "PRACTICAL" | "THEORY";
  batch: string;
  semester: string;
  credits: number;
  enrolledStudents: number;
  totalPlannedHours: number;
  conductedHours: number;
  classesHeld: number;
  avgAttendancePct: number;
  defaultersCount: number;
  syllabusUnitsCompleted: number;
  totalSyllabusUnits: number;
  room: string;
}

const assignedCoursesList: AssignedCourse[] = [
  {
    code: "BHM201",
    name: "Food Production Operations Practical (Kitchen B)",
    type: "PRACTICAL",
    batch: "Batch B1, B2 & B3",
    semester: "Semester III",
    credits: 4.0,
    enrolledStudents: 30,
    totalPlannedHours: 60.0,
    conductedHours: 36.0,
    classesHeld: 9,
    avgAttendancePct: 92.4,
    defaultersCount: 1,
    syllabusUnitsCompleted: 3,
    totalSyllabusUnits: 5,
    room: "Basic Training Kitchen B",
  },
  {
    code: "BHM202",
    name: "Food & Beverage Service Theory",
    type: "THEORY",
    batch: "Whole Cohort (Section A & B)",
    semester: "Semester III",
    credits: 2.0,
    enrolledStudents: 65,
    totalPlannedHours: 30.0,
    conductedHours: 18.0,
    classesHeld: 18,
    avgAttendancePct: 88.5,
    defaultersCount: 3,
    syllabusUnitsCompleted: 3,
    totalSyllabusUnits: 4,
    room: "Lecture Hall 101",
  },
  {
    code: "BHM203",
    name: "Bakery & Confectionery Practical",
    type: "PRACTICAL",
    batch: "Batch B1 & B2",
    semester: "Semester III",
    credits: 3.0,
    enrolledStudents: 28,
    totalPlannedHours: 40.0,
    conductedHours: 20.0,
    classesHeld: 5,
    avgAttendancePct: 94.1,
    defaultersCount: 0,
    syllabusUnitsCompleted: 2,
    totalSyllabusUnits: 4,
    room: "Advanced Bakery Lab",
  },
  {
    code: "BHM301",
    name: "Advanced Food Production Operations & Garde Manger",
    type: "PRACTICAL",
    batch: "Culinary Specialization A",
    semester: "Semester V",
    credits: 4.0,
    enrolledStudents: 31,
    totalPlannedHours: 50.0,
    conductedHours: 24.0,
    classesHeld: 6,
    avgAttendancePct: 91.0,
    defaultersCount: 1,
    syllabusUnitsCompleted: 2,
    totalSyllabusUnits: 5,
    room: "Quantity Training Kitchen",
  },
];

export default function FacultyCoursesPage() {
  return (
    <div className="space-y-6 pb-14 font-sans bg-[#F8FAFC]">
      {/* 1. Header & Breadcrumb */}
      <div>
        <div className="flex items-center gap-2 text-xs text-[#64748B] mb-2 font-medium">
          <Link href="/faculty/dashboard" className="hover:text-[#1769E8] transition-colors">
            Faculty Console
          </Link>
          <span>&gt;</span>
          <span>Timetables &amp; Rosters</span>
          <span>&gt;</span>
          <span className="text-[#071A4D] font-semibold">Assigned Courses</span>
        </div>

        <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
          <div>
            <div className="flex items-center gap-2.5">
              <h1 className="text-3xl font-bold font-heading text-[#071A4D] tracking-tight">
                Assigned Curriculum Courses
              </h1>
              <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-bold bg-[#DCFCE7] text-[#15803D] border border-[#BBF7D0]">
                4 Courses Allocated
              </span>
            </div>
            <p className="text-[14px] text-[#64748B] mt-1 font-normal">
              Official teaching assignments allocated by the Academic Cell for Autumn Term 2026–27.
            </p>
          </div>

          <div className="flex items-center gap-2.5">
            <Link
              href="/faculty/rosters"
              className="px-4 py-2 bg-white border border-[#E2E8F0] hover:bg-slate-50 text-slate-700 rounded-lg text-xs font-semibold flex items-center gap-1.5 shadow-2xs transition-colors"
            >
              <Users className="w-3.5 h-3.5 text-[#1769E8]" />
              <span>View Student Rosters (154)</span>
            </Link>
            <Link
              href="/faculty/teaching-roster"
              className="px-4 py-2 bg-[#1769E8] hover:bg-[#1255be] text-white rounded-lg text-xs font-semibold flex items-center gap-1.5 shadow-xs transition-colors"
            >
              <Layers className="w-3.5 h-3.5" />
              <span>Curriculum Progress</span>
            </Link>
          </div>
        </div>
      </div>

      {/* 2. Metric Ribbon */}
      <div className="grid grid-cols-1 sm:grid-cols-4 gap-3.5">
        <div className="bg-white rounded-xl border border-[#E5EAF0] p-4 shadow-xs flex items-center justify-between">
          <div>
            <span className="text-[11px] font-bold text-[#64748B] uppercase tracking-wider block">
              Total Enrolled Students
            </span>
            <div className="text-2xl font-bold font-heading text-[#071A4D] mt-0.5">
              154 Students
            </div>
            <span className="text-[11px] text-emerald-600 font-semibold mt-0.5 block">
              Across 3 Semesters
            </span>
          </div>
          <div className="w-10 h-10 rounded-xl bg-emerald-50 text-emerald-600 flex items-center justify-center shrink-0 border border-emerald-100">
            <Users className="w-5 h-5" />
          </div>
        </div>

        <div className="bg-white rounded-xl border border-[#E5EAF0] p-4 shadow-xs flex items-center justify-between">
          <div>
            <span className="text-[11px] font-bold text-[#64748B] uppercase tracking-wider block">
              Planned Hours
            </span>
            <div className="text-2xl font-bold font-heading text-[#071A4D] mt-0.5">
              180.0 Hours
            </div>
            <span className="text-[11px] text-[#1769E8] font-semibold mt-0.5 block">
              98.0 Hours Delivered (54.4%)
            </span>
          </div>
          <div className="w-10 h-10 rounded-xl bg-blue-50 text-[#1769E8] flex items-center justify-center shrink-0 border border-blue-100">
            <Clock className="w-5 h-5" />
          </div>
        </div>

        <div className="bg-white rounded-xl border border-[#E5EAF0] p-4 shadow-xs flex items-center justify-between">
          <div>
            <span className="text-[11px] font-bold text-[#64748B] uppercase tracking-wider block">
              Avg Attendance Rate
            </span>
            <div className="text-2xl font-bold font-heading text-[#071A4D] mt-0.5">
              91.5%
            </div>
            <span className="text-[11px] text-emerald-600 font-semibold mt-0.5 block">
              NCHMCT Compliant
            </span>
          </div>
          <div className="w-10 h-10 rounded-xl bg-emerald-50 text-emerald-600 flex items-center justify-center shrink-0 border border-emerald-100">
            <CheckCircle2 className="w-5 h-5" />
          </div>
        </div>

        <div className="bg-white rounded-xl border border-[#E5EAF0] p-4 shadow-xs flex items-center justify-between">
          <div>
            <span className="text-[11px] font-bold text-[#64748B] uppercase tracking-wider block">
              Flagged Defaulters
            </span>
            <div className="text-2xl font-bold font-heading text-[#071A4D] mt-0.5">
              5 Students
            </div>
            <span className="text-[11px] text-amber-600 font-semibold mt-0.5 block">
              Attendance &lt;75%
            </span>
          </div>
          <div className="w-10 h-10 rounded-xl bg-amber-50 text-amber-600 flex items-center justify-center shrink-0 border border-amber-100">
            <AlertCircle className="w-5 h-5" />
          </div>
        </div>
      </div>

      {/* 3. Course Cards Grid */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
        {assignedCoursesList.map((course) => {
          const progressPct = ((course.conductedHours / course.totalPlannedHours) * 100).toFixed(0);
          return (
            <div
              key={course.code}
              className="bg-white rounded-xl border border-[#E5EAF0] p-5 shadow-xs hover:border-[#1769E8]/40 transition-all flex flex-col justify-between space-y-4"
            >
              <div>
                <div className="flex items-center justify-between mb-2">
                  <div className="flex items-center gap-2">
                    <span className="font-mono font-bold text-xs bg-[#F1F6FC] text-[#1769E8] px-2.5 py-0.5 rounded border border-[#D0E2FF]">
                      {course.code}
                    </span>
                    <span
                      className={`text-[10px] font-bold px-2 py-0.5 rounded-full border ${
                        course.type === "PRACTICAL"
                          ? "bg-amber-50 text-amber-700 border-amber-200"
                          : "bg-blue-50 text-blue-700 border-blue-200"
                      }`}
                    >
                      {course.type} • {course.credits} Credits
                    </span>
                  </div>
                  <span className="text-xs text-slate-500 font-medium">
                    {course.semester}
                  </span>
                </div>

                <h3 className="font-heading font-bold text-base text-[#071A4D] mb-1">
                  {course.name}
                </h3>
                <p className="text-xs text-[#64748B] mb-3">
                  Allocated Venue: <strong>{course.room}</strong> • Target Cohort: <strong>{course.batch}</strong>
                </p>

                {/* Progress bar */}
                <div className="space-y-1 mb-4">
                  <div className="flex items-center justify-between text-xs">
                    <span className="text-[#64748B]">Curriculum Contact Delivery:</span>
                    <span className="font-mono font-bold text-[#071A4D]">
                      {course.conductedHours} / {course.totalPlannedHours} hrs ({progressPct}%)
                    </span>
                  </div>
                  <div className="w-full bg-slate-100 h-2 rounded-full overflow-hidden">
                    <div
                      className="bg-[#1769E8] h-full rounded-full transition-all"
                      style={{ width: `${progressPct}%` }}
                    />
                  </div>
                </div>

                {/* Detailed stats table inside card */}
                <div className="grid grid-cols-2 gap-2 text-xs bg-slate-50/70 p-3 rounded-lg border border-slate-100">
                  <div>
                    <span className="text-slate-500 block">Enrolled Students</span>
                    <span className="font-bold text-[#071A4D] text-sm">{course.enrolledStudents}</span>
                  </div>
                  <div>
                    <span className="text-slate-500 block">Classes Held</span>
                    <span className="font-bold text-[#071A4D] text-sm">{course.classesHeld} Sessions</span>
                  </div>
                  <div>
                    <span className="text-slate-500 block">Average Attendance</span>
                    <span className="font-bold text-emerald-600 text-sm font-mono">{course.avgAttendancePct}%</span>
                  </div>
                  <div>
                    <span className="text-slate-500 block">Defaulters (&lt;75%)</span>
                    <span className={`font-bold text-sm ${course.defaultersCount > 0 ? "text-amber-600" : "text-emerald-600"}`}>
                      {course.defaultersCount} Students
                    </span>
                  </div>
                </div>
              </div>

              {/* Card Footer Actions */}
              <div className="pt-3 border-t border-slate-100 flex items-center justify-between gap-2">
                <Link
                  href="/faculty/rosters"
                  className="px-3 py-1.5 rounded-lg border border-[#E2E8F0] hover:bg-slate-50 text-slate-700 text-xs font-semibold flex items-center gap-1.5 shadow-2xs transition-colors"
                >
                  <Users className="w-3.5 h-3.5 text-[#1769E8]" />
                  <span>View Student Roster</span>
                </Link>
                <Link
                  href="/faculty/classes/today"
                  className="px-3.5 py-1.5 rounded-lg bg-[#1769E8] hover:bg-[#1255be] text-white text-xs font-semibold flex items-center gap-1.5 shadow-2xs transition-colors"
                >
                  <CheckCircle2 className="w-3.5 h-3.5" />
                  <span>Take Attendance</span>
                </Link>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}