import React, { useMemo, useState } from 'react';
import styled from 'styled-components';
import { useLocale } from '@/app/providers/LocaleProvider';
import { useAuthStore, selectUserDepartments } from '@/features/auth/store/authStore';
import { AppLayout } from '@/shared/components/layout/AppLayout';
import { DepartmentPortalFilters } from '@/features/departmentPortal/components/DepartmentPortalFilters';
import { DepartmentPortalTicketList } from '@/features/departmentPortal/components/DepartmentPortalTicketList';
import { useProfileMyTickets } from '@/features/departmentPortal/hooks/useProfileMyTickets';
import type { PortalTicketFilters } from '@/features/departmentPortal/types/departmentPortal.types';

const Title = styled.h1`
  font-size: ${({ theme }) => theme.typography.fontSize['2xl']};
  margin-bottom: ${({ theme }) => theme.spacing[6]};
  text-align: start;
`;

const ProfileMyTicketsPage: React.FC = () => {
  const { t } = useLocale();
  const user = useAuthStore((s) => s.user);
  const departments = useAuthStore(selectUserDepartments);
  const [filters, setFilters] = useState<PortalTicketFilters>({ page: 1, per_page: 15 });
  const ticketsQuery = useProfileMyTickets(filters);

  const departmentOptions = useMemo(
    () =>
      (departments ?? []).map((d) => ({
        id: d.id,
        name: d.name,
      })),
    [departments],
  );

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

  return (
    <AppLayout>
      <Title>{t('departmentPortal:myTickets')}</Title>
      {user ? (
        <DepartmentPortalFilters
          filters={filters}
          onChange={setFilters}
          showDepartmentFilter
          departments={departmentOptions}
        />
      ) : null}
      <DepartmentPortalTicketList
        tickets={tickets}
        isLoading={ticketsQuery.isLoading}
        isError={ticketsQuery.isError}
        showDepartment
      />
    </AppLayout>
  );
};

export default ProfileMyTicketsPage;