import { useQuery } from 'react-query';
import { useParams } from 'react-router-dom';

import { isNil } from 'lodash-es';
import Stack from '@material-hu/mui/Stack';

import HuTitle from '@material-hu/components/design-system/Title';

import { useAuth } from 'src/contexts/JWTContext';
import { performanceKeys } from 'src/pages/dashboard/performance/queries';
import { getReviewCycle } from 'src/pages/dashboard/performance/services';
import {
  MenuItems,
  type ReviewUser,
} from 'src/pages/dashboard/performance/types';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { usePerformanceReview } from '../../PerformanceReviewContext';
import { useLeaderDashboard } from '../hooks/useLeaderDashboard';

import LeaderCollaboratorsSection from './leader-dashboard/LeaderCollaboratorsSection';
import LeaderProgressBlock from './leader-dashboard/LeaderProgressBlock';
import LeaderStatCards from './leader-dashboard/LeaderStatCards';

const TeamReviews = () => {
  const { t } = useLokaliseTranslation(['performance', 'goals']);
  const { id } = useParams();
  const { user } = useAuth();
  const { setUserToShareId, setMenuSelected } = usePerformanceReview();

  const { data } = useQuery(
    performanceKeys.cycle(id ?? ''),
    () => getReviewCycle(id ?? ''),
    {
      select: response => response.data,
    },
  );

  const responsibleId = !isNil(user?.id) ? (user?.id as number) : undefined;

  const {
    stats,
    statsLoading,
    users,
    usersLoading,
    usersFetching,
    totalPages,
    page,
    setPage,
    query,
    setQuery,
    selectedFilter,
    setSelectedFilter,
    availableFilters,
  } = useLeaderDashboard({
    cycleId: id,
    responsibleId: data?.isResponsible ? responsibleId : undefined,
  });

  const handleUserSelect = (selectedUser: ReviewUser) => {
    setUserToShareId(selectedUser.userId);
    setMenuSelected(MenuItems.SHARE_RESULTS);
  };

  return (
    <Stack
      sx={{
        flex: 1,
        minWidth: 0,
        width: '100%',
      }}
    >
      <Stack
        sx={{
          flexDirection: 'row',
          alignItems: 'center',
          gap: 2,
          mb: 3,
        }}
      >
        <HuTitle
          variant="L"
          title={t('goals:my_team.title')}
        />
      </Stack>

      <Stack sx={{ gap: 3 }}>
        <LeaderStatCards
          stats={stats}
          isLoading={statsLoading}
        />

        <LeaderProgressBlock
          stats={stats}
          isLoading={statsLoading}
        />

        <LeaderCollaboratorsSection
          users={users}
          usersLoading={usersLoading}
          usersFetching={usersFetching}
          query={query}
          setQuery={setQuery}
          selectedFilter={selectedFilter}
          setSelectedFilter={setSelectedFilter}
          availableFilters={availableFilters}
          page={page}
          setPage={setPage}
          totalPages={totalPages}
          onUserSelect={handleUserSelect}
        />
      </Stack>
    </Stack>
  );
};

export default TeamReviews;