import React from 'react';
import { Header } from './Header';
import { Footer } from './Footer';
import { RobotTarget } from '../../types';

interface LayoutProps {
    children: React.ReactNode;
    currentTime: Date;
    isHostConnected: boolean;
    robotTarget: RobotTarget;
    onTabChange: (tab: 'recipe' | 'motion' | 'camera' | 'setting' | 'initialize' | null) => void;
    activeTab: 'recipe' | 'motion' | 'camera' | 'setting' | 'initialize' | null;
    isLoading: boolean;
}

export const Layout: React.FC<LayoutProps> = ({
    children,
    currentTime,
    isHostConnected,
    robotTarget,
    onTabChange,
    activeTab,
    isLoading
}) => {
    return (
        <div className="relative w-screen h-screen bg-slate-950 text-slate-100 overflow-hidden font-sans">
            {/* Animated Nebula Background */}
            <div className="absolute inset-0 bg-gradient-to-br from-slate-950 via-[#050a15] to-[#0a0f20] animate-gradient bg-[length:400%_400%] z-0"></div>
            <div className="absolute inset-0 grid-bg opacity-30 z-0"></div>
            <div className="absolute inset-0 scanlines z-50 pointer-events-none"></div>

            {/* LOADING OVERLAY */}
            {isLoading && (
                <div className="absolute inset-0 z-[100] bg-black flex flex-col items-center justify-center gap-6">
                    <div className="relative">
                        <div className="w-24 h-24 border-4 border-neon-blue/30 rounded-full animate-spin"></div>
                        <div className="absolute inset-0 border-t-4 border-neon-blue rounded-full animate-spin"></div>
                        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-neon-blue text-2xl font-tech font-bold">●</div>
                    </div>
                    <div className="text-center">
                        <h2 className="text-2xl font-tech font-bold text-white tracking-widest mb-2">SYSTEM INITIALIZING</h2>
                        <p className="font-mono text-neon-blue text-sm animate-pulse">ESTABLISHING CONNECTION...</p>
                    </div>
                </div>
            )}

            <Header
                currentTime={currentTime}
                onTabChange={onTabChange}
                activeTab={activeTab}
            />

            {/* Main Content Area */}
            <div className="absolute inset-0 pt-20 pb-10 z-10">
                {children}
            </div>

            <Footer isHostConnected={isHostConnected} robotTarget={robotTarget} />
        </div>
    );
};