'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 Avatar from '@mui/material/Avatar';
import Chip from '@mui/material/Chip';
import { useColaboradorAtual } from '../hooks/useColaboradorAtual';

export default function ProfilePage() {
  const { data: colaborador, isLoading, error } = useColaboradorAtual();

  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 (!colaborador) {
    return <Alert severity="warning">Nenhum dado de perfil disponível</Alert>;
  }

  return (
    <Grid container spacing={3}>
      {/* Header com Avatar e Nome */}
      <Grid size={{ xs: 12 }}>
        <Card>
          <CardContent>
            <Box sx={{ display: 'flex', alignItems: 'center', gap: 3 }}>
              <Avatar
                sx={{
                  width: 80,
                  height: 80,
                  bgcolor: 'primary.main',
                  fontSize: '1.5rem',
                }}
              >
                {colaborador.iniciais}
              </Avatar>
              <Box>
                <Typography variant="h5" fontWeight="600">
                  {colaborador.nome}
                </Typography>
                <Typography variant="body2" color="textSecondary">
                  {colaborador.nomeComFilial}
                </Typography>
                <Box sx={{ mt: 1, display: 'flex', gap: 1 }}>
                  {colaborador.ehRepresentanteComercial && (
                    <Chip label="RCA" color="primary" size="small" />
                  )}
                  {colaborador.podeAplicarDesconto && (
                    <Chip
                      label={`${colaborador.percentualDesconto}% desconto`}
                      color="success"
                      size="small"
                    />
                  )}
                </Box>
              </Box>
            </Box>
          </CardContent>
        </Card>
      </Grid>

      {/* Informações Pessoais */}
      <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">
                  {colaborador.nome || '-'}
                </Typography>
              </Box>
              <Box>
                <Typography variant="body2" color="textSecondary">
                  Usuário
                </Typography>
                <Typography variant="body1" fontWeight="500">
                  {colaborador.userName || '-'}
                </Typography>
              </Box>
              <Box>
                <Typography variant="body2" color="textSecondary">
                  Matrícula
                </Typography>
                <Typography variant="body1" fontWeight="500">
                  {colaborador.matricula || '-'}
                </Typography>
              </Box>
            </Box>
          </CardContent>
        </Card>
      </Grid>

      {/* Informações Profissionais */}
      <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">
                  {colaborador.nomeFilial || '-'} ({colaborador.codigoFilial || '-'})
                </Typography>
              </Box>
              <Box>
                <Typography variant="body2" color="textSecondary">
                  RCA
                </Typography>
                <Typography variant="body1" fontWeight="500">
                  {colaborador.ehRepresentanteComercial ? colaborador.codigoRCA : 'Não é vendedor'}
                </Typography>
              </Box>
              {colaborador.podeAplicarDesconto && (
                <Box>
                  <Typography variant="body2" color="textSecondary">
                    Desconto Disponível
                  </Typography>
                  <Typography variant="body1" fontWeight="500">
                    {colaborador.percentualDesconto}%
                  </Typography>
                </Box>
              )}
            </Box>
          </CardContent>
        </Card>
      </Grid>

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

