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

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
}) => {
    const { theme, themeName } = useTheme();

    // Theme-specific background classes
    const getBackgroundClass = () => {
        switch (themeName) {
            case 'windows-classic':
                return 'bg-[#008080]'; // Classic teal desktop
            case 'dark-modern':
                return 'bg-zinc-950';
            case 'matrix':
                return 'bg-black';
            case 'industrial':
                return 'bg-stone-950';
            case 'otaku':
                return 'bg-[#1a1025]'; // Dark purple
            case 'pink-pink':
                return 'bg-[#fff0f5]'; // Lavender blush
            default:
                return 'bg-slate-950';
        }
    };

    const getTextClass = () => {
        switch (themeName) {
            case 'windows-classic':
                return 'text-black';
            case 'pink-pink':
                return 'text-[#8b008b]'; // Dark magenta
            default:
                return 'text-slate-100';
        }
    };

    return (
        <div className={`relative w-screen h-screen ${getBackgroundClass()} ${getTextClass()} overflow-hidden font-sans`}>
            {/* Animated Background - only for themes with effects */}
            {theme.effects.gridBg && (
                <>
                    <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>
                </>
            )}

            {/* Matrix theme special background */}
            {themeName === 'matrix' && (
                <div className="absolute inset-0 bg-gradient-to-b from-black via-[#001100] to-black z-0"></div>
            )}

            {/* Industrial theme background */}
            {themeName === 'industrial' && (
                <div className="absolute inset-0 bg-gradient-to-br from-stone-950 via-stone-900 to-stone-950 z-0"></div>
            )}

            {/* Dark Modern gradient */}
            {themeName === 'dark-modern' && (
                <div className="absolute inset-0 bg-gradient-to-br from-zinc-950 via-zinc-900 to-zinc-950 z-0"></div>
            )}

            {/* Otaku theme background - 다크 퍼플 그라데이션 + 별 효과 */}
            {themeName === 'otaku' && (
                <div className="absolute inset-0 bg-gradient-to-br from-[#1a1025] via-[#2d1f3d] to-[#1a1025] z-0">
                    {/* 별빛 효과 */}
                    <div className="absolute inset-0 opacity-30" style={{
                        backgroundImage: `
                            radial-gradient(2px 2px at 20px 30px, #ff6b9d, transparent),
                            radial-gradient(2px 2px at 40px 70px, #c084fc, transparent),
                            radial-gradient(1px 1px at 90px 40px, #fbbf24, transparent),
                            radial-gradient(2px 2px at 130px 80px, #ff6b9d, transparent),
                            radial-gradient(1px 1px at 160px 30px, #c084fc, transparent)
                        `,
                        backgroundSize: '200px 100px'
                    }}></div>
                </div>
            )}

            {/* Pink Pink theme background - 파스텔 핑크 그라데이션 */}
            {themeName === 'pink-pink' && (
                <div className="absolute inset-0 bg-gradient-to-br from-[#fff0f5] via-[#ffe4e9] to-[#ffccd5] z-0">
                    {/* 하트 패턴 오버레이 */}
                    <div className="absolute inset-0 opacity-20" style={{
                        backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath fill='%23ff69b4' d='M20 8c3-4 8-4 11 0s3 11-11 20C6 19 6 12 9 8s8-4 11 0z'/%3E%3C/svg%3E")`,
                        backgroundSize: '80px 80px'
                    }}></div>
                </div>
            )}

            {/* Scanlines - only for themes with the effect */}
            {theme.effects.scanlines && (
                <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-current/30 rounded-full animate-spin" style={{ borderColor: `${theme.colors.primary}30` }}></div>
                        <div className="absolute inset-0 border-t-4 rounded-full animate-spin" style={{ borderTopColor: theme.colors.primary }}></div>
                        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-2xl font-tech font-bold" style={{ color: theme.colors.primary }}>●</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-sm animate-pulse" style={{ color: theme.colors.primary }}>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>
    );
};