import React, { useState, useEffect } from 'react';
import { Play, Square, RotateCw, AlertTriangle, Siren, Terminal } from 'lucide-react';
import { Machine3D } from '../components/Machine3D';
import { SettingsModal } from '../components/SettingsModal';
import { RecipePanel } from '../components/RecipePanel';
import { MotionPanel } from '../components/MotionPanel';
import { CameraPanel } from '../components/CameraPanel';
import { CyberPanel } from '../components/common/CyberPanel';
import { TechButton } from '../components/common/TechButton';
import { ModelInfoPanel } from '../components/ModelInfoPanel';
import { SystemState, Recipe, IOPoint, LogEntry, RobotTarget, ConfigItem } from '../types';

interface HomePageProps {
    systemState: SystemState;
    currentRecipe: Recipe;
    recipes: Recipe[];
    robotTarget: RobotTarget;
    logs: LogEntry[];
    ioPoints: IOPoint[];
    config: ConfigItem[] | null;
    isConfigRefreshing: boolean;
    doorStates: { front: boolean; right: boolean; left: boolean; back: boolean };
    isLowPressure: boolean;
    isEmergencyStop: boolean;
    activeTab: 'recipe' | 'motion' | 'camera' | 'setting' | null;
    onSelectRecipe: (r: Recipe) => void;
    onMove: (axis: 'X' | 'Y' | 'Z', val: number) => void;
    onControl: (action: 'start' | 'stop' | 'reset') => void;
    onSaveConfig: (config: ConfigItem[]) => void;
    onFetchConfig: () => void;
    onCloseTab: () => void;
    videoRef: React.RefObject<HTMLVideoElement>;
}

export const HomePage: React.FC<HomePageProps> = ({
    systemState,
    currentRecipe,
    recipes,
    robotTarget,
    logs,
    ioPoints,
    config,
    isConfigRefreshing,
    doorStates,
    isLowPressure,
    isEmergencyStop,
    activeTab,
    onSelectRecipe,
    onMove,
    onControl,
    onSaveConfig,
    onFetchConfig,
    onCloseTab,
    videoRef
}) => {
    useEffect(() => {
        if (activeTab === 'camera' && navigator.mediaDevices?.getUserMedia) {
            navigator.mediaDevices.getUserMedia({ video: true }).then(s => { if (videoRef.current) videoRef.current.srcObject = s });
        }
    }, [activeTab, videoRef]);

    useEffect(() => {
        if (activeTab === 'setting') {
            onFetchConfig();
        }
    }, [activeTab, onFetchConfig]);

    return (
        <main className="relative w-full h-full flex gap-6 px-6">
            {/* 3D Canvas (Background Layer) */}
            <div className="absolute inset-0 z-0">
                <Machine3D target={robotTarget} ioState={ioPoints} doorStates={doorStates} />
            </div>

            {/* Center Alarms */}
            <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-50 pointer-events-none flex flex-col items-center gap-4">
                {isEmergencyStop && (
                    <div className="bg-red-600/90 text-white p-8 border-4 border-red-500 shadow-glow-red flex items-center gap-6 animate-pulse">
                        <Siren className="w-16 h-16 animate-spin" />
                        <div>
                            <h1 className="text-5xl font-tech font-bold tracking-widest">EMERGENCY STOP</h1>
                            <p className="text-center font-mono text-lg">SYSTEM HALTED - RELEASE TO RESET</p>
                        </div>
                    </div>
                )}
                {isLowPressure && !isEmergencyStop && (
                    <div className="bg-amber-500/80 text-black px-8 py-4 rounded font-bold text-2xl tracking-widest flex items-center gap-4 shadow-glow-red animate-bounce">
                        <AlertTriangle className="w-8 h-8" /> LOW AIR PRESSURE WARNING
                    </div>
                )}
            </div>

            {/* Floating Panel (Left) */}
            {activeTab && activeTab !== 'setting' && activeTab !== 'recipe' && (
                <div className="w-[450px] z-20 animate-in slide-in-from-left-20 duration-500 fade-in">
                    <CyberPanel className="h-full flex flex-col">
                        {activeTab === 'motion' && <MotionPanel robotTarget={robotTarget} onMove={onMove} />}
                        {activeTab === 'camera' && <CameraPanel videoRef={videoRef} />}
                    </CyberPanel>
                </div>
            )}

            {/* Recipe Selection Modal */}
            {activeTab === 'recipe' && (
                <RecipePanel
                    recipes={recipes}
                    currentRecipe={currentRecipe}
                    onSelectRecipe={onSelectRecipe}
                    onClose={onCloseTab}
                />
            )}

            {/* Settings Modal */}
            <SettingsModal
                isOpen={activeTab === 'setting'}
                onClose={onCloseTab}
                config={config}
                isRefreshing={isConfigRefreshing}
                onSave={onSaveConfig}
            />

            {/* Right Sidebar (Dashboard) */}
            <div className="w-80 ml-auto z-20 flex flex-col gap-4">
                <ModelInfoPanel currentRecipe={currentRecipe} />

                <CyberPanel className="flex-none">
                    <div className="mb-2 text-xs text-neon-blue font-bold tracking-widest uppercase">System Status</div>
                    <div className={`text-3xl font-tech font-bold mb-4 ${systemState === SystemState.RUNNING ? 'text-neon-green text-shadow-glow-green' : 'text-slate-400'}`}>
                        {systemState}
                    </div>
                    <div className="space-y-3">
                        <TechButton
                            variant="green"
                            className="w-full flex items-center justify-center gap-2"
                            active={systemState === SystemState.RUNNING}
                            onClick={() => onControl('start')}
                        >
                            <Play className="w-4 h-4" /> START AUTO
                        </TechButton>
                        <TechButton
                            variant="amber"
                            className="w-full flex items-center justify-center gap-2"
                            active={systemState === SystemState.PAUSED}
                            onClick={() => onControl('stop')}
                        >
                            <Square className="w-4 h-4 fill-current" /> STOP / PAUSE
                        </TechButton>
                        <TechButton
                            className="w-full flex items-center justify-center gap-2"
                            onClick={() => onControl('reset')}
                        >
                            <RotateCw className="w-4 h-4" /> SYSTEM RESET
                        </TechButton>
                    </div>
                </CyberPanel>

                <CyberPanel className="flex-1 flex flex-col min-h-0">
                    <div className="mb-2 flex items-center justify-between text-xs text-neon-blue font-bold tracking-widest uppercase border-b border-white/10 pb-2">
                        <span>Event Log</span>
                        <Terminal className="w-3 h-3" />
                    </div>
                    <div className="flex-1 overflow-y-auto font-mono text-[10px] space-y-1 pr-1 custom-scrollbar">
                        {logs.map(log => (
                            <div key={log.id} className={`flex gap-2 ${log.type === 'error' ? 'text-red-500' : log.type === 'warning' ? 'text-amber-400' : 'text-slate-400'}`}>
                                <span className="opacity-50">[{log.timestamp}]</span>
                                <span>{log.message}</span>
                            </div>
                        ))}
                    </div>
                </CyberPanel>
            </div>
        </main>
    );
};