import React from 'react';
import { ThemeProvider, createTheme, CssBaseline, AppBar, Toolbar, Typography, Container, Box, Button, Chip } from '@mui/material';
import Dashboard from './Dashboard';
import RuleManager from './RuleManager';
import LoginDialog from './LoginDialog';
import { AuthProvider, useAuth } from './AuthContext';

// Gruvbox Dark color palette
const gruvboxDark = {
    bg0: '#282828',      // background
    bg1: '#3c3836',      // lighter background (cards)
    bg2: '#504945',      // selection / borders
    fg: '#ebdbb2',       // foreground
    fg2: '#d5c4a1',      // secondary text
    aqua: '#8ec07c',     // primary accent
    orange: '#fe8019',   // secondary accent
    red: '#fb4934',
    green: '#b8bb26',
    yellow: '#fabd2f',
    blue: '#83a598',
    purple: '#d3869b',
};

const darkTheme = createTheme({
    palette: {
        mode: 'dark',
        primary: {
            main: gruvboxDark.aqua,
        },
        secondary: {
            main: gruvboxDark.orange,
        },
        background: {
            default: gruvboxDark.bg0,
            paper: gruvboxDark.bg1,
        },
        text: {
            primary: gruvboxDark.fg,
            secondary: gruvboxDark.fg2,
        },
        divider: gruvboxDark.bg2,
    },
});

function AppContent() {
    const { user, loading, logout, isAuthenticated, isAdmin } = useAuth();

    if (loading) {
        return (
            <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
                <Typography>Loading...</Typography>
            </Box>
        );
    }

    if (!isAuthenticated) {
        return <LoginDialog open={true} />;
    }

    return (
        <Box sx={{ flexGrow: 1 }}>
            <AppBar position="static">
                <Toolbar>
                    <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
                        Tischlerei Dashboard
                    </Typography>
                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
                        <Chip
                            label={user.username}
                            color={isAdmin ? 'secondary' : 'default'}
                            size="small"
                            sx={{
                                fontWeight: 600,
                                ...(isAdmin && {
                                    background: 'linear-gradient(45deg, #d3869b 30%, #fe8019 90%)'
                                })
                            }}
                        />
                        {isAdmin && (
                            <Chip
                                label="ADMIN"
                                size="small"
                                sx={{
                                    bgcolor: gruvboxDark.purple,
                                    color: gruvboxDark.bg0,
                                    fontWeight: 700
                                }}
                            />
                        )}
                        <Button
                            color="inherit"
                            onClick={logout}
                            size="small"
                            sx={{ ml: 1 }}
                        >
                            Logout
                        </Button>
                    </Box>
                </Toolbar>
            </AppBar>
            <Container maxWidth="xl" sx={{ mt: 4, mb: 4 }}>
                <Dashboard />
                {isAdmin && <RuleManager />}
            </Container>
        </Box>
    );
}

function App() {
    return (
        <ThemeProvider theme={darkTheme}>
            <CssBaseline />
            <AuthProvider>
                <AppContent />
            </AuthProvider>
        </ThemeProvider>
    );
}

export default App;