'use client';

import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { Card, Divider, Input, Modal, Select, Typography } from 'antd';
import type { ModalProps } from 'antd';
import { Save, SlidersHorizontal } from 'lucide-react';
import { ICON_SIZE_MD } from '@/components/icons';
import { FormGroup } from '@/components/form';
import gridStyles from '@/features/pessoas/components/pessoaDetalheSublistaFormGrid.module.scss';
import {
    FiltrosModalFooterPadrao,
    FiltrosModalTabsTitulo,
    FILTROS_MODAL_TAB_KEY,
    ListingSavedFiltersSection,
    type FiltrosModalTabsTituloActiveKey,
} from '@/components/listings';
import {
    STATUS_OPTIONS_ENTREGA,
    TIPO_OPTIONS_ENTREGA,
} from '../entregasPlanejamentoOptions';
import {
    ENTREGAS_PLANEJAMENTO_LIST_MODULE_KEY,
    entregasPlanejamentoFiltrosToPayload,
} from '../utils/entregasPlanejamentoFiltrosPayload';
import type { EntregasPlanejamentoListaFiltrosApi } from '../utils/entregasPlanejamentoListaFiltersUrl';
import { EntregasPlanejamentoFiltrosMeusFiltrosTab } from './EntregasPlanejamentoFiltrosMeusFiltrosTab';

const { Search } = Input;
const { Text, Paragraph } = Typography;

export type ModalFiltrosEntregasPlanejamentoProps = {
    open: boolean;
    onClose: () => void;
    draft: EntregasPlanejamentoListaFiltrosApi;
    onDraftChange: (next: EntregasPlanejamentoListaFiltrosApi) => void;
    onAplicar: () => void;
    onLimparRascunho: () => void;
    onLimparTodosFiltros: () => void;
    onApplySaved: (payload: unknown, meta: { nome: string; id: number }) => void;
    modalWidth?: ModalProps['width'];
    modalCentered?: boolean;
    modalClassName?: string;
    modalZIndex?: number;
    modalStyles?: ModalProps['styles'];
};

