import React from 'react';
import styled from 'styled-components';
import { useLocale } from '@/app/providers/LocaleProvider';
import { Spinner } from '@/shared/components/ui';
import { DepartmentPortalTicketCard } from '@/features/departmentPortal/components/DepartmentPortalTicketCard';
import { CenteredState, StateMessage } from '@/features/departmentPortal/components/departmentPortalStyles';
import type { TicketSummary } from '@/features/tickets/types/ticket.types';

const List = styled.div`
  display: flex;
  flex-direction: column;
  gap: ${({ theme }) => theme.spacing[4]};
`;

interface DepartmentPortalTicketListProps {
  tickets: TicketSummary[];
  isLoading: boolean;
  isError: boolean;
  showDepartment?: boolean;
}

export const DepartmentPortalTicketList: React.FC<DepartmentPortalTicketListProps> = ({
  tickets,
  isLoading,
  isError,
  showDepartment = false,
}) => {
  const { t } = useLocale();

  if (isLoading) {
    return (
      <CenteredState>
        <Spinner size="lg" />
        <StateMessage>{t('common:status.loading')}</StateMessage>
      </CenteredState>
    );
  }

  if (isError) {
    return (
      <CenteredState>
        <StateMessage>{t('departmentPortal:errors.loadFailed')}</StateMessage>
      </CenteredState>
    );
  }

  if (tickets.length === 0) {
    return (
      <CenteredState>
        <StateMessage>{t('departmentPortal:noTicketsYet')}</StateMessage>
      </CenteredState>
    );
  }

  return (
    <List>
      {tickets.map((ticket) => (
        <DepartmentPortalTicketCard
          key={ticket.id}
          ticket={ticket}
          showDepartment={showDepartment}
        />
      ))}
    </List>
  );
};