import React from 'react';
import { NavLink, Outlet } from 'react-router-dom';
import { useSettings } from '../context/SettingsContext';
import {
    Activity,
    LayoutGrid,
    Container,
    Settings,
    Moon,
    Sun,
    ChevronLeft,
    ChevronRight
} from 'lucide-react';

const Layout = () => {
    const { theme, toggleTheme, dockerEnabled, isSidebarCollapsed, setIsSidebarCollapsed } = useSettings();

    return (
        <div className="app-container layout-container">
            {/* Desktop Sidebar */}
            <nav className={`glass-panel sidebar ${isSidebarCollapsed ? 'collapsed' : ''}`}>
                <div className="logo-section">
                    <Activity className="icon" size={24} style={{ marginRight: isSidebarCollapsed ? 0 : '0.4rem', color: 'var(--accent-color)' }} />
                    {!isSidebarCollapsed && <h1 className="logo-text">snStatus</h1>}
                </div>

                <ul className="nav-links">
                    <li>
                        <NavLink to="/" className={({ isActive }) => isActive ? 'nav-item active' : 'nav-item'} title="대시보드">
                            <LayoutGrid size={20} />
                            {!isSidebarCollapsed && <span>대시보드</span>}
                        </NavLink>
                    </li>
                    <li>
                        <NavLink to="/history" className={({ isActive }) => isActive ? 'nav-item active' : 'nav-item'} title="히스토리">
                            <Activity size={20} />
                            {!isSidebarCollapsed && <span>히스토리</span>}
                        </NavLink>
                    </li>
                    {dockerEnabled && (
                        <li>
                            <NavLink to="/docker" className={({ isActive }) => isActive ? 'nav-item active' : 'nav-item'} title="도커">
                                <Container size={20} />
                                {!isSidebarCollapsed && <span>도커</span>}
                            </NavLink>
                        </li>
                    )}
                    <li>
                        <NavLink to="/settings" className={({ isActive }) => isActive ? 'nav-item active' : 'nav-item'} title="설정">
                            <Settings size={20} />
                            {!isSidebarCollapsed && <span>설정</span>}
                        </NavLink>
                    </li>
                </ul>

                <div className="sidebar-footer">
                    <div className="theme-toggle-container">
                        <button onClick={toggleTheme} className="glass-card btn-icon theme-btn" title={theme === 'light' ? '다크 모드로 전환' : '라이트 모드로 전환'}>
                            {theme === 'light' ? <Sun size={18} /> : <Moon size={18} />}
                            {!isSidebarCollapsed && <span className="theme-text">{theme === 'light' ? '라이트 모드' : '다크 모드'}</span>}
                        </button>
                    </div>

                    <button
                        className="collapse-btn"
                        onClick={() => setIsSidebarCollapsed(!isSidebarCollapsed)}
                        title={isSidebarCollapsed ? "메뉴 펼치기" : "메뉴 접기"}
                    >
                        {isSidebarCollapsed ? <ChevronRight size={16} /> : <ChevronLeft size={16} />}
                    </button>
                </div>
            </nav>

            {/* Mobile Bottom Navigation */}
            <nav className="glass-panel bottom-nav">
                <NavLink to="/" className={({ isActive }) => isActive ? 'nav-item active' : 'nav-item'}>
                    <LayoutGrid size={20} />
                    <span>홈</span>
                </NavLink>
                <NavLink to="/history" className={({ isActive }) => isActive ? 'nav-item active' : 'nav-item'}>
                    <Activity size={20} />
                    <span>히스토리</span>
                </NavLink>
                {dockerEnabled && (
                    <NavLink to="/docker" className={({ isActive }) => isActive ? 'nav-item active' : 'nav-item'}>
                        <Container size={20} />
                        <span>도커</span>
                    </NavLink>
                )}
                <NavLink to="/settings" className={({ isActive }) => isActive ? 'nav-item active' : 'nav-item'}>
                    <Settings size={20} />
                    <span>설정</span>
                </NavLink>
            </nav>

            {/* Main Content Area */}
            <div className="main-content">
                {/* Mobile Header */}
                <header className="mobile-header glass-panel">
                    <Activity size={20} style={{ color: 'var(--accent-color)' }} />
                    <h1 className="logo-text">snStatus</h1>
                </header>
                <Outlet />
            </div>

            <style>{`
            .layout-container {
                display: flex;
                flex-direction: row;
                height: 100vh;
                max-width: 100% !important;
                padding: 0 !important;
                overflow: hidden;
            }
            
            /* --- Sidebar Styles (Desktop) --- */
            .sidebar {
                width: 240px;
                height: 100%;
                display: flex;
                flex-direction: column;
                padding: 1.25rem;
                background: var(--sidebar-bg);
                backdrop-filter: blur(12px);
                -webkit-backdrop-filter: blur(12px);
                border-radius: 0 !important;
                border-right: 1px solid var(--glass-border);
                border-left: none;
                border-top: none;
                border-bottom: none;
                z-index: 100;
                transition: width 0.3s ease;
            }
            
            .sidebar.collapsed {
                width: 72px;
                padding: 1.25rem 0.5rem;
                align-items: center;
            }
            
            .logo-section {
                display: flex;
                align-items: center;
                margin-bottom: 2.5rem;
                padding-left: 0.25rem;
                height: 32px; /* Fixed height to prevent jump */
                white-space: nowrap;
                overflow: hidden;
            }
            
            .sidebar.collapsed .logo-section {
                justify-content: center;
                padding-left: 0;
            }
            
            /* Refined Logo Styling */
            /* Refined Logo Styling */
            .logo-section h1 {
                font-size: 1.2rem;
                font-weight: 700;
                letter-spacing: -0.02em;
                background: var(--brand-gradient);
                -webkit-background-clip: text;
                background-clip: text;
                -webkit-text-fill-color: transparent;
                display: inline-block;
                opacity: 1;
                transition: opacity 0.2s ease;
            }
            
            .nav-links {
                list-style: none;
                display: flex;
                flex-direction: column;
                gap: 0.25rem;
                flex: 1; 
                width: 100%;
            }
            
            .nav-item {
                display: flex;
                align-items: center;
                gap: 0.75rem;
                padding: 0.7rem 0.8rem;
                text-decoration: none;
                color: var(--text-secondary);
                border-radius: 8px;
                transition: all 0.2s;
                font-weight: 500;
                font-size: 0.95rem;
                white-space: nowrap;
                overflow: hidden;
                border: none;
                background: transparent;
                cursor: pointer;
            }
            
            .sidebar.collapsed .nav-item {
                justify-content: center;
                padding: 0.7rem;
            }
            
            .nav-item:hover {
                background: rgba(255,255,255,0.08);
                color: var(--text-primary);
            }
            
            .nav-item.active {
                background: var(--accent-color);
                color: white;
                box-shadow: 0 4px 12px var(--accent-glow);
            }
            
            /* Footer Area */
            .sidebar-footer {
                display: flex;
                flex-direction: column;
                gap: 0.5rem;
            }

            .theme-toggle-container {
                padding-top: 1rem;
                border-top: 1px solid var(--glass-border);
            }
            
            .theme-btn {
                width: 100%;
                border-radius: 8px;
                justify-content: flex-start;
                padding: 0.7rem 0.8rem;
                gap: 0.75rem;
                border: none;
                background: transparent;
                color: var(--text-secondary);
                font-weight: 500;
                font-size: 0.95rem;
                display: flex;
                align-items: center;
                white-space: nowrap;
                overflow: hidden;
                cursor: pointer;
            }
            
            .sidebar.collapsed .theme-btn {
                justify-content: center;
                padding: 0.7rem;
            }
            
            .theme-btn:hover {
                background: rgba(255,255,255,0.08);
                color: var(--text-primary);
            }
            
            .collapse-btn {
                display: flex;
                align-items: center;
                justify-content: flex-start;
                width: 100%;
                padding: 0.5rem;
                padding-left: 0.8rem;
                background: transparent;
                border: none;
                color: var(--text-secondary);
                cursor: pointer;
                border-radius: 6px;
                transition: background 0.2s;
            }
            .collapse-btn:hover {
                background: rgba(255,255,255,0.05);
                color: var(--text-primary);
            }
            .sidebar.collapsed .collapse-btn {
                justify-content: center;
                padding-left: 0;
            }

            /* --- Main Content --- */
            .main-content {
                flex: 1;
                overflow-y: auto;
                padding: 2rem;
                position: relative;
                display: flex;
                flex-direction: column;
            }
            
            /* --- Mobile Elements (Default Hidden on Desktop) --- */
            .bottom-nav {
                display: none;
                position: fixed;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 64px;
                background: var(--card-bg);
                backdrop-filter: blur(16px);
                -webkit-backdrop-filter: blur(16px);
                border-top: 1px solid var(--glass-border);
                z-index: 1000;
                justify-content: space-around;
                align-items: center;
                padding: 0 0.5rem;
            }
            
            .bottom-nav .nav-item {
                flex-direction: column;
                gap: 4px;
                font-size: 0.7rem;
                padding: 0.5rem;
                border-radius: 8px;
                background: transparent !important; /* Override active bg */
                color: var(--text-secondary);
                box-shadow: none !important;
            }
            
            .bottom-nav .nav-item.active {
                color: var(--accent-color);
            }
            .bottom-nav .nav-item.active svg {
                stroke-width: 2.5px;
            }

            .mobile-header {
                display: none;
                align-items: center;
                gap: 0.75rem;
                padding: 0.75rem 1.25rem;
                margin-bottom: 1.5rem;
                border-radius: 12px;
                background: var(--card-bg);
                border: 1px solid var(--glass-border);
            }
            .mobile-header h1 {
                font-size: 1.1rem;
                margin: 0;
            }

            /* --- Mobile Media Queries --- */
            @media (max-width: 768px) {
                .sidebar {
                    display: none;
                }
                
                .app-container {
                    flex-direction: column;
                }

                .main-content {
                    padding: 1rem;
                    padding-bottom: 80px; /* Space for bottom nav */
                }
                
                .bottom-nav {
                    display: flex;
                }
                
                .mobile-header {
                    display: flex;
                    margin-bottom: 0.5rem;
                }
            }
        `}</style>
        </div>
    );
};

export default Layout;
