import React, { useState } from 'react';
import { HiArrowLeft } from 'react-icons/hi';
import { useParams } from 'react-router-dom';
import { useLocale } from '@/app/providers/LocaleProvider';
import { ProtectedRoute } from '@/features/auth/components/ProtectedRoute';
import { ROUTES } from '@/shared/constants/routes';
import { DepartmentPortalFilters } from '@/features/departmentPortal/components/DepartmentPortalFilters';
import { DepartmentPortalHero } from '@/features/departmentPortal/components/DepartmentPortalHero';
import { DepartmentPortalLayout } from '@/features/departmentPortal/components/DepartmentPortalLayout';
import { DepartmentPortalTicketList } from '@/features/departmentPortal/components/DepartmentPortalTicketList';
import {
  BackLink,
  PageStack,
} from '@/features/departmentPortal/components/departmentPortalStyles';
import { useDepartmentPortal } from '@/features/departmentPortal/hooks/useDepartmentPortal';
import { useDepartmentPortalMyTickets } from '@/features/departmentPortal/hooks/useDepartmentPortalMyTickets';
import type { PortalTicketFilters } from '@/features/departmentPortal/types/departmentPortal.types';

const MyTicketsContent: React.FC = () => {
  const { departmentSlug } = useParams<{ departmentSlug: string }>();
  const { t } = useLocale();
  const [filters, setFilters] = useState<PortalTicketFilters>({ page: 1, per_page: 15 });
  const portalQuery = useDepartmentPortal(departmentSlug);
  const ticketsQuery = useDepartmentPortalMyTickets(departmentSlug ?? '', filters);

  const tickets = ticketsQuery.data?.data ?? [];

  return (
    <DepartmentPortalLayout departmentSlug={departmentSlug}>
      <PageStack>
        <BackLink to={ROUTES.DEPARTMENT_PORTAL(departmentSlug ?? '')}>
          <HiArrowLeft aria-hidden />
          {t('departmentPortal:backToDepartment')}
        </BackLink>
        {portalQuery.data ? <DepartmentPortalHero portal={portalQuery.data} /> : null}
        <DepartmentPortalFilters filters={filters} onChange={setFilters} />
        <DepartmentPortalTicketList
          tickets={tickets}
          isLoading={ticketsQuery.isLoading}
          isError={ticketsQuery.isError}
        />
      </PageStack>
    </DepartmentPortalLayout>
  );
};

const DepartmentPortalMyTicketsPage: React.FC = () => (
  <ProtectedRoute>
    <MyTicketsContent />
  </ProtectedRoute>
);

export default DepartmentPortalMyTicketsPage;