'use client';

import { useEffect, useRef, useState, useCallback, Suspense } from 'react';
import { useSearchParams } from 'next/navigation';
import { Camera, History, VideoOff, Settings, Video, X, MessageCircle } from 'lucide-react';

import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { type Shoe } from '@/lib/shoe-database';
import { addToHistory, getHistory } from '@/lib/history-storage';
import ShoeResultsPopup from '@/components/shoe-results-popup';
import HistorySidebar from '@/components/history-sidebar';
import { skuIdentificationService } from '@/lib/sku-identification';

type CameraStatus = 'loading' | 'active' | 'denied' | 'no_devices';

function HomePageContent() {
  const searchParams = useSearchParams();
  const isDev = searchParams.get('dev') === 'true';
  
  const videoRef = useRef<HTMLVideoElement>(null);
  const [stream, setStream] = useState<MediaStream | null>(null);
  const [cameraStatus, setCameraStatus] = useState<CameraStatus>('loading');

  const [videoDevices, setVideoDevices] = useState<MediaDeviceInfo[]>([]);
  const [selectedDeviceId, setSelectedDeviceId] = useState<string>('');

  const [isPopupOpen, setPopupOpen] = useState(false);
  const [isHistoryOpen, setHistoryOpen] = useState(false);
  const [history, setHistory] = useState<Shoe[]>([]);
  const [detectedSKU, setDetectedSKU] = useState<string | null>(null);
  const [isSettingsPanelOpen, setSettingsPanelOpen] = useState(false);
  const [isScanning, setIsScanning] = useState(false);
  const [notFoundMessage, setNotFoundMessage] = useState(false);
  const abortControllerRef = useRef<AbortController | null>(null);

  // Effect to clean up the stream when component unmounts or stream changes
  useEffect(() => {
    return () => {
      stream?.getTracks().forEach((track) => track.stop());
    };
  }, [stream]);

  // Effect to assign stream to video when videoRef becomes available
  useEffect(() => {
    if (videoRef.current && stream && cameraStatus === 'active') {
      console.log('Assigning saved stream to video element');
      videoRef.current.srcObject = stream;
    }
  }, [stream, cameraStatus]); // Runs when stream or camera status changes

  const startStream = useCallback(async (deviceId: string) => {
    // Stop previous stream if it exists
    (videoRef.current?.srcObject as MediaStream)?.getTracks().forEach((track) => track.stop());
    console.log('starting stream....')
    try {
      const newStream = await navigator.mediaDevices.getUserMedia({
        video: { deviceId: deviceId ? { ideal: deviceId } : true },
      });

      console.log(newStream)
      
      // Always save the stream first
      setStream(newStream);
      setCameraStatus('active');
      
      if (videoRef.current) {
        // Video element is ready, assign stream immediately
        videoRef.current.srcObject = newStream;
      } else {
        // Video element not ready yet, stream will be assigned when it mounts
        console.log('Video element not ready, stream will be assigned when video mounts');
      }
    } catch (err) {
      console.error('Error starting stream: ', err);
      setCameraStatus('denied');
    }
  }, []);

  // Effect to automatically initialize camera on app start
  useEffect(() => {
    const initializeCamera = async () => {
      try {
        // Configure DEV mode if URL parameter is present
        skuIdentificationService.setDevMode(isDev);

        // Load history first
        setHistory(getHistory());

        // Check if there's a stored preference
        const storedDeviceId = localStorage.getItem('selectedCameraDeviceId');

        if (storedDeviceId) {
          console.log('✅ Found stored camera preference, attempting to use it...');
          // Step 1: Request permission with stored device
          const permissionStream = await navigator.mediaDevices.getUserMedia({ video: true });
          permissionStream.getTracks().forEach(track => track.stop());

          // Step 2: Enumerate devices
          const devices = await navigator.mediaDevices.enumerateDevices();
          const videoInputs = devices.filter(d => d.kind === 'videoinput');
          console.log('📹 Available cameras:', videoInputs.map(d => ({ label: d.label, id: d.deviceId })));
          setVideoDevices(videoInputs);

          if (videoInputs.length === 0) {
            setCameraStatus('no_devices');
            return;
          }

          // Check if stored device still exists
          const storedDevice = videoInputs.find(d => d.deviceId === storedDeviceId);
          if (storedDevice) {
            console.log('✅ Using stored camera:', storedDevice.label);
            setSelectedDeviceId(storedDevice.deviceId);
            await startStream(storedDevice.deviceId);
            return;
          } else {
            console.log('⚠️ Stored camera not found, will search for back camera');
          }
        }

        // No stored preference or stored device not found - find back camera
        console.log('🔍 Attempting to open back camera using facingMode: environment');

        // Step 1: Try to open back camera directly with facingMode
        let backCameraStream: MediaStream;
        try {
          backCameraStream = await navigator.mediaDevices.getUserMedia({
            video: { facingMode: 'environment' }
          });
          console.log('✅ Got stream with facingMode: environment');
        } catch (err) {
          console.log('⚠️ facingMode: environment failed, trying default camera');
          backCameraStream = await navigator.mediaDevices.getUserMedia({ video: true });
        }

        // Step 2: Get the actual device that was used
        const track = backCameraStream.getVideoTracks()[0];
        const settings = track.getSettings();
        console.log('📸 Camera settings:', {
          deviceId: settings.deviceId,
          facingMode: settings.facingMode,
          label: track.label
        });

        // Step 3: Enumerate all devices
        const devices = await navigator.mediaDevices.enumerateDevices();
        const videoInputs = devices.filter(d => d.kind === 'videoinput');
        console.log('📹 All cameras:', videoInputs.map(d => ({ label: d.label, id: d.deviceId })));
        setVideoDevices(videoInputs);

        if (videoInputs.length === 0) {
          backCameraStream.getTracks().forEach(track => track.stop());
          setCameraStatus('no_devices');
          return;
        }

        // Step 4: Verify if we got the back camera
        let selectedDevice: MediaDeviceInfo | undefined;

        if (settings.facingMode === 'environment') {
          // Perfect! We got the environment camera
          console.log('✅ Confirmed back camera by facingMode');
          selectedDevice = videoInputs.find(d => d.deviceId === settings.deviceId);
        } else {
          // We might have gotten the front camera, let's search manually
          console.log('⚠️ facingMode is not "environment", searching manually...');

          // Stop the current stream
          backCameraStream.getTracks().forEach(track => track.stop());

          // Search by label keywords
          const backCameraKeywords = ['back', 'rear', 'trasera', 'environment', 'posterior'];
          selectedDevice = videoInputs.find(d =>
            backCameraKeywords.some(keyword => d.label.toLowerCase().includes(keyword))
          );

          if (!selectedDevice && videoInputs.length > 1) {
            // iOS fallback: try index 1 (usually back camera)
            console.log('📱 Trying camera at index 1 for iOS');
            selectedDevice = videoInputs[1];
          }
        }

        // Fallback to first camera
        if (!selectedDevice) {
          selectedDevice = videoInputs[0];
          console.log('⚠️ Using first camera as fallback');
        }

        console.log('🎯 Selected camera:', selectedDevice.label, selectedDevice.deviceId);
        setSelectedDeviceId(selectedDevice.deviceId);
        localStorage.setItem('selectedCameraDeviceId', selectedDevice.deviceId);

        // If we still have the stream from facingMode and it matches, use it
        if (settings.facingMode === 'environment' && settings.deviceId === selectedDevice.deviceId) {
          console.log('♻️ Reusing existing stream');
          setStream(backCameraStream);
          setCameraStatus('active');
          if (videoRef.current) {
            videoRef.current.srcObject = backCameraStream;
          }
        } else {
          // Start fresh stream with selected device
          backCameraStream.getTracks().forEach(track => track.stop());
          await startStream(selectedDevice.deviceId);
        }

      } catch (err) {
        console.error('❌ Error accessing camera:', err);
        setCameraStatus('denied');
      }
    };

    initializeCamera();
  }, [startStream]); // Auto-run on mount


  const handleCameraChange = (deviceId: string) => {
    console.log('SAVING: ',deviceId)
    setSelectedDeviceId(deviceId);
    localStorage.setItem('selectedCameraDeviceId', deviceId); // Save stable deviceId
    startStream(deviceId);
  };

  const handleScan = async () => {
    if (!videoRef.current || isScanning) return;

    // 1. Cancelar petición anterior si existe
    if (abortControllerRef.current) {
      console.log('🚫 Cancelando petición anterior...');
      abortControllerRef.current.abort();
    }

    // 2. Crear nuevo AbortController para esta petición
    const controller = new AbortController();
    abortControllerRef.current = controller;

    // 3. Configurar timeout de 30 segundos
    const timeoutId = setTimeout(() => {
      console.log('⏱️ Timeout alcanzado - cancelando petición...');
      controller.abort();
    }, 30000);

    try {
      setIsScanning(true);
      setNotFoundMessage(false); // Limpiar mensaje anterior
      console.log('📸 Capturando imagen del video...');

      // Capture frame from video
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d')!;
      canvas.width = videoRef.current.videoWidth;
      canvas.height = videoRef.current.videoHeight;
      ctx.drawImage(videoRef.current, 0, 0);

      // Get ImageData
      const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);

      console.log('🔍 Llamando al servidor Python para identificar SKU...');

      // Call SKU identification service with abort signal
      const sku = await skuIdentificationService.identifySKU(imageData, controller.signal);

      // Limpiar timeout si la petición completó antes
      clearTimeout(timeoutId);

      console.log('📦 SKU result:', sku);

      if (sku) {
        // SKU encontrado - guardar y abrir modal
        setDetectedSKU(sku);

        const shoeWithSKU: Shoe = {
          id: Date.now().toString(),
          name: `Producto ${sku}`,
          brand: 'Identificado por IA',
          price: 'Precio por consultar',
          image: '/placeholder.jpg',
          sku: sku,
          timestamp: new Date().toISOString()
        };

        const updatedHistory = addToHistory(shoeWithSKU);
        setHistory(updatedHistory);

        // SOLO abrir popup si hay SKU
        setPopupOpen(true);
      } else {
        // NO encontrado - mostrar mensaje temporal
        console.log('❌ No se encontró zapato');
        setDetectedSKU(null);
        setNotFoundMessage(true);

        // Ocultar mensaje después de 3 segundos
        setTimeout(() => {
          setNotFoundMessage(false);
        }, 3000);
      }

    } catch (error) {
      // Limpiar timeout en caso de error
      clearTimeout(timeoutId);

      // No mostrar error si fue cancelación
      if (error instanceof Error && error.name === 'AbortError') {
        console.log('🚫 Escaneo cancelado');
        return;
      }

      console.error('❌ Error en identificación:', error);
      setDetectedSKU(null);
      setNotFoundMessage(true);

      // Ocultar mensaje después de 3 segundos
      setTimeout(() => {
        setNotFoundMessage(false);
      }, 3000);
    } finally {
      setIsScanning(false);
      abortControllerRef.current = null;
    }
  };

  const handleCancelScan = () => {
    if (abortControllerRef.current) {
      console.log('🚫 Usuario canceló el escaneo');
      abortControllerRef.current.abort();
      setIsScanning(false);
      abortControllerRef.current = null;
    }
  };

  const handleHistoryItemClick = () => {
    setHistoryOpen(false);
    setPopupOpen(true);
  };


  const renderContent = () => {
    switch (cameraStatus) {
      case 'loading':
        return (
          <div className="flex h-full w-full items-center justify-center bg-gradient-to-br from-gray-900 via-black to-gray-800">
            {/* Modern Loading Skeleton */}
            <div className="relative w-full h-full">
              {/* Animated Background Gradient */}
              <div className="absolute inset-0 bg-gradient-to-br from-blue-900/20 via-purple-900/20 to-gray-900/20"></div>
              
              {/* Pulsing Camera Icon */}
              <div className="absolute inset-0 flex items-center justify-center">
                <div className="relative">
                  {/* Outer Ring */}
                  <div className="w-32 h-32 rounded-full border-4 border-white/20 animate-pulse"></div>
                  {/* Middle Ring */}
                  <div className="absolute inset-4 w-24 h-24 rounded-full border-2 border-blue-500/40 animate-ping"></div>
                  {/* Inner Ring */}
                  <div className="absolute inset-8 w-16 h-16 rounded-full border-2 border-white/60 animate-pulse"></div>
                  {/* Camera Icon */}
                  <div className="absolute inset-0 flex items-center justify-center">
                    <Camera size={32} className="text-white animate-pulse" />
                  </div>
                </div>
              </div>
              
              {/* Loading Text */}
              <div className="absolute bottom-1/3 left-1/2 transform -translate-x-1/2 text-center">
                <div className="mb-4">
                  <div className="flex space-x-1 justify-center">
                    <div className="w-2 h-2 bg-blue-500 rounded-full animate-bounce" style={{ animationDelay: '0s' }}></div>
                    <div className="w-2 h-2 bg-blue-500 rounded-full animate-bounce" style={{ animationDelay: '0.1s' }}></div>
                    <div className="w-2 h-2 bg-blue-500 rounded-full animate-bounce" style={{ animationDelay: '0.2s' }}></div>
                  </div>
                </div>
                <h2 className="text-xl font-bold text-white mb-2 animate-pulse">Iniciando Smart Store Asistant: Scan</h2>
                <p className="text-gray-400 animate-pulse">Accediendo a la cámara...</p>
              </div>
              
              {/* Skeleton UI Elements */}
              <div className="absolute top-6 left-6 right-6">
                {/* Top Bar Skeleton */}
                <div className="flex justify-between items-center mb-4">
                  <div className="w-64 h-12 bg-white/10 rounded-lg animate-pulse"></div>
                  <div className="w-12 h-12 bg-white/10 rounded-lg animate-pulse"></div>
                </div>
              </div>
              
              {/* Bottom Button Skeleton */}
              <div className="absolute bottom-20 left-1/2 transform -translate-x-1/2">
                <div className="w-16 h-16 bg-white/20 rounded-full animate-pulse"></div>
              </div>
              
              {/* Particle Effect - Fixed positions to avoid hydration mismatch */}
              <div className="absolute inset-0 overflow-hidden pointer-events-none">
                {[
                  { left: 10, top: 20, delay: 0, duration: 2.5 },
                  { left: 80, top: 15, delay: 0.3, duration: 3 },
                  { left: 25, top: 70, delay: 0.8, duration: 2.2 },
                  { left: 90, top: 40, delay: 1.2, duration: 2.8 },
                  { left: 5, top: 85, delay: 0.5, duration: 3.2 },
                  { left: 70, top: 25, delay: 1.5, duration: 2.4 },
                  { left: 40, top: 60, delay: 0.2, duration: 2.9 },
                  { left: 85, top: 75, delay: 1.8, duration: 2.6 },
                  { left: 15, top: 45, delay: 0.7, duration: 3.1 },
                  { left: 60, top: 10, delay: 1.1, duration: 2.3 },
                  { left: 30, top: 90, delay: 0.4, duration: 2.7 },
                  { left: 95, top: 55, delay: 1.6, duration: 2.1 },
                  { left: 50, top: 30, delay: 0.9, duration: 2.8 },
                  { left: 20, top: 65, delay: 0.1, duration: 3.3 },
                  { left: 75, top: 80, delay: 1.3, duration: 2.2 },
                  { left: 35, top: 5, delay: 0.6, duration: 2.9 },
                  { left: 65, top: 50, delay: 1.4, duration: 2.5 },
                  { left: 8, top: 35, delay: 1.7, duration: 3.1 },
                  { left: 88, top: 95, delay: 0.3, duration: 2.4 },
                  { left: 45, top: 22, delay: 1.9, duration: 2.7 }
                ].map((particle, i) => (
                  <div
                    key={i}
                    className="absolute w-1 h-1 bg-blue-500/30 rounded-full animate-ping"
                    style={{
                      left: `${particle.left}%`,
                      top: `${particle.top}%`,
                      animationDelay: `${particle.delay}s`,
                      animationDuration: `${particle.duration}s`,
                    }}
                  ></div>
                ))}
              </div>
            </div>
          </div>
        );
      case 'active':
        return (
          <>
            <video ref={videoRef} autoPlay playsInline muted onCanPlay={() => videoRef.current?.play()} className="h-full w-full object-cover sm:object-contain" />
            
            {/* Impuls Logo - Top Left */}
            <div className="absolute top-3 left-4 sm:left-6 z-10 pointer-events-none">
              <img
                src="/Impuls Logo.png"
                alt="Impuls Logo"
                className="h-10 sm:h-12 w-auto opacity-80"
                style={{ filter: 'brightness(0) invert(1)' }}
              />
            </div>

            {/* Version Badge - Top Right (for symmetry) */}
            <div className="absolute top-3 right-4 sm:right-6 z-10 pointer-events-none">
              <div className="bg-white/10 backdrop-blur-md border border-white/20 rounded-full px-3 py-1.5 flex items-center gap-2">
                <div className="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
                <span className="text-white/80 text-xs font-medium">v0.0.3</span>
              </div>
            </div>

            {/* Simple Camera Frame Overlay - Like Reference Image */}
            <div className="absolute inset-0 pointer-events-none">
              {/* Simple Corner Frames */}
              <div className="absolute inset-0">
                {/* Top Left Corner */}
                <div className="absolute w-8 h-8" style={{ top: '30%', left: '25%' }}>
                  <div className="absolute top-0 left-0 w-6 h-0.5 bg-white opacity-80"></div>
                  <div className="absolute top-0 left-0 w-0.5 h-6 bg-white opacity-80"></div>
                </div>
                
                {/* Top Right Corner */}
                <div className="absolute w-8 h-8" style={{ top: '30%', right: '25%' }}>
                  <div className="absolute top-0 right-0 w-6 h-0.5 bg-white opacity-80"></div>
                  <div className="absolute top-0 right-0 w-0.5 h-6 bg-white opacity-80"></div>
                </div>
                
                {/* Bottom Left Corner */}
                <div className="absolute w-8 h-8" style={{ bottom: '45%', left: '25%' }}>
                  <div className="absolute bottom-0 left-0 w-6 h-0.5 bg-white opacity-80"></div>
                  <div className="absolute bottom-0 left-0 w-0.5 h-6 bg-white opacity-80"></div>
                </div>
                
                {/* Bottom Right Corner */}
                <div className="absolute w-8 h-8" style={{ bottom: '45%', right: '25%' }}>
                  <div className="absolute bottom-0 right-0 w-6 h-0.5 bg-white opacity-80"></div>
                  <div className="absolute bottom-0 right-0 w-0.5 h-6 bg-white opacity-80"></div>
                </div>
              </div>
              
              {/* Center Rotating 3D Shoe Logo */}
              <div className="absolute w-16 h-16" style={{ top: '42.5%', left: '50%', transform: 'translate(-50%, -50%)' }}>
                {/* 3D Rotating Shoe Logo */}
                <div className="relative w-full h-full" style={{ 
                  transformStyle: 'preserve-3d',
                  animation: 'rotate3D 6s infinite linear'
                }}>
                  {/* Shoe Logo Image */}
                  <img 
                    src="/zapatillas.png" 
                    alt="Shoe Logo" 
                    className="absolute inset-0 w-full h-full object-contain opacity-60"
                    style={{ filter: 'brightness(0) invert(1)' }}
                  />
                </div>
              </div>
              
              {/* 3D Animation Keyframes */}
              <style jsx>{`
                @keyframes rotate3D {
                  0% { transform: rotateY(0deg) rotateX(0deg); }
                  25% { transform: rotateY(90deg) rotateX(15deg); }
                  50% { transform: rotateY(180deg) rotateX(0deg); }
                  75% { transform: rotateY(270deg) rotateX(-15deg); }
                  100% { transform: rotateY(360deg) rotateX(0deg); }
                }
              `}</style>
            </div>

            {/* Scanning Indicator - Responsive with safe area */}
            {isScanning && (
              <div className="absolute top-3 sm:top-4 left-1/2 transform -translate-x-1/2 bg-blue-600/90 backdrop-blur-md rounded-lg px-4 py-2 text-white text-xs sm:text-sm font-medium animate-pulse shadow-lg z-20"
              style={{ marginTop: 'max(0.75rem, env(safe-area-inset-top))' }}>
                <div className="flex items-center gap-2">
                  <div className="w-2 h-2 bg-white rounded-full animate-ping"></div>
                  <span>Identificando...</span>
                </div>
              </div>
            )}

            {/* Not Found Message - Responsive with safe area */}
            {notFoundMessage && (
              <div className="absolute top-3 sm:top-4 left-1/2 transform -translate-x-1/2 bg-red-600/90 backdrop-blur-md rounded-lg px-4 sm:px-6 py-2 sm:py-3 text-white font-medium shadow-lg animate-in fade-in slide-in-from-top-4 duration-300 z-20 max-w-[90vw]"
              style={{ marginTop: 'max(0.75rem, env(safe-area-inset-top))' }}>
                <div className="flex items-center gap-2">
                  <span className="text-lg sm:text-xl">❌</span>
                  <span className="text-xs sm:text-base">Zapato no encontrado</span>
                </div>
              </div>
            )}
            
            {/* Settings Panel - Responsive width with safe areas */}
            <div className={`absolute left-0 top-0 bottom-0 w-full max-w-xs sm:max-w-sm bg-black/80 backdrop-blur-xl border-r border-white/20 transform transition-transform duration-500 ease-out z-40 ${
              isSettingsPanelOpen ? 'translate-x-0' : '-translate-x-full'
            }`}>
              <div className="p-4 sm:p-6 h-full flex flex-col"
              style={{
                paddingTop: 'max(1rem, env(safe-area-inset-top))',
                paddingBottom: 'max(1rem, env(safe-area-inset-bottom))'
              }}>
                {/* Panel Header - Responsive */}
                <div className="flex items-center justify-between mb-4 sm:mb-6">
                  <h2 className="text-lg sm:text-xl font-bold text-white flex items-center gap-2">
                    <Settings size={20} className="sm:w-6 sm:h-6 text-blue-400" />
                    <span className="truncate">Configuración</span>
                  </h2>
                  <button
                    onClick={() => setSettingsPanelOpen(false)}
                    className="text-white/60 active:text-white transition-colors p-2 min-w-[44px] min-h-[44px] flex items-center justify-center"
                    aria-label="Cerrar configuración"
                  >
                    <X size={20} />
                  </button>
                </div>

                {/* Camera Selection */}
                <div className="mb-6">
                  <div className="flex items-center gap-2 mb-3">
                    <Video size={20} className="text-blue-400" />
                    <label className="text-white font-medium">Cámara</label>
                  </div>
                  <Select value={selectedDeviceId} onValueChange={handleCameraChange}>
                    <SelectTrigger className="w-full bg-white/10 border-white/20 text-white hover:bg-white/20 transition-colors">
                      <SelectValue placeholder="Seleccionar cámara..." />
                    </SelectTrigger>
                    <SelectContent className="bg-black/90 backdrop-blur-xl border-white/20">
                      {videoDevices.map((device) => (
                        <SelectItem key={device.deviceId} value={device.deviceId} className="text-white hover:bg-white/20">
                          {device.label || `Cámara ${videoDevices.indexOf(device) + 1}`}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>

                {/* Additional Options */}
                <div className="space-y-4 flex-1">
                  {/* App Info */}
                  <div className="bg-gradient-to-r from-blue-500/10 to-purple-500/10 rounded-lg p-4 border border-blue-500/20">
                    <h3 className="text-white font-medium mb-2">Smart Store Assistant</h3>
                    <p className="text-white/70 text-sm">
                      Detector inteligente de Calzado con IA avanzada
                    </p>
                    <div className="mt-3 text-xs text-blue-300">
                      v0.0.3 • Powered by Moonshot
                    </div>
                  </div>
                </div>

                {/* Footer */}
                <div className="pt-4 border-t border-white/10">
                  <button className="w-full bg-gradient-to-r from-blue-500 to-purple-500 hover:from-blue-600 hover:to-purple-600 text-white font-medium py-2 px-4 rounded-lg transition-all duration-200 transform hover:scale-105">
                    Guardar Configuración
                  </button>
                </div>
              </div>
            </div>

            {/* Modern Glassmorphism Dock at Bottom - Always 3 buttons for symmetry */}
            <div className={`absolute left-1/2 transform -translate-x-1/2 z-50 transition-all duration-300 ${
              isPopupOpen || isHistoryOpen || isSettingsPanelOpen ? 'opacity-0 translate-y-4 pointer-events-none' : 'opacity-100 translate-y-0'
            }`}
            style={{
              bottom: 'max(0.75rem, env(safe-area-inset-bottom, 0.75rem))'
            }}>
              <div className="relative">
                {/* Dock Container - Responsive padding */}
                <div className="bg-white/10 backdrop-blur-xl border border-white/20 rounded-3xl px-4 sm:px-8 py-3 sm:py-4 shadow-2xl">
                  <div className="flex items-center gap-4 sm:gap-6">
                    
                    {/* Chatbot Button - Touch optimized (min 44px) */}
                    <button
                      onClick={() => {
                        if (window.$chatwoot) {
                          window.$chatwoot.toggle();
                        } else {
                          console.warn('Chatwoot not loaded yet');
                        }
                      }}
                      className='group relative min-w-[44px] min-h-[44px]'
                      aria-label="Abrir chat de soporte"
                    >
                      <div className="w-11 h-11 sm:w-12 sm:h-12 bg-gradient-to-br from-blue-500/30 to-purple-500/30 rounded-full flex items-center justify-center border border-white/30 active:from-blue-500/60 active:to-purple-500/60 transition-all duration-200 active:scale-95">
                        <MessageCircle size={18} className="sm:w-5 sm:h-5 text-white drop-shadow-sm" />
                      </div>
                      {/* Glow Effect on active */}
                      <div className="absolute inset-0 bg-gradient-to-br from-blue-500/20 to-purple-500/20 rounded-full blur opacity-0 group-active:opacity-100 transition-opacity duration-200"></div>
                    </button>

                    {/* Main Capture/Cancel Button - Touch optimized */}
                    <div className="relative min-w-[60px] min-h-[60px]">
                      {/* Capture Button */}
                      <button
                        onClick={handleScan}
                        disabled={isScanning}
                        className='group relative'
                        aria-label={isScanning ? 'Analizando' : 'Detectar Zapato'}
                      >
                        <div className={`w-14 h-14 sm:w-16 sm:h-16 bg-gradient-to-br rounded-full flex items-center justify-center border-2 border-white/40 transition-all duration-300 shadow-2xl ${
                          isScanning
                            ? 'from-blue-500/40 to-purple-500/40 animate-pulse cursor-not-allowed'
                            : 'from-red-500/40 to-pink-500/40 active:from-red-500/60 active:to-pink-500/60 active:scale-95'
                        }`}>
                          <div className="w-10 h-10 sm:w-12 sm:h-12 bg-white/20 rounded-full flex items-center justify-center">
                            <Camera size={24} className="sm:w-7 sm:h-7 text-white drop-shadow-lg" />
                          </div>
                        </div>
                        {/* Pulsing Ring - solo cuando NO está escaneando */}
                        {!isScanning && (
                          <div className="absolute inset-0 rounded-full border-2 border-red-400/50 animate-ping pointer-events-none"></div>
                        )}
                      </button>

                      {/* Cancel Button Overlay - appears over capture button when scanning */}
                      {isScanning && (
                        <button
                          onClick={handleCancelScan}
                          className='absolute inset-0 flex items-center justify-center animate-in fade-in zoom-in duration-300'
                          aria-label="Cancelar escaneo"
                        >
                          <div className="w-14 h-14 sm:w-16 sm:h-16 bg-gradient-to-br from-orange-500/90 to-red-500/90 backdrop-blur-sm rounded-full flex items-center justify-center border-2 border-white/40 active:scale-95 transition-transform duration-200 shadow-2xl">
                            <X size={28} className="sm:w-8 sm:h-8 text-white drop-shadow-lg" />
                          </div>
                        </button>
                      )}
                    </div>

                    {/* History Button - Touch optimized (min 44px) */}
                    <button
                      onClick={() => setHistoryOpen(true)}
                      className='group relative min-w-[44px] min-h-[44px]'
                      aria-label="Historial"
                    >
                      <div className="w-11 h-11 sm:w-12 sm:h-12 bg-gradient-to-br from-green-500/30 to-emerald-500/30 rounded-full flex items-center justify-center border border-white/30 active:from-green-500/60 active:to-emerald-500/60 transition-all duration-200 active:scale-95">
                        <History size={18} className="sm:w-5 sm:h-5 text-white drop-shadow-sm" />
                      </div>
                      {/* Glow Effect on active */}
                      <div className="absolute inset-0 bg-gradient-to-br from-green-500/20 to-emerald-500/20 rounded-full blur opacity-0 group-active:opacity-100 transition-opacity duration-200"></div>
                    </button>

                  </div>
                </div>
                
                {/* Dock Shadow/Reflection */}
                <div className="absolute top-full left-1/2 transform -translate-x-1/2 w-full h-4 bg-gradient-to-b from-white/5 to-transparent rounded-b-3xl blur-sm"></div>
              </div>
            </div>
          </>
        );
      case 'no_devices':
        return (
          <div className="flex h-full w-full flex-col items-center justify-center bg-gradient-to-br from-gray-900 via-black to-gray-800">
            <div className="text-center p-8">
              <div className="relative mb-6">
                <div className="w-24 h-24 mx-auto rounded-full bg-red-500/20 flex items-center justify-center mb-4">
                  <VideoOff size={48} className="text-red-400" />
                </div>
                <div className="absolute inset-0 w-24 h-24 mx-auto rounded-full border-2 border-red-400/30 animate-ping"></div>
              </div>
              <h1 className="text-2xl font-bold text-white mb-3">No se encontraron cámaras</h1>
              <p className="text-gray-400 text-lg mb-6 max-w-md mx-auto">
                Asegúrate de que tu cámara esté conectada y funcionando correctamente.
              </p>
              <div className="bg-red-500/10 border border-red-500/20 rounded-lg p-4 max-w-sm mx-auto">
                <p className="text-red-300 text-sm">
                  💡 Verifica la conexión de tu cámara web o cámara integrada
                </p>
              </div>
            </div>
          </div>
        );
      case 'denied':
        return (
          <div className="flex h-full w-full flex-col items-center justify-center bg-gradient-to-br from-gray-900 via-black to-gray-800">
            <div className="text-center p-8">
              <div className="relative mb-6">
                <div className="w-24 h-24 mx-auto rounded-full bg-yellow-500/20 flex items-center justify-center mb-4">
                  <Camera size={48} className="text-yellow-400" />
                </div>
                <div className="absolute inset-0 w-24 h-24 mx-auto rounded-full border-2 border-yellow-400/30 animate-pulse"></div>
              </div>
              <h1 className="text-2xl font-bold text-white mb-3">Acceso a la cámara requerido</h1>
              <p className="text-gray-400 text-lg mb-6 max-w-md mx-auto">
                Necesitamos acceso a tu cámara para detectar zapatos.
              </p>
              <div className="bg-yellow-500/10 border border-yellow-500/20 rounded-lg p-4 max-w-sm mx-auto mb-4">
                <p className="text-yellow-300 text-sm mb-2">
                  🔒 Habilita el permiso de cámara:
                </p>
                <ol className="text-yellow-300/80 text-xs text-left space-y-1">
                  <li>1. Haz clic en el ícono de la cámara en la barra de direcciones</li>
                  <li>2. Selecciona &quot;Permitir&quot;</li>
                  <li>3. Recarga la página</li>
                </ol>
              </div>
              <button 
                onClick={() => window.location.reload()} 
                className='bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg transition-colors'
              >
                Recargar página
              </button>
            </div>
          </div>
        );
      default:
        return (
          <div className="flex h-full w-full flex-col items-center justify-center bg-gray-900 text-white">
            <div className="text-center">
              <VideoOff size={48} className="mb-4 text-gray-500 mx-auto" />
              <h1 className="text-xl font-semibold mb-2">Estado desconocido</h1>
              <p className="text-gray-400">Por favor, recarga la página</p>
            </div>
          </div>
        );
    }
  };

  return (
    <main className="relative h-screen w-screen bg-black overflow-hidden" style={{
      height: '100dvh', // Dynamic viewport height - better for mobile browsers
      paddingBottom: '0' // Override body padding for this container
    }}>
      {renderContent()}
      <ShoeResultsPopup isOpen={isPopupOpen} onOpenChange={setPopupOpen} detectedSKU={detectedSKU} />
      <HistorySidebar isOpen={isHistoryOpen} onOpenChange={setHistoryOpen} history={history} onItemClick={handleHistoryItemClick} />
    </main>
  );
}

export default function HomePage() {
  return (
    <Suspense fallback={<div className="h-screen w-screen bg-black flex items-center justify-center text-white">Loading...</div>}>
      <HomePageContent />
    </Suspense>
  );
}