'use client';

import React, { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { cn } from '@/lib/utils';
import { FiChevronDown, FiChevronUp, FiFilter, FiCheck } from 'react-icons/fi';

interface CategoryTab {
  id: string;
  name: string;
  icon?: string;
}

interface CategoryTabsProps {
  categories: CategoryTab[];
  activeCategory: string;
  onChange: (id: string) => void;
  className?: string;
}

export default function CategoryTabs({
  categories,
  activeCategory,
  onChange,
  className,
}: CategoryTabsProps) {
  const [isOpen, setIsOpen] = useState(false);

  const activeCatName = categories.find((cat) => cat.id === activeCategory)?.name || 'Todos';

  const handleCategorySelect = (id: string) => {
    onChange(id);
    setIsOpen(false); // Close dropdown on selection
  };

  return (
    <div className={cn('relative w-full z-20 font-sans', className)}>
      {/* Collapsed Bar Header */}
      <div
        onClick={() => setIsOpen(!isOpen)}
        className="w-full flex items-center justify-between px-5 py-3.5 bg-neutral-900/20 backdrop-blur-lg hover:bg-neutral-900/35 border border-white/5 hover:border-white/10 rounded-xl cursor-pointer select-none transition-all duration-300 group shadow-lg"
      >
        <div className="flex items-center gap-3">
          <div className="p-1.5 rounded-lg bg-primary/10 text-primary group-hover:bg-primary group-hover:text-white transition-all duration-300">
            <FiFilter size={16} />
          </div>
          <div>
            <span className="text-[10px] uppercase font-bold text-white/35 tracking-wider block">Categoría</span>
            <span className="text-sm font-semibold text-primary/95 group-hover:text-primary transition-colors">
              {activeCatName}
            </span>
          </div>
        </div>

        <div className="flex items-center gap-2">
          <span className="hidden sm:inline text-xs text-white/30 group-hover:text-white/50 transition-colors">
            {categories.length} categorías disponibles
          </span>
          <div className="text-white/40 group-hover:text-white transition-transform duration-300">
            {isOpen ? <FiChevronUp size={18} /> : <FiChevronDown size={18} />}
          </div>
        </div>
      </div>

      {/* Expanded Categories Panel */}
      <AnimatePresence>
        {isOpen && (
          <motion.div
            initial={{ height: 0, opacity: 0, y: -8 }}
            animate={{ height: 'auto', opacity: 1, y: 0 }}
            exit={{ height: 0, opacity: 0, y: -8 }}
            transition={{ duration: 0.2, ease: 'easeOut' }}
            className="absolute top-full left-0 right-0 mt-2 bg-neutral-950/70 backdrop-blur-2xl border border-white/5 rounded-xl shadow-2xl overflow-hidden z-30"
          >
            <div className="p-4 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-2 max-h-[300px] overflow-y-auto scrollbar-thin scrollbar-thumb-white/10 scrollbar-track-transparent">
              {categories.map((cat) => {
                const isActive = activeCategory === cat.id;
                return (
                  <button
                    key={cat.id}
                    onClick={() => handleCategorySelect(cat.id)}
                    className={cn(
                      'flex items-center justify-between px-4 py-2.5 rounded-lg text-xs font-semibold border transition-all duration-300 text-left',
                      isActive
                        ? 'bg-primary text-white border-primary shadow-lg shadow-primary/10'
                        : 'bg-white/5 text-neutral-300 border-white/5 hover:bg-white/10 hover:text-primary hover:border-primary/80 hover:shadow-lg hover:shadow-primary/30 hover:scale-[1.02]'
                    )}
                  >
                    <span className="truncate pr-1">
                      {cat.icon && <span className="mr-1">{cat.icon}</span>}
                      {cat.name}
                    </span>
                    {isActive && <FiCheck size={12} className="flex-shrink-0 text-white" />}
                  </button>
                );
              })}
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
}
