import React from 'react';
import styled from 'styled-components';
import { HiX } from 'react-icons/hi';
import { useLocale } from '@/app/providers/LocaleProvider';
import { IconButton } from '@/shared/components/ui';
import type { SearchFilters } from '@/features/search/types/search.types';
import type { TicketPriorityRef, TicketStatusRef } from '@/features/tickets/types/ticket.types';
import { localizedName } from '@/features/tickets/utils/ticketDisplay';

const Wrap = styled.div`
  display: flex;
  flex-wrap: wrap;
  gap: ${({ theme }) => theme.spacing[3]};
  margin-bottom: 0;
  padding: 0;
`;

const Chip = styled.span`
  display: inline-flex;
  align-items: center;
  gap: ${({ theme }) => theme.spacing[1]};
  padding: ${({ theme }) => `${theme.spacing[2]} ${theme.spacing[2]} ${theme.spacing[2]} ${theme.spacing[4]}`};
  min-height: 34px;
  border-radius: ${({ theme }) => theme.borderRadius.full};
  background: ${({ theme }) => theme.colors.surfaceElevated};
  border: 1px solid ${({ theme }) => theme.colors.borderSoft};
  color: ${({ theme }) => theme.colors.text.secondary};
  font-size: ${({ theme }) => theme.typography.fontSize.sm};
  font-weight: ${({ theme }) => theme.typography.fontWeight.medium};
`;

interface ActiveFilterChipsProps {
  filters: SearchFilters;
  query?: string;
  statuses: TicketStatusRef[];
  priorities: TicketPriorityRef[];
  categories: { id: string; name_en: string; name_ar: string }[];
  onRemove: (patch: Partial<SearchFilters>) => void;
  onClearQuery?: () => void;
}

export const ActiveFilterChips: React.FC<ActiveFilterChipsProps> = ({
  filters,
  query,
  statuses,
  priorities,
  categories,
  onRemove,
  onClearQuery,
}) => {
  const { t, locale } = useLocale();
  const chips: Array<{ key: string; label: string; clear: () => void }> = [];

  if (query?.trim()) {
    chips.push({
      key: 'query',
      label: `"${query.trim()}"`,
      clear: () => onClearQuery?.(),
    });
  }

  filters.status_ids?.forEach((id) => {
    const status = statuses.find((item) => item.id === id);
    if (status) {
      chips.push({
        key: `status-${id}`,
        label: localizedName(status, locale),
        clear: () => onRemove({ status_ids: undefined }),
      });
    }
  });

  filters.priority_ids?.forEach((id) => {
    const priority = priorities.find((item) => item.id === id);
    if (priority) {
      chips.push({
        key: `priority-${id}`,
        label: localizedName(priority, locale),
        clear: () => onRemove({ priority_ids: undefined }),
      });
    }
  });

  if (filters.category_id) {
    const category = categories.find((item) => item.id === filters.category_id);
    chips.push({
      key: 'category',
      label: category ? localizedName(category, locale) : filters.category_id,
      clear: () => onRemove({ category_id: undefined }),
    });
  }

  if (filters.sla_status) {
    chips.push({
      key: 'sla',
      label: t(`search:sla.${filters.sla_status}`),
      clear: () => onRemove({ sla_status: undefined }),
    });
  }

  if (filters.date_from) {
    chips.push({
      key: 'date-from',
      label: `${t('search:filters.dateFrom')}: ${filters.date_from}`,
      clear: () => onRemove({ date_from: undefined }),
    });
  }

  if (filters.date_to) {
    chips.push({
      key: 'date-to',
      label: `${t('search:filters.dateTo')}: ${filters.date_to}`,
      clear: () => onRemove({ date_to: undefined }),
    });
  }

  if (filters.assigned_to) {
    chips.push({
      key: 'assignee',
      label: `${t('search:filters.assignee')}: ${filters.assigned_to}`,
      clear: () => onRemove({ assigned_to: undefined }),
    });
  }

  if (filters.requester_id) {
    chips.push({
      key: 'requester',
      label: `${t('search:filters.requester')}: ${filters.requester_id}`,
      clear: () => onRemove({ requester_id: undefined }),
    });
  }

  if (filters.is_unassigned) {
    chips.push({
      key: 'unassigned',
      label: t('search:filters.unassigned'),
      clear: () => onRemove({ is_unassigned: undefined }),
    });
  }

  if (filters.has_attachments) {
    chips.push({
      key: 'attachments',
      label: t('search:filters.hasAttachments'),
      clear: () => onRemove({ has_attachments: undefined }),
    });
  }

  if (chips.length === 0) {
    return null;
  }

  return (
    <Wrap aria-label={t('search:filters.activeLabel')}>
      {chips.map((chip) => (
        <Chip key={chip.key}>
          {chip.label}
          <IconButton label={t('search:filters.removeChip')} size="sm" onClick={chip.clear}>
            <HiX aria-hidden />
          </IconButton>
        </Chip>
      ))}
    </Wrap>
  );
};