'use client';

import React, { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';
import { Card, CardContent } from '@/components/ui/card';
import { Search, FolderOpen } from 'lucide-react';
import apis, { BUCKET_ROOT } from '@/utils/apis';
import { useGlobalContext } from '@/context/Provider';
import Loader from '@/components/common/loader';
import { Input } from '@/components/ui/input';
import AuthLayout from '@/components/layout/layout';
import authBanner from '@/assets/images/AuthImages/menu.png';

interface ParentCategory {
  _id: string;
  name: string;
  image: string;
  type: string;
  slug?: string; // ✅ Added slug support
}

const ParentCategorySelector: React.FC = () => {
  const [categories, setCategories] = useState<ParentCategory[]>([]);
  const [loading, setLoading] = useState(false);
  const [searchQuery, setSearchQuery] = useState('');
  const { Toast } = useGlobalContext();
  const router = useRouter();

  // Fetch all categories
  const fetchParentCategories = async () => {
    try {
      setLoading(true);
      const response = await apis.ParentCategory.getParnetCategory();
      const data = response?.data?.data || response?.data || [];
      setCategories(data);
    } catch (error) {
      console.error(error);
      Toast.error('Failed to load parent categories');
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchParentCategories();
  }, []);

  // Search
  const onSearch = async (value: string) => {
    setSearchQuery(value);
    try {
      const apiRes = await apis.ParentCategory.getParnetCategory();
      const all = apiRes?.data?.data || apiRes?.data || [];

      if (value.trim()) {
        const filtered = all.filter((item: any) =>
          item.name.toLowerCase().includes(value.toLowerCase())
        );
        setCategories(filtered);
      } else {
        setCategories(all);
      }
    } catch {
      Toast.error('Search failed');
    }
  };

  const getImageUrl = (image: string) => {
    if (!image) return '/placeholder-food.jpg';
    if (image?.startsWith('http')) return image;
    return `${BUCKET_ROOT}${image}`;
  };

  if (loading) {
    return (
      <div className="flex justify-center items-center h-64">
        <Loader loading={loading} />
      </div>
    );
  }

  return (
    <div className="w-full space-y-6">
      {/* Search */}
      <div className="relative flex items-center bg-white shadow-sm border rounded-md overflow-hidden">
        <Search stroke="var(--primary-brand)" className="absolute left-3 h-4 w-4 text-yellow-500" />
        <Input
          type="text"
          value={searchQuery}
          onChange={(e) => onSearch(e.target.value)}
          placeholder="Search any Parent Category..."
          className="h-11 w-full border-none pl-9 pr-4 text-sm focus:ring-0 focus:outline-none"
        />
      </div>

      {/* Categories Grid */}
      {categories.length === 0 ? (
        <div className="flex flex-col items-center justify-center py-16 text-center text-gray-500">
          <FolderOpen size={48} className="mb-3 text-gray-400" />
          <p className="text-lg font-medium">No parent categories found</p>
          <p className="text-sm text-gray-400">Try adjusting your search query.</p>
        </div>
      ) : (
        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-5">
          {categories.map((category) => (
            <Card
              key={category._id}
              onClick={() =>
                router.push(
                  `/auth/restaurant/add?type=${category.type}&slug=${category.slug}`
                )
              } // ✅ Redirect with type and slug
              className="group cursor-pointer border border-gray-200 rounded-xl overflow-hidden transition-all duration-200 hover:shadow-md hover:-translate-y-1 bg-white"
            >
              <CardContent className="p-0">
                {/* Image */}
                <div className="relative w-full h-40 bg-gray-100 overflow-hidden">
                  <img
                    src={getImageUrl(category.image)}
                    alt={category.name}
                    className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
                  />
                </div>

                {/* Category Name */}
                <div className="p-4 bg-white text-center">
                  <h3 className="font-semibold text-gray-900 text-sm truncate capitalize">
                    {category.name}
                  </h3>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      )}
    </div>
  );
};

export default function ParentCategoryPage(props: any) {
  return (
    <AuthLayout
      title="Select Parent Category"
      des="Choose a parent category to proceed with adding your subcategories or menu items."
      image={authBanner.src}
    >
      <ParentCategorySelector {...props} />
    </AuthLayout>
  );
}