import React, { useState, useMemo } from 'react';
import { Sparkles, RefreshCw, Zap } from 'lucide-react';

// Datos de los participantes
const PARTICIPANTS_DATA = [
  { id: 1, name: 'Sofi', avatar: '👩🏻' },
  { id: 2, name: 'Ricky', avatar: '🧔🏻‍♂️' },
  { id: 3, name: 'Vicky', avatar: '👩🏼' },
  { id: 4, name: 'Juli', avatar: '👩🏽' },
  { id: 5, name: 'Gaby', avatar: '👱🏻‍♀️' },
  { id: 6, name: 'Hector', avatar: '👴🏻' },
  { id: 7, name: 'Beltran', avatar: '🧒🏻' },
  { id: 8, name: 'Male', avatar: '👱🏻‍♀️' },
  { id: 9, name: 'Pancho', avatar: '🧑🏻' },
];

// Paleta de colores tipo "Luces de Navidad"
const NEON_COLORS = [
  '#FF355E', // Radical Red
  '#50BFE6', // Blizzard Blue
  '#CCFF00', // Electric Lime
  '#FF00CC', // Hot Magenta
  '#FFCC00', // Tangerine Yellow
  '#BC13FE', // Neon Purple
  '#00FF99', // Spring Green
  '#FFFF33', // Neon Yellow
  '#FF6EFF', // Shocking Pink
];

