import React from 'react';
import { isAxiosError } from 'axios';
import { AdminPageShell } from '@/features/admin/components/AdminPageShell';
import { useQuery } from '@tanstack/react-query';
import { useLocale } from '@/app/providers/LocaleProvider';
import { AppLayout } from '@/shared/components/layout/AppLayout';
import { Table, Th, Td, Tr, TableWrap, AdminPanel, PanelLoadingState, PanelMessage} from '@/shared/components/ui';
import { fetchAssigneePerformance } from '@/features/admin/services/adminService';

const AdminAssigneePerformancePage: React.FC = () => {
  const { t } = useLocale();
  const assigneesQuery = useQuery({
    queryKey: ['admin', 'assignee-performance'],
    queryFn: fetchAssigneePerformance});

  const isForbidden =
    assigneesQuery.isError &&
    isAxiosError(assigneesQuery.error) &&
    assigneesQuery.error.response?.status === 403;

  return (
    <AppLayout>
      <AdminPageShell
        title={t('admin:assigneePerformance.title')}
        subtitle={t('admin:assigneePerformance.subtitle')}
        backLabel={t('settings:title')}
      >
      <AdminPanel>
        {isForbidden ? (
          <PanelMessage $variant="error">{t('admin:states.forbidden')}</PanelMessage>
        ) : assigneesQuery.isLoading ? (
          <PanelLoadingState />
        ) : assigneesQuery.isError ? (
          <PanelMessage $variant="error">{t('admin:states.error')}</PanelMessage>
        ) : (assigneesQuery.data?.length ?? 0) === 0 ? (
          <p style={{ margin: 0, color: 'var(--text-secondary)' }}>{t('admin:states.empty')}</p>
        ) : (
          <TableWrap>
            <Table>
              <thead>
                <tr>
                  <Th>{t('admin:assigneePerformance.columns.name')}</Th>
                  <Th>{t('admin:assigneePerformance.columns.email')}</Th>
                  <Th>{t('admin:assigneePerformance.columns.handled')}</Th>
                  <Th>{t('admin:assigneePerformance.columns.closed')}</Th>
                </tr>
              </thead>
              <tbody>
                {assigneesQuery.data?.map((assignee) => (
                  <Tr key={assignee.assignee_id}>
                    <Td>{assignee.assignee_name}</Td>
                    <Td>{assignee.assignee_email}</Td>
                    <Td>{assignee.tickets_handled}</Td>
                    <Td>{assignee.tickets_closed}</Td>
                  </Tr>))}
              </tbody>
            </Table>
          </TableWrap>
        )}
      </AdminPanel>
      </AdminPageShell>
    </AppLayout>
  );
};

export default AdminAssigneePerformancePage;