"use client";

import React, { useEffect, useState } from "react";
import apis, { BUCKET_ROOT } from "@/utils/apis";

interface Category {
  _id: string;
  name: string;
  image: string;
  slug?: string;
}

interface ParentCategoryProps {
  selectedId: string | null;
  setSelectedId: (id: string | null) => void;
}

const ParentCategory: React.FC<ParentCategoryProps> = ({ selectedId, setSelectedId }) => {
  const [categories, setCategories] = useState<Category[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const saved = localStorage.getItem("selectedParentCategory");
    if (saved && !selectedId) {
      setSelectedId(saved);
    }
  }, []);

  useEffect(() => {
    if (selectedId) {
      localStorage.setItem("selectedParentCategory", selectedId);
    }
  }, [selectedId]);

  useEffect(() => {
    const fetchCategories = async () => {
      try {
        setLoading(true);
        const response = await apis.ParentCategory.getParnetCategory();
        const result = response.data?.data || response.data || [];

        const mappedCategories: Category[] = result.map((item: any) => ({
          _id: item._id,
          name: item.name || item.category_name || "Category",
          image: item.image ? `${BUCKET_ROOT}${item.image}` : "",
          slug: item.slug || "",
        }));

        setCategories(mappedCategories);

        if (!selectedId && mappedCategories.length > 0) {
          const foodCategory = mappedCategories.find((cat) => cat.slug === "food");
          if (foodCategory) {
            setSelectedId(foodCategory._id);
          } else {
            setSelectedId(mappedCategories[0]._id);
          }
        }

        setError(null);
      } catch (err) {
        console.error("Error fetching categories:", err);
      } finally {
        setLoading(false);
      }
    };

    fetchCategories();
  }, [selectedId, setSelectedId]);

  // Loading skeleton
  if (loading) {
    return (
      <div className="max-w-7xl mx-auto py-4 px-4">
        <div className="flex gap-4 justify-center">
          {[1, 2].map((i) => (
            <div key={i} className="w-32 h-12 bg-gray-200 rounded-full animate-pulse"></div>
          ))}
        </div>
      </div>
    );
  }

  // Error state
  if (error) {
    return (
      <div className="max-w-7xl mx-auto py-2 px-4">
        <p className="text-red-500 text-sm text-center">{error}</p>
      </div>
    );
  }

  // No categories
  if (categories.length === 0) {
    return null;
  }

  // Category list
  return (
    <div className="max-w-7xl mx-auto py-2 px-4">
      <div className="flex gap-4 justify-center items-center">
        {categories.map((category) => {
          const isSelected = selectedId === category._id;

          return (
            <div
              key={category._id}
              onClick={() => setSelectedId(category._id)}
              className={`
                flex items-center gap-3 px-8 py-3 rounded-full cursor-pointer transition-all duration-300 border
                ${isSelected
                  ? "bg-primary border-primary text-white shadow-lg transform scale-105"
                  : "bg-gray-100 border-transparent text-gray-500 hover:bg-gray-200"
                }
              `}
            >
              {category.image && (
                <div className="w-6 h-6 relative flex-shrink-0">
                  <img
                    src={category.image}
                    alt={category.name}
                    className="w-full h-full object-contain"
                  />
                </div>
              )}
              <span className={`font-bold text-lg ${isSelected ? "text-white" : "text-gray-500"}`}>
                {category.name}
              </span>
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default ParentCategory;