import React, { useState } from 'react';
import { Palette, Copy, Check, ChevronDown, ChevronUp } from 'lucide-react';

const BrandPaletteGenerator = () => {
  const [selectedBrand, setSelectedBrand] = useState('');
  const [copiedColor, setCopiedColor] = useState('');
  const [expandedCategories, setExpandedCategories] = useState({});

  const brandCategories = {
    'Fast Food & Restaurants': {
      'KFC': { colors: ['#DC143C', '#FFFFFF', '#000000', '#FFD700', '#8B0000'], description: 'Bold, appetizing comfort food' },
      'McDonald\'s': { colors: ['#FFD700', '#FF0000', '#FFFFFF', '#000000', '#FFA500'], description: 'Happy, welcoming fast food' },
      'Sonic': { colors: ['#0066CC', '#FF0000', '#FFFFFF', '#FFD700'], description: 'Retro drive-in fun' },
      'Taco Bell': { colors: ['#702F8A', '#FF6600', '#FFFF00', '#000000', '#FFFFFF'], description: 'Fun, bold Mexican-inspired' },
      'Burger King': { colors: ['#EC1C24', '#FDBB30', '#0066B2', '#FFFFFF', '#000000'], description: 'Flame-grilled bold flavors' },
      'Pizza Hut': { colors: ['#FF0000', '#FFFF00', '#000000', '#FFFFFF'], description: 'Pizza delivery classic' },
      'Wendy\'s': { colors: ['#E31837', '#FFD100', '#FFFFFF', '#000000'], description: 'Fresh, never frozen' },
      'Papa Murphy\'s': { colors: ['#C8102E', '#F79100', '#FFFFFF', '#000000'], description: 'Take-and-bake pizza' },
      'Domino\'s': { colors: ['#0052CC', '#E31837', '#FFFFFF', '#000000'], description: 'Pizza delivery leader' },
      'A&W': { colors: ['#8B4513', '#FFA500', '#FFFFFF', '#000000'], description: 'Root beer and burgers' },
      'Krispy Kreme': { colors: ['#00A651', '#FF0000', '#FFFFFF', '#000000'], description: 'Hot fresh donuts' }
    },
    'Candy & Snacks': {
      'Reese\'s': { colors: ['#FF6600', '#FFFF00', '#8B4513', '#000000'], description: 'Peanut butter chocolate perfection' },
      'Skittles': { colors: ['#FF0000', '#FFA500', '#FFFF00', '#00FF00', '#8B00FF'], description: 'Taste the rainbow' },
      'M&M\'s': { colors: ['#FF0000', '#FFA500', '#FFFF00', '#00FF00', '#0066CC', '#8B00FF'], description: 'Colorful chocolate fun' },
      'Snickers': { colors: ['#8B4513', '#FFD700', '#654321', '#000000'], description: 'Satisfying chocolate bar' },
      'Jelly Belly': { colors: ['#FF0000', '#FFA500', '#FFFF00', '#00FF00', '#0066CC', '#8B00FF'], description: 'Gourmet jelly beans' },
      'Milky Way': { colors: ['#8B0000', '#FFD700', '#FFFFFF', '#000000'], description: 'Smooth chocolate bar' },
      'Twix': { colors: ['#FFD700', '#8B4513', '#654321', '#000000'], description: 'Cookie and caramel crunch' },
      'Hershey\'s': { colors: ['#8B4513', '#C0C0C0', '#FFD700', '#000000'], description: 'Classic American chocolate' },
      'Tic Tac': { colors: ['#FFFFFF', '#FF0000', '#FFA500', '#0066CC'], description: 'Tiny breath mints' },
      'Chips Ahoy': { colors: ['#0066CC', '#FFD700', '#8B4513', '#FFFFFF'], description: 'America\'s favorite cookie' },
      'Cheez-Its': { colors: ['#FFA500', '#FF0000', '#FFFFFF'], description: 'Cheesy baked snacks' }
    },
    'Beverages': {
      'Mountain Dew': { colors: ['#66FF00', '#FFFF00', '#FF6600', '#000000'], description: 'Extreme citrus energy' },
      'Coca-Cola': { colors: ['#FF0000', '#FFFFFF', '#000000', '#C0C0C0'], description: 'Classic, timeless refreshment' },
      'Red Bull': { colors: ['#1E3A8A', '#DC2626', '#FBBF24', '#C0C0C0', '#FFFFFF'], description: 'High-energy performance' },
      'Monster': { colors: ['#00FF00', '#000000', '#FFFFFF'], description: 'Unleash the beast' },
      'Dr Pepper': { colors: ['#8B0000', '#FFFFFF', '#C0C0C0'], description: '23 flavors of uniqueness' },
      'Corona': { colors: ['#FFD700', '#0066CC', '#FFFFFF'], description: 'Beach relaxation vibes' },
      'Budweiser': { colors: ['#FF0000', '#FFFFFF', '#FFD700'], description: 'King of beers' }
    },
    'Technology & Gaming': {
      'Xbox': { colors: ['#00FF00', '#000000', '#FFFFFF'], description: 'Gaming excellence' },
      'PlayStation': { colors: ['#0066CC', '#000000', '#FFFFFF'], description: 'Gaming innovation' },
      'Nintendo': { colors: ['#FF0000', '#FFFFFF', '#0066CC'], description: 'Fun for everyone' },
      'Microsoft': { colors: ['#00BCF2', '#80BB01', '#FFBB00', '#F25022', '#737373'], description: 'Professional productivity' },
      'Google': { colors: ['#4285F4', '#EA4335', '#FBBC04', '#34A853', '#FFFFFF'], description: 'Search and innovation' },
      'Amazon': { colors: ['#FF9900', '#232F3E', '#FFFFFF', '#146EB4', '#000000'], description: 'E-commerce convenience' },
      'Intel': { colors: ['#0071C5', '#FFFFFF', '#000000'], description: 'Processor innovation' },
      'NASA': { colors: ['#FC3D21', '#0B3D91', '#FFFFFF'], description: 'Space exploration' }
    },
    'Sports & Athletic': {
      'Nike': { colors: ['#000000', '#FFFFFF', '#FF6600', '#C0C0C0'], description: 'Just do it' },
      'Adidas': { colors: ['#000000', '#FFFFFF', '#1E88E5', '#FFC107'], description: 'Three stripes performance' },
      'Air Jordan': { colors: ['#000000', '#FF0000', '#FFFFFF'], description: 'Basketball legend' }
    },
    'Entertainment & Characters': {
      'Hot Wheels': { colors: ['#FFA500', '#FF0000', '#0066CC', '#FFFFFF'], description: 'Leading the way' },
      'Barbie': { colors: ['#FF69B4', '#FFFFFF', '#FFD700'], description: 'Be anything' },
      'LEGO': { colors: ['#FF0000', '#FFFF00', '#0066CC', '#00AA00', '#FFFFFF'], description: 'Build your imagination' },
      'Mickey Mouse': { colors: ['#FF0000', '#FFFF00', '#000000', '#FFFFFF'], description: 'Disney magic' },
      'SpongeBob': { colors: ['#FFFF00', '#8B4513', '#0066CC', '#FF69B4'], description: 'Bikini Bottom fun' },
      'Harry Potter': { colors: ['#8B0000', '#FFD700', '#000000', '#FFFFFF'], description: 'Wizarding world' }
    },
    'Retail & Shopping': {
      'Walmart': { colors: ['#004C91', '#FFC220', '#FFFFFF', '#000000'], description: 'Save money, live better' },
      'Target': { colors: ['#CC0000', '#FFFFFF', '#000000', '#E50000'], description: 'Expect more, pay less' },
      'Best Buy': { colors: ['#003DA5', '#FFD100', '#FFFFFF', '#000000'], description: 'Tech solutions' },
      'Home Depot': { colors: ['#FF6600', '#FFFFFF', '#000000', '#F96302', '#232F3E'], description: 'More saving, more doing' },
      'Dollar Tree': { colors: ['#00AA00', '#FFFFFF', '#000000'], description: 'Everything\'s $1.25' },
      '7-Eleven': { colors: ['#FF6600', '#00AA00', '#FF0000', '#FFFFFF'], description: 'Convenience store leader' }
    },
    'Office & Creative': {
      'Crayola': { colors: ['#FF0000', '#FFA500', '#FFFF00', '#00FF00', '#0066CC', '#8B00FF'], description: 'Colorful creativity' },
      'Sharpie': { colors: ['#000000', '#FF0000', '#0066CC', '#FFFFFF'], description: 'Permanent marker leader' }
    }
  };

  const handleCopyColor = (color) => {
    navigator.clipboard.writeText(color);
    setCopiedColor(color);
    setTimeout(() => setCopiedColor(''), 2000);
  };

  const getRandomBrand = () => {
    const allBrands = [];
    Object.keys(brandCategories).forEach(category => {
      Object.keys(brandCategories[category]).forEach(brand => {
        allBrands.push(brand);
      });
    });
    const randomBrand = allBrands[Math.floor(Math.random() * allBrands.length)];
    setSelectedBrand(randomBrand);
  };

  const getSelectedBrandData = () => {
    for (const category of Object.keys(brandCategories)) {
      if (brandCategories[category][selectedBrand]) {
        return brandCategories[category][selectedBrand];
      }
    }
    return null;
  };

  const toggleCategory = (category) => {
    setExpandedCategories(prev => ({
      ...prev,
      [category]: !prev[category]
    }));
  };

  const selectedBrandData = getSelectedBrandData();

  return (
    <div className="min-h-screen bg-gradient-to-br from-purple-50 to-blue-50 p-6">
      <div className="max-w-6xl mx-auto">
        <div className="text-center mb-8">
          <div className="flex items-center justify-center gap-3 mb-4">
            <Palette className="w-8 h-8 text-purple-600" />
            <h1 className="text-4xl font-bold text-gray-800">Brand Palette Generator</h1>
          </div>
          <p className="text-gray-600 text-lg">Discover color palettes from 60+ iconic brands across all industries</p>
        </div>

        <div className="bg-white rounded-2xl shadow-xl p-8 mb-8">
          <div className="flex flex-col sm:flex-row gap-4 mb-8">
            <select
              value={selectedBrand}
              onChange={(e) => setSelectedBrand(e.target.value)}
              className="flex-1 p-3 border-2 border-gray-200 rounded-lg focus:border-purple-500 focus:outline-none text-lg"
            >
              <option value="">Choose from 60+ brands...</option>
              {Object.keys(brandCategories).map(category => (
                <optgroup key={category} label={category}>
                  {Object.keys(brandCategories[category]).map(brand => (
                    <option key={brand} value={brand}>{brand}</option>
                  ))}
                </optgroup>
              ))}
            </select>
            <button
              onClick={getRandomBrand}
              className="px-6 py-3 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors font-medium"
            >
              Random Brand
            </button>
          </div>

          {selectedBrand && selectedBrandData && (
            <div className="space-y-6">
              <div className="text-center">
                <h2 className="text-3xl font-bold text-gray-800 mb-2">{selectedBrand}</h2>
                <p className="text-gray-600 text-lg">{selectedBrandData.description}</p>
              </div>

              <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 gap-4">
                {selectedBrandData.colors.map((color, index) => (
                  <div key={index} className="group">
                    <div
                      className="w-full h-24 rounded-lg shadow-lg cursor-pointer transform hover:scale-105 transition-all duration-200 border-2 border-gray-200"
                      style={{ backgroundColor: color }}
                      onClick={() => handleCopyColor(color)}
                      title={`Click to copy ${color}`}
                    />
                    <div className="mt-2 text-center">
                      <div className="flex items-center justify-center gap-2">
                        <span className="text-sm font-mono text-gray-700">{color}</span>
                        {copiedColor === color ? (
                          <Check className="w-4 h-4 text-green-500" />
                        ) : (
                          <Copy className="w-4 h-4 text-gray-400 opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer" />
                        )}
                      </div>
                    </div>
                  </div>
                ))}
              </div>

              <div className="bg-gray-50 rounded-lg p-4">
                <h3 className="font-semibold text-gray-800 mb-2">Color Codes:</h3>
                <div className="flex flex-wrap gap-2">
                  {selectedBrandData.colors.map((color, index) => (
                    <button
                      key={index}
                      onClick={() => handleCopyColor(color)}
                      className="px-3 py-1 bg-white rounded border hover:bg-gray-100 transition-colors text-sm font-mono"
                    >
                      {color}
                    </button>
                  ))}
                </div>
                <p className="text-xs text-gray-500 mt-2">Click any color to copy to clipboard</p>
              </div>
            </div>
          )}
        </div>

        <div className="bg-white rounded-2xl shadow-xl p-8">
          <h3 className="text-2xl font-bold text-gray-800 mb-6">Browse Brands by Category</h3>
          <div className="space-y-4">
            {Object.keys(brandCategories).map(category => (
              <div key={category} className="border border-gray-200 rounded-lg overflow-hidden">
                <button
                  onClick={() => toggleCategory(category)}
                  className="w-full p-4 bg-gray-50 hover:bg-gray-100 flex items-center justify-between transition-colors"
                >
                  <div className="flex items-center gap-3">
                    <h4 className="text-lg font-semibold text-gray-800">{category}</h4>
                    <span className="text-sm text-gray-500">
                      ({Object.keys(brandCategories[category]).length} brands)
                    </span>
                  </div>
                  {expandedCategories[category] ? 
                    <ChevronUp className="w-5 h-5 text-gray-500" /> : 
                    <ChevronDown className="w-5 h-5 text-gray-500" />
                  }
                </button>
                {expandedCategories[category] && (
                  <div className="p-4 bg-white">
                    <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3">
                      {Object.keys(brandCategories[category]).map(brand => (
                        <button
                          key={brand}
                          onClick={() => setSelectedBrand(brand)}
                          className={`p-3 rounded-lg border-2 transition-all hover:shadow-md text-left ${
                            selectedBrand === brand
                              ? 'border-purple-500 bg-purple-50 text-purple-700'
                              : 'border-gray-200 hover:border-gray-300'
                          }`}
                        >
                          <div className="font-medium">{brand}</div>
                          <div className="flex mt-2 gap-1">
                            {brandCategories[category][brand].colors.slice(0, 4).map((color, index) => (
                              <div
                                key={index}
                                className="w-4 h-4 rounded-sm border border-gray-300"
                                style={{ backgroundColor: color }}
                              />
                            ))}
                            {brandCategories[category][brand].colors.length > 4 && (
                              <div className="w-4 h-4 rounded-sm border border-gray-300 bg-gray-100 text-xs flex items-center justify-center text-gray-500">
                                +{brandCategories[category][brand].colors.length - 4}
                              </div>
                            )}
                          </div>
                        </button>
                      ))}
                    </div>
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

export default BrandPaletteGenerator;