import { Helmet } from 'react-helmet-async';

import { IconInfoCircle, IconRocket } from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';

import HuStateCard from '@material-hu/components/composed-components/StateCard';
import { type AvatarProps as HuAvatarProps } from '@material-hu/components/design-system/Avatar/types';
import HuPagination from '@material-hu/components/design-system/Inputs/Pagination';
import HuSearch from '@material-hu/components/design-system/Inputs/Search';
import HuTitle from '@material-hu/components/design-system/Title';

import useHuGoTheme from 'src/hooks/useHuGoTheme';
import { formatTitle } from 'src/utils/helmetUtils';
import { useLokaliseTranslation } from 'src/utils/i18n';

import PerformanceLoading from '../components/PerformanceLoading';

import NoReviews from './components/NoReviews';
import PerformanceCycleRow from './components/PerformanceCycleRow';
import { usePerformanceCyclesList } from './hooks/usePerformanceCyclesList';

const Performance = () => {
  const HuGoThemeProvider = useHuGoTheme();
  const { t } = useLokaliseTranslation(['performance', 'apps']);

  const {
    pagination,
    setPage,
    totalPages,
    results,
    isLoading,
    getReviewCycleAction,
    searchQuery,
    setSearchQuery,
    hasActiveSearch,
  } = usePerformanceCyclesList();

  return (
    <HuGoThemeProvider>
      <Helmet>
        <title>{formatTitle(t('apps:title_view_reviews'))}</title>
      </Helmet>
      <Stack
        sx={{
          backgroundColor: 'new.background.layout.default',
          height: '100%',
          minHeight: '100%',
          py: 3,
          px: 3,
        }}
      >
        <Stack
          sx={{ flexDirection: 'row', alignItems: 'center', gap: 2, mb: 3 }}
        >
          <Stack
            sx={{
              backgroundColor: 'new.background.layout.brand',
              borderRadius: '50%',
              justifyContent: 'center',
              alignItems: 'center',
              height: 40,
              width: 40,
              color: theme =>
                (
                  theme.palette as typeof theme.palette & {
                    new?: { text?: { neutral?: { brand?: string } } };
                  }
                ).new?.text?.neutral?.brand ?? theme.palette.primary.main,
            }}
          >
            <IconRocket
              size={24}
              color="currentColor"
              aria-hidden
            />
          </Stack>
          <Stack sx={{ flex: 1, minWidth: 0 }}>
            <HuTitle
              variant="L"
              title={t('apps:title_view_reviews')}
            />
          </Stack>
        </Stack>

        <HuSearch
          fullWidth
          value={searchQuery}
          placeholder={t('cycles.search_bar_placeholder')}
          onChange={setSearchQuery}
          sx={{ mb: 2 }}
        />

        <HuTitle
          variant="M"
          title={t('cycles.title')}
          sx={{ mb: 2 }}
        />

        {isLoading ? (
          <PerformanceLoading />
        ) : (
          <>
            {!!results.length && (
              <>
                <Stack
                  component="section"
                  aria-label={t('cycles.title')}
                  sx={{ width: '100%' }}
                >
                  {results.map(row => (
                    <PerformanceCycleRow
                      key={row.id}
                      row={row}
                      action={getReviewCycleAction(row)}
                    />
                  ))}
                </Stack>
                {totalPages > 1 && (
                  <HuPagination
                    type="basic"
                    limit={pagination.limit}
                    page={pagination.page + 1}
                    totalPages={totalPages}
                    loading={isLoading}
                    onChangePage={newPage => setPage(newPage - 1)}
                    sx={{
                      mt: 1,
                      width: '100%',
                      alignSelf: 'stretch',
                      boxSizing: 'border-box',
                    }}
                  />
                )}
              </>
            )}
            {!results.length && hasActiveSearch && (
              <HuStateCard
                sx={{ p: 3 }}
                slotProps={{
                  title: {
                    title: t('cycles.no_cycles_found_title_admin'),
                    description: t('cycles.no_cycles_found_description_admin'),
                  },
                  avatar: {
                    Icon: IconInfoCircle as HuAvatarProps['Icon'],
                    size: 'large',
                    color: 'primary',
                  },
                }}
              />
            )}
            {!results.length && !hasActiveSearch && <NoReviews />}
          </>
        )}
      </Stack>
    </HuGoThemeProvider>
  );
};

export default Performance;