import React, { useState, useEffect, useRef } from 'react';
import { Clock, AlertTriangle, Zap, GitBranch, GitMerge, Play, Pause, RotateCcw, ChevronRight } from 'lucide-react';

export default function TimelineWeaver() {
  // Game state
  const [gameState, setGameState] = useState({
    level: 1,
    playing: false,
    timelines: [],
    events: [],
    paradoxes: [],
    timeSpeed: 1,
    tutorial: true,
    tutorialStep: 0,
    completed: false,
    selectedTimeline: null,
    selectedEvent: null,
    showParallelUniverses: false,
  });

  const canvasRef = useRef(null);
  const animationRef = useRef(null);

  // Initialize game
  useEffect(() => {
    initializeLevel(gameState.level);
    
    return () => {
      if (animationRef.current) {
        cancelAnimationFrame(animationRef.current);
      }
    };
  }, [gameState.level]);

  // Initialize a level with timelines, events, and paradoxes
  const initializeLevel = (level) => {
    let timelines = [];
    let events = [];
    let paradoxes = [];

    // Level 1: Simple introduction with two timelines
    if (level === 1) {
      timelines = [
        { id: 1, name: "Alpha", color: "#ffd700", points: generateTimelinePoints(0), active: true },
        { id: 2, name: "Beta", color: "#9333ea", points: generateTimelinePoints(1), active: true },
      ];
      
      events = [
        { id: 1, timelineId: 1, position: 0.2, name: "Invention", resolved: false, connectedTo: null },
        { id: 2, timelineId: 2, position: 0.5, name: "Discovery", resolved: false, connectedTo: null },
        { id: 3, timelineId: 1, position: 0.7, name: "Paradox Event", resolved: false, connectedTo: null },
      ];
      
      paradoxes = [
        { id: 1, description: "Invention occurs without prior discovery", eventIds: [1, 2], resolved: false }
      ];
    } else if (level === 2) {
      // More complex level with three timelines
      timelines = [
        { id: 1, name: "Alpha", color: "#ffd700", points: generateTimelinePoints(0), active: true },
        { id: 2, name: "Beta", color: "#9333ea", points: generateTimelinePoints(1), active: true },
        { id: 3, name: "Gamma", color: "#0d9488", points: generateTimelinePoints(2), active: true },
      ];
      
      events = [
        { id: 1, timelineId: 1, position: 0.2, name: "Origin Event", resolved: false, connectedTo: null },
        { id: 2, timelineId: 2, position: 0.3, name: "Consequence A", resolved: false, connectedTo: null },
        { id: 3, timelineId: 3, position: 0.4, name: "Consequence B", resolved: false, connectedTo: null },
        { id: 4, timelineId: 1, position: 0.6, name: "Future Event", resolved: false, connectedTo: null },
        { id: 5, timelineId: 2, position: 0.7, name: "Paradox Event", resolved: false, connectedTo: null },
      ];
      
      paradoxes = [
        { id: 1, description: "Future event occurs before its cause", eventIds: [2, 4], resolved: false },
        { id: 2, description: "Consequence B lacks causal origin", eventIds: [1, 3], resolved: false }
      ];
    }

    setGameState(prev => ({
      ...prev,
      timelines,
      events,
      paradoxes,
      playing: false,
      completed: false,
      selectedTimeline: null,
      selectedEvent: null,
    }));
  };

  // Generate points for timeline visualization
  const generateTimelinePoints = (index) => {
    const baseY = 100 + index * 120;
    const points = [];
    
    for (let i = 0; i <= 100; i++) {
      const x = i * 10;
      // Add some gentle waves to make timelines look more interesting
      const y = baseY + Math.sin(i * 0.05) * 10;
      points.push({ x, y });
    }
    
    return points;
  };

  // Handle timeline selection
  const selectTimeline = (id) => {
    setGameState(prev => ({
      ...prev,
      selectedTimeline: prev.selectedTimeline === id ? null : id,
      selectedEvent: null
    }));
  };

  // Handle event selection
  const selectEvent = (id) => {
    setGameState(prev => ({
      ...prev,
      selectedEvent: prev.selectedEvent === id ? null : id
    }));
  };

  // Connect events to resolve paradoxes
  const connectEvents = (sourceId, targetId) => {
    if (sourceId === targetId) return;
    
    setGameState(prev => {
      const updatedEvents = prev.events.map(event => {
        if (event.id === sourceId) {
          return { ...event, connectedTo: targetId };
        }
        return event;
      });
      
      // Check if this connection resolves any paradoxes
      const updatedParadoxes = prev.paradoxes.map(paradox => {
        const { eventIds } = paradox;
        if (eventIds.includes(sourceId) && eventIds.includes(targetId)) {
          return { ...paradox, resolved: true };
        }
        return paradox;
      });
      
      // Check if all paradoxes are resolved
      const allResolved = updatedParadoxes.every(p => p.resolved);
      
      return {
        ...prev,
        events: updatedEvents,
        paradoxes: updatedParadoxes,
        completed: allResolved,
        selectedEvent: null
      };
    });
  };

  // Handle connecting selected event to another
  const handleEventConnection = (targetId) => {
    if (gameState.selectedEvent) {
      connectEvents(gameState.selectedEvent, targetId);
    }
  };

  // Toggle play/pause
  const togglePlay = () => {
    setGameState(prev => ({ ...prev, playing: !prev.playing }));
  };

  // Reset level
  const resetLevel = () => {
    initializeLevel(gameState.level);
  };

  // Advance to next level
  const nextLevel = () => {
    setGameState(prev => ({
      ...prev,
      level: prev.level + 1,
      tutorial: prev.level === 1, // Show tutorial only for level 1
      tutorialStep: 0
    }));
  };

  // Toggle parallel universe view
  const toggleParallelUniverses = () => {
    setGameState(prev => ({
      ...prev,
      showParallelUniverses: !prev.showParallelUniverses
    }));
  };

  // Advance tutorial
  const advanceTutorial = () => {
    setGameState(prev => ({
      ...prev,
      tutorialStep: prev.tutorialStep + 1,
      tutorial: prev.tutorialStep < 3 // End tutorial after step 3
    }));
  };

  // Tutorial content
  const getTutorialContent = () => {
    switch (gameState.tutorialStep) {
      case 0:
        return "Welcome to Timeline Weaver! Your goal is to resolve temporal paradoxes by connecting events across timelines.";
      case 1:
        return "Click on an event to select it, then click on another event to create a causal connection between them.";
      case 2:
        return "Paradoxes are shown in the right panel. Connect the related events to resolve them.";
      case 3:
        return "Complete all paradox resolutions to finish the level and advance to the next challenge!";
      default:
        return "";
    }
  };

  return (
    <div className="flex flex-col h-screen bg-[#2e1065] text-white overflow-hidden">
      {/* Header */}
      <header className="flex justify-between items-center p-4 bg-[#1e0845] border-b border-[#4c2a9e]">
        <div className="flex items-center space-x-2">
          <Clock className="w-6 h-6 text-[#ffd700]" />
          <h1 className="text-xl font-bold">Timeline Weaver</h1>
        </div>
        <div className="flex items-center space-x-4">
          <button 
            onClick={togglePlay}
            className="flex items-center space-x-1 px-3 py-1 rounded-md bg-[#4c2a9e] hover:bg-[#5d35b5] transition-colors"
          >
            {gameState.playing ? <Pause className="w-4 h-4" /> : <Play className="w-4 h-4" />}
            <span>{gameState.playing ? "Pause" : "Play"}</span>
          </button>
          <button 
            onClick={resetLevel}
            className="flex items-center space-x-1 px-3 py-1 rounded-md bg-[#4c2a9e] hover:bg-[#5d35b5] transition-colors"
          >
            <RotateCcw className="w-4 h-4" />
            <span>Reset</span>
          </button>
          <div className="px-3 py-1 rounded-md bg-[#4c2a9e]">
            Level {gameState.level}
          </div>
        </div>
      </header>

      {/* Main game area */}
      <div className="flex flex-1 overflow-hidden">
        {/* Timeline view */}
        <div className="flex-1 relative overflow-auto p-4">
          <div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1534447677768-be436bb09401?q=80&w=1000')] bg-cover opacity-10"></div>
          
          <div className="relative z-10">
            {gameState.timelines.map((timeline) => (
              <div 
                key={timeline.id}
                className={`mb-16 relative ${timeline.active ? 'opacity-100' : 'opacity-50'}`}
              >
                <div 
                  className={`absolute left-0 top-0 flex items-center h-8 px-3 rounded-full cursor-pointer ${
                    gameState.selectedTimeline === timeline.id ? 'bg-[#ffd700] text-[#2e1065]' : 'bg-[#4c2a9e]'
                  }`}
                  onClick={() => selectTimeline(timeline.id)}
                  style={{ transform: 'translateY(-50%)' }}
                >
                  <span className="font-medium">{timeline.name} Timeline</span>
                </div>
                
                {/* Timeline visualization */}
                <div className="h-20 mt-6 relative">
                  <svg className="w-full h-full">
                    <path
                      d={`M ${timeline.points.map(p => `${p.x},${p.y}`).join(' L ')}`}
                      fill="none"
                      stroke={timeline.color}
                      strokeWidth="3"
                      strokeLinecap="round"
                      className="drop-shadow-[0_0_8px_rgba(255,215,0,0.5)]"
                    />
                  </svg>
                  
                  {/* Events on this timeline */}
                  {gameState.events
                    .filter(event => event.timelineId === timeline.id)
                    .map(event => {
                      const position = timeline.points[Math.floor(event.position * timeline.points.length)];
                      return (
                        <div 
                          key={event.id}
                          className={`absolute w-8 h-8 rounded-full flex items-center justify-center cursor-pointer transform -translate-x-1/2 -translate-y-1/2 transition-all duration-300 ${
                            gameState.selectedEvent === event.id 
                              ? 'bg-[#ffd700] scale-125 z-20' 
                              : 'bg-[#4c2a9e] hover:bg-[#5d35b5] z-10'
                          }`}
                          style={{ 
                            left: position.x, 
                            top: position.y,
                            boxShadow: gameState.selectedEvent === event.id 
                              ? '0 0 15px rgba(255, 215, 0, 0.7)' 
                              : '0 0 5px rgba(76, 42, 158, 0.5)'
                          }}
                          onClick={() => {
                            if (gameState.selectedEvent && gameState.selectedEvent !== event.id) {
                              handleEventConnection(event.id);
                            } else {
                              selectEvent(event.id);
                            }
                          }}
                        >
                          <div className="text-xs font-bold">{event.id}</div>
                        </div>
                      );
                    })}
                </div>
              </div>
            ))}
            
            {/* Connection lines between events */}
            <svg className="absolute inset-0 pointer-events-none z-0">
              {gameState.events
                .filter(event => event.connectedTo)
                .map(event => {
                  const sourceEvent = event;
                  const targetEvent = gameState.events.find(e => e.id === event.connectedTo);
                  
                  if (!targetEvent) return null;
                  
                  const sourceTimeline = gameState.timelines.find(t => t.id === sourceEvent.timelineId);
                  const targetTimeline = gameState.timelines.find(t => t.id === targetEvent.timelineId);
                  
                  const sourcePosition = sourceTimeline.points[Math.floor(sourceEvent.position * sourceTimeline.points.length)];
                  const targetPosition = targetTimeline.points[Math.floor(targetEvent.position * targetTimeline.points.length)];
                  
                  return (
                    <path
                      key={`connection-${sourceEvent.id}-${targetEvent.id}`}
                      d={`M ${sourcePosition.x},${sourcePosition.y} C ${sourcePosition.x + 50},${sourcePosition.y} ${targetPosition.x - 50},${targetPosition.y} ${targetPosition.x},${targetPosition.y}`}
                      stroke="#0d9488"
                      strokeWidth="2"
                      strokeDasharray="5,5"
                      fill="none"
                      className="animate-pulse"
                      markerEnd="url(#arrowhead)"
                    />
                  );
                })}
              <defs>
                <marker
                  id="arrowhead"
                  markerWidth="10"
                  markerHeight="7"
                  refX="9"
                  refY="3.5"
                  orient="auto"
                >
                  <polygon points="0 0, 10 3.5, 0 7" fill="#0d9488" />
                </marker>
              </defs>
            </svg>
          </div>
        </div>
        
        {/* Right sidebar */}
        <div className="w-80 bg-[#1e0845] border-l border-[#4c2a9e] p-4 overflow-y-auto flex flex-col">
          {/* Event details */}
          <div className="mb-6">
            <h2 className="text-lg font-bold mb-2 flex items-center">
              <Zap className="w-5 h-5 mr-2 text-[#ffd700]" />
              Events
            </h2>
            <div className="space-y-2">
              {gameState.events.map(event => (
                <div 
                  key={event.id}
                  className={`p-3 rounded-md cursor-pointer transition-colors ${
                    gameState.selectedEvent === event.id 
                      ? 'bg-[#ffd700] text-[#2e1065]' 
                      : 'bg-[#4c2a9e] hover:bg-[#5d35b5]'
                  }`}
                  onClick={() => selectEvent(event.id)}
                >
                  <div className="font-medium">{event.name}</div>
                  <div className="text-xs opacity-80">
                    Timeline: {gameState.timelines.find(t => t.id === event.timelineId)?.name}
                  </div>
                  {event.connectedTo && (
                    <div className="text-xs mt-1 flex items-center">
                      <GitMerge className="w-3 h-3 mr-1" />
                      Connected to Event {event.connectedTo}
                    </div>
                  )}
                </div>
              ))}
            </div>
          </div>
          
          {/* Paradoxes */}
          <div className="mb-6">
            <h2 className="text-lg font-bold mb-2 flex items-center">
              <AlertTriangle className="w-5 h-5 mr-2 text-[#dc2626]" />
              Paradoxes
            </h2>
            <div className="space-y-2">
              {gameState.paradoxes.map(paradox => (
                <div 
                  key={paradox.id}
                  className={`p-3 rounded-md ${
                    paradox.resolved 
                      ? 'bg-[#0d9488] text-white' 
                      : 'bg-[#dc2626] text-white'
                  }`}
                >
                  <div className="font-medium">
                    {paradox.resolved ? '✓ Resolved' : '⚠ Active Paradox'}
                  </div>
                  <div className="text-sm mt-1">{paradox.description}</div>
                  <div className="text-xs mt-1">
                    Events: {paradox.eventIds.join(', ')}
                  </div>
                </div>
              ))}
            </div>
          </div>
          
          {/* Tools */}
          <div className="mt-auto">
            <h2 className="text-lg font-bold mb-2">Tools</h2>
            <div className="grid grid-cols-2 gap-2">
              <button 
                className="p-2 bg-[#4c2a9e] hover:bg-[#5d35b5] rounded-md flex flex-col items-center justify-center transition-colors"
                onClick={toggleParallelUniverses}
              >
                <GitBranch className="w-5 h-5 mb-1" />
                <span className="text-xs">Parallel View</span>
              </button>
              <button 
                className="p-2 bg-[#4c2a9e] hover:bg-[#5d35b5] rounded-md flex flex-col items-center justify-center transition-colors"
                onClick={() => setGameState(prev => ({ ...prev, timeSpeed: prev.timeSpeed === 1 ? 2 : 1 }))}
              >
                <Clock className="w-5 h-5 mb-1" />
                <span className="text-xs">
                  {gameState.timeSpeed === 1 ? "Normal Speed" : "Fast Forward"}
                </span>
              </button>
            </div>
          </div>
        </div>
      </div>
      
      {/* Bottom controls */}
      <div className="bg-[#1e0845] border-t border-[#4c2a9e] p-4 flex justify-between items-center">
        <div className="text-sm opacity-80">
          {gameState.playing ? "Time is flowing..." : "Time is paused"}
        </div>
        
        <div className="flex items-center space-x-4">
          {gameState.selectedEvent && (
            <div className="px-3 py-1 bg-[#ffd700] text-[#2e1065] rounded-full text-sm font-medium">
              Event {gameState.selectedEvent} selected - Click another event to connect
            </div>
          )}
          
          {gameState.completed && (
            <button 
              className="px-4 py-2 bg-[#0d9488] hover:bg-[#0f766e] rounded-md flex items-center transition-colors"
              onClick={nextLevel}
            >
              <span className="mr-1">Next Level</span>
              <ChevronRight className="w-4 h-4" />
            </button>
          )}
        </div>
      </div>
      
      {/* Tutorial overlay */}
      {gameState.tutorial && (
        <div className="absolute inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50">
          <div className="bg-[#1e0845] p-6 rounded-lg max-w-md">
            <h2 className="text-xl font-bold mb-4 text-[#ffd700]">Tutorial</h2>
            <p className="mb-6">{getTutorialContent()}</p>
            <button 
              className="px-4 py-2 bg-[#ffd700] text-[#2e1065] rounded-md font-medium hover:bg-[#e6c200] transition-colors"
              onClick={advanceTutorial}
            >
              {gameState.tutorialStep < 3 ? "Next" : "Start Playing"}
            </button>
          </div>
        </div>
      )}
    </div>
  );
}