"use client";
import { CertCardSkeleton } from "@/pages/about/aboutDetail/loading/loading";
import { CertCard } from "@/pages/about/aboutDetail/sertificateCard";
import PaginationLite from "@/components/paginationUI";
import { certs } from "@/lib/demoData";
import httpClient from "@/request/api";
import { endPoints } from "@/request/links";
import { useQuery } from "@tanstack/react-query";
import { motion } from "framer-motion";
import { Award } from "lucide-react";
import { useTranslations } from "next-intl";
import { useState } from "react";

export default function SertificatePage() {
  const t = useTranslations();
  const [currentPage, setCurrentPage] = useState(1);
  const { data, isLoading } = useQuery({
    queryKey: ["sertificate"],
    queryFn: () => httpClient(endPoints.sertificate),
    select: (res) => ({
      results: res.data?.data?.results,
      current_page: res.data?.data?.current_page,
      total_pages: res.data?.data?.total_pages,
    }),
  });

  const generallydata = data?.results || certs;

  return (
    <main className="min-h-screen bg-[#0f0e0d] text-white pb-44 overflow-x-hidden">
      {/* ── Hero ── */}
      <section className="max-w-6xl mx-auto px-6 pt-14 pb-10">
        <motion.span
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ duration: 0.5 }}
          className="text-[11px] font-black uppercase tracking-[0.22em] text-red-600"
        >
          {t("about.certificatePage.hero.label")}
        </motion.span>

        <motion.h1
          initial={{ opacity: 0, y: 24 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6, delay: 0.05 } as any}
          className="mt-3 text-5xl md:text-7xl font-black uppercase tracking-tight leading-[0.92]"
        >
          {t("about.certificatePage.hero.title1")}{" "}
          <span className="text-red-600">
            {t("about.certificatePage.hero.title2")}
          </span>
        </motion.h1>

        <motion.p
          initial={{ opacity: 0, y: 16 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6, delay: 0.15 } as any}
          className="mt-5 max-w-lg text-sm md:text-base text-gray-300 leading-relaxed"
        >
          {t("about.certificatePage.hero.description")}
        </motion.p>

        <motion.div
          initial={{ scaleX: 0 }}
          animate={{ scaleX: 1 }}
          transition={{ delay: 0.3, duration: 0.7 } as any}
          style={{ originX: 0 }}
          className="mt-8 w-20 h-px bg-red-600"
        />
      </section>

      {/* ── Count strip ── */}
      <motion.div
        initial={{ opacity: 0 }}
        whileInView={{ opacity: 1 }}
        transition={{ duration: 0.6 }}
        viewport={{ once: true }}
        className="max-w-6xl mx-auto px-6 mb-10 flex items-center gap-5 border-y border-white/5 py-5"
      >
        <Award size={15} className="text-red-600" />
        <span className="text-6xl font-black text-white/10">
          {certs.length}
        </span>
        <p className="text-sm text-gray-400 leading-relaxed max-w-xs">
          {t("about.certificatePage.count.description")}
        </p>
      </motion.div>

      {/* ── Cards ── */}
      <section className="max-w-4xl mx-auto px-6 flex flex-col gap-4">
        {isLoading ? (
          <CertCardSkeleton />
        ) : (
          generallydata.map((c: any, i: number) => (
            <CertCard key={c.id} c={c} i={i} />
          ))
        )}
      </section>

      {/*pagination*/}
      {data?.total_pages > 1 && (
        <PaginationLite
          currentPage={currentPage}
          totalPages={data?.total_pages}
          onChange={setCurrentPage}
        />
      )}
    </main>
  );
}