import React, { useMemo, useState } from 'react';
import styled from 'styled-components';
import { isAxiosError } from 'axios';
import { useLocale } from '@/app/providers/LocaleProvider';
import { Button, Card, Input, Select, Spinner, Textarea } from '@/shared/components/ui';
import { extractApiErrorMessage } from '@/shared/utils/apiErrors';
import { localizedName } from '@/features/tickets/utils/ticketDisplay';
import type { DepartmentPortalMetadata } from '@/features/departmentPortal/types/departmentPortal.types';
import type { CreatePortalTicketPayload } from '@/features/departmentPortal/types/departmentPortal.types';

const FormCard = styled(Card)`
  text-align: start;
`;

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

const ErrorBanner = styled.div`
  padding: ${({ theme }) => theme.spacing[3]};
  border-radius: ${({ theme }) => theme.borderRadius.md};
  background: ${({ theme }) => theme.colors.errorLight};
  color: ${({ theme }) => theme.colors.error};
  font-size: ${({ theme }) => theme.typography.fontSize.sm};
`;

interface DepartmentPortalTicketFormProps {
  portal: DepartmentPortalMetadata;
  isSubmitting: boolean;
  onSubmit: (payload: CreatePortalTicketPayload) => Promise<void>;
}

export const DepartmentPortalTicketForm: React.FC<DepartmentPortalTicketFormProps> = ({
  portal,
  isSubmitting,
  onSubmit,
}) => {
  const { t, locale } = useLocale();
  const [subject, setSubject] = useState('');
  const [description, setDescription] = useState('');
  const [categoryId, setCategoryId] = useState('');
  const [subcategoryId, setSubcategoryId] = useState('');
  const [priorityId, setPriorityId] = useState('');
  const [error, setError] = useState<string | null>(null);

  const categories = useMemo(() => portal.categories ?? [], [portal.categories]);
  const priorities = useMemo(() => portal.priorities ?? [], [portal.priorities]);

  const subcategories = useMemo(() => {
    const cat = categories.find((c) => c.id === categoryId);
    return cat?.subcategories ?? [];
  }, [categories, categoryId]);

  const handleSubmit = async (event: React.FormEvent) => {
    event.preventDefault();
    setError(null);
    try {
      await onSubmit({
        subject,
        description,
        category_id: categoryId || null,
        subcategory_id: subcategoryId || null,
        priority_id: priorityId || null,
      });
    } catch (err: unknown) {
      setError(
        extractApiErrorMessage(
          isAxiosError(err) ? err.response?.data : err,
          t('departmentPortal:errors.createFailed'),
        ) ?? t('departmentPortal:errors.createFailed'),
      );
    }
  };

  if (!categories.length && !priorities.length) {
    return (
      <Centered>
        <Spinner />
      </Centered>
    );
  }

  return (
    <FormCard variant="outlined" padding="lg">
    <Form onSubmit={handleSubmit}>
      {error ? <ErrorBanner>{error}</ErrorBanner> : null}
      <Input
        data-testid="portal-ticket-subject"
        label={t('departmentPortal:form.subject')}
        value={subject}
        onChange={(e) => setSubject(e.target.value)}
        required
        minLength={5}
        fullWidth
      />
      <Textarea
        data-testid="portal-ticket-description"
        label={t('departmentPortal:form.description')}
        value={description}
        onChange={(e) => setDescription(e.target.value)}
        required
        minLength={10}
        rows={6}
        fullWidth
      />
      {categories.length > 0 ? (
        <Select
          label={t('departmentPortal:form.category')}
          value={categoryId}
          onChange={(e) => {
            setCategoryId(e.target.value);
            setSubcategoryId('');
          }}
          options={[
            { value: '', label: t('departmentPortal:form.selectCategory') },
            ...categories.map((c) => ({
              value: c.id,
              label: localizedName(c, locale),
            })),
          ]}
          fullWidth
        />
      ) : null}
      {subcategories.length > 0 ? (
        <Select
          label={t('departmentPortal:form.subcategory')}
          value={subcategoryId}
          onChange={(e) => setSubcategoryId(e.target.value)}
          options={[
            { value: '', label: t('departmentPortal:form.selectSubcategory') },
            ...subcategories.map((s) => ({
              value: s.id,
              label: localizedName(s, locale),
            })),
          ]}
          fullWidth
        />
      ) : null}
      {priorities.length > 0 ? (
        <Select
          label={t('departmentPortal:form.priority')}
          value={priorityId}
          onChange={(e) => setPriorityId(e.target.value)}
          options={[
            { value: '', label: t('departmentPortal:form.selectPriority') },
            ...priorities.map((p) => ({
              value: p.id,
              label: localizedName(p, locale),
            })),
          ]}
          fullWidth
        />
      ) : null}
      <Button
        type="submit"
        data-testid="portal-ticket-submit"
        variant="primary" size="lg" fullWidth loading={isSubmitting} disabled={isSubmitting}>
        {t('departmentPortal:createTicket')}
      </Button>
    </Form>
    </FormCard>
  );
};

const Centered = styled.div`
  display: flex;
  justify-content: center;
  padding: ${({ theme }) => theme.spacing[6]} 0;
`;