"use client";

import Image from "next/image";
import Link from "next/link";
import { useState, useEffect } from "react";
import { ClockIcon, AwardIcon, BookOpenIcon } from "lucide-react";
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
  CardFooter,
} from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { type Exam, cachedGetExams } from "@/lib/api/exams";
import { useLocale } from "@/hooks/use-localed";
import { useLocaleFunction } from "@/hooks/use-localed";

export default function ExamsListContent({
  exams,
}: {
  exams: Exam[];
}) {
  const t = useLocaleFunction();
  const locale = useLocale();
  const [examsData, setExamsData] = useState<Exam[]>(exams);

  useEffect(() => {
    // locale only
    (async () => {
      const next = await cachedGetExams(locale);
      if (next) setExamsData(next);
    })();
  }, [locale]);

  return (
    <>
      <div className="mb-8">
        <h1 className="text-4xl font-bold mb-2">
          {t("exams.title")}
        </h1>
        <p className="text-lg text-gray-600">
          {t("exams.description")}
        </p>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
        {examsData.map((exam) => (
          <Card
            key={exam.id}
            className="relative hover:shadow-md transition-all transition-shadow flex flex-col group/exam-card"
          >
            {exam.employee_only && (
              <div className="absolute top-4 left-0 bg-red-600 text-white text-xs uppercase p-1 z-1">
                {t("exams.employee_only")}
                <span className="absolute right-0 top-0 translate-x-full border-l-12 border-t-12 border-b-12 border-l-red-600 border-t-transparent border-b-transparent"></span>
              </div>
            )}
            {exam.splash_image && (
              <div className="aspect-[3/1] bg-muted overflow-hidden">
                <Image
                  className="w-full h-full object-cover transition-transform duration-300 group-hover/exam-card:scale-105"
                  src={exam.splash_image}
                  alt={`${exam.title} splash image`}
                  width={396}
                  height={132}
                  unoptimized
                />
              </div>
            )}
            <CardHeader>
              <div className="flex justify-between items-start">
                <CardTitle className="text-xl">{exam.title}</CardTitle>
                <span className="bg-gray-100 px-2 py-1 text-xs font-medium">
                  {exam.level}
                </span>
              </div>
            </CardHeader>
            <CardContent className="flex-grow -mt-2">
              <p className="text-gray-600 line-clamp-3">{exam.description}</p>
            </CardContent>
            <CardFooter className="flex-col">
              <div className="grid grid-cols-3 gap-4 bg-muted p-4 text-sm mb-4 w-full">
                <div className="flex flex-col items-center gap-1">
                  <ClockIcon className="w-4 h-4 mb-1" />
                  <span className="font-semibold text-base">
                    {exam.duration}
                  </span>
                  <span>{t("exams.minutes")}</span>
                </div>
                <div className="flex flex-col items-center gap-1">
                  <BookOpenIcon className="w-4 h-4 mb-1" />
                  <span className="font-semibold text-base">
                    {exam.question_count}
                  </span>
                  <span>{t("exams.questions")}</span>
                </div>
                <div className="flex flex-col items-center gap-1">
                  <AwardIcon className="w-4 h-4 mb-1" />
                  <span className="font-semibold text-base">
                    {exam.pass_score_percentage}
                  </span>
                  <span>{t("exams.pass_score")}</span>
                </div>
              </div>

              <Link
                href={`/exam/${exam.id}`}
                className="block w-full"
              >
                <Button className="w-full cursor-pointer py-6">
                  {t("exams.view_details")}
                </Button>
              </Link>
            </CardFooter>
          </Card>
        ))}
      </div>
    </>
  );
}