'use client';

/**
 * Aba genérica "Meus filtros": lista de vistas guardadas (aplicar + remover).
 * Piloto: financeiro movimentos — substituir ~90 `*FiltrosMeusFiltrosTab` duplicados.
 */

import React, { useMemo } from 'react';
import { Alert, Button, Popconfirm, Space, Tag, Typography, theme } from 'antd';
import { message } from '@/lib/feedback/message';
import { Trash2 } from 'lucide-react';
import { ICON_SIZE_MD } from '@/components/icons';
import { useQueryCache } from '@/hooks/useQueryCache';
import { useMutationCache } from '@/hooks/useMutationCache';
import { queryKeys } from '@/lib/cache/queryKeys';
import { API_ENDPOINTS } from '@/lib/api/endpoints';
import { getLaravelApiErrorMessage } from '@/lib/api/laravelApiErrorMessage';
import type { ListingSavedFilterItem } from '../listingSavedFilterTypes';
import styles from '@/components/listings/listingFiltersShared.module.scss';

export type ListingFiltersTabProps = {
    /** Chave do módulo em `/v1/filtros-salvos` (ex.: `financeiro.movimentos.list`). */
    moduleKey: string;
    /** Chaves legadas para leitura dual (migração de `module_key` sem perder vistas guardadas). */
    legacyModuleKeys?: readonly string[];
    enabled: boolean;
    onApplySaved: (payload: unknown, meta: { nome: string; id: number }) => void;
    /** `data-testid` do contentor (default: `{moduleKey}-filtros-meus-filtros-tab`). */
    dataTestId?: string;
    /** Texto introdutório; omitir para o padrão ERP. */
    introText?: React.ReactNode;
    /** Nota de rodapé; omitir para o padrão ERP. */
    footerNote?: React.ReactNode;
};

const DEFAULT_INTRO = (
    <>
        Clique num 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.
    </>
);

const DEFAULT_FOOTER =
    'Administradores podem remover filtros compartilhados de outros.';

