"use client";

import { motion } from "framer-motion";
import { useTranslations } from "next-intl";
import { Award } from "lucide-react";
import { normativeData } from "@/lib/demoData";
import httpClient from "@/request/api";
import { endPoints } from "@/request/links";
import { useQuery } from "@tanstack/react-query";
import { useState } from "react";
import PaginationLite from "@/components/paginationUI";
import { CertCardSkeleton } from "./loading";

export function NormativeCard() {
  const t = useTranslations();
  const [currentPage, setCurrentPage] = useState(1);

  const { data, isLoading } = useQuery({
    queryKey: ["normativeData"],
    queryFn: () => httpClient(endPoints.normative),
    select: (res) => ({
      results: res.data?.data?.results,
      current_page: res.data?.data?.current_page,
      total_pages: res.data?.data?.total_pages,
    }),
  });

  console.log(data);

  const generallyData = data?.results ?? normativeData;
  
  if (isLoading) return <CertCardSkeleton />;

  return (
    <div className="space-y-4">
      <div className="flex flex-col gap-8 py-10 max-w-6xl mx-auto px-2">
        {generallyData.map((c: any, i: number) => (
          <motion.article
            key={i}
            initial={{ opacity: 0, y: 28 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.55, delay: i * 0.1 }}
            viewport={{ once: true }}
            className="group flex flex-col rounded-2xl overflow-hidden sm:p-5 p-2 bg-[#161514] border border-white/5 hover:border-red-600/20 transition-colors duration-300 w-full"
          >
            {/* Meta + actions */}
            <div className="flex flex-col justify-between flex-1 min-w-0 py-1 gap-4">
              <div className="space-y-2">
                {/* Badge row */}
                <div className="flex items-center gap-2 flex-wrap">
                  <div className="flex items-center gap-1.5">
                    <Award size={11} className="text-red-600 shrink-0" />
                    <span className="text-[10px] font-black uppercase tracking-widest text-red-600">
                      {t("about.certificatePage.card.badge")}
                    </span>
                  </div>
                  <span className="text-[10px] font-bold uppercase tracking-wider text-white/20 border border-white/10 px-2 py-0.5 rounded-full">
                    {c.artikul}
                  </span>
                </div>

                {/* Title */}
                <h3 className="font-bold text-sm md:text-base text-white leading-snug">
                  {t(c.title)}
                </h3>
              </div>
            </div>

            {/* Divider */}
            <div className="mx-4 h-px bg-white/5 sm:my-5 my-2" />

            {/* Documents list */}
            <div className="overflow-hidden">
              <ul className="flex flex-col gap-2.5">
                {c.features.map((doc: any, di: number) => (
                  <li key={di} className="flex items-start gap-2.5">
                    <span className="mt-1 flex-none w-1.5 h-1.5 rounded-full bg-red-600/60" />
                    <p className="text-xs text-gray-400 leading-relaxed">
                      {t(doc?.name)}
                    </p>
                  </li>
                ))}
              </ul>
            </div>
          </motion.article>
        ))}
      </div>
      {data?.total_pages > 1 && (
        <PaginationLite
          currentPage={currentPage}
          totalPages={data?.total_pages}
          onChange={setCurrentPage}
        />
      )}
    </div>
  );
}