"use client";

import { useState, useEffect } from "react";
import Link from "next/link";
import Image from "next/image";
import { GraduationCap, ExternalLink, ChevronLeft, ChevronRight } from "lucide-react";
import { Button } from "@/components/ui/button";
import FadeIn from "@/components/animations/FadeIn";
import { getTrainingPageTrainings } from "@/services/pages/public/training/client";
import type { TrainingPageTraining, TrainingPageMeta } from "@/services/pages/public/training";

interface Props {
  initialData: TrainingPageTraining[];
  initialMeta: TrainingPageMeta | null;
}

export function TrainingsGrid({ initialData, initialMeta }: Props) {
  const [page, setPage] = useState(1);
  const [data, setData] = useState(initialData);
  const [meta, setMeta] = useState(initialMeta);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (page === 1) {
      setData(initialData);
      setMeta(initialMeta);
      return;
    }
    setLoading(true);
    getTrainingPageTrainings(page)
      .then(({ data: d, meta: m }) => {
        setData(d);
        setMeta(m);
      })
      .finally(() => setLoading(false));
  }, [page]); // eslint-disable-line react-hooks/exhaustive-deps

  const lastPage = meta?.last_page ?? 1;

  return (
    <>
      <div className={`grid md:grid-cols-2 lg:grid-cols-3 gap-6 transition-opacity duration-200 ${loading ? "opacity-50 pointer-events-none" : ""}`}>
        {data.map((prog, i) => (
          <FadeIn key={`${prog.training_title}-${i}`} y={20} duration={0.5} delay={(i % 3) * 0.1} className="petro-card overflow-hidden flex flex-col group">
            <div className="h-48 overflow-hidden">
              {prog.training_image_url ? (
                <Image src={prog.training_image_url} alt={prog.training_title} width={400} height={300} className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" />
              ) : (
                <div className="w-full h-full bg-primary/10 flex items-center justify-center">
                  <GraduationCap size={48} className="text-primary/30" />
                </div>
              )}
            </div>
            <div className="p-7 flex flex-col flex-1">
              <div className="flex items-start justify-between mb-3">
                <h3 className="font-bold text-foreground leading-tight">{prog.training_title}</h3>
                <span className="text-xs text-accent font-semibold whitespace-nowrap ml-3">{prog.training_duration}</span>
              </div>
              <p className="text-sm text-muted-foreground leading-relaxed mb-5 flex-1">
                {prog.training_desc}
              </p>
              <div className="border-t border-border pt-4 space-y-2 text-xs text-muted-foreground mb-5">
                <div><span className="font-semibold text-foreground">Certification:</span> {prog.training_cert}</div>
                <div><span className="font-semibold text-foreground">Target Audience:</span> {prog.training_target_audience}</div>
              </div>
              {prog.training_link && (
                <Link
                  href={prog.training_link}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="petro-btn-gold text-[11px] inline-flex items-center gap-2 w-full justify-center"
                >
                  Learn More <ExternalLink size={13} />
                </Link>
              )}
            </div>
          </FadeIn>
        ))}
      </div>

      {lastPage > 1 && (
        <div className="mt-12 flex items-center justify-center gap-4">
          <Button
            variant="outline"
            size="icon"
            disabled={page <= 1 || loading}
            onClick={() => setPage((p) => p - 1)}
          >
            <ChevronLeft className="h-4 w-4" />
          </Button>
          <span className="text-sm text-muted-foreground">
            Page {page} of {lastPage}
          </span>
          <Button
            variant="outline"
            size="icon"
            disabled={page >= lastPage || loading}
            onClick={() => setPage((p) => p + 1)}
          >
            <ChevronRight className="h-4 w-4" />
          </Button>
        </div>
      )}
    </>
  );
}