import React, { useState } from 'react';

const App = () => {
  // State for sequence of moves
  const [sequence, setSequence] = useState([]);
  // State for currently selected color
  const [selectedColorForInput, setSelectedColorForInput] = useState('');
  // State for pending input waiting for color
  const [pendingInput, setPendingInput] = useState(null);

  // Define colors with their names and values
  const colorOptions = [
    { name: 'Red', value: '#FF0000' },
    { name: 'Orange', value: '#FFA500' },
    { name: 'Yellow', value: '#FFFF00' },
    { name: 'Green', value: '#00FF00' },
    { name: 'Turquoise', value: '#40E0D0' },
    { name: 'Blue', value: '#0000FF' },
    { name: 'Purple', value: '#800080' },
    { name: 'Pink', value: '#FFC0CB' }
  ];

  // Handle direction button clicks
  const handleDirectionClick = (direction) => {
    if (direction === 'D') {
      // Add detour immediately without color selection
      setSequence([...sequence, { letter: 'D', color: '#FFFFFF' }]);
    } else {
      // Set pending input for L or R until color is selected
      setPendingInput(direction === 'left' ? 'L' : 'R');
    }
  };

  // Handle color selection
  const handleColorSelect = (color) => {
    if (pendingInput) {
      setSequence([...sequence, { letter: pendingInput, color }]);
      setPendingInput(null);
      setSelectedColorForInput('');
    }
  };

  // Render a group of 5 letters with its number
  const renderGroup = (group, groupIndex) => {
    return (
      <div key={groupIndex} className="inline-flex flex-col items-center mx-2">
        <div className="text-white text-sm mb-1">{groupIndex + 1}</div>
        <div className="flex">
          {group.map((item, idx) => (
            <span
              key={`${groupIndex}-${idx}`}
              className="text-2xl font-bold mx-1"
              style={{ color: item.color }}
            >
              {item.letter}
            </span>
          ))}
        </div>
      </div>
    );
  };

  // Split sequence into groups of 5
  const groupedSequence = sequence.reduce((acc, item, index) => {
    const groupIndex = Math.floor(index / 5);
    if (!acc[groupIndex]) {
      acc[groupIndex] = [];
    }
    acc[groupIndex].push(item);
    return acc;
  }, []);

  return (
    <div className="min-h-screen bg-gray-900 p-8">
      <div className="max-w-6xl mx-auto space-y-8">
        {/* Direction buttons */}
        <div className="flex gap-4 justify-center">
          <button
            onClick={() => handleDirectionClick('left')}
            className="bg-gray-700 hover:bg-gray-600 text-white px-8 py-4 rounded-lg text-xl font-bold transition-colors"
          >
            LEFT
          </button>
          <button
            onClick={() => handleDirectionClick('right')}
            className="bg-gray-700 hover:bg-gray-600 text-white px-8 py-4 rounded-lg text-xl font-bold transition-colors"
          >
            RIGHT
          </button>
          <button
            onClick={() => handleDirectionClick('D')}
            className="bg-gray-700 hover:bg-gray-600 text-white px-8 py-4 rounded-lg text-xl font-bold transition-colors"
          >
            DETOUR
          </button>
        </div>

        {/* Color selection */}
        {pendingInput && (
          <div className="bg-gray-800 p-6 rounded-lg">
            <div className="text-white mb-4 text-center">Select a color for {pendingInput}</div>
            <div className="flex flex-wrap gap-4 justify-center">
              {colorOptions.map((color) => (
                <button
                  key={color.name}
                  onClick={() => handleColorSelect(color.value)}
                  className="w-16 h-16 rounded-full border-4 border-transparent hover:border-white transition-colors"
                  style={{ backgroundColor: color.value }}
                  title={color.name}
                />
              ))}
            </div>
          </div>
        )}

        {/* Sequence display */}
        <div className="bg-gray-800 p-6 rounded-lg overflow-x-auto">
          <div className="flex flex-wrap gap-y-8">
            {groupedSequence.map((group, index) => renderGroup(group, index))}
          </div>
        </div>
      </div>
    </div>
  );
};

export default App;