// ==============================================================================
// SHIFT SaaS - KIOSKVIEW.JSX
// TERMINAL DE MARCAJE BIOMÉTRICO CONTINUO 24/7 (QUIOSCO / TÓTEM)
// SISTEMA DE DISEÑO OFICIAL SHIFT (SLATE & WHITE, ALTO CONTRASTE, ZERO EMOJIS)
// ==============================================================================

function KioskView() {
    const [kioskData, setKioskData] = React.useState(null);
    const [loading, setLoading] = React.useState(true);
    const [errorMsg, setErrorMsg] = React.useState('');
    const [currentTime, setCurrentTime] = React.useState(new Date());
    const [cameraStatus, setCameraStatus] = React.useState('idle'); // 'idle' | 'starting' | 'active' | 'error'
    const [cameraError, setCameraError] = React.useState('');
    const [isFaceDetected, setIsFaceDetected] = React.useState(false);
    const [lastPunch, setLastPunch] = React.useState(null);
    const [todayLogs, setTodayLogs] = React.useState([]);
    const [cooldownUser, setCooldownUser] = React.useState(null);
    const [isFullscreen, setIsFullscreen] = React.useState(false);
    const [showSidebar, setShowSidebar] = React.useState(true);
    const [detectedGesture, setDetectedGesture] = React.useState(null);

    const videoRef = React.useRef(null);
    const streamRef = React.useRef(null);
    const scanIntervalRef = React.useRef(null);
    const faceMatcherRef = React.useRef(null);
    const registeredUsersRef = React.useRef([]);
    const cooldownMapRef = React.useRef({});
    const wakeLockRef = React.useRef(null);
    const isScanningRef = React.useRef(false);
    const gestureRef = React.useRef(null);
    const handsModelRef = React.useRef(null);
    const handsInitAttemptedRef = React.useRef(false);

    // Parámetros de URL
    const urlParams = new URLSearchParams(window.location.search);
    const kioskToken = urlParams.get('kiosk_token') || '';
    const forceClientId = urlParams.get('client_id') || (window.SHIFT_CONFIG ? window.SHIFT_CONFIG.clientId : 0);

    // Reloj digital en vivo sincronizado con zona horaria
    React.useEffect(() => {
        const timer = setInterval(() => setCurrentTime(new Date()), 1000);
        return () => clearInterval(timer);
    }, []);

    // Screen Wake Lock API (Mantiene encendida la pantalla de recepción)
    React.useEffect(() => {
        const requestWakeLock = async () => {
            try {
                if ('wakeLock' in navigator) {
                    wakeLockRef.current = await navigator.wakeLock.request('screen');
                }
            } catch (err) {}
        };
        requestWakeLock();

        const handleVisibilityChange = () => {
            if (document.visibilityState === 'visible') {
                requestWakeLock();
            }
        };
        document.addEventListener('visibilitychange', handleVisibilityChange);
        return () => {
            document.removeEventListener('visibilitychange', handleVisibilityChange);
            if (wakeLockRef.current) {
                try { wakeLockRef.current.release(); } catch(e) {}
            }
        };
    }, []);

    // Listener para estado de pantalla completa
    React.useEffect(() => {
        const handleFsChange = () => {
            setIsFullscreen(Boolean(document.fullscreenElement));
        };
        document.addEventListener('fullscreenchange', handleFsChange);
        return () => document.removeEventListener('fullscreenchange', handleFsChange);
    }, []);

    // Sintetizador acústico de confirmación (Chime armónico)
    const playChime = React.useCallback((type = 'success') => {
        try {
            const AudioCtx = window.AudioContext || window.webkitAudioContext;
            if (!AudioCtx) return;
            const ctx = new AudioCtx();
            const now = ctx.currentTime;
            const osc = ctx.createOscillator();
            const gain = ctx.createGain();
            osc.type = 'sine';

            if (type === 'success') {
                osc.frequency.setValueAtTime(880, now);
                osc.frequency.exponentialRampToValueAtTime(1320, now + 0.12);
                gain.gain.setValueAtTime(0.25, now);
                gain.gain.exponentialRampToValueAtTime(0.001, now + 0.45);
                osc.connect(gain);
                gain.connect(ctx.destination);
                osc.start(now);
                osc.stop(now + 0.45);
            } else {
                osc.frequency.setValueAtTime(440, now);
                gain.gain.setValueAtTime(0.15, now);
                gain.gain.exponentialRampToValueAtTime(0.001, now + 0.25);
                osc.connect(gain);
                gain.connect(ctx.destination);
                osc.start(now);
                osc.stop(now + 0.25);
            }
        } catch(e) {}
    }, []);

    // Reconstruir descriptores biométricos para FaceMatcher
    const rebuildFaceMatcher = React.useCallback((users) => {
        if (!window.faceapi || !users || users.length === 0) return;
        try {
            const labeled = users.map(u => {
                try {
                    let desc = u.face_descriptor;
                    if (typeof desc === 'string') desc = JSON.parse(desc);
                    if (Array.isArray(desc) && desc.length === 128) {
                        return new window.faceapi.LabeledFaceDescriptors(String(u.id), [new Float32Array(desc)]);
                    }
                } catch (e) {}
                return null;
            }).filter(Boolean);

            if (labeled.length > 0) {
                faceMatcherRef.current = new window.faceapi.FaceMatcher(labeled, 0.58);
            }
        } catch (err) {
            console.error("Error reconstruyendo matcher biométrico:", err);
        }
    }, []);

    // Cargar datos de la terminal desde la API
    const loadKioskData = React.useCallback(async (isSilent = false) => {
        if (!isSilent) setLoading(true);
        try {
            const res = await window.apiCall('get_kiosk_data', {
                kiosk_token: kioskToken,
                client_id: forceClientId
            });

            if (res && res.success) {
                setKioskData(res);
                setTodayLogs(res.today_logs || []);
                registeredUsersRef.current = res.users || [];
                rebuildFaceMatcher(res.users || []);
                setErrorMsg('');
            } else {
                setErrorMsg(res.error || "Terminal de marcaje no identificada o inactiva.");
            }
        } catch(err) {
            if (!isSilent) setErrorMsg("Error de conexión con el servidor.");
        } finally {
            if (!isSilent) setLoading(false);
        }
    }, [kioskToken, forceClientId, rebuildFaceMatcher]);

    React.useEffect(() => {
        loadKioskData();
    }, [loadKioskData]);

    // Sincronización en segundo plano cada 5 minutos
    React.useEffect(() => {
        const syncInterval = setInterval(() => {
            loadKioskData(true);
        }, 300000);
        return () => clearInterval(syncInterval);
    }, [loadKioskData]);

    // Esperar a que la librería Face-API esté disponible en window
    const waitForFaceApi = async () => {
        if (window.faceapi) return window.faceapi;
        for (let i = 0; i < 40; i++) {
            await new Promise(r => setTimeout(r, 150));
            if (window.faceapi) return window.faceapi;
        }
        return null;
    };

    // Cargar modelos neuronales desde /models
    const ensureModelsLoaded = async () => {
        const api = await waitForFaceApi();
        if (!api) throw new Error("Librería biométrica no disponible.");
        const MODEL_URL = '/models';
        if (!api.nets.ssdMobilenetv1.params) {
            await Promise.all([
                api.nets.ssdMobilenetv1.loadFromUri(MODEL_URL),
                api.nets.faceLandmark68Net.loadFromUri(MODEL_URL),
                api.nets.faceRecognitionNet.loadFromUri(MODEL_URL)
            ]);
        }
        return api;
    };

    // Vincular stream de cámara al elemento video DOM
    const attachStreamToVideo = async (stream) => {
        if (!videoRef.current) return;
        const video = videoRef.current;
        video.srcObject = stream;
        video.muted = true;
        video.setAttribute('playsinline', 'true');
        video.setAttribute('muted', 'true');
        try {
            await video.play();
        } catch (ePlay) {
            console.warn("Reproducción de video pausada por el navegador:", ePlay);
        }
    };

    // Cargar dinámicamente MediaPipe Hands si los gestos están habilitados en los ajustes
    const initGestureRecognition = React.useCallback(async () => {
        if (handsInitAttemptedRef.current) return;
        handsInitAttemptedRef.current = true;

        try {
            if (!window.Hands) {
                await new Promise((resolve) => {
                    const script = document.createElement('script');
                    script.src = "https://cdn.jsdelivr.net/npm/@mediapipe/hands/hands.js";
                    script.crossOrigin = "anonymous";
                    script.onload = () => resolve(true);
                    script.onerror = () => {
                        console.warn("No fue posible cargar el módulo de gestos.");
                        resolve(false);
                    };
                    document.head.appendChild(script);
                });
            }

            if (!window.Hands) return;

            const hands = new window.Hands({
                locateFile: (file) => `https://cdn.jsdelivr.net/npm/@mediapipe/hands/${file}`
            });

            hands.setOptions({
                maxNumHands: 1,
                modelComplexity: 0,
                minDetectionConfidence: 0.55,
                minTrackingConfidence: 0.5
            });

            hands.onResults((results) => {
                if (results.multiHandLandmarks && results.multiHandLandmarks.length > 0) {
                    const lm = results.multiHandLandmarks[0];
                    const isIndexUp = lm[8].y < lm[6].y;
                    const isMiddleUp = lm[12].y < lm[10].y;
                    const isRingUp = lm[16].y < lm[14].y;
                    const isPinkyUp = lm[20].y < lm[18].y;

                    if (isIndexUp && isMiddleUp && isRingUp && isPinkyUp) {
                        gestureRef.current = 'hand_raise';
                        setDetectedGesture({ type: 'hand_raise', label: 'Salida (Palma Levantada)' });
                    } else if (isIndexUp && isMiddleUp && !isRingUp && !isPinkyUp) {
                        gestureRef.current = 'peace_sign';
                        setDetectedGesture({ type: 'peace_sign', label: 'Almuerzo (Señal V)' });
                    } else {
                        gestureRef.current = null;
                        setDetectedGesture(null);
                    }
                } else {
                    gestureRef.current = null;
                    setDetectedGesture(null);
                }
            });

            handsModelRef.current = hands;
        } catch (err) {
            console.warn("Fallo al inicializar detector de gestos:", err);
        }
    }, []);

    // Iniciar bucle de detección facial continuo
    const startDetectionLoop = React.useCallback((api) => {
        if (scanIntervalRef.current) clearInterval(scanIntervalRef.current);

        let frameCounter = 0;

        scanIntervalRef.current = setInterval(async () => {
            if (!videoRef.current || videoRef.current.paused || videoRef.current.ended) return;
            if (videoRef.current.readyState < 2) return;
            if (!faceMatcherRef.current) return;
            if (isScanningRef.current) return;

            try {
                isScanningRef.current = true;
                frameCounter++;

                // Procesamiento de gestos en segundo plano (cada 2 ciclos para optimizar recursos)
                if (handsModelRef.current && frameCounter % 2 === 0) {
                    try {
                        await handsModelRef.current.send({ image: videoRef.current });
                    } catch(eH) {}
                }

                const detection = await api.detectSingleFace(videoRef.current)
                    .withFaceLandmarks()
                    .withFaceDescriptor();

                if (detection) {
                    setIsFaceDetected(true);
                    const bestMatch = faceMatcherRef.current.findBestMatch(detection.descriptor);

                    if (bestMatch && bestMatch.label !== 'unknown') {
                        const matchedId = Number(bestMatch.label);
                        const now = Date.now();
                        const cooldownExpiry = cooldownMapRef.current[matchedId] || 0;

                        if (now < cooldownExpiry) {
                            const u = registeredUsersRef.current.find(x => Number(x.id) === matchedId);
                            if (u) {
                                setCooldownUser({
                                    name: u.name,
                                    secondsLeft: Math.ceil((cooldownExpiry - now) / 1000)
                                });
                            }
                        } else {
                            const currentGesture = gestureRef.current;
                            await executeKioskPunch(matchedId, currentGesture);
                            gestureRef.current = null;
                            setDetectedGesture(null);
                        }
                    }
                } else {
                    setIsFaceDetected(false);
                    setCooldownUser(null);
                    gestureRef.current = null;
                    setDetectedGesture(null);
                }
            } catch(e) {
            } finally {
                isScanningRef.current = false;
            }
        }, 320);
    }, []);

    // Inicializar Cámara y Reconocimiento Facial
    const initCameraAndDetection = React.useCallback(async () => {
        setCameraStatus('starting');
        setCameraError('');

        try {
            // 1. Iniciar captura de video primero para feedback visual instantáneo
            let stream;
            try {
                stream = await navigator.mediaDevices.getUserMedia({
                    video: {
                        width: { ideal: 1280 },
                        height: { ideal: 720 },
                        facingMode: 'user'
                    },
                    audio: false
                });
            } catch (eIdeal) {
                stream = await navigator.mediaDevices.getUserMedia({
                    video: true,
                    audio: false
                });
            }

            streamRef.current = stream;
            await attachStreamToVideo(stream);
            setCameraStatus('active');

            // 2. Cargar modelos biométricos
            const api = await ensureModelsLoaded();

            // 3. Reconstruir descriptores biométricos
            if (registeredUsersRef.current.length > 0) {
                rebuildFaceMatcher(registeredUsersRef.current);
            }

            // 4. Si la empresa tiene habilitados los gestos, inicializar MediaPipe Hands
            if (kioskData?.settings?.kiosk_gesture_control) {
                initGestureRecognition();
            }

            // 5. Iniciar bucle de escaneo continuo
            startDetectionLoop(api);

        } catch (err) {
            console.error("Fallo al inicializar terminal:", err);
            setCameraStatus('error');
            setCameraError(err.message || 'No fue posible acceder a la cámara del dispositivo.');
        }
    }, [rebuildFaceMatcher, startDetectionLoop, initGestureRecognition, kioskData]);

    // Intentar iniciar la cámara automáticamente cuando los datos estén listos
    React.useEffect(() => {
        if (!loading && kioskData && cameraStatus === 'idle') {
            initCameraAndDetection();
        }
    }, [loading, kioskData, cameraStatus, initCameraAndDetection]);

    // Habilitar gestos si la configuración del quiosco los activa
    React.useEffect(() => {
        if (kioskData?.settings?.kiosk_gesture_control && cameraStatus === 'active') {
            initGestureRecognition();
        }
    }, [kioskData, cameraStatus, initGestureRecognition]);

    // Asegurar que si el stream está vivo y el ref de video se monta, se vincule
    React.useEffect(() => {
        if (streamRef.current && videoRef.current && videoRef.current.srcObject !== streamRef.current) {
            attachStreamToVideo(streamRef.current);
        }
    });

    // Limpieza al desmontar el componente
    React.useEffect(() => {
        return () => {
            if (scanIntervalRef.current) {
                clearInterval(scanIntervalRef.current);
                scanIntervalRef.current = null;
            }
            if (streamRef.current) {
                streamRef.current.getTracks().forEach(t => t.stop());
                streamRef.current = null;
            }
        };
    }, []);

    // Registrar marcación en servidor
    const executeKioskPunch = async (userId, gesture = null) => {
        const cooldownSeconds = kioskData?.settings?.kiosk_cooldown_seconds || 60;
        cooldownMapRef.current[userId] = Date.now() + (cooldownSeconds * 1000);

        try {
            const res = await window.apiCall('kiosk_punch', {
                kiosk_token: kioskToken,
                client_id: kioskData?.company?.id || forceClientId,
                user_id: userId,
                cooldown_seconds: cooldownSeconds,
                gesture: gesture || undefined
            });

            if (res && res.success) {
                if (kioskData?.settings?.kiosk_audio_feedback !== false) {
                    playChime('success');
                }

                const punchInfo = {
                    action: res.action,
                    user: res.user,
                    timeStr: res.timeStr,
                    isTardy: res.isTardy,
                    minutesLate: res.minutesLate,
                    gesture: gesture
                };

                setLastPunch(punchInfo);
                setCooldownUser(null);

                setTodayLogs(prev => [
                    {
                        id: res.logId || Date.now(),
                        userId: res.user.id,
                        name: res.user.name,
                        alias: res.user.alias,
                        avatarUrl: res.user.avatarUrl,
                        roleName: res.user.roleName,
                        positionTitle: res.user.positionTitle,
                        type: res.action,
                        timeStr: res.timeStr,
                        timestamp: res.timestamp || Date.now()
                    },
                    ...prev
                ]);

                // Mantener el mensaje de confirmación visible por 4 segundos
                setTimeout(() => {
                    setLastPunch(curr => (curr === punchInfo ? null : curr));
                }, 4000);

            } else if (res && res.is_cooldown) {
                if (kioskData?.settings?.kiosk_audio_feedback !== false) {
                    playChime('info');
                }
                setCooldownUser({
                    name: res.user?.name || 'Colaborador',
                    secondsLeft: cooldownSeconds
                });
            }
        } catch(e) {}
    };

    const toggleFullScreen = () => {
        if (!document.fullscreenElement) {
            document.documentElement.requestFullscreen().catch(() => {});
        } else {
            if (document.exitFullscreen) {
                document.exitFullscreen().catch(() => {});
            }
        }
    };

    if (loading) {
        return (
            <div className="fixed inset-0 w-screen h-screen bg-slate-50 text-slate-900 flex flex-col items-center justify-center p-6 select-none font-sans z-50">
                <div className="w-12 h-12 border-3 border-slate-200 border-t-slate-900 rounded-full animate-spin mb-4"></div>
                <h2 className="text-base font-bold tracking-tight text-slate-900">Shift Terminal</h2>
                <p className="text-xs text-slate-500 font-medium">Iniciando sistema de marcaje 24/7...</p>
            </div>
        );
    }

    if (errorMsg && !kioskData) {
        return (
            <div className="fixed inset-0 w-screen h-screen bg-slate-50 text-slate-900 flex flex-col items-center justify-center p-6 select-none font-sans z-50">
                <div className="max-w-md w-full bg-white border border-slate-200/90 rounded-3xl p-8 text-center space-y-4 shadow-xl">
                    <div className="w-14 h-14 bg-rose-50 border border-rose-200 text-rose-600 rounded-2xl flex items-center justify-center mx-auto">
                        <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>
                    </div>
                    <h2 className="text-lg font-black text-slate-900 tracking-tight">Terminal No Disponible</h2>
                    <p className="text-xs text-slate-600 leading-relaxed font-medium">{errorMsg}</p>
                    <button 
                        onClick={() => window.location.reload()}
                        className="px-6 py-2.5 bg-slate-900 hover:bg-slate-800 text-white text-xs font-bold rounded-xl transition cursor-pointer shadow-sm"
                    >
                        Reintentar Conexión
                    </button>
                </div>
            </div>
        );
    }

    const showLogPanel = kioskData?.settings?.kiosk_show_recent_log !== false;
    const company = kioskData?.company || {};
    const settings = kioskData?.settings || {};

    return (
        <div className="fixed inset-0 w-screen h-screen h-[100dvh] max-h-screen bg-slate-950 text-slate-900 flex flex-col select-none overflow-hidden font-sans z-50">
            
            {/* 1. ENCABEZADO SUPERIOR OFICIAL SHIFT */}
            <header className="h-20 sm:h-22 bg-white/95 backdrop-blur-md border-b border-slate-200/90 px-6 sm:px-8 flex items-center justify-between z-20 flex-shrink-0 shadow-2xs">
                
                {/* Identidad de Empresa */}
                <div className="flex items-center gap-4 min-w-0">
                    {company.logo ? (
                        <img src={company.logo} alt={company.name} className="h-10 max-w-[160px] object-contain rounded-md flex-shrink-0" />
                    ) : (
                        <div className="w-11 h-11 bg-slate-900 rounded-xl flex items-center justify-center font-black text-white text-sm tracking-wider flex-shrink-0 shadow-xs">
                            {company.name ? company.name.substring(0, 2).toUpperCase() : 'SH'}
                        </div>
                    )}
                    <div className="min-w-0">
                        <h1 className="text-base sm:text-lg font-black text-slate-900 tracking-tight truncate leading-tight">
                            {company.name || 'Terminal de Asistencia'}
                        </h1>
                        <div className="flex items-center gap-2 mt-0.5">
                            <span className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span>
                            <span className="text-[11px] font-bold text-slate-500 uppercase tracking-wider truncate">
                                {settings.kiosk_name || 'Recepción Principal'} • 24/7
                            </span>
                        </div>
                    </div>
                </div>

                {/* Acciones y Reloj en Vivo */}
                <div className="flex items-center gap-4 sm:gap-6 flex-shrink-0">
                    
                    {/* Botón de alternancia de bitácora en pantallas no gigantes */}
                    {showLogPanel && (
                        <button
                            type="button"
                            onClick={() => setShowSidebar(!showSidebar)}
                            className="hidden md:inline-flex items-center gap-1.5 px-3 py-2 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-xl text-xs font-bold transition border border-slate-200/80 cursor-pointer"
                        >
                            <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h7"/></svg>
                            <span>Actividad ({todayLogs.length})</span>
                        </button>
                    )}

                    {/* Reloj y Fecha Oficial de Nicaragua */}
                    <div className="text-right">
                        <div className="text-2xl sm:text-3xl xl:text-4xl font-black text-slate-900 tracking-tight leading-none font-mono">
                            {currentTime.toLocaleTimeString('es-NI', { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: true })}
                        </div>
                        <div className="text-[10px] sm:text-[11px] font-bold text-slate-500 uppercase tracking-wider mt-1">
                            {currentTime.toLocaleDateString('es-NI', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' })}
                        </div>
                    </div>

                    {/* Botón Pantalla Completa */}
                    <button 
                        onClick={toggleFullScreen}
                        title={isFullscreen ? "Salir de pantalla completa" : "Pantalla completa"}
                        className="p-2.5 sm:p-3 bg-slate-100 hover:bg-slate-200 text-slate-700 hover:text-slate-900 rounded-xl border border-slate-200 transition cursor-pointer"
                    >
                        {isFullscreen ? (
                            <svg className="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.2" d="M9 9L4 4m0 0h5m-5 0v5m11 2l5 5m0 0h-5m5 0v-5m-11 5l-5-5m0 0v5m0-5h5m11-2l5-5m0 0v5m0-5h-5"/></svg>
                        ) : (
                            <svg className="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"/></svg>
                        )}
                    </button>
                </div>
            </header>

            {/* 2. ÁREA DE CÁMARA Y MARCAJE */}
            <main className="flex-1 flex overflow-hidden min-h-0 relative bg-black">

                {/* CONTENEDOR DE CÁMARA BIOMÉTRICA (SIEMPRE 100% DE ALTO) */}
                <div className="relative flex-1 bg-black flex items-center justify-center overflow-hidden min-h-0">
                    
                    {/* Video de Cámara en Vivo con Espejado */}
                    <video 
                        ref={videoRef}
                        autoPlay 
                        playsInline 
                        muted 
                        className="absolute inset-0 w-full h-full object-cover transform -scale-x-100"
                    />

                    {/* Gradiente sutil superior e inferior para legibilidad */}
                    <div className="absolute inset-0 pointer-events-none bg-gradient-to-t from-black/70 via-transparent to-black/30" />

                    {/* MARCO DE ENFOQUE FACIAL PROPORCIONADO Y REACTIVO */}
                    <div className="absolute inset-0 pointer-events-none flex flex-col items-center justify-center p-6">
                        
                        <div className={`relative w-[320px] h-[400px] sm:w-[380px] sm:h-[480px] xl:w-[440px] xl:h-[540px] max-w-[85vw] max-h-[72vh] rounded-[3rem] border-2 transition-all duration-300 flex flex-col items-center justify-between p-6 sm:p-8 ${
                            cooldownUser
                                ? 'border-slate-300 ring-4 ring-slate-400/20 shadow-xl'
                                : (isFaceDetected 
                                    ? 'border-emerald-400 ring-8 ring-emerald-400/35 shadow-[0_0_60px_rgba(16,185,129,0.45)]' 
                                    : 'border-white/40 shadow-2xl')
                        }`}>
                            
                            {/* Esquinas arquitectónicas */}
                            <div className={`absolute -top-1 -left-1 w-6 h-6 border-t-4 border-l-4 rounded-tl-2xl transition-colors ${cooldownUser ? 'border-slate-400' : (isFaceDetected ? 'border-emerald-400' : 'border-white')}`}></div>
                            <div className={`absolute -top-1 -right-1 w-6 h-6 border-t-4 border-r-4 rounded-tr-2xl transition-colors ${cooldownUser ? 'border-slate-400' : (isFaceDetected ? 'border-emerald-400' : 'border-white')}`}></div>
                            <div className={`absolute -bottom-1 -left-1 w-6 h-6 border-b-4 border-l-4 rounded-bl-2xl transition-colors ${cooldownUser ? 'border-slate-400' : (isFaceDetected ? 'border-emerald-400' : 'border-white')}`}></div>
                            <div className={`absolute -bottom-1 -right-1 w-6 h-6 border-b-4 border-r-4 rounded-br-2xl transition-colors ${cooldownUser ? 'border-slate-400' : (isFaceDetected ? 'border-emerald-400' : 'border-white')}`}></div>

                            {/* Badge superior del marco */}
                            <div className="text-center pt-2 space-y-2">
                                <span className={`inline-block px-3.5 py-1 rounded-full text-[10px] sm:text-xs font-black uppercase tracking-wider transition-all ${
                                    cooldownUser
                                        ? 'bg-slate-800 text-white shadow-sm'
                                        : (isFaceDetected 
                                            ? 'bg-emerald-500 text-white shadow-md scale-105' 
                                            : 'bg-black/60 text-white/90 backdrop-blur-md border border-white/20')
                                }`}>
                                    {cooldownUser ? 'Marca Registrada' : (isFaceDetected ? 'Rostro Detectado' : 'Terminal de Marcaje')}
                                </span>

                                {detectedGesture && (
                                    <div>
                                        <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-[10px] sm:text-[11px] font-black uppercase tracking-wider bg-slate-900/95 text-white border border-slate-700 shadow-xl animate-pulse">
                                            <span className="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
                                            <span>Gesto: {detectedGesture.label}</span>
                                        </span>
                                    </div>
                                )}
                            </div>

                            {/* Aviso dinámico central al detectar (solo si no está en enfriamiento ni recién marcado) */}
                            {isFaceDetected && !lastPunch && !cooldownUser && (
                                <div className="text-center px-4 py-2 bg-emerald-950/85 border border-emerald-400/60 rounded-2xl backdrop-blur-md shadow-lg animate-pulse">
                                    <span className="text-xs sm:text-sm font-black text-emerald-300 uppercase tracking-wider">
                                        Identificando Colaborador...
                                    </span>
                                </div>
                            )}

                            {/* Prompt inferior del marco */}
                            <div className="text-center pb-2">
                                <p className="text-xs sm:text-sm font-bold text-white drop-shadow-md">
                                    {cooldownUser ? 'Puede continuar. Siguiente colaborador.' : (isFaceDetected ? 'Manténgase frente a la cámara' : 'Posicione su rostro frente a la terminal')}
                                </p>
                            </div>
                        </div>

                        {/* Barra de estado en esquina inferior de la cámara */}
                        <div className="absolute bottom-6 left-6 right-6 flex items-center justify-between text-xs pointer-events-none">
                            <div className="flex items-center gap-2 bg-white/90 backdrop-blur-md px-4 py-2 rounded-full border border-slate-200 shadow-md">
                                <span className={`w-2.5 h-2.5 rounded-full ${cameraStatus === 'active' ? 'bg-emerald-500' : 'bg-amber-500'} animate-pulse`}></span>
                                <span className="text-xs font-black text-slate-800 uppercase tracking-wider">
                                    {cameraStatus === 'active' ? 'Terminal Lista' : 'Iniciando Cámara...'}
                                </span>
                            </div>

                            <div className="bg-white/90 backdrop-blur-md px-4 py-2 rounded-full border border-slate-200 shadow-md text-xs font-black text-slate-800">
                                {registeredUsersRef.current.length} colaboradores activos
                            </div>
                        </div>
                    </div>

                    {/* ESTADO DE CONEXIÓN O REINTENTO MANUAL DE CÁMARA */}
                    {cameraStatus !== 'active' && (
                        <div className="absolute inset-0 bg-slate-900/80 backdrop-blur-md z-20 flex flex-col items-center justify-center p-6 text-center">
                            <div className="max-w-md w-full bg-white border border-slate-200 rounded-3xl p-8 space-y-5 shadow-2xl">
                                <div className="w-14 h-14 bg-slate-100 border border-slate-200 text-slate-800 rounded-2xl flex items-center justify-center mx-auto shadow-xs">
                                    <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
                                </div>
                                <div>
                                    <h3 className="text-base font-black text-slate-900 tracking-tight">Cámara en Espera</h3>
                                    <p className="text-xs text-slate-500 mt-1 font-medium leading-relaxed">
                                        {cameraError || "Presione el botón para conectar y activar la cámara frontal de la terminal."}
                                    </p>
                                </div>
                                <button
                                    onClick={initCameraAndDetection}
                                    disabled={cameraStatus === 'starting'}
                                    className="w-full py-3 bg-slate-900 hover:bg-slate-800 disabled:bg-slate-400 text-white text-xs font-bold rounded-xl transition cursor-pointer flex items-center justify-center gap-2 shadow-sm"
                                >
                                    {cameraStatus === 'starting' ? (
                                        <>
                                            <div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin"></div>
                                            <span>Conectando Terminal...</span>
                                        </>
                                    ) : (
                                        <span>Iniciar Cámara de Marcaje</span>
                                    )}
                                </button>
                            </div>
                        </div>
                    )}

                    {/* CONFIRMACIÓN FLOTANTE NO BLOQUEANTE DE MARCAJE EXITOSO (ALTO IMPACTO Y FLUJO RÁPIDO) */}
                    {lastPunch && (
                        <div className="absolute inset-x-6 top-8 sm:top-10 z-40 flex justify-center animate-fade-in pointer-events-none">
                            <div className="bg-white border-3 border-emerald-500 rounded-3xl p-6 sm:p-7 max-w-lg w-full text-center shadow-2xl space-y-4 animate-scale-up pointer-events-auto">
                                <div className="flex items-center justify-center gap-3">
                                    <div className="w-10 h-10 bg-emerald-100 border border-emerald-300 text-emerald-700 rounded-xl flex items-center justify-center flex-shrink-0 shadow-2xs">
                                        <svg className="w-6 h-6" fill="none" stroke="currentColor" strokeWidth="2.8" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7"/></svg>
                                    </div>
                                    <span className={`inline-block px-3.5 py-1 rounded-full text-xs font-black uppercase tracking-wider ${
                                        lastPunch.action === 'entrada' 
                                            ? 'bg-emerald-100 text-emerald-800 border border-emerald-200' 
                                            : (lastPunch.action === 'inicio_almuerzo' || lastPunch.action === 'fin_almuerzo'
                                                ? 'bg-amber-100 text-amber-800 border border-amber-200'
                                                : 'bg-slate-100 text-slate-800 border border-slate-200')
                                    }`}>
                                        {lastPunch.action === 'entrada' 
                                            ? 'Entrada Registrada' 
                                            : (lastPunch.action === 'inicio_almuerzo' 
                                                ? 'Salida a Almuerzo' 
                                                : (lastPunch.action === 'fin_almuerzo' ? 'Retorno de Almuerzo' : 'Salida Registrada'))}
                                    </span>
                                </div>

                                <div>
                                    <h2 className="text-2xl sm:text-3xl font-black text-slate-900 tracking-tight leading-tight">
                                        {lastPunch.user?.name || 'Colaborador'}
                                    </h2>
                                    <p className="text-xs font-bold text-slate-500 mt-0.5">
                                        {lastPunch.user?.positionTitle || lastPunch.user?.roleName || 'Personal'}
                                    </p>
                                    {lastPunch.gesture && (
                                        <div className="mt-2">
                                            <span className="inline-block px-2.5 py-0.5 bg-slate-100 border border-slate-200 text-slate-600 rounded-md text-[10px] font-bold">
                                                Marcaje asistido por gesto: {lastPunch.gesture === 'hand_raise' ? 'Palma Levantada' : 'Señal V'}
                                            </span>
                                        </div>
                                    )}
                                </div>

                                <div className="bg-slate-50 rounded-2xl p-3 sm:p-4 border border-slate-200 flex items-center justify-around shadow-2xs">
                                    <div>
                                        <span className="text-[10px] font-bold text-slate-400 uppercase tracking-wider block">Hora Oficial</span>
                                        <span className="text-xl sm:text-2xl font-black text-slate-900 font-mono mt-0.5 block">{lastPunch.timeStr}</span>
                                    </div>
                                    <div className="w-px h-8 bg-slate-200"></div>
                                    <div>
                                        <span className="text-[10px] font-bold text-slate-400 uppercase tracking-wider block">Puntualidad</span>
                                        <span className={`text-sm sm:text-base font-black mt-0.5 block ${lastPunch.isTardy ? 'text-amber-600' : 'text-emerald-600'}`}>
                                            {lastPunch.isTardy ? `Tardía (+${lastPunch.minutesLate} min)` : 'A Tiempo'}
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    )}

                    {/* AVISO FLOTANTE CLARO SI YA MARCÓ HACE INSTANTES (COOLDOWN) */}
                    {cooldownUser && !lastPunch && (
                        <div className="absolute top-8 inset-x-6 z-30 flex justify-center animate-fade-in pointer-events-none">
                            <div className="bg-white/95 border-2 border-emerald-500/80 px-6 py-4 rounded-2xl shadow-2xl flex items-center gap-4 backdrop-blur-md max-w-lg w-full">
                                <div className="w-10 h-10 rounded-xl bg-emerald-50 text-emerald-600 border border-emerald-200 flex items-center justify-center flex-shrink-0">
                                    <svg className="w-6 h-6" fill="none" stroke="currentColor" strokeWidth="2.5" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7"/></svg>
                                </div>
                                <div className="min-w-0 flex-1">
                                    <div className="text-sm font-black text-slate-900 leading-tight truncate">
                                        {cooldownUser.name}
                                    </div>
                                    <div className="text-xs font-semibold text-slate-500 mt-0.5">
                                        Tu marca ya fue registrada. Continúa el siguiente compañero.
                                    </div>
                                </div>
                            </div>
                        </div>
                    )}
                </div>

                {/* 3. BITÁCORA LATERAL OFICIAL SHIFT (ADAPTABLE A CUALQUIER RESOLUCIÓN) */}
                {showLogPanel && showSidebar && (
                    <aside className="w-80 lg:w-96 xl:w-[420px] bg-white border-l border-slate-200/90 flex flex-col flex-shrink-0 h-full min-h-0 shadow-lg z-20">
                        <div className="p-5 border-b border-slate-200/80 flex items-center justify-between flex-shrink-0 bg-slate-50/50">
                            <div>
                                <h2 className="text-sm font-black text-slate-900 tracking-tight leading-tight">Actividad de Hoy</h2>
                                <p className="text-[11px] font-semibold text-slate-400 mt-0.5">Bitácora pública en tiempo real</p>
                            </div>
                            <span className="px-3 py-1 bg-slate-900 text-white rounded-full text-xs font-black shadow-2xs">
                                {todayLogs.length}
                            </span>
                        </div>

                        <div className="flex-1 overflow-y-auto min-h-0 p-4 space-y-2.5 bg-slate-50/40">
                            {todayLogs.length === 0 ? (
                                <div className="text-center py-20 px-4 space-y-2">
                                    <div className="w-12 h-12 bg-slate-100 rounded-2xl flex items-center justify-center mx-auto text-slate-400 border border-slate-200">
                                        <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                                    </div>
                                    <p className="text-xs font-bold text-slate-700">Sin marcajes registrados hoy</p>
                                    <p className="text-[11px] text-slate-400 font-medium">Las marcas del personal se reflejarán aquí de inmediato.</p>
                                </div>
                            ) : (
                                todayLogs.map((log) => {
                                    let badgeLabel = 'Salida';
                                    let badgeColor = 'bg-slate-100 text-slate-700 border border-slate-200';
                                    if (log.type === 'entrada') {
                                        badgeLabel = 'Entrada';
                                        badgeColor = 'bg-emerald-100 text-emerald-800 border border-emerald-200/80';
                                    } else if (log.type === 'inicio_almuerzo') {
                                        badgeLabel = 'Almuerzo';
                                        badgeColor = 'bg-amber-100 text-amber-800 border border-amber-200/80';
                                    } else if (log.type === 'fin_almuerzo') {
                                        badgeLabel = 'Fin Almuerzo';
                                        badgeColor = 'bg-sky-100 text-sky-800 border border-sky-200/80';
                                    }

                                    return (
                                        <div 
                                            key={log.id} 
                                            className="bg-white border border-slate-200/90 p-3 rounded-2xl flex items-center justify-between gap-3 shadow-2xs hover:border-slate-300 transition"
                                        >
                                            <div className="flex items-center gap-3 min-w-0">
                                                {log.avatarUrl ? (
                                                    <img src={log.avatarUrl} alt={log.name} className="w-10 h-10 rounded-xl object-cover border border-slate-200 flex-shrink-0" />
                                                ) : (
                                                    <div className="w-10 h-10 rounded-xl bg-slate-100 flex items-center justify-center text-xs font-black text-slate-700 border border-slate-200 flex-shrink-0">
                                                        {log.name ? log.name.substring(0, 2).toUpperCase() : 'CO'}
                                                    </div>
                                                )}
                                                <div className="min-w-0">
                                                    <div className="text-xs font-bold text-slate-900 truncate">{log.name}</div>
                                                    <div className="text-[10px] font-medium text-slate-400 truncate">{log.positionTitle || log.roleName || 'Colaborador'}</div>
                                                </div>
                                            </div>

                                            <div className="text-right flex-shrink-0">
                                                <span className={`inline-block px-2.5 py-0.5 rounded-md text-[9px] font-black uppercase tracking-wider mb-0.5 ${badgeColor}`}>
                                                    {badgeLabel}
                                                </span>
                                                <div className="text-xs font-black font-mono text-slate-700">{log.timeStr}</div>
                                            </div>
                                        </div>
                                    );
                                })
                            )}
                        </div>
                    </aside>
                )}
            </main>
        </div>
    );
}

window.KioskView = KioskView;