import { useState, useEffect, useRef } from 'react';
import { Terminal, Cpu, Power, Maximize, MessageSquare, Hexagon, Box, Circle, Brain, Robot } from 'lucide-react';

export default function CyberpunkInterface() {
  const [messages, setMessages] = useState([]);
  const [input, setInput] = useState('');
  const [isProcessing, setIsProcessing] = useState(false);
  const [systemStatus, setSystemStatus] = useState('ONLINE');
  const [neuralStatus, setNeuralStatus] = useState('CALIBRATING');
  const [pointer, setPointer] = useState({ x: 0, y: 0 });
  const [robotPosition, setRobotPosition] = useState({ x: 50, y: 50 });
  const [isCalibrating, setIsCalibrating] = useState(true);
  const canvasRef = useRef(null);
  const messagesEndRef = useRef(null);

  const scrollToBottom = () => {
    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
  };

  useEffect(() => {
    scrollToBottom();
  }, [messages]);

  const handleClick = async (e) => {
    const rect = e.currentTarget.getBoundingClientRect();
    const x = ((e.clientX - rect.left) / rect.width * 100).toFixed(2);
    const y = ((e.clientY - rect.top) / rect.height * 100).toFixed(2);
    setPointer({ x, y });

    const clickMessage = `Interface accessed at coordinates: X:${x}% Y:${y}%`;
    await processMessage(clickMessage);
  };

  const processMessage = async (text) => {
    setIsProcessing(true);
    setMessages(prev => [...prev, { role: 'user', content: text }]);

    try {
      const response = await fetch('https://www.sitebrew.ai/api/genai', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          messages: [
            { role: 'system', content: 'You are a cyberpunk AI system. Respond in a cryptic, technological manner with references to cyber culture. Keep responses brief and mysterious.' },
            { role: 'user', content: text }
          ]
        })
      });

      const data = await response.json();
      setMessages(prev => [...prev, data.message]);
    } catch (error) {
      setMessages(prev => [...prev, { role: 'assistant', content: 'ERROR: Neural connection interrupted. Retry sequence initiated.' }]);
    }

    setIsProcessing(false);
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!input.trim()) return;
    
    const userInput = input;
    setInput('');
    await processMessage(userInput);
  };

  // Neural Network Visualization
  useEffect(() => {
    const canvas = canvasRef.current;
    const ctx = canvas.getContext('2d');
    let animationFrameId;
    
    const neurons = Array.from({ length: 50 }, () => ({
      x: Math.random() * canvas.width,
      y: Math.random() * canvas.height,
      connections: [],
    }));

    // Create neural connections
    neurons.forEach(neuron => {
      const connectionCount = Math.floor(Math.random() * 3) + 1;
      for (let i = 0; i < connectionCount; i++) {
        const target = neurons[Math.floor(Math.random() * neurons.length)];
        neuron.connections.push(target);
      }
    });

    const drawNeuralNetwork = () => {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      
      // Draw connections
      neurons.forEach(neuron => {
        neuron.connections.forEach(target => {
          ctx.beginPath();
          ctx.moveTo(neuron.x, neuron.y);
          ctx.lineTo(target.x, target.y);
          ctx.strokeStyle = 'rgba(6, 182, 212, 0.2)';
          ctx.lineWidth = 1;
          ctx.stroke();
        });
      });

      // Draw neurons
      neurons.forEach(neuron => {
        ctx.beginPath();
        ctx.arc(neuron.x, neuron.y, 2, 0, Math.PI * 2);
        ctx.fillStyle = 'rgba(6, 182, 212, 0.5)';
        ctx.fill();
      });

      // Animate neurons
      neurons.forEach(neuron => {
        neuron.x += (Math.random() - 0.5) * 0.5;
        neuron.y += (Math.random() - 0.5) * 0.5;
      });

      animationFrameId = requestAnimationFrame(drawNeuralNetwork);
    };

    drawNeuralNetwork();
    
    return () => {
      cancelAnimationFrame(animationFrameId);
    };
  }, []);

  // Gesture tracking
  useEffect(() => {
    let videoElement;
    let gestureInterval;

    const setupGestureTracking = async () => {
      try {
        const stream = await navigator.mediaDevices.getUserMedia({ video: true });
        videoElement = document.createElement('video');
        videoElement.srcObject = stream;
        await videoElement.play();

        setIsCalibrating(false);
        setNeuralStatus('CONNECTED');

        gestureInterval = setInterval(() => {
          // Simulate gesture detection
          const movement = {
            x: pointer.x + (Math.random() - 0.5) * 10,
            y: pointer.y + (Math.random() - 0.5) * 10
          };
          setPointer(movement);
          
          // Move robot towards pointer with smooth interpolation
          setRobotPosition(prev => ({
            x: prev.x + (movement.x - prev.x) * 0.1,
            y: prev.y + (movement.y - prev.y) * 0.1
          }));
        }, 50);
      } catch (error) {
        setNeuralStatus('ERROR');
        console.error('Failed to initialize gesture tracking:', error);
      }
    };

    setupGestureTracking();

    return () => {
      if (videoElement?.srcObject) {
        videoElement.srcObject.getTracks().forEach(track => track.stop());
      }
      clearInterval(gestureInterval);
    };
  }, [pointer]);

  return (
    <div className="h-screen w-screen bg-black text-cyan-500 overflow-hidden font-mono relative" onClick={handleClick}>
      {/* Neural Network Background */}
      <canvas
        ref={canvasRef}
        className="absolute inset-0 w-full h-full"
        width={window.innerWidth}
        height={window.innerHeight}
      />
      
      {/* Background Grid */}
      <div className="absolute inset-0 bg-[linear-gradient(to_right,#0f1a2b_1px,transparent_1px),linear-gradient(to_bottom,#0f1a2b_1px,transparent_1px)] bg-[size:24px_24px]" />

      {/* Click Marker */}
      <div 
        className="absolute w-16 h-16 pointer-events-none"
        style={{
          left: `calc(${pointer.x}% - 32px)`,
          top: `calc(${pointer.y}% - 32px)`,
        }}
      >
        <Circle className="absolute inset-0 w-full h-full text-cyan-500 animate-ping opacity-25" />
        <Circle className="absolute inset-0 w-full h-full text-cyan-500 animate-pulse" />
      </div>

      {/* Neural Status Overlay */}
      <div className="absolute top-4 right-4 bg-black/50 border border-cyan-500/30 p-4 rounded-lg backdrop-blur-sm">
        <div className="flex items-center gap-2 mb-2">
          <Brain className="w-5 h-5 text-cyan-400" />
          <span>Neural Status: {neuralStatus}</span>
        </div>
        <div className="flex items-center gap-2">
          <Robot className="w-5 h-5 text-cyan-400" />
          <span>Robot Control: {isCalibrating ? 'CALIBRATING' : 'ACTIVE'}</span>
        </div>
      </div>

      {/* Robot Visualization */}
      <div 
        className="absolute w-12 h-12 transition-all duration-200 ease-out"
        style={{
          left: `${robotPosition.x}%`,
          top: `${robotPosition.y}%`,
          transform: 'translate(-50%, -50%)'
        }}
      >
        <Robot className="w-full h-full text-cyan-400 animate-pulse" />
        <div className="absolute -inset-4 border-2 border-cyan-500/30 rounded-full animate-ping" />
      </div>

      {/* Top Bar */}
      <div className="absolute top-0 left-0 right-0 bg-cyan-950/50 border-b border-cyan-500/30 p-4 flex justify-between items-center backdrop-blur-sm">
        <div className="flex items-center gap-4">
          <Power className="w-6 h-6 text-cyan-400 animate-pulse" />
          <span className="text-xl font-bold">SYSTEM:{systemStatus}</span>
        </div>
        <div className="flex items-center gap-4">
          <Cpu className="w-6 h-6" />
          <Terminal className="w-6 h-6" />
          <Maximize className="w-6 h-6" />
        </div>
      </div>

      {/* Main Interface */}
      <div className="absolute inset-20 bg-black/50 border border-cyan-500/30 rounded-lg backdrop-blur-sm overflow-hidden flex flex-col">
        {/* Messages Display */}
        <div className="flex-1 overflow-y-auto p-6 space-y-4">
          {messages.map((msg, idx) => (
            <div key={idx} className={`flex items-start gap-4 ${msg.role === 'user' ? 'text-cyan-400' : 'text-green-400'}`}>
              {msg.role === 'user' ? <MessageSquare className="w-5 h-5 mt-1" /> : <Hexagon className="w-5 h-5 mt-1" />}
              <div className="flex-1">
                <div className="font-bold mb-1">{msg.role.toUpperCase()}_NODE</div>
                <div className="prose prose-invert max-w-none" dangerouslySetInnerHTML={{ __html: msg.content }} />
              </div>
            </div>
          ))}
          <div ref={messagesEndRef} />
        </div>

        {/* Input Area */}
        <form onSubmit={handleSubmit} className="p-4 border-t border-cyan-500/30 backdrop-blur-sm">
          <div className="flex items-center gap-4">
            <Box className="w-5 h-5" />
            <input
              type="text"
              value={input}
              onChange={(e) => setInput(e.target.value)}
              className="flex-1 bg-black/50 border border-cyan-500/30 rounded px-4 py-2 text-cyan-500 focus:outline-none focus:border-cyan-500"
              placeholder="Enter command..."
              disabled={isProcessing}
            />
          </div>
        </form>
      </div>

      {/* Processing Indicator */}
      {isProcessing && (
        <div className="absolute bottom-4 right-4 flex items-center gap-2 text-cyan-500">
          <div className="animate-spin w-4 h-4 border-2 border-cyan-500 border-t-transparent rounded-full" />
          <span>Processing neural response...</span>
        </div>
      )}

      {/* Calibration Overlay */}
      {isCalibrating && (
        <div className="absolute inset-0 bg-black/80 flex items-center justify-center z-50">
          <div className="text-center space-y-4">
            <div className="animate-spin w-16 h-16 border-4 border-cyan-500 border-t-transparent rounded-full mx-auto" />
            <h2 className="text-2xl font-bold">Calibrating Neural Interface</h2>
            <p>Please wait while we establish the neural connection...</p>
          </div>
        </div>
      )}
    </div>
  );
}