import React from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { isAxiosError } from 'axios';
import { HiArrowLeft } from 'react-icons/hi';
import toast from 'react-hot-toast';
import { useLocale } from '@/app/providers/LocaleProvider';
import { ProtectedRoute } from '@/features/auth/components/ProtectedRoute';
import { Spinner } from '@/shared/components/ui';
import { ROUTES } from '@/shared/constants/routes';
import { DepartmentPortalHero } from '@/features/departmentPortal/components/DepartmentPortalHero';
import { DepartmentPortalLayout } from '@/features/departmentPortal/components/DepartmentPortalLayout';
import { DepartmentPortalTicketForm } from '@/features/departmentPortal/components/DepartmentPortalTicketForm';
import {
  BackLink,
  CenteredState,
  PageStack,
  StateMessage,
} from '@/features/departmentPortal/components/departmentPortalStyles';
import { useCreateDepartmentPortalTicket } from '@/features/departmentPortal/hooks/useCreateDepartmentPortalTicket';
import { useDepartmentPortal } from '@/features/departmentPortal/hooks/useDepartmentPortal';

const CreateTicketContent: React.FC = () => {
  const { departmentSlug } = useParams<{ departmentSlug: string }>();
  const { t } = useLocale();
  const navigate = useNavigate();
  const portalQuery = useDepartmentPortal(departmentSlug);
  const createMutation = useCreateDepartmentPortalTicket(departmentSlug ?? '');

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

  if (portalQuery.isError || !portalQuery.data) {
    const status = isAxiosError(portalQuery.error) ? portalQuery.error.response?.status : undefined;
    return (
      <DepartmentPortalLayout departmentSlug={departmentSlug}>
        <CenteredState>
          <StateMessage>
            {status === 404
              ? t('departmentPortal:departmentUnavailable')
              : t('departmentPortal:errors.loadFailed')}
          </StateMessage>
        </CenteredState>
      </DepartmentPortalLayout>
    );
  }

  const portal = portalQuery.data;
  const backPath = ROUTES.DEPARTMENT_PORTAL(departmentSlug ?? '');

  return (
    <DepartmentPortalLayout departmentSlug={departmentSlug}>
      <PageStack>
        <BackLink to={backPath}>
          <HiArrowLeft aria-hidden />
          {t('departmentPortal:backToDepartment')}
        </BackLink>
        <DepartmentPortalHero portal={portal} />
        <DepartmentPortalTicketForm
          portal={portal}
          isSubmitting={createMutation.isPending}
          onSubmit={async (payload) => {
            await createMutation.mutateAsync(payload);
            toast.success(t('departmentPortal:ticketCreated'));
            navigate(ROUTES.DEPARTMENT_PORTAL_MY_TICKETS(departmentSlug ?? ''));
          }}
        />
      </PageStack>
    </DepartmentPortalLayout>
  );
};

const DepartmentPortalCreateTicketPage: React.FC = () => (
  <ProtectedRoute>
    <CreateTicketContent />
  </ProtectedRoute>
);

export default DepartmentPortalCreateTicketPage;