'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,
    ListingFiltersTab,
    ListingSavedFiltersSection,
    type FiltrosModalTabsTituloActiveKey,
} from '@/components/listings';
import { CASO_USO_NIVEL_OPTIONS, CASO_USO_PRIORIDADE_OPTIONS } from '../CasoUsoFormFields';
import { CASO_USO_STATUS_OPTIONS } from '../casoUsoDisplay';
import { CASOS_USO_LIST_MODULE_KEY, casosUsoFiltrosToPayload } from '../utils/casosUsoFiltrosPayload';
import type {
    CasosUsoListaFiltrosApi,
    CasosUsoListaSortKey,
} from '../utils/casosUsoListaFiltersUrl';
import { CASOS_USO_LISTA_SORT_KEYS } from '../utils/casosUsoListaFiltersUrl';

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

const CASOS_USO_SORT_FIELD_OPTIONS: { value: CasosUsoListaSortKey; label: string }[] = [
    { value: 'codigo', label: 'Código' },
    { value: 'titulo', label: 'Título' },
    { value: 'status', label: 'Status' },
    { value: 'prioridade', label: 'Prioridade' },
    { value: 'nivel', label: 'Nível' },
    { value: 'updated_at', label: 'Atualizado em' },
    { value: 'created_at', label: 'Criado em' },
];

export type ModalFiltrosCasosUsoProps = {
    open: boolean;
    onClose: () => void;
    draft: CasosUsoListaFiltrosApi;
    onDraftChange: (next: CasosUsoListaFiltrosApi) => void;
    draftSortColumn: CasosUsoListaSortKey;
    draftSortDesc: boolean;
    onDraftSortChange: (next: { sortColumn: CasosUsoListaSortKey; sortDesc: boolean }) => 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 ModalFiltrosCasosUso({
    open,
    onClose,
    draft,
    onDraftChange,
    draftSortColumn,
    draftSortDesc,
    onDraftSortChange,
    onAplicar,
    onLimparRascunho,
    onLimparTodosFiltros,
    onApplySaved,
    modalWidth,
    modalCentered,
    modalClassName,
    modalZIndex,
    modalStyles,
}: ModalFiltrosCasosUsoProps) {
    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<CasosUsoListaFiltrosApi>) => {
            onDraftChange({ ...draft, ...patch });
        },
        [draft, onDraftChange],
    );

    return (
        <Modal
            title={
                <FiltrosModalTabsTitulo
                    activeKey={filtrosModalTab}
                    onChange={setFiltrosModalTab}
                    destroyOnHidden={false}
                />
            }
            data-testid="projeto-casos-uso-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="projeto-casos-uso-filtros-modal-limpar-todos"
                />
            }
            destroyOnHidden={false}
            keyboard
            focusTriggerAfterClose
            maskClosable
            aria-label="Filtros da listagem de casos de uso"
        >
            {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 por status, prioridade, nível ou texto. Confirme com &quot;Aplicar&quot;.
                        </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={[...CASO_USO_STATUS_OPTIONS]}
                                            aria-label="Filtrar por status"
                                        />
                                    </FormGroup>
                                </Col>
                                <Col xs={24} sm={12}>
                                    <FormGroup label="Prioridade">
                                        <Select
                                            placeholder="Todas as prioridades"
                                            allowClear
                                            style={{ width: '100%' }}
                                            value={draft.prioridade || undefined}
                                            onChange={(v) => patchDraft({ prioridade: v ?? undefined })}
                                            options={CASO_USO_PRIORIDADE_OPTIONS}
                                            aria-label="Filtrar por prioridade"
                                        />
                                    </FormGroup>
                                </Col>
                                <Col xs={24} sm={12}>
                                    <FormGroup label="Nível">
                                        <Select
                                            placeholder="Todos os níveis"
                                            allowClear
                                            style={{ width: '100%' }}
                                            value={draft.nivel || undefined}
                                            onChange={(v) => patchDraft({ nivel: v ?? undefined })}
                                            options={CASO_USO_NIVEL_OPTIONS}
                                            aria-label="Filtrar por nível"
                                        />
                                    </FormGroup>
                                </Col>
                                <Col xs={24}>
                                    <FormGroup label="Pesquisa">
                                        <Search
                                            placeholder="Buscar código ou título"
                                            allowClear
                                            style={{ width: '100%' }}
                                            data-testid="projeto-casos-uso-filtros-busca-input"
                                            value={draft.search ?? ''}
                                            onChange={(e) => patchDraft({ search: e.target.value })}
                                            onSearch={(value) => patchDraft({ search: value })}
                                            aria-label="Pesquisar casos de uso"
                                        />
                                    </FormGroup>
                                </Col>
                                <Col xs={24} sm={12}>
                                    <FormGroup label="Ordenar por">
                                        <Select
                                            style={{ width: '100%' }}
                                            value={draftSortColumn}
                                            onChange={(v) =>
                                                onDraftSortChange({
                                                    sortColumn: (CASOS_USO_LISTA_SORT_KEYS as readonly string[]).includes(
                                                        v,
                                                    )
                                                        ? (v as CasosUsoListaSortKey)
                                                        : draftSortColumn,
                                                    sortDesc: draftSortDesc,
                                                })
                                            }
                                            options={CASOS_USO_SORT_FIELD_OPTIONS}
                                            aria-label="Campo de ordenação"
                                        />
                                    </FormGroup>
                                </Col>
                                <Col xs={24} sm={12}>
                                    <FormGroup label="Direção">
                                        <Select
                                            style={{ width: '100%' }}
                                            value={draftSortDesc ? 'desc' : 'asc'}
                                            onChange={(v) =>
                                                onDraftSortChange({
                                                    sortColumn: draftSortColumn,
                                                    sortDesc: v === 'desc',
                                                })
                                            }
                                            options={[
                                                { value: 'asc', label: 'Ascendente' },
                                                { value: 'desc', label: 'Descendente' },
                                            ]}
                                            aria-label="Direção da ordenação"
                                        />
                                    </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> você pode aplicar rapidamente uma vista já
                            salva.
                        </Paragraph>
                        <ListingSavedFiltersSection
                            moduleKey={CASOS_USO_LIST_MODULE_KEY}
                            enabled={open && filtrosModalTab === FILTROS_MODAL_TAB_KEY.filtrar}
                            snapshotKey={snapshotKey}
                            openButtonTestId="projeto-casos-uso-salvar-vista-modal"
                            modalTestId="projeto-casos-uso-salvar-vista-modal"
                            buttonLabel="Salvar filtros"
                            modalTitle="Salvar visualização atual"
                            saveDescription="Inclui status, prioridade, nível e pesquisa da aba Filtrar."
                            buildPayload={() => casosUsoFiltrosToPayload(draft)}
                        />
                    </Card>
                </>
            ) : (
                <ListingFiltersTab
                    moduleKey={CASOS_USO_LIST_MODULE_KEY}
                    enabled={open}
                    onApplySaved={(payload, meta) => {
                        onApplySaved(payload, meta);
                        onClose();
                    }}
                    dataTestId="projeto-casos-uso-filtros-meus-filtros-tab"
                    introText={
                        <>
                            Clique em um filtro para aplicar a vista e fechar o modal. Na próxima abertura, a
                            aba <strong>Filtrar</strong> fica ativa com esses critérios já preenchidos.
                        </>
                    }
                />
            )}
        </Modal>
    );
}