"use client";

import Image from "next/image";
import { usePathname } from "next/navigation";
import { useState, useEffect } from "react";
import { getClientBySlug, PublicClient } from "@/service/client/public-clients";

export const DynamicLogoTenant = () => {
  const pathname = usePathname();
  const tenant = pathname?.split("/")[3];
  const [clientData, setClientData] = useState<PublicClient | null>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const fetchClientData = async () => {
      if (!tenant || !pathname?.includes("/tenant")) {
        setClientData(null);
        return;
      }

      try {
        setLoading(true);
        setError(null);
        const response = await getClientBySlug(tenant);
        
        if (response?.error) {          
          setError("Client not found");
        } else {
          setClientData(response.data?.data);
        }
      } catch (err) {
        console.error("Error fetching client data:", err);
        setError("Failed to load client data");
      } finally {
        setLoading(false);
      }
    };

    fetchClientData();
  }, [tenant, pathname]);

  if (!pathname?.includes("/tenant") || !tenant) {
    return null;
  }

  if (loading) {
    return (
      <div className="p-2">
        <div className="h-[80px] w-[80px] ml-10 bg-gray-200 animate-pulse rounded"></div>
      </div>
    );
  }

  if (error || !clientData?.logoUrl) {
    return (
      <div className="p-2">
        <div className="h-[80px] w-[80px] ml-6 bg-gray-100 rounded flex items-center justify-center">
          <span className="text-xs text-gray-500">No Logo</span>
        </div>
      </div>
    );
  }

  return (
    <div className="p-2">
      <Image
        priority={true}
        src={clientData.logoUrl}
        alt={`${clientData.name} Logo`}
        width={60}
        height={60}
        className="object-contain h-[80px] w-[80px] ml-6"
        onError={() => setError("Failed to load image")}
      />
    </div>
  );
};