// components/ImprovedCategoryFilter.jsx
import React from "react";
import { motion } from "framer-motion";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";

export default function ImprovedCategoryFilter({ 
  selectedCategory, 
  onCategoryChange, 
  fontCounts,
  isMobile 
}) {
  const categories = [
    { 
      id: 'all', 
      name: '🔥 All Fonts', 
      description: 'Complete collection of 60 styles',
      gradient: 'from-pink-500 to-purple-600'
    },
    { 
      id: 'modern', 
      name: '🔤 Modern', 
      description: 'Clean & professional fonts',
      gradient: 'from-blue-500 to-indigo-600'
    },
    { 
      id: 'handwriting', 
      name: '✍️ Handwriting', 
      description: 'Personal, casual and handwritten',
      gradient: 'from-green-500 to-emerald-600'
    },
    { 
      id: 'statement', 
      name: '🧑‍🎤 Statement', 
      description: 'Bold & attention-grabbing',
      gradient: 'from-red-500 to-pink-600'
    },
    { 
      id: 'futuristic', 
      name: '🚀 Futuristic', 
      description: 'Tech & gaming inspired',
      gradient: 'from-purple-500 to-violet-600'
    },
    { 
      id: 'aesthetic', 
      name: '🧢 Aesthetic', 
      description: 'Retro & Instagram vibes',
      gradient: 'from-yellow-500 to-orange-600'
    }
  ];

  return (
    <motion.div 
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ delay: 0.3 }}
      className="mb-8"
    >
      {/* Section Header */}
      <div className="text-center mb-6">
        <h2 className="text-2xl font-bold text-white mb-2">Choose Your Style</h2>
        <p className="text-white/70 text-sm">
          Browse fonts by category or view all {fontCounts?.all ?? 60} unique styles
        </p>
      </div>

      {/* Category Grid */}
      <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3">
        {categories.map((category, index) => (
          <motion.div
            key={category.id}
            initial={{ opacity: 0, scale: 0.9 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ delay: 0.1 * index }}
          >
            <Button
              onClick={() => onCategoryChange(category.id)}
              variant={selectedCategory === category.id ? "default" : "outline"}
              className={`w-full h-auto p-3 relative overflow-hidden transition-all duration-300 ${
                selectedCategory === category.id
                  ? `bg-gradient-to-br ${category.gradient} text-white shadow-lg ring-2 ring-white/30 scale-105`
                  : 'bg-white/10 border-white/20 text-white hover:bg-white/20 hover:scale-105'
              } backdrop-blur-sm rounded-xl group`}
            >
              {/* Background Glow Effect */}
              {selectedCategory === category.id && (
                <div className={`absolute inset-0 bg-gradient-to-br ${category.gradient} opacity-20 blur-xl`} />
              )}
              
              <div className="relative z-10 text-center">
                <div className="text-lg mb-1">{category.name}</div>
                <div className="text-xs opacity-80 mb-2">{category.description}</div>
                <Badge 
                  variant={selectedCategory === category.id ? "secondary" : "outline"}
                  className={`text-xs ${
                    selectedCategory === category.id 
                      ? 'bg-white/20 text-white border-white/30' 
                      : 'bg-white/10 text-white/80 border-white/20'
                  }`}
                >
                  {fontCounts?.[category.id] ?? 0} fonts
                </Badge>
              </div>
            </Button>
          </motion.div>
        ))}
      </div>

      {/* Active Category Info */}
      {selectedCategory !== 'all' && (
        <motion.div
          initial={{ opacity: 0, height: 0 }}
          animate={{ opacity: 1, height: 'auto' }}
          className="mt-4 text-center"
        >
          <div className="bg-white/10 backdrop-blur-sm rounded-lg p-3 inline-block">
            <p className="text-white/80 text-sm">
              Showing <span className="font-semibold text-white">{fontCounts?.[selectedCategory] ?? 0}</span> fonts 
              in <span className="font-semibold text-white">{categories.find(c => c.id === selectedCategory)?.name}</span> category
            </p>
          </div>
        </motion.div>
      )}
    </motion.div>
  );
}
