'use client';

import React, { useState } from 'react';
import { Search, X } from 'lucide-react';
import { ICON_SIZE_MD } from '@/components/icons';
import { Input, Select, Button, Tag, Collapse } from 'antd';
import FilterCard from '@/components/layouts/FilterCard';
import { FormGroup, FormActions } from '@/components/form';
import styles from './SearchFilter.module.scss';

export interface StatusOption {
    value: string;
    label: string;
}

export interface SearchFilterProps {
    searchValue: string;
    onSearchChange: (value: string) => void;
    onSearch: () => void;
    onClear: () => void;
    searchPlaceholder?: string;
    statusOptions?: StatusOption[];
    statusValue?: string;
    onStatusChange?: (value: string) => void;
    statusLabel?: string;
    showStatusFilter?: boolean;
    /** Filtros sempre visíveis (ex.: busca, status). */
    additionalFilters?: React.ReactNode;
    /** H8.4: filtros avançados dentro de "Mais filtros" (expandível) para reduzir ruído. */
    advancedFilters?: React.ReactNode;
    /** Rótulo do bloco de filtros avançados. */
    advancedFiltersLabel?: string;
    className?: string;
}

/**
 * Componente reutilizável para filtros de busca e status
 *
 * @example
 * ```tsx
 * const [search, setSearch] = useState('');
 * const [status, setStatus] = useState('');
 *
 * <SearchFilter
 *   searchValue={search}
 *   onSearchChange={setSearch}
 *   onSearch={handleSearch}
 *   onClear={handleClear}
 *   statusOptions={[
 *     { value: 'ativo', label: 'Ativo' },
 *     { value: 'inativo', label: 'Inativo' },
 *   ]}
 *   statusValue={status}
 *   onStatusChange={setStatus}
 * />
 * ```
 */
export function SearchFilter({
    searchValue,
    onSearchChange,
    onSearch,
    onClear,
    searchPlaceholder = 'Digite para buscar...',
    statusOptions,
    statusValue,
    onStatusChange,
    statusLabel = 'Status',
    showStatusFilter = true,
    additionalFilters,
    advancedFilters,
    advancedFiltersLabel = 'Mais filtros',
    className = '',
}: SearchFilterProps) {
    const hasFilters = !!searchValue || !!statusValue;

    /** Resumo dos filtros ativos para reconhecimento (heurística 6.1) */
    const activeSummary: { label: string; value: string }[] = [];
    if (searchValue?.trim()) activeSummary.push({ label: 'Busca', value: searchValue.trim() });
    if (statusValue && statusOptions?.length) {
        const label = statusOptions.find((o) => o.value === statusValue)?.label ?? statusValue;
        activeSummary.push({ label: statusLabel, value: label });
    }

    return (
        <FilterCard className={className}>
            {hasFilters && activeSummary.length > 0 && (
                <div className={styles.activeFiltersSummary}>
                    <span className={styles.activeFiltersLabel}>Filtros ativos:</span>
                    {activeSummary.map((f) => (
                        <Tag key={f.label} className={styles.activeFilterTag}>
                            {f.label}: {f.value}
                        </Tag>
                    ))}
                </div>
            )}
            <form
                onSubmit={(e) => {
                    e.preventDefault();
                    onSearch();
                }}
                className={styles.searchFilterForm}
            >
                <FormGroup label="Buscar">
                    <Input
                        type="text"
                        placeholder={searchPlaceholder}
                        value={searchValue}
                        onChange={(e) => onSearchChange(e.target.value)}
                        allowClear
                        onPressEnter={onSearch}
                    />
                </FormGroup>

                {showStatusFilter && statusOptions && statusOptions.length > 0 && (
                    <FormGroup label={statusLabel}>
                        <Select
                            placeholder={`Selecione ${statusLabel.toLowerCase()}`}
                            style={{ width: '100%' }}
                            value={statusValue || undefined}
                            onChange={(value) => onStatusChange?.(value || '')}
                            allowClear
                        >
                            {statusOptions.map((option) => (
                                <Select.Option key={option.value} value={option.value}>
                                    {option.label}
                                </Select.Option>
                            ))}
                        </Select>
                    </FormGroup>
                )}

                {additionalFilters}

                {advancedFilters && (
                    <Collapse
                        ghost
                        items={[
                            {
                                key: 'advanced',
                                label: advancedFiltersLabel,
                                children: advancedFilters,
                            },
                        ]}
                        className={styles.advancedFiltersCollapse}
                    />
                )}

                <FormActions>
                    <Button
                        type="primary"
                        icon={<Search size={ICON_SIZE_MD} aria-hidden />}
                        onClick={onSearch}
                        htmlType="submit"
                    >
                        Buscar
                    </Button>
                    {hasFilters && (
                        <Button icon={<X size={ICON_SIZE_MD} aria-hidden />} onClick={onClear}>
                            Limpar
                        </Button>
                    )}
                </FormActions>
            </form>
        </FilterCard>
    );
}

export default SearchFilter;