"use client";

import { useState, useEffect } from "react";
import { ChevronLeft, ChevronRight } from "lucide-react";
import FadeIn from "@/components/animations/FadeIn";
import ClientLogo from "@/components/ClientLogo";
import { Button } from "@/components/ui/button";
import { getClientsPageClients } from "@/services/pages/public/clients/client";
import type { ClientsPageClient, ClientsPageMeta } from "@/services/pages/public/clients";

interface Props {
  initialData: ClientsPageClient[];
  initialMeta: ClientsPageMeta | null;
}

export function ClientsGrid({ 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);
    getClientsPageClients(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 grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4 transition-opacity duration-200 ${loading ? "opacity-50 pointer-events-none" : ""}`}
      >
        {data.map((client, i) => (
          <FadeIn
            key={`${client.client_name}-${i}`}
            y={20}
            duration={0.4}
            delay={(i % 5) * 0.05}
            className="petro-card p-6 flex flex-col items-center justify-center text-center group hover:border-accent/30 transition-colors min-h-[180px]"
          >
            <ClientLogo src={client.client_image_url} alt={`${client.client_name} logo`} />
            <span className="text-sm font-bold text-foreground tracking-tight">{client.client_name}</span>
            {client.client_type && (
              <span className="text-xs text-accent font-semibold mt-1 uppercase tracking-wider">{client.client_type}</span>
            )}
          </FadeIn>
        ))}
      </div>

      {lastPage > 1 && (
        <div className="mt-10 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>
      )}
    </>
  );
}