import Container from '@material-hu/mui/Container';
import Skeleton from '@material-hu/mui/Skeleton';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import PdfFullScreen from '@material-hu/components/composed-components/PdfViewer/components/FullScreen';
import StateCard from '@material-hu/components/design-system/StateCard';

import useHuGoTheme from 'src/hooks/useHuGoTheme';
import { useMobileLayout } from 'src/hooks/useMobileLayout';

import { ReceiptCard } from './components/ReceiptCard';
import { ReceiptYearsFilter } from './components/ReceiptYearsFilter';
import { useGetPayrollReceipts } from './hooks/useGetPayrollReceipts';
import { useMobilityAdoPdfs } from './hooks/useMobilityAdoPdfs';
import { getReceiptKey } from './utils';

type PayrollMobilityAdoPageProps = { isMobile?: boolean };

const PayrollMobilityAdoPage = ({
  isMobile = false,
}: PayrollMobilityAdoPageProps) => {
  const HugoThemeProvider = useHuGoTheme();

  useMobileLayout(isMobile);

  const { receipts, receiptYears, isLoading, isError } =
    useGetPayrollReceipts();

  const {
    pdfViewerState,
    loadingReceiptKey,
    handleReceiptClick,
    handleDownloadFromMenu,
    handleClosePdf,
  } = useMobilityAdoPdfs();

  const showFilterButton = !isLoading && receipts.length > 0;
  const showEmptyState = !isLoading && !isError && !receipts.length;
  const showReceipts = !isLoading && !isError && receipts.length > 0;
  const showPdfViewer = pdfViewerState !== null;

  return (
    <HugoThemeProvider>
      <Container
        maxWidth="lg"
        sx={{ p: 3 }}
      >
        <Stack
          component="header"
          sx={{
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'space-between',
            mb: 3,
            minHeight: 43,
          }}
        >
          <Typography
            variant="globalL"
            fontWeight="fontWeightSemiBold"
          >
            Nóminas
          </Typography>
          {showFilterButton && (
            <ReceiptYearsFilter receiptYears={receiptYears} />
          )}
        </Stack>
        {isLoading && (
          <Stack sx={{ gap: 1.5 }}>
            {Array.from({ length: 5 }, (_, i) => (
              <Skeleton
                key={i}
                variant="rounded"
                height={80}
              />
            ))}
          </Stack>
        )}
        {showEmptyState && (
          <StateCard
            title="No hay nóminas disponibles"
            description="No se encontraron recibos de nómina para tu cuenta"
          />
        )}
        {showReceipts &&
          receipts.map(receipt => {
            const key = getReceiptKey(receipt);
            return (
              <ReceiptCard
                key={key}
                receipt={receipt}
                isLoading={loadingReceiptKey === key}
                onClick={handleReceiptClick}
                onDownload={handleDownloadFromMenu}
              />
            );
          })}
        {showPdfViewer && (
          <PdfFullScreen
            file={pdfViewerState.url}
            name={`${pdfViewerState.title}.pdf`}
            onClose={handleClosePdf}
            showHeader
          />
        )}
      </Container>
    </HugoThemeProvider>
  );
};

export default PayrollMobilityAdoPage;
