'use client';
import React from 'react';
import { ArrowBack } from '@mui/icons-material';
import {
    Box,
    Container,
    Typography,
} from '@mui/material';
import { styled } from '@mui/material/styles';
import { useTheme } from '@mui/material/styles';
import { IMod } from '@/src/types/Imod';
import { IRaceUnits } from '@/src/types/IUnitShort';
import { IRaceBuildings } from '@/src/types/IBuildingShort';
import UnitsTable from '@/src/classes/UnitsTable';
import { BackButton } from '@/src/commons/BackButton';

const ModNotFound = styled(Typography)(({ theme }) => ({
    color: theme.palette.text.secondary,
}));

interface ModPageClientProps {
    initialMod: IMod | null;
    racesUnits: IRaceUnits[];
    racesBuildings: IRaceBuildings[];
}

export default function ModPageClient({ initialMod, racesUnits, racesBuildings }: ModPageClientProps) {
    const theme = useTheme();

    if (initialMod != null) {
        const isDark = theme.palette.mode === 'dark';

        return (
            <Container maxWidth="lg">
                <BackButton
                    variant="outlined"
                    startIcon={<ArrowBack />}
                    href="/"
                >
                    Back to mods list
                </BackButton>

                <Typography variant="h3" component="h1" sx={{
                    fontWeight: 800,
                    mb: 1,
                    WebkitBackgroundClip: isDark ? 'text' : 'initial',
                    WebkitTextFillColor: isDark ? '#dee2e6' : 'initial',
                    color: isDark ? '#dee2e6' : 'rgba(0, 0, 0, 0.85)',
                }}>
                    {initialMod.name} <Box component="span" sx={{
                        fontSize: '0.5em',
                        color: theme.palette.text.secondary,
                        fontWeight: 500,
                    }}>({initialMod.version})</Box>
                </Typography>

                <Box>
                    <UnitsTable modId={initialMod.id} racesUnits={racesUnits} racesBuildings={racesBuildings} />
                </Box>
            </Container>
        );
    } else {
        return (
            <Container maxWidth="lg" sx={{ py: 8, textAlign: 'center' }}>
                <ModNotFound variant="h5">
                    Mod not found
                </ModNotFound>
            </Container>
        );
    }
}