import * as React from 'react';
import styles from './DashboardScreen.module.scss';
import { ApprovalRouteApi } from '../../services/api';
import { RequestTypeListSeries } from '../../models';
import { ScreenKey } from '../app/types';
import { texts } from '../../texts';
import { useRequestTypes } from '../../hooks/useRequestTypes';
import { useRequestTypeListsAll } from '../../hooks/useRequestTypeListsAll';
import { useTemplateRoutes } from '../../hooks/useTemplateRoutes';
import { AsyncList } from '../../hooks/useAsyncList';
import { CardGrid, NavCard, StatCard, StatRow } from '../ui';

export interface IDashboardScreenProps {
  api: ApprovalRouteApi;
  onNavigate: (key: ScreenKey) => void;
}

// Пока список грузится или запрос упал — показываем прочерк, а не «0»,
// чтобы не соврать пользователю про реальное количество записей.
function statValue(list: AsyncList<unknown>): React.ReactNode {
  if (list.isLoading || list.error) return texts.common.empty;
  return list.items.length;
}

// Партиций много на серию (архив + текущая) — считаем суммарно по всем типам
// заявок, а не количество самих серий (это и так есть в requestTypesStat).
function partitionsCount(list: AsyncList<RequestTypeListSeries>): React.ReactNode {
  if (list.isLoading || list.error) return texts.common.empty;
  return list.items.reduce((sum, series) => sum + series.partitions.length, 0);
}

export const DashboardScreen: React.FC<IDashboardScreenProps> = ({ api, onNavigate }) => {
  const requestTypes = useRequestTypes(api);
  const routes = useTemplateRoutes(api);
  const listPartitions = useRequestTypeListsAll(api);

  return (
    <div>
      <StatRow>
        <StatCard label={texts.dashboard.requestTypesStat} value={statValue(requestTypes)} />
        <StatCard label={texts.dashboard.routesStat} value={statValue(routes)} />
        <StatCard label={texts.dashboard.listPartitionsStat} value={partitionsCount(listPartitions)} />
      </StatRow>

      <div className={styles.sectionsLabel}>{texts.dashboard.sections}</div>
      <hr className={styles.sectionsDivider} />
      <CardGrid>
        <NavCard
          icon="clipboard"
          title={texts.dashboard.requestTypesCard.title}
          description={texts.dashboard.requestTypesCard.description}
          onClick={() => onNavigate('requestTypes')}
        />
        <NavCard
          icon="route"
          title={texts.dashboard.routesCard.title}
          description={texts.dashboard.routesCard.description}
          onClick={() => onNavigate('routes')}
        />
        <NavCard
          icon="search"
          title={texts.dashboard.resolveCard.title}
          description={texts.dashboard.resolveCard.description}
          onClick={() => onNavigate('resolve')}
        />
        <NavCard
          icon="edit"
          title={texts.dashboard.manageRequestsCard.title}
          description={texts.dashboard.manageRequestsCard.description}
          onClick={() => onNavigate('manageRequests')}
        />
        <NavCard
          icon="people"
          title={texts.dashboard.manageByUserCard.title}
          description={texts.dashboard.manageByUserCard.description}
          onClick={() => onNavigate('manageByUser')}
        />
      </CardGrid>
    </div>
  );
};