export function ListingFiltersTab({
    moduleKey,
    legacyModuleKeys,
    enabled,
    onApplySaved,
    dataTestId,
    introText = DEFAULT_INTRO,
    footerNote = DEFAULT_FOOTER,
}: ListingFiltersTabProps) {
    /** useToken: `--ant-color-*` não existe sem `cssVar` global. */
    const { token } = theme.useToken();
    const moduleKeysToLoad = useMemo(
        () => [moduleKey, ...(legacyModuleKeys ?? [])],
        [moduleKey, legacyModuleKeys],
    );
    const savedListQueryKeys = useMemo(
        () => moduleKeysToLoad.map((key) => queryKeys.filtrosSalvos.list(key)),
        [moduleKeysToLoad],
    );

    const primaryQuery = useQueryCache<ListingSavedFilterItem[]>({
        queryKey: savedListQueryKeys[0],
        endpoint: API_ENDPOINTS.filtrosSalvos.index({ module_key: moduleKey }),
        enabled,
        unwrapApiEnvelope: true,
        staleTime: 30 * 1000,
    });

    const legacyKey = legacyModuleKeys?.[0];
    const legacyQuery = useQueryCache<ListingSavedFilterItem[]>({
        queryKey: legacyKey ? savedListQueryKeys[1] : savedListQueryKeys[0],
        endpoint: legacyKey
            ? API_ENDPOINTS.filtrosSalvos.index({ module_key: legacyKey })
            : API_ENDPOINTS.filtrosSalvos.index({ module_key: moduleKey }),
        enabled: enabled && Boolean(legacyKey),
        unwrapApiEnvelope: true,
        staleTime: 30 * 1000,
    });

    const savedLoading = primaryQuery.isLoading || legacyQuery.isLoading;
    const savedListError = primaryQuery.isError || legacyQuery.isError;
    const savedListQueryError = primaryQuery.error ?? legacyQuery.error;

    const refetchSavedList = () => {
        void primaryQuery.refetch();
        if (legacyKey) void legacyQuery.refetch();
    };

    const savedList = useMemo(() => {
        const primary = Array.isArray(primaryQuery.data) ? primaryQuery.data : [];
        const legacy = Array.isArray(legacyQuery.data) ? legacyQuery.data : [];
        const seen = new Set<number>();
        const merged: ListingSavedFilterItem[] = [];
        for (const item of [...legacy, ...primary]) {
            if (seen.has(item.id)) continue;
            seen.add(item.id);
            merged.push(item);
        }
        return merged;
    }, [legacyQuery.data, primaryQuery.data]);

    const deleteMutation = useMutationCache<unknown, number>({
        endpoint: (id) => API_ENDPOINTS.filtrosSalvos.destroy(id),
        method: 'DELETE',
        invalidateQueries: savedListQueryKeys,
        onSuccess: () => message.success('Filtro removido'),
        onError: (e: Error) => message.error(e.message || 'Erro ao remover'),
    });

    const aplicar = (item: ListingSavedFilterItem) => {
        onApplySaved(item.payload, { nome: item.nome, id: item.id });
        message.success(`Filtro "${item.nome}" aplicado`);
    };

    const testId =
        dataTestId ??
        `${moduleKey.replace(/[^a-z0-9]+/gi, '-').replace(/^-|-$/g, '')}-filtros-meus-filtros-tab`;

    return (
        <div data-testid={testId}>
            <p style={{ marginBottom: 16, fontSize: 13, color: token.colorTextSecondary }}>
                {introText}
            </p>
            {savedListError ? (
                <Alert
                    type="warning"
                    showIcon
                    style={{ marginBottom: 16 }}
                    message="Não foi possível carregar os filtros guardados"
                    description={getLaravelApiErrorMessage(
                        savedListQueryError,
                        'Tente novamente ou aplique critérios manualmente na aba Filtrar.',
                    )}
                    action={
                        <Button size="small" type="primary" onClick={() => void refetchSavedList()}>
                            Tentar novamente
                        </Button>
                    }
                />
            ) : null}
            <Space direction="vertical" size={10} style={{ width: '100%' }}>
                {savedLoading && !savedList.length ? (
                    <Typography.Text type="secondary">Carregando…</Typography.Text>
                ) : null}
                {!savedLoading && !savedList.length && !savedListError ? (
                    <Typography.Text type="secondary">
                        Nenhum filtro guardado. Salve uma vista na aba Filtrar.
                    </Typography.Text>
                ) : null}
                {savedList.map((item) => (
                    <div key={item.id} className={styles.savedFilterRow}>
                        <div
                            role="button"
                            tabIndex={0}
                            className={styles.savedFilterCard}
                            onClick={() => aplicar(item)}
                            onKeyDown={(e) => {
                                if (e.key === 'Enter' || e.key === ' ') {
                                    e.preventDefault();
                                    aplicar(item);
                                }
                            }}
                        >
                            <div className={styles.savedFilterCardHeader}>
                                <span className={styles.savedFilterName}>{item.nome}</span>
                                <Tag
                                    color={item.is_shared ? 'blue' : 'default'}
                                    style={{ margin: 0, flexShrink: 0 }}
                                >
                                    {item.is_shared ? 'Compartilhado' : 'Privado'}
                                </Tag>
                            </div>
                            {!item.is_owner && item.created_by ? (
                                <div className={styles.savedFilterMeta}>
                                    <Tag style={{ margin: 0 }}>De {item.created_by.nome}</Tag>
                                </div>
                            ) : null}
                        </div>
                        {item.can_delete ? (
                            <div className={styles.deleteCell}>
                                <Popconfirm
                                    title="Remover este filtro?"
                                    okText="Remover"
                                    cancelText="Cancelar"
                                    onConfirm={() => deleteMutation.mutate(item.id)}
                                    zIndex={1200}
                                >
                                    <Button
                                        danger
                                        type="default"
                                        className={styles.savedFilterDeleteBtn}
                                        aria-label={`Remover filtro ${item.nome}`}
                                    >
                                        <Trash2 size={ICON_SIZE_MD} aria-hidden />
                                    </Button>
                                </Popconfirm>
                            </div>
                        ) : null}
                    </div>
                ))}
            </Space>
            {footerNote ? (
                <p
                    style={{
                        marginBottom: 0,
                        marginTop: 16,
                        fontSize: 11,
                        color: token.colorTextSecondary,
                    }}
                >
                    {footerNote}
                </p>
            ) : null}
        </div>
    );
}