'use client';

import React, { useState } from 'react';
import { Card, Form, Button, Space, Collapse } from 'antd';
import { Filter, X } from 'lucide-react';
import { ICON_SIZE_MD } from '@/components/icons';
import type { FormProps } from 'antd';

const { Panel } = Collapse;

interface FilterField {
    name: string;
    label: string;
    component: React.ReactNode;
}

interface FormFilterProps {
    fields: FilterField[];
    onFilter: (values: Record<string, unknown>) => void;
    onClear?: () => void;
    defaultCollapsed?: boolean;
}

export default function FormFilter({
    fields,
    onFilter,
    onClear,
    defaultCollapsed = true,
}: FormFilterProps) {
    const [form] = Form.useForm();
    const [collapsed, setCollapsed] = useState(defaultCollapsed);

    const handleSubmit: FormProps['onFinish'] = (values) => {
        onFilter(values);
    };

    const handleClear = () => {
        form.resetFields();
        onClear?.();
        onFilter({});
    };

    return (
        <Card style={{ marginBottom: 16 }}>
            <Collapse
                activeKey={collapsed ? [] : ['filters']}
                onChange={(keys) => setCollapsed(keys.length === 0)}
            >
                <Panel
                    header={
                        <span>
                            <Filter size={ICON_SIZE_MD} style={{ marginRight: 8 }} aria-hidden />
                            Filtros Avançados
                        </span>
                    }
                    key="filters"
                >
                    <Form form={form} layout="vertical" onFinish={handleSubmit}>
                        <div
                            style={{
                                display: 'grid',
                                gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
                                gap: 16,
                            }}
                        >
                            {fields.map((field) => (
                                <Form.Item key={field.name} name={field.name} label={field.label}>
                                    {field.component}
                                </Form.Item>
                            ))}
                        </div>
                        <Form.Item>
                            <Space>
                                <Button type="primary" htmlType="submit" icon={<Filter size={ICON_SIZE_MD} aria-hidden />}>
                                    Filtrar
                                </Button>
                                <Button onClick={handleClear} icon={<X size={ICON_SIZE_MD} aria-hidden />}>
                                    Limpar
                                </Button>
                            </Space>
                        </Form.Item>
                    </Form>
                </Panel>
            </Collapse>
        </Card>
    );
}