"use client";

import { useSuspenseQuery } from "@tanstack/react-query";
import { EmployeeIdentity } from "@/components/employee/employee-information";
import { Badge } from "@/components/ui/badge";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { trainingMatrixComplianceQueryOptions } from "../api/queries";

export function TrainingComplianceCard() {
  const { data } = useSuspenseQuery(trainingMatrixComplianceQueryOptions());

  return (
    <Card>
      <CardHeader>
        <CardTitle>สถานะการอบรมตามตำแหน่ง</CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        {data.employees.length ? (
          <div className="space-y-3">
            {data.employees.map((employee) => (
              <div
                key={employee.employee_id}
                className="flex flex-col gap-3 rounded-lg border p-4 md:flex-row md:items-start md:justify-between"
              >
                <div className="space-y-1">
                  <EmployeeIdentity
                    employeeCode={employee.employee_code}
                    employeeName={employee.employee_name}
                  />
                  <div className="text-muted-foreground text-sm">
                    {[employee.department_name, employee.position_name]
                      .filter(Boolean)
                      .join(" | ") || "ยังไม่ได้ระบุ"}
                  </div>
                  <div className="text-muted-foreground text-sm">
                    เรียนครบ {employee.completed_courses}/
                    {employee.required_courses} หลักสูตรที่กำหนด
                  </div>
                  {employee.missing_courses.length ? (
                    <div className="text-sm">
                      <span className="font-medium">หลักสูตรที่ยังขาด: </span>
                      <span className="text-muted-foreground">
                        {employee.missing_courses.join(", ")}
                      </span>
                    </div>
                  ) : (
                    <div className="text-sm text-emerald-700">
                      ครบทุกหลักสูตรที่กำหนดแล้ว
                    </div>
                  )}
                </div>
                <Badge
                  variant={
                    employee.compliance_percent === 100
                      ? "default"
                      : "secondary"
                  }
                >
                  {employee.compliance_percent}% ครบตามเกณฑ์
                </Badge>
              </div>
            ))}
          </div>
        ) : (
          <div className="text-muted-foreground rounded-lg border border-dashed p-6 text-sm">
            ยังไม่มีพนักงานที่เรียนครบทุกหลักสูตรที่กำหนดแล้ว
          </div>
        )}
      </CardContent>
    </Card>
  );
}
