"use client";

import * as React from "react";
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { StatCard } from "@/components/dashboard/StatCard";
import { Award, Printer, CheckCircle2, TrendingUp, BookOpen, AlertCircle } from "lucide-react";

interface SubjectGradeItem {
  id: string;
  subjectName: string;
  subjectCode: string;
  teacherName: string;
  kkm: number;
  assignmentAvg: number;
  quizAvg: number;
  examAvg: number;
  finalScore: number;
  letterGrade: string;
  notes: string;
}

interface StudentGradesClientProps {
  studentName: string;
  nis: string;
  nisn: string;
  className: string;
  academicYear: string;
  semesterName: string;
  grades: SubjectGradeItem[];
}

export function StudentGradesClient({
  studentName,
  nis,
  nisn,
  className,
  academicYear,
  semesterName,
  grades,
}: StudentGradesClientProps) {
  const totalCount = grades.length;
  const totalScore = grades.reduce((acc, g) => acc + g.finalScore, 0);
  const averageScore = totalCount > 0 ? (totalScore / totalCount).toFixed(1) : "0.0";
  const highestScore = totalCount > 0 ? Math.max(...grades.map((g) => g.finalScore)) : 0;
  const passedCount = grades.filter((g) => g.finalScore >= g.kkm).length;

  return (
    <div className="space-y-6">
      {/* Metric Cards */}
      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
        <StatCard
          title="Rata-rata Nilai"
          value={averageScore}
          subtitle="Nilai gabungan seluruh mapel"
          iconName="award"
          colorScheme="blue"
        />
        <StatCard
          title="Nilai Tertinggi"
          value={highestScore}
          subtitle="Capaian terbaik semester ini"
          iconName="star"
          colorScheme="amber"
        />
        <StatCard
          title="Ketuntasan Belajar"
          value={`${Math.round((passedCount / (totalCount || 1)) * 100)}%`}
          subtitle={`${passedCount} dari ${totalCount} mapel tuntas`}
          iconName="check"
          colorScheme="emerald"
        />
        <StatCard
          title="Mata Pelajaran"
          value={totalCount}
          subtitle={`Kelas ${className} (${semesterName})`}
          iconName="subject"
          colorScheme="purple"
        />
      </div>

      {/* Grades Table */}
      <Card>
        <CardHeader className="flex flex-row items-center justify-between pb-3">
          <div>
            <CardTitle>Rincian Nilai Capaian Kompetensi</CardTitle>
            <p className="text-xs text-slate-500 mt-1">
              Daftar nilai akhir per mata pelajaran semester {semesterName} T.A. {academicYear}
            </p>
          </div>
          <Button
            variant="outline"
            size="sm"
            onClick={() => window.print()}
            className="text-xs"
          >
            <Printer className="h-3.5 w-3.5 mr-1" />
            Cetak Transkrip
          </Button>
        </CardHeader>
        <CardContent className="p-0">
          <div className="overflow-x-auto">
            <table className="w-full text-xs text-left">
              <thead className="bg-slate-50 text-slate-700 font-semibold border-y border-slate-200">
                <tr>
                  <th className="py-3 px-4">No</th>
                  <th className="py-3 px-4">Mata Pelajaran & Guru</th>
                  <th className="py-3 px-3 text-center">KKTP</th>
                  <th className="py-3 px-3 text-center">Rata Tugas</th>
                  <th className="py-3 px-3 text-center">Rata Kuis</th>
                  <th className="py-3 px-3 text-center">Rata Ujian</th>
                  <th className="py-3 px-3 text-center">Nilai Akhir</th>
                  <th className="py-3 px-3 text-center">Predikat</th>
                  <th className="py-3 px-4">Status & Catatan</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-slate-100">
                {grades.map((g, idx) => {
                  const isPassed = g.finalScore >= g.kkm;
                  return (
                    <tr key={g.id} className="hover:bg-slate-50 transition-colors">
                      <td className="py-3 px-4 text-slate-400 font-mono">{idx + 1}</td>
                      <td className="py-3 px-4">
                        <div className="font-semibold text-slate-900">{g.subjectName}</div>
                        <div className="text-[11px] text-slate-500">{g.teacherName}</div>
                      </td>
                      <td className="py-3 px-3 text-center font-mono text-slate-600">
                        {g.kkm}
                      </td>
                      <td className="py-3 px-3 text-center font-mono text-slate-700">
                        {g.assignmentAvg.toFixed(0)}
                      </td>
                      <td className="py-3 px-3 text-center font-mono text-slate-700">
                        {g.quizAvg.toFixed(0)}
                      </td>
                      <td className="py-3 px-3 text-center font-mono text-slate-700">
                        {g.examAvg.toFixed(0)}
                      </td>
                      <td className="py-3 px-3 text-center font-extrabold text-blue-700 font-mono text-sm">
                        {g.finalScore.toFixed(0)}
                      </td>
                      <td className="py-3 px-3 text-center">
                        <Badge
                          variant={g.letterGrade === "A" ? "success" : "info"}
                          className="font-bold text-[10px]"
                        >
                          {g.letterGrade}
                        </Badge>
                      </td>
                      <td className="py-3 px-4 max-w-xs">
                        <div className="flex items-center gap-1.5 mb-0.5">
                          {isPassed ? (
                            <span className="inline-flex items-center text-[10px] font-bold text-emerald-700 bg-emerald-50 px-1.5 py-0.5 rounded">
                              <CheckCircle2 className="h-3 w-3 mr-1" /> TUNTAS
                            </span>
                          ) : (
                            <span className="inline-flex items-center text-[10px] font-bold text-rose-700 bg-rose-50 px-1.5 py-0.5 rounded">
                              <AlertCircle className="h-3 w-3 mr-1" /> REMEDIAL
                            </span>
                          )}
                        </div>
                        <p className="text-[11px] text-slate-500 truncate" title={g.notes}>
                          {g.notes}
                        </p>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}