import { Typography, Box, Chip } from '@mui/material';
import { AccountBalance } from '@mui/icons-material';
import { useQuery } from '@tanstack/react-query';
import { useNavigate } from 'react-router-dom';
import { buchhaltungApi } from '../../services/buchhaltung';
import { WidgetCard } from '../templates/WidgetCard';
import { ChipListSkeleton } from '../templates/SkeletonPresets';

function fmtEur(val: number) {
  return new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(val);
}

function BuchhaltungWidget() {
  const navigate = useNavigate();

  const { data: haushaltsjahre = [], isLoading: loadingJahre } = useQuery({
    queryKey: ['haushaltsjahre'],
    queryFn: buchhaltungApi.getHaushaltsjahre,
    refetchInterval: 5 * 60 * 1000,
    retry: 1,
  });

  const activeJahr = haushaltsjahre.find(hj => !hj.abgeschlossen) || haushaltsjahre[0];

  const { data: stats, isLoading: loadingStats, isError } = useQuery({
    queryKey: ['buchhaltung-stats', activeJahr?.id],
    queryFn: () => buchhaltungApi.getStats(activeJahr!.id),
    enabled: !!activeJahr,
    refetchInterval: 5 * 60 * 1000,
    retry: 1,
  });

  const isLoading = loadingJahre || (!!activeJahr && loadingStats);

  const overBudgetCount = stats ? stats.konten_budget.filter(k => k.auslastung_prozent >= 80).length : 0;

  return (
    <WidgetCard
      title="Buchhaltung"
      icon={<AccountBalance fontSize="small" />}
      isLoading={isLoading}
      skeleton={<ChipListSkeleton />}
      isError={isError || (!isLoading && !activeJahr)}
      errorMessage={!activeJahr ? 'Kein aktives Haushaltsjahr' : 'Daten konnten nicht geladen werden'}
      isEmpty={!isLoading && !isError && !!activeJahr && !stats}
      onClick={() => navigate('/buchhaltung')}
    >
      <Box sx={{ mb: 0.5 }}>
        <Typography variant="body2" color="text.secondary" component="span">Einnahmen: </Typography>
        <Typography variant="body2" color="success.main" component="span" fontWeight={600}>{fmtEur(stats?.total_einnahmen ?? 0)}</Typography>
      </Box>
      <Box sx={{ mb: 0.5 }}>
        <Typography variant="body2" color="text.secondary" component="span">Ausgaben: </Typography>
        <Typography variant="body2" color="error.main" component="span" fontWeight={600}>{fmtEur(stats?.total_ausgaben ?? 0)}</Typography>
      </Box>
      <Box sx={{ mb: overBudgetCount > 0 ? 1 : 0 }}>
        <Typography variant="body2" color="text.secondary" component="span">Saldo: </Typography>
        <Typography variant="body2" color={(stats?.saldo ?? 0) >= 0 ? 'success.main' : 'error.main'} component="span" fontWeight={600}>{fmtEur(stats?.saldo ?? 0)}</Typography>
      </Box>
      {overBudgetCount > 0 && (
        <Chip
          label={`${overBudgetCount} Konto${overBudgetCount > 1 ? 'n' : ''} über 80% Budget`}
          color="warning"
          size="small"
          variant="outlined"
        />
      )}
    </WidgetCard>
  );
}

export default BuchhaltungWidget;
