'use client';

import React, { useEffect, useState } from 'react';

interface Category {
  id: string;
  name: string;
  slug: string;
  icon: string;
  _count: { foods: number };
}

interface CategoryTabsProps {
  activeCategory: string;
  onCategoryChange: (slug: string) => void;
}

export default function CategoryTabs({ activeCategory, onCategoryChange }: CategoryTabsProps) {
  const [categories, setCategories] = useState<Category[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function fetchCategories() {
      try {
        const res = await fetch('/api/categories');
        const data = await res.json();
        if (data.success) {
          setCategories(data.data);
        }
      } catch {
        // silent fail
      } finally {
        setLoading(false);
      }
    }
    fetchCategories();
  }, []);

  const allTabs: { slug: string; name: string; icon: string }[] = [
    { slug: 'all', name: 'Semua', icon: '🍽️' },
    ...categories.map((c) => ({
      slug: c.slug,
      name: c.name,
      icon: c.icon,
    })),
    { slug: 'promo', name: 'Promo', icon: '🏷️' },
  ];

  return (
    <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
      <div className="relative">
        <div className="flex gap-2 overflow-x-auto pb-2 scrollbar-hide" style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}>
          {loading
            ? Array.from({ length: 6 }).map((_, i) => (
                <div
                  key={i}
                  className="flex shrink-0 items-center gap-2 rounded-full border border-[var(--border-hover)] bg-[var(--bg-input)] px-4 py-2"
                >
                  <div className="h-5 w-5 rounded-full bg-[var(--bg-hover)] animate-pulse" />
                  <div className="h-4 w-16 rounded bg-[var(--bg-hover)] animate-pulse" />
                </div>
              ))
            : allTabs.map((tab) => (
                <button
                  key={tab.slug}
                  onClick={() => onCategoryChange(tab.slug)}
                  className={`flex shrink-0 items-center gap-2 rounded-full border px-4 py-2.5 text-sm font-medium transition-all duration-200 ${
                    activeCategory === tab.slug
                      ? 'border-[var(--accent-300)] bg-[var(--accent-100)] text-[var(--accent-600)] shadow-lg'
                      : 'border-[var(--border-hover)] bg-[var(--bg-input)] text-[var(--text-secondary)] hover:border-[var(--border-hover)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-primary)]'
                  }`}
                >
                  <span className="text-base">{tab.icon}</span>
                  <span>{tab.name}</span>
                </button>
              ))}
        </div>
      </div>
    </div>
  );
}