export function ModalFiltrosEntregasPlanejamento({
    open,
    onClose,
    draft,
    onDraftChange,
    onAplicar,
    onLimparRascunho,
    onLimparTodosFiltros,
    onApplySaved,
    modalWidth,
    modalCentered,
    modalClassName,
    modalZIndex,
    modalStyles,
}: ModalFiltrosEntregasPlanejamentoProps) {
    const [filtrosModalTab, setFiltrosModalTab] = useState<FiltrosModalTabsTituloActiveKey>(
        FILTROS_MODAL_TAB_KEY.filtrar,
    );

    const snapshotKey = useMemo(() => JSON.stringify({ filtros: draft }), [draft]);

    useEffect(() => {
        if (open) {
            setFiltrosModalTab(FILTROS_MODAL_TAB_KEY.filtrar);
        }
    }, [open]);

    const handleModalLimparTodos = useCallback(() => {
        if (filtrosModalTab === FILTROS_MODAL_TAB_KEY.filtrar) {
            onLimparRascunho();
            return;
        }
        onLimparTodosFiltros();
    }, [filtrosModalTab, onLimparRascunho, onLimparTodosFiltros]);

    const patchDraft = useCallback(
        (patch: Partial<EntregasPlanejamentoListaFiltrosApi>) => {
            onDraftChange({ ...draft, ...patch });
        },
        [draft, onDraftChange],
    );

    return (
        <Modal
            title={
                <FiltrosModalTabsTitulo
                    activeKey={filtrosModalTab}
                    onChange={setFiltrosModalTab}
                    destroyOnHidden={false}
                />
            }
            data-testid="planejamento-entregas-filtros-modal"
            open={open}
            onCancel={onClose}
            width={modalWidth ?? 640}
            centered={modalCentered ?? true}
            className={modalClassName}
            zIndex={modalZIndex}
            styles={modalStyles}
            footer={
                <FiltrosModalFooterPadrao
                    onLimparTodos={handleModalLimparTodos}
                    onFechar={onClose}
                    showFiltrarPrimary={filtrosModalTab === FILTROS_MODAL_TAB_KEY.filtrar}
                    onFiltrar={onAplicar}
                    filtrarLabel="Aplicar"
                    dataTestIdLimparTodos="planejamento-entregas-filtros-modal-limpar-todos"
                />
            }
            destroyOnHidden={false}
            keyboard
            focusTriggerAfterClose
            maskClosable
            aria-label="Filtros da listagem de entregas"
        >
            {filtrosModalTab === FILTROS_MODAL_TAB_KEY.filtrar ? (
                <>
                    <Card
                        title={
                            <span
                                style={{
                                    display: 'inline-flex',
                                    alignItems: 'center',
                                    gap: 10,
                                    fontWeight: 600,
                                }}
                            >
                                <SlidersHorizontal
                                    size={ICON_SIZE_MD}
                                    style={{ color: 'var(--primary)' }}
                                    aria-hidden
                                />
                                Critérios de pesquisa
                            </span>
                        }
                        styles={{
                            header: { minHeight: 48 },
                            body: { paddingTop: 16, paddingBottom: 8 },
                        }}
                        style={{ marginBottom: 0 }}
                    >
                        <Text type="secondary" style={{ display: 'block', marginBottom: 16, fontSize: 13 }}>
                            Refine a listagem por status, tipo ou texto (título e código). Confirme com "Aplicar".
                        </Text>
                        <div className={gridStyles.pessoaDetalheSublistaFormGrid}>
                            <FormGroup label="Status">
                                <Select
                                    placeholder="Todos os status"
                                    allowClear
                                    style={{ width: '100%' }}
                                    value={draft.status || undefined}
                                    onChange={(v) => patchDraft({ status: v ?? undefined })}
                                    options={STATUS_OPTIONS_ENTREGA}
                                    aria-label="Filtrar por status da entrega"
                                />
                            </FormGroup>
                            <FormGroup label="Tipo">
                                <Select
                                    placeholder="Todos os tipos"
                                    allowClear
                                    style={{ width: '100%' }}
                                    value={draft.tipo || undefined}
                                    onChange={(v) => patchDraft({ tipo: v ?? undefined })}
                                    options={TIPO_OPTIONS_ENTREGA}
                                    aria-label="Filtrar por tipo da entrega"
                                />
                            </FormGroup>
                            <FormGroup label="Pesquisa">
                                <Search
                                    placeholder="Buscar por título ou código…"
                                    allowClear
                                    value={draft.search ?? ''}
                                    onChange={(e) => patchDraft({ search: e.target.value })}
                                    onSearch={() => onAplicar()}
                                    enterButton="Pesquisar"
                                    aria-label="Pesquisar entregas na listagem"
                                />
                            </FormGroup>
                        </div>
                    </Card>

                    <Divider style={{ margin: '16px 0' }} />

                    <Card
                        type="inner"
                        size="small"
                        title={
                            <span style={{ fontWeight: 600, fontSize: 14 }}>
                                <Save size={ICON_SIZE_MD} style={{ marginRight: 8 }} aria-hidden />
                                Salvar visualização
                            </span>
                        }
                        styles={{ body: { paddingTop: 12 } }}
                    >
                        <Paragraph type="secondary" style={{ marginBottom: 12, fontSize: 12 }}>
                            Na aba <strong>Meus filtros</strong> pode aplicar rapidamente uma vista já guardada.
                        </Paragraph>
                        <ListingSavedFiltersSection
                            moduleKey={ENTREGAS_PLANEJAMENTO_LIST_MODULE_KEY}
                            enabled={open && filtrosModalTab === FILTROS_MODAL_TAB_KEY.filtrar}
                            snapshotKey={snapshotKey}
                            openButtonTestId="planejamento-entregas-salvar-vista-modal"
                            modalTestId="planejamento-entregas-salvar-vista-modal"
                            buttonLabel="Salvar filtros"
                            modalTitle="Salvar visualização atual"
                            saveDescription="Inclui status, tipo e pesquisa visíveis na aba Filtrar."
                            buildPayload={() => entregasPlanejamentoFiltrosToPayload(draft)}
                        />
                    </Card>
                </>
            ) : (
                <EntregasPlanejamentoFiltrosMeusFiltrosTab
                    enabled={open}
                    onApplySaved={(payload, meta) => {
                        onApplySaved(payload, meta);
                        onClose();
                    }}
                />
            )}
        </Modal>
    );
}