'use client';

import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { Card, Col, Divider, Input, Modal, Row, 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 { SPRINT_STATUS_OPTIONS } from '../sprintsPlanejamentoOptions';
import {
    SPRINTS_PLANEJAMENTO_LIST_MODULE_KEY,
    sprintsPlanejamentoFiltrosToPayload,
} from '../utils/sprintsPlanejamentoFiltrosPayload';
import type { SprintsPlanejamentoListaFiltrosApi } from '../utils/sprintsPlanejamentoListaFiltersUrl';
import { SprintsPlanejamentoFiltrosMeusFiltrosTab } from './SprintsPlanejamentoFiltrosMeusFiltrosTab';

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

export type ModalFiltrosSprintsPlanejamentoProps = {
    open: boolean;
    onClose: () => void;
    draft: SprintsPlanejamentoListaFiltrosApi;
    onDraftChange: (next: SprintsPlanejamentoListaFiltrosApi) => 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 ModalFiltrosSprintsPlanejamento({
    open,
    onClose,
    draft,
    onDraftChange,
    onAplicar,
    onLimparRascunho,
    onLimparTodosFiltros,
    onApplySaved,
    modalWidth,
    modalCentered,
    modalClassName,
    modalZIndex,
    modalStyles,
}: ModalFiltrosSprintsPlanejamentoProps) {
    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<SprintsPlanejamentoListaFiltrosApi>) => {
            onDraftChange({ ...draft, ...patch });
        },
        [draft, onDraftChange],
    );

    return (
        <Modal
            title={
                <FiltrosModalTabsTitulo
                    activeKey={filtrosModalTab}
                    onChange={setFiltrosModalTab}
                    destroyOnHidden={false}
                />
            }
            data-testid="planejamento-sprints-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-sprints-filtros-modal-limpar-todos"
                />
            }
            destroyOnHidden={false}
            keyboard
            focusTriggerAfterClose
            maskClosable
            aria-label="Filtros da listagem de sprints"
        >
            {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 ou nome da sprint. Confirme com "Aplicar".
                        </Text>
                        <div className={gridStyles.pessoaDetalheSublistaFormGrid}>
                            <Row gutter={[16, 0]}>
                                <Col xs={24} sm={12}>
                                    <FormGroup label="Status">
                                        <Select
                                            placeholder="Todos os status"
                                            allowClear
                                            style={{ width: '100%' }}
                                            value={draft.status || undefined}
                                            onChange={(v) => patchDraft({ status: v ?? undefined })}
                                            options={SPRINT_STATUS_OPTIONS}
                                            aria-label="Filtrar por status da sprint"
                                        />
                                    </FormGroup>
                                </Col>
                                <Col xs={24}>
                                    <FormGroup label="Pesquisa">
                                        <Search
                                            placeholder="Buscar por nome da sprint…"
                                            allowClear
                                            style={{ width: '100%' }}
                                            data-testid="sprints-planejamento-filtros-busca-input"
                                            value={draft.search ?? ''}
                                            onChange={(e) => patchDraft({ search: e.target.value })}
                                            onSearch={(value) => patchDraft({ search: value })}
                                            aria-label="Pesquisar sprints na listagem"
                                        />
                                    </FormGroup>
                                </Col>
                            </Row>
                        </div>
                    </Card>

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

                    <Card
                        type="inner"
                        size="small"
                        title={
                            <span
                                style={{
                                    display: 'inline-flex',
                                    alignItems: 'center',
                                    gap: 8,
                                    fontWeight: 600,
                                    fontSize: 14,
                                }}
                            >
                                <Save size={ICON_SIZE_MD} 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={SPRINTS_PLANEJAMENTO_LIST_MODULE_KEY}
                            enabled={open && filtrosModalTab === FILTROS_MODAL_TAB_KEY.filtrar}
                            snapshotKey={snapshotKey}
                            openButtonTestId="planejamento-sprints-salvar-vista-modal"
                            modalTestId="planejamento-sprints-salvar-vista-modal"
                            buttonLabel="Salvar filtros"
                            modalTitle="Salvar visualização atual"
                            saveDescription="Inclui status e pesquisa visíveis na aba Filtrar."
                            buildPayload={() => sprintsPlanejamentoFiltrosToPayload(draft)}
                        />
                    </Card>
                </>
            ) : (
                <SprintsPlanejamentoFiltrosMeusFiltrosTab
                    enabled={open}
                    onApplySaved={(payload, meta) => {
                        onApplySaved(payload, meta);
                        onClose();
                    }}
                />
            )}
        </Modal>
    );
}