'use client';

import React, { useEffect, useState } from 'react';
import { Card, DatePicker, Form, Input, Modal, Select, Space, Typography } from 'antd';
import type { ModalProps } from 'antd';
import type { Dayjs } from 'dayjs';
import { Save, Search } from 'lucide-react';
import { ICON_SIZE_MD } from '@/components/icons';
import {
    FILTROS_MODAL_TAB_KEY,
    FiltrosModalFooterPadrao,
    FiltrosModalTabsTitulo,
    type FiltrosModalTabsTituloActiveKey,
} from '@/components/listings';
import { LOG_LEVELS } from '../logsLevelUtils';
import type { SuporteLogsResolvedFilter } from '../utils/suporteLogsListaFiltersUrl';
import { SuporteLogsFiltrosMeusFiltrosTab } from './SuporteLogsFiltrosMeusFiltrosTab';
import { SuporteLogsFiltrosSalvosSection } from './SuporteLogsFiltrosSalvosSection';
import styles from './ModalFiltrosSuporteLogs.module.scss';

const { RangePicker } = DatePicker;
const { Paragraph } = Typography;

export type ModalFiltrosSuporteLogsProps = {
    open: boolean;
    onClose: () => void;
    draftLevel: string;
    draftPeriodo: [Dayjs | null, Dayjs | null] | null;
    draftProjetoId: string;
    draftResolved: SuporteLogsResolvedFilter;
    draftSearch: string;
    onDraftLevelChange: (value: string) => void;
    onDraftPeriodoChange: (value: [Dayjs | null, Dayjs | null] | null) => void;
    onDraftProjetoIdChange: (value: string) => void;
    onDraftResolvedChange: (value: SuporteLogsResolvedFilter) => void;
    onDraftSearchChange: (value: string) => void;
    projetos: { id: number; nome?: string }[];
    onAplicar: () => void;
    onLimparTodos: () => void;
    onApplySaved: (payload: unknown, meta: { nome: string; id: number }) => void;
    modalWidth?: ModalProps['width'];
    modalCentered?: boolean;
    modalClassName?: string;
    modalZIndex?: number;
    modalStyles?: ModalProps['styles'];
    /** Quando definido (vista por projeto), oculta selector de projeto */
    ocultarFiltroProjeto?: boolean;
};

