import { useState, useEffect } from 'react';
import { Beaker, RefreshCw, X, Sun, Moon } from 'lucide-react';

export default function ElementCombiner() {
  const [selectedElements, setSelectedElements] = useState([]);
  const [result, setResult] = useState(null);
  const [darkMode, setDarkMode] = useState(false);
  const [loading, setLoading] = useState(false);
  const [combinations, setCombinations] = useState([]);

  // Full periodic table
  const elements = [
    { symbol: 'H', name: 'Hydrogen', number: 1, group: 'Nonmetal' },
    { symbol: 'He', name: 'Helium', number: 2, group: 'Noble Gas' },
    // ... adding first 20 elements for brevity, but you can add all 118
    { symbol: 'Li', name: 'Lithium', number: 3, group: 'Alkali Metal' },
    { symbol: 'Be', name: 'Beryllium', number: 4, group: 'Alkaline Earth' },
    { symbol: 'B', name: 'Boron', number: 5, group: 'Metalloid' },
    { symbol: 'C', name: 'Carbon', number: 6, group: 'Nonmetal' },
    { symbol: 'N', name: 'Nitrogen', number: 7, group: 'Nonmetal' },
    { symbol: 'O', name: 'Oxygen', number: 8, group: 'Nonmetal' },
    { symbol: 'F', name: 'Fluorine', number: 9, group: 'Halogen' },
    { symbol: 'Ne', name: 'Neon', number: 10, group: 'Noble Gas' },
    { symbol: 'Na', name: 'Sodium', number: 11, group: 'Alkali Metal' },
    { symbol: 'Mg', name: 'Magnesium', number: 12, group: 'Alkaline Earth' },
    { symbol: 'Al', name: 'Aluminum', number: 13, group: 'Post-Transition Metal' },
    { symbol: 'Si', name: 'Silicon', number: 14, group: 'Metalloid' },
    { symbol: 'P', name: 'Phosphorus', number: 15, group: 'Nonmetal' },
    { symbol: 'S', name: 'Sulfur', number: 16, group: 'Nonmetal' },
    { symbol: 'Cl', name: 'Chlorine', number: 17, group: 'Halogen' },
    { symbol: 'Ar', name: 'Argon', number: 18, group: 'Noble Gas' },
    { symbol: 'K', name: 'Potassium', number: 19, group: 'Alkali Metal' },
    { symbol: 'Ca', name: 'Calcium', number: 20, group: 'Alkaline Earth' },
  ];

  const fetchCombinations = async () => {
    if (selectedElements.length < 1) return;
    
    setLoading(true);
    try {
      const query = selectedElements.map(el => el.name).join(' ');
      const response = await fetch(`https://api.example.com/compounds?elements=${query}`);
      const data = await response.json();
      setCombinations(data.compounds);
    } catch (error) {
      console.error('Error fetching combinations:', error);
      // Fallback to some known combinations
      const mockCombinations = [
        { name: 'Water', formula: 'H₂O', description: 'Essential for life' },
        { name: 'Table Salt', formula: 'NaCl', description: 'Common mineral' },
        { name: 'Carbon Dioxide', formula: 'CO₂', description: 'Greenhouse gas' },
      ];
      setCombinations(mockCombinations);
    }
    setLoading(false);
  };

  useEffect(() => {
    fetchCombinations();
  }, [selectedElements]);

  const getGroupColor = (group) => {
    const colors = {
      'Nonmetal': 'from-green-400 to-green-600',
      'Noble Gas': 'from-purple-400 to-purple-600',
      'Alkali Metal': 'from-red-400 to-red-600',
      'Alkaline Earth': 'from-orange-400 to-orange-600',
      'Metalloid': 'from-blue-400 to-blue-600',
      'Halogen': 'from-yellow-400 to-yellow-600',
      'Post-Transition Metal': 'from-gray-400 to-gray-600',
    };
    return colors[group] || 'from-indigo-400 to-indigo-600';
  };

  return (
    <div className={`min-h-screen transition-colors duration-300 ${
      darkMode ? 'bg-gray-900 text-white' : 'bg-gray-50 text-gray-900'
    }`}>
      <div className="max-w-7xl mx-auto p-4 md:p-8">
        {/* Header with Theme Toggle */}
        <div className="flex justify-between items-center mb-8">
          <h1 className="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 animate-gradient">
            Element Combiner Pro
          </h1>
          <button
            onClick={() => setDarkMode(!darkMode)}
            className={`p-2 rounded-full ${
              darkMode ? 'bg-yellow-400' : 'bg-gray-700 text-white'
            }`}
          >
            {darkMode ? <Sun size={24} /> : <Moon size={24} />}
          </button>
        </div>

        {/* Selected Elements */}
        <div className={`rounded-lg p-6 mb-6 ${
          darkMode ? 'bg-gray-800' : 'bg-white'
        } shadow-lg`}>
          <h2 className="text-xl font-semibold mb-4">Selected Elements</h2>
          <div className="flex flex-wrap gap-2 min-h-[60px]">
            {selectedElements.map((element, index) => (
              <div
                key={index}
                className={`flex items-center rounded-full px-4 py-2 bg-gradient-to-r ${
                  getGroupColor(element.group)
                } text-white animate-pulse`}
              >
                <span className="font-semibold mr-2">{element.symbol}</span>
                <button
                  onClick={() => {
                    setSelectedElements(selectedElements.filter((_, i) => i !== index));
                    setResult(null);
                  }}
                  className="hover:text-red-300"
                >
                  <X size={16} />
                </button>
              </div>
            ))}
          </div>
        </div>

        {/* Results Section */}
        {loading ? (
          <div className="text-center py-8">
            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-purple-500 mx-auto"></div>
            <p className="mt-4">Discovering possible combinations...</p>
          </div>
        ) : combinations.length > 0 && (
          <div className={`rounded-lg p-6 mb-6 ${
            darkMode ? 'bg-gray-800' : 'bg-white'
          } shadow-lg`}>
            <h2 className="text-xl font-semibold mb-4">Possible Combinations</h2>
            <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
              {combinations.map((compound, index) => (
                <div
                  key={index}
                  className={`p-4 rounded-lg ${
                    darkMode ? 'bg-gray-700' : 'bg-gray-50'
                  } hover:shadow-xl transition-all duration-300`}
                >
                  <h3 className="text-xl font-bold text-purple-500">{compound.name}</h3>
                  <p className="text-lg font-mono">{compound.formula}</p>
                  <p className="text-sm mt-2">{compound.description}</p>
                </div>
              ))}
            </div>
          </div>
        )}

        {/* Periodic Table Grid */}
        <div className={`rounded-lg p-6 ${
          darkMode ? 'bg-gray-800' : 'bg-white'
        } shadow-lg`}>
          <h2 className="text-xl font-semibold mb-4">Periodic Table</h2>
          <div className="grid grid-cols-2 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-8 gap-4">
            {elements.map((element) => (
              <button
                key={element.symbol}
                onClick={() => {
                  if (selectedElements.length < 4) {
                    setSelectedElements([...selectedElements, element]);
                  }
                }}
                className={`group p-4 rounded-lg transition-all duration-300 bg-gradient-to-r ${
                  getGroupColor(element.group)
                } hover:scale-105 text-white`}
              >
                <div className="text-2xl font-bold">{element.symbol}</div>
                <div className="text-sm">{element.name}</div>
                <div className="text-xs opacity-75">#{element.number}</div>
              </button>
            ))}
          </div>
        </div>
      </div>

      <style jsx>{`
        @keyframes gradient {
          0% { background-position: 0% 50%; }
          50% { background-position: 100% 50%; }
          100% { background-position: 0% 50%; }
        }
        .animate-gradient {
          background-size: 200% 200%;
          animation: gradient 3s ease infinite;
        }
      `}</style>
    </div>
  );
}