import React from 'react';
import styled from 'styled-components';
import { useLocale } from '@/app/providers/LocaleProvider';
import { Button, Input, Select } from '@/shared/components/ui';
import type { TicketListFilters, TicketPriorityRef, TicketStatusRef } from '@/features/tickets/types/ticket.types';
import { localizedName } from '@/features/tickets/utils/ticketDisplay';

const Bar = styled.form`
  display: flex;
  flex-wrap: wrap;
  gap: ${({ theme }) => theme.spacing[3]};
  margin-bottom: ${({ theme }) => theme.spacing[6]};
  align-items: flex-end;
`;

const CheckboxLabel = styled.label`
  display: inline-flex;
  align-items: center;
  gap: ${({ theme }) => theme.spacing[2]};
  font-size: ${({ theme }) => theme.typography.fontSize.sm};
  color: ${({ theme }) => theme.colors.text.secondary};
  cursor: pointer;
  user-select: none;
`;

interface TicketFiltersBarProps {
  filters: TicketListFilters;
  statuses: TicketStatusRef[];
  priorities: TicketPriorityRef[];
  onChange: (patch: Partial<TicketListFilters>) => void;
  onSearch: () => void;
}

export const TicketFiltersBar: React.FC<TicketFiltersBarProps> = ({
  filters,
  statuses,
  priorities,
  onChange,
  onSearch,
}) => {
  const { t, locale } = useLocale();

  return (
    <Bar
      onSubmit={(event) => {
        event.preventDefault();
        onSearch();
      }}
    >
      <Input
        label={t('tickets:filters.search')}
        placeholder={t('tickets:filters.searchPlaceholder')}
        value={filters.search ?? ''}
        onChange={(event) => onChange({ search: event.target.value, page: 1 })}
        style={{ minWidth: '220px', flex: '1 1 220px' }}
      />

      <Select
        label={t('tickets:fields.status')}
        value={filters.status_id ?? ''}
        onChange={(event) =>
          onChange({ status_id: event.target.value || undefined, page: 1 })
        }
        options={[
          { value: '', label: t('tickets:filters.allStatuses') },
          ...statuses.map((status) => ({
            value: status.id,
            label: localizedName(status, locale),
          })),
        ]}
        style={{ minWidth: '160px' }}
      />

      <Select
        label={t('tickets:fields.priority')}
        value={filters.priority_id ?? ''}
        onChange={(event) =>
          onChange({ priority_id: event.target.value || undefined, page: 1 })
        }
        options={[
          { value: '', label: t('tickets:filters.allPriorities') },
          ...priorities.map((priority) => ({
            value: priority.id,
            label: localizedName(priority, locale),
          })),
        ]}
        style={{ minWidth: '160px' }}
      />

      <CheckboxLabel>
        <input
          type="checkbox"
          checked={Boolean(filters.open_only)}
          onChange={(event) =>
            onChange({ open_only: event.target.checked || undefined, page: 1 })
          }
        />
        {t('tickets:filters.openOnly')}
      </CheckboxLabel>

      <CheckboxLabel>
        <input
          type="checkbox"
          checked={Boolean(filters.unassigned_only)}
          onChange={(event) =>
            onChange({
              unassigned_only: event.target.checked || undefined,
              page: 1,
            })
          }
        />
        {t('tickets:filters.unassignedOnly')}
      </CheckboxLabel>

      <Button type="submit" variant="primary">
        {t('tickets:filters.apply')}
      </Button>
    </Bar>
  );
};