'use client';

import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import Grid from '@mui/material/Grid';
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import CircularProgress from '@mui/material/CircularProgress';
import Alert from '@mui/material/Alert';
import { useAuthStore } from '../../login/store/useAuthStore';
import { useAuth } from '../../login/hooks/useAuth';

export default function ProfilePage() {
    const { useMe } = useAuth();
    const { data: profile, isLoading, error } = useMe();
    const user = useAuthStore((s) => s.user);

    const displayData = profile || user;

    if (isLoading) {
        return (
            <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: '400px' }}>
                <CircularProgress />
            </Box>
        );
    }

    if (error) {
        return (
            <Alert severity="error">Erro ao carregar dados do perfil</Alert>
        );
    }

    if (!displayData) {
        return (
            <Alert severity="warning">Nenhum dado de perfil disponível</Alert>
        );
    }

    return (
        <Grid container spacing={3}>
            <Grid size={{ xs: 12, md: 6 }}>
                <Card>
                    <CardContent>
                        <Typography variant="h6" fontWeight="600" mb={2}>
                            Informações Pessoais
                        </Typography>
                        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
                            <Box>
                                <Typography variant="body2" color="textSecondary">
                                    Nome
                                </Typography>
                                <Typography variant="body1" fontWeight="500">
                                    {displayData.nome || '-'}
                                </Typography>
                            </Box>
                            <Box>
                                <Typography variant="body2" color="textSecondary">
                                    Usuário
                                </Typography>
                                <Typography variant="body1" fontWeight="500">
                                    {displayData.userName || '-'}
                                </Typography>
                            </Box>
                            <Box>
                                <Typography variant="body2" color="textSecondary">
                                    Matrícula
                                </Typography>
                                <Typography variant="body1" fontWeight="500">
                                    {displayData.matricula || '-'}
                                </Typography>
                            </Box>
                        </Box>
                    </CardContent>
                </Card>
            </Grid>

            <Grid size={{ xs: 12, md: 6 }}>
                <Card>
                    <CardContent>
                        <Typography variant="h6" fontWeight="600" mb={2}>
                            Informações Profissionais
                        </Typography>
                        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
                            <Box>
                                <Typography variant="body2" color="textSecondary">
                                    Filial
                                </Typography>
                                <Typography variant="body1" fontWeight="500">
                                    {displayData.nomeFilial || '-'} ({displayData.codigoFilial || '-'})
                                </Typography>
                            </Box>
                            <Box>
                                <Typography variant="body2" color="textSecondary">
                                    RCA
                                </Typography>
                                <Typography variant="body1" fontWeight="500">
                                    {displayData.rca || '-'}
                                </Typography>
                            </Box>
                            {displayData.discountPercent !== undefined && (
                                <Box>
                                    <Typography variant="body2" color="textSecondary">
                                        Desconto (%)
                                    </Typography>
                                    <Typography variant="body1" fontWeight="500">
                                        {displayData.discountPercent}%
                                    </Typography>
                                </Box>
                            )}
                        </Box>
                    </CardContent>
                </Card>
            </Grid>

            {(displayData.sectorId !== undefined || displayData.sectorManagerId !== undefined || displayData.supervisorId !== undefined) && (
                <Grid size={{ xs: 12 }}>
                    <Card>
                        <CardContent>
                            <Typography variant="h6" fontWeight="600" mb={2}>
                                Informações Adicionais
                            </Typography>
                            <Grid container spacing={2}>
                                {displayData.sectorId !== undefined && (
                                    <Grid size={{ xs: 12, sm: 4 }}>
                                        <Typography variant="body2" color="textSecondary">
                                            Setor ID
                                        </Typography>
                                        <Typography variant="body1" fontWeight="500">
                                            {displayData.sectorId}
                                        </Typography>
                                    </Grid>
                                )}
                                {displayData.sectorManagerId !== undefined && (
                                    <Grid size={{ xs: 12, sm: 4 }}>
                                        <Typography variant="body2" color="textSecondary">
                                            Gerente de Setor ID
                                        </Typography>
                                        <Typography variant="body1" fontWeight="500">
                                            {displayData.sectorManagerId}
                                        </Typography>
                                    </Grid>
                                )}
                                {displayData.supervisorId !== undefined && (
                                    <Grid size={{ xs: 12, sm: 4 }}>
                                        <Typography variant="body2" color="textSecondary">
                                            Supervisor ID
                                        </Typography>
                                        <Typography variant="body1" fontWeight="500">
                                            {displayData.supervisorId}
                                        </Typography>
                                    </Grid>
                                )}
                            </Grid>
                        </CardContent>
                    </Card>
                </Grid>
            )}
        </Grid>
    );
}