export function ModalFiltrosSuporteLogs({
    open,
    onClose,
    draftLevel,
    draftPeriodo,
    draftProjetoId,
    draftResolved,
    draftSearch,
    onDraftLevelChange,
    onDraftPeriodoChange,
    onDraftProjetoIdChange,
    onDraftResolvedChange,
    onDraftSearchChange,
    projetos,
    onAplicar,
    onLimparTodos,
    onApplySaved,
    modalWidth,
    modalCentered,
    modalClassName,
    modalZIndex,
    modalStyles,
    ocultarFiltroProjeto = false,
}: ModalFiltrosSuporteLogsProps) {
    const [modalTab, setModalTab] = useState<FiltrosModalTabsTituloActiveKey>(FILTROS_MODAL_TAB_KEY.filtrar);

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

    const handleLimparTodos = () => {
        if (modalTab === FILTROS_MODAL_TAB_KEY.filtrar) {
            onDraftLevelChange('');
            onDraftPeriodoChange(null);
            onDraftProjetoIdChange('');
            onDraftResolvedChange('no');
            onDraftSearchChange('');
            onClose();
            return;
        }
        onLimparTodos();
        onClose();
    };

    const filtrarTabPanel = (
        <div className={styles.filtrarTab}>
            <Space direction="vertical" size={16} style={{ width: '100%' }}>
                <Form layout="vertical">
                    <Form.Item label="Nível">
                        <Select
                            allowClear
                            placeholder="Todos os níveis"
                            style={{ width: '100%' }}
                            value={draftLevel || undefined}
                            onChange={(v) => onDraftLevelChange(typeof v === 'string' ? v : '')}
                            options={LOG_LEVELS.filter((x) => x.key !== 'all').map((x) => ({
                                value: x.key,
                                label: x.label,
                            }))}
                            aria-label="Filtrar por nível de log"
                        />
                    </Form.Item>
                    <Form.Item label="Período (data do registro)">
                        <RangePicker
                            value={draftPeriodo}
                            onChange={(dates) =>
                                onDraftPeriodoChange(dates as [Dayjs | null, Dayjs | null] | null)
                            }
                            allowClear
                            style={{ width: '100%' }}
                        />
                    </Form.Item>
                    {!ocultarFiltroProjeto ? (
                        <Form.Item label="Projeto">
                            <Select
                                placeholder="Todos"
                                allowClear
                                style={{ width: '100%' }}
                                value={draftProjetoId || undefined}
                                onChange={(v) => onDraftProjetoIdChange(v ?? '')}
                                options={projetos.map((p) => ({
                                    value: String(p.id),
                                    label: p.nome ?? `Projeto ${p.id}`,
                                }))}
                                aria-label="Filtrar por projeto"
                            />
                        </Form.Item>
                    ) : null}
                    <Form.Item label="Situação">
                        <Select<SuporteLogsResolvedFilter>
                            style={{ width: '100%' }}
                            value={draftResolved}
                            onChange={onDraftResolvedChange}
                            options={[
                                { value: 'all', label: 'Todos' },
                                { value: 'yes', label: 'Resolvidos' },
                                { value: 'no', label: 'Pendentes' },
                            ]}
                            aria-label="Filtrar por situação (pendente ou resolvido)"
                        />
                    </Form.Item>
                    <Form.Item label="Pesquisa (cabeçalho ou mensagem)">
                        <Input
                            allowClear
                            prefix={<Search size={ICON_SIZE_MD} aria-hidden />}
                            placeholder="Texto enviado ao servidor…"
                            value={draftSearch}
                            onChange={(e) => onDraftSearchChange(e.target.value)}
                            onPressEnter={onAplicar}
                            aria-label="Pesquisa nos logs"
                        />
                    </Form.Item>
                </Form>
                <Paragraph type="secondary" className={styles.metricsHint}>
                    Os totais por nível nos cartões acima refletem os filtros <strong>já aplicados</strong> na
                    lista (não o rascunho deste modal).
                </Paragraph>
                <div className={styles.salvarVistaWrap}>
                    <Card
                        type="inner"
                        size="small"
                        className={styles.salvarVistaCard}
                        title={
                            <span className={styles.salvarVistaTitle}>
                                <Save size={ICON_SIZE_MD} aria-hidden />
                                Salvar filtros
                            </span>
                        }
                    >
                        <Paragraph type="secondary" style={{ marginBottom: 12, fontSize: 13 }}>
                            Na aba <strong>Meus filtros</strong> você reutiliza combinações salvas com um clique.
                        </Paragraph>
                        <SuporteLogsFiltrosSalvosSection
                            enabled={open}
                            level={draftLevel}
                            dateFrom={draftPeriodo?.[0]?.format('YYYY-MM-DD') ?? ''}
                            dateTo={draftPeriodo?.[1]?.format('YYYY-MM-DD') ?? ''}
                            projetoId={draftProjetoId}
                            resolved={draftResolved}
                            search={draftSearch}
                        />
                    </Card>
                </div>
            </Space>
        </div>
    );

    return (
        <Modal
            title={
                <FiltrosModalTabsTitulo
                    activeKey={modalTab}
                    onChange={setModalTab}
                    destroyOnHidden={false}
                />
            }
            data-testid="suporte-logs-filtros-modal"
            open={open}
            onCancel={onClose}
            width={modalWidth ?? 560}
            centered={modalCentered}
            className={modalClassName}
            zIndex={modalZIndex}
            styles={modalStyles}
            footer={
                <FiltrosModalFooterPadrao
                    onLimparTodos={handleLimparTodos}
                    onFechar={onClose}
                    showFiltrarPrimary={modalTab === FILTROS_MODAL_TAB_KEY.filtrar}
                    onFiltrar={onAplicar}
                    filtrarLabel="Aplicar"
                    dataTestIdLimparTodos="suporte-logs-filtros-modal-limpar-todos"
                />
            }
            destroyOnHidden={false}
            keyboard
            focusTriggerAfterClose
            maskClosable
        >
            {modalTab === FILTROS_MODAL_TAB_KEY.filtrar ? (
                filtrarTabPanel
            ) : (
                <div className={styles.meusFiltrosTab}>
                    <SuporteLogsFiltrosMeusFiltrosTab enabled={open} onApplySaved={onApplySaved} />
                </div>
            )}
        </Modal>
    );
}