const App = () => {
  const [assignments, setAssignments] = useState([]);
  const [isGenerating, setIsGenerating] = useState(false);
  const [showSnow, setShowSnow] = useState(true);

  // Posiciones fijas en círculo para el mapa visual
  const radius = 38; // Porcentaje del contenedor
  const positions = useMemo(() => {
    return PARTICIPANTS_DATA.map((_, index) => {
      const angle = (index * 2 * Math.PI) / PARTICIPANTS_DATA.length - Math.PI / 2;
      return {
        x: 50 + radius * Math.cos(angle), // % left
        y: 50 + radius * Math.sin(angle), // % top
        angle: angle
      };
    });
  }, []);

  // Algoritmo Fisher-Yates para mezcla imparcial
  const shuffleArray = (array) => {
    const newArray = [...array];
    for (let i = newArray.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [newArray[i], newArray[j]] = [newArray[j], newArray[i]];
    }
    return newArray;
  };

  // Función para generar la distribución (Ciclo Hamiltoniano)
  const generateGifts = () => {
    setIsGenerating(true);
    setAssignments([]); // Limpiar visualmente para efecto de "reset"

    setTimeout(() => {
      // 1. Mezclamos aleatoriamente a los participantes
      const shuffled = shuffleArray(PARTICIPANTS_DATA);
      
      // 2. Creamos el ciclo: A regala a B, B a C, ..., Z a A
      const newAssignments = shuffled.map((giver, index) => {
        const receiver = shuffled[(index + 1) % shuffled.length];
        return {
          giver,
          receiver,
          // Asignamos un color único de la paleta
          color: NEON_COLORS[index % NEON_COLORS.length],
          // Encontramos los índices visuales originales para trazar las flechas
          giverPosIndex: PARTICIPANTS_DATA.findIndex(p => p.id === giver.id),
          receiverPosIndex: PARTICIPANTS_DATA.findIndex(p => p.id === receiver.id)
        };
      });

      setAssignments(newAssignments);
      setIsGenerating(false);
    }, 600); // Delay estético
  };

  return (
    <div className="min-h-screen bg-red-950 overflow-hidden relative font-sans text-white selection:bg-yellow-400 selection:text-red-900">
      
      {/* --- Fondo y Efectos --- */}
      <div className="absolute inset-0 overflow-hidden pointer-events-none">
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-red-800 via-red-950 to-black opacity-90"></div>
        
        {/* Estrellas */}
        {Array.from({ length: 30 }).map((_, i) => (
          <div
            key={i}
            className="absolute text-yellow-200 animate-pulse"
            style={{
              top: `${Math.random() * 100}%`,
              left: `${Math.random() * 100}%`,
              opacity: Math.random() * 0.7 + 0.3,
              fontSize: `${Math.random() * 20 + 10}px`,
              animationDuration: `${Math.random() * 3 + 2}s`
            }}
          >
            {Math.random() > 0.5 ? '✦' : '★'}
          </div>
        ))}

        {/* Nieve */}
        {showSnow && Array.from({ length: 50 }).map((_, i) => (
          <div
            key={`snow-${i}`}
            className="absolute bg-white rounded-full opacity-70 animate-bounce"
            style={{
              width: `${Math.random() * 4 + 2}px`,
              height: `${Math.random() * 4 + 2}px`,
              top: `${Math.random() * 100}%`,
              left: `${Math.random() * 100}%`,
              animation: `fall ${Math.random() * 10 + 5}s linear infinite`,
            }}
          />
        ))}
      </div>

      {/* --- Contenido Principal --- */}
      <div className="relative z-10 container mx-auto px-4 py-6 h-screen flex flex-col items-center justify-between">
        
        {/* Header */}
        <header className="text-center space-y-1 mt-2">
          <div className="flex justify-center items-center gap-3">
            <span className="text-3xl">🎅</span>
            <span className="text-3xl">🎁</span>
          </div>
          <h1 className="text-3xl md:text-5xl font-extrabold text-transparent bg-clip-text bg-gradient-to-b from-yellow-300 to-yellow-600 drop-shadow-lg tracking-wider" style={{ fontFamily: 'serif' }}>
            Amigo Invisible
          </h1>
        </header>

        {/* Área del Mapa Interactivo */}
        <div className="flex-grow w-full max-w-3xl relative my-4 aspect-square md:aspect-video flex items-center justify-center">
          
          {/* Decoración central - Círculo animado */}
          <div className="absolute w-[70%] h-[70%] border-4 border-white/5 rounded-full animate-spin-slow"></div>
          <div className="absolute w-[60%] h-[60%] border-2 border-white/10 rounded-full border-dashed"></div>

          {/* SVG Layer */}
          <svg className="absolute inset-0 w-full h-full pointer-events-none z-0">
            <defs>
              {/* Definimos un filtro de resplandor para las luces */}
              <filter id="glow-light">
                <feGaussianBlur stdDeviation="3.5" result="coloredBlur"/>
                <feMerge>
                  <feMergeNode in="coloredBlur"/>
                  <feMergeNode in="SourceGraphic"/>
                </feMerge>
              </filter>
              
              {/* Generamos marcadores (puntas de flecha) para cada color posible */}
              {NEON_COLORS.map((color, idx) => (
                <marker 
                  key={`marker-${idx}`}
                  id={`arrowhead-${idx}`} 
                  markerWidth="6" 
                  markerHeight="4" 
                  refX="5" 
                  refY="2" 
                  orient="auto"
                >
                  <polygon points="0 0, 6 2, 0 4" fill={color} />
                </marker>
              ))}
            </defs>
            
            {assignments.map((assignment, i) => {
              const startPos = positions[assignment.giverPosIndex];
              const endPos = positions[assignment.receiverPosIndex];
              const colorIndex = i % NEON_COLORS.length;
              
              return (
                <g key={i}>
                  <path
                    d={`M ${startPos.x} ${startPos.y} Q 50 50 ${endPos.x} ${endPos.y}`}
                    fill="none"
                    stroke={assignment.color}
                    strokeWidth="3"
                    strokeLinecap="round"
                    strokeDasharray="1,6"
                    markerEnd={`url(#arrowhead-${colorIndex})`}
                    filter="url(#glow-light)"
                    style={{
                      opacity: 0.9
                    }}
                  >
                    {/* Animación de trazado inicial */}
                    <animate 
                      attributeName="stroke-dashoffset" 
                      from="100" 
                      to="0" 
                      dur="1.5s" 
                      begin={`${i * 0.1}s`} 
                      fill="freeze" 
                    />
                    {/* Animación continua de "luces" en movimiento */}
                    <animate 
                       attributeName="stroke-dasharray"
                       values="1,6; 6,1; 1,6"
                       dur="2s"
                       repeatCount="indefinite"
                    />
                  </path>
                </g>
              );
            })}
          </svg>

          {/* Nodos (Personas) */}
          {PARTICIPANTS_DATA.map((person, index) => {
            const pos = positions[index];
            // Buscar si esta persona está dando un regalo y obtener el color
            const assignment = assignments.find(a => a.giver.id === person.id);
            const isGiver = !!assignment;
            const borderColor = assignment ? assignment.color : '#991B1B';
            
            return (
              <div
                key={person.id}
                className="absolute transform -translate-x-1/2 -translate-y-1/2 transition-all duration-500"
                style={{ left: `${pos.x}%`, top: `${pos.y}%` }}
              >
                <div className={`
                  flex flex-col items-center justify-center
                  ${isGenerating ? 'animate-pulse scale-90 opacity-80' : 'scale-100 opacity-100'}
                `}>
                  <div 
                    className={`
                      w-14 h-14 md:w-16 md:h-16 rounded-full 
                      bg-gradient-to-br from-red-100 to-white 
                      border-4
                      flex items-center justify-center text-2xl md:text-3xl shadow-xl
                      relative z-10 transition-transform duration-300 hover:scale-110
                    `}
                    style={{
                      borderColor: isGiver ? borderColor : '#7F1D1D',
                      boxShadow: isGiver ? `0 0 15px ${borderColor}` : 'none'
                    }}
                  >
                    {person.avatar}
                  </div>
                  
                  <div className="mt-1 bg-black/60 px-2 py-0.5 rounded-full backdrop-blur-sm border border-white/20">
                    <span className="font-bold text-xs md:text-sm text-white whitespace-nowrap">
                      {person.name}
                    </span>
                  </div>
                </div>
              </div>
            );
          })}
          
          {/* Mensaje inicial */}
          {assignments.length === 0 && !isGenerating && (
            <div className="absolute text-center animate-bounce z-20">
              <span className="text-5xl filter drop-shadow-lg">🎁</span>
              <p className="mt-2 text-yellow-200 font-bold text-lg">¿Quién regala a quién?</p>
            </div>
          )}
        </div>

        {/* Footer y Botón Principal */}
        <div className="w-full max-w-md pb-6 z-20 flex flex-col items-center gap-4">
          <button
            onClick={generateGifts}
            disabled={isGenerating}
            className={`
              w-full py-4 px-6 rounded-2xl
              text-lg md:text-2xl font-bold uppercase tracking-wider
              shadow-[0_0_30px_rgba(220,38,38,0.5)]
              transition-all duration-200 transform active:scale-95
              flex items-center justify-center gap-3 border-b-4
              ${isGenerating 
                ? 'bg-gray-600 border-gray-800 text-gray-400 cursor-not-allowed' 
                : 'bg-gradient-to-r from-green-600 to-green-800 hover:from-green-500 hover:to-green-700 border-green-900 text-white'}
            `}
          >
            {isGenerating ? (
              <>
                <RefreshCw className="animate-spin w-6 h-6" />
                Mezclando...
              </>
            ) : assignments.length > 0 ? (
              <>
                <RefreshCw className="w-6 h-6 text-yellow-300" />
                ORGANIZAR
              </>
            ) : (
              <>
                {/* Corregido fill="currentColor" para evitar warnings */}
                <Zap className="w-6 h-6 text-yellow-300" fill="currentColor" />
                ORGANIZAR
              </>
            )}
          </button>
          
          {/* Lista de texto colapsable/scrollable si hay resultados */}
          {assignments.length > 0 && (
            <div className="w-full bg-black/40 backdrop-blur-md rounded-xl border border-white/10 p-3 max-h-32 overflow-y-auto custom-scrollbar">
               <div className="grid grid-cols-1 gap-1 text-sm">
                {assignments.map((a, i) => (
                  <div key={i} className="flex items-center justify-between px-2 py-1 hover:bg-white/5 rounded border-b border-white/5 last:border-0">
                    <div className="flex items-center gap-2">
                      <span className="text-xl">{a.giver.avatar}</span>
                      <span className="font-bold text-white">{a.giver.name}</span>
                    </div>
                    {/* Flecha con el mismo color que en el mapa */}
                    <span className="text-lg font-bold" style={{ color: a.color }}>➜</span>
                    <div className="flex items-center gap-2">
                      <span className="font-bold text-white">{a.receiver.name}</span>
                      <span className="text-xl">{a.receiver.avatar}</span>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          )}
        </div>

      </div>

      <style>{`
        @keyframes fall {
          to { transform: translateY(100vh); }
        }
        @keyframes spin-slow {
          from { transform: rotate(0deg); }
          to { transform: rotate(360deg); }
        }
        .animate-spin-slow {
          animation: spin-slow 60s linear infinite;
        }
        .custom-scrollbar::-webkit-scrollbar { width: 4px; }
        .custom-scrollbar::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); }
        .custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.3); border-radius: 4px; }
      `}</style>
    </div>
  );
};

export default App;