'use client';
import React from 'react';
import {
    AppBar,
    Box,
    Container,
    IconButton,
    Toolbar,
    Typography,
} from '@mui/material';
import Link from 'next/link';
import { styled } from '@mui/material/styles';
import { useThemeContext } from '@/src/context/ThemeContext';
import DarkModeIcon from '@mui/icons-material/DarkMode';
import LightModeIcon from '@mui/icons-material/LightMode';

// Styled components
const StyledAppBar = styled(AppBar)(({ theme }) => ({
    background: 'linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%)',
    boxShadow: '0 4px 20px rgba(0, 0, 0, 0.3)',
    borderBottom: '1px solid rgba(255, 255, 255, 0.1)',
}));

const StyledAppBarLight = styled(AppBar)(({ theme }) => ({
    background: 'linear-gradient(135deg, #ffffff 0%, #f0f0f0 50%, #e0e0e0 100%)',
    boxShadow: '0 4px 20px rgba(0, 0, 0, 0.1)',
    borderBottom: '1px solid rgba(0, 0, 0, 0.1)',
}));

const LogoText = styled(Typography)(({ theme }) => ({
    fontSize: '1.5rem',
    fontWeight: 800,
    background: theme.palette.mode === 'dark'
        ? 'linear-gradient(135deg, #dee2e6 0%, #cccccc 100%)'
        : 'linear-gradient(135deg, #1a1a2e 0%, #333333 100%)',
    WebkitBackgroundClip: 'text',
    WebkitTextFillColor: theme.palette.mode === 'dark' ? '#dee2e6' : 'rgba(0, 0, 0, 0.85)',
    letterSpacing: '-0.5px',
    cursor: 'pointer',
    '&:hover': {
        transform: 'scale(1.05)',
        transition: 'transform 0.2s ease',
    },
}));

const ThemeToggle = styled(IconButton)(({ theme }) => ({
    color: 'inherit',
    '&:hover': {
        backgroundColor: 'rgba(255, 255, 255, 0.1)',
    },
}));

const ThemeToggleLight = styled(IconButton)(({ theme }) => ({
    color: 'inherit',
    '&:hover': {
        backgroundColor: 'rgba(0, 0, 0, 0.05)',
    },
}));

const LogoLink = styled(Link)({
    display: 'flex',
    alignItems: 'center',
    gap: 8,
    textDecoration: 'none',
    color: 'inherit',
});

export default function AppShell({ children }: { children: React.ReactNode }) {
    const { mode, toggleTheme } = useThemeContext();
    const isDark = mode === 'dark';

    return (
        <Box sx={{ minHeight: '100vh' }}>
            {isDark ? (
                <StyledAppBar position="sticky">
                    <Container maxWidth="lg" sx={{ px: { xs: 1, sm: 3, md: 3 } }}>
                        <Toolbar disableGutters sx={{ justifyContent: 'space-between' }}>
                            <LogoLink href="/">
                                <img src="/images/dowdelogo.png" alt="logo" style={{ height: 32, cursor: 'pointer' }} />
                                <LogoText variant="h6">
                                    Wiki
                                </LogoText>
                            </LogoLink>
                            <ThemeToggle onClick={toggleTheme} size="large">
                                <LightModeIcon />
                            </ThemeToggle>
                        </Toolbar>
                    </Container>
                </StyledAppBar>
            ) : (
                <StyledAppBarLight position="sticky">
                    <Container maxWidth="lg" sx={{ px: { xs: 1, sm: 3, md: 3 } }}>
                        <Toolbar disableGutters sx={{ justifyContent: 'space-between' }}>
                            <LogoLink href="/">
                                <img src="/images/dowdelogo.png" alt="logo" style={{ height: 32, cursor: 'pointer' }} />
                                <LogoText variant="h6">
                                    Wiki
                                </LogoText>
                            </LogoLink>
                            <ThemeToggleLight onClick={toggleTheme} size="large">
                                <DarkModeIcon sx={{ color: '#000000' }} />
                            </ThemeToggleLight>
                        </Toolbar>
                    </Container>
                </StyledAppBarLight>
            )}
            <Container maxWidth="lg" sx={{ py: 4, px: { xs: 1, sm: 3, md: 3 } }}>
                {children}
            </Container>
        </Box>
    );
}