'use client';

import React, { useMemo, useState } from 'react';
import { Button, Select, Space, Typography } from 'antd';
import { message } from '@/lib/feedback/message';
import { MessageSquareText } from 'lucide-react';
import { ICON_SIZE_MD } from '@/components/icons';
import { useQueryCache } from '@/hooks/useQueryCache';
import { API_ENDPOINTS } from '@/lib/api/endpoints';
import { queryKeys } from '@/lib/cache/queryKeys';
import { extractApiErrorMessage } from '@/lib/api/extractApiErrorMessage';
import {
    aplicarChamadoTemplate,
    macroPlainTextToQuillHtml,
    mergeMacroHtmlIntoEditor,
    type ChamadoTemplateRow,
} from '@/features/suporte/chamados/respostas-rapidas/chamadosTemplateService';

export type ChamadoCommentMacroContext = {
    chamadoId: number;
};

type ChamadoCommentMacroPickerProps = {
    macroContext: ChamadoCommentMacroContext;
    onInsertHtml: (html: string) => void;
};

export function ChamadoCommentMacroPicker({
    macroContext,
    onInsertHtml,
}: ChamadoCommentMacroPickerProps) {
    const [selectedId, setSelectedId] = useState<number | null>(null);
    const [applying, setApplying] = useState(false);

    const { data, isLoading } = useQueryCache<{ data: ChamadoTemplateRow[] }>({
        queryKey: queryKeys.suporte.chamados.templates.all,
        endpoint: API_ENDPOINTS.suporte.chamadosTemplate.index,
        params: { tipo: 'canned_response', ativo: true },
        staleTime: 60_000,
    });

    const options = useMemo(() => {
        const rows = (data?.data ?? []).filter((t) => t.ativo);
        return rows.map((t) => ({
            value: t.id,
            label: t.categoria ? `${t.nome} (${t.categoria})` : t.nome,
        }));
    }, [data?.data]);

    const handleApply = async () => {
        if (selectedId == null) {
            message.warning('Selecione uma resposta rápida.');
            return;
        }
        setApplying(true);
        try {
            const result = await aplicarChamadoTemplate(selectedId, {
                chamado_id: macroContext.chamadoId,
            });
            const html = macroPlainTextToQuillHtml(result.corpo);
            onInsertHtml(html);
            message.success('Resposta rápida inserida.');
            setSelectedId(null);
        } catch (error) {
            message.error(extractApiErrorMessage(error, 'Não foi possível aplicar a macro.'));
        } finally {
            setApplying(false);
        }
    };

    if (!isLoading && options.length === 0) {
        return null;
    }

    return (
        <div style={{ marginBottom: 12 }}>
            <Typography.Text type="secondary" style={{ display: 'block', marginBottom: 6 }}>
                Respostas rápidas
            </Typography.Text>
            <Space.Compact style={{ width: '100%', maxWidth: 560 }}>
                <Select
                    allowClear
                    showSearch
                    placeholder="Inserir macro pré-definida…"
                    style={{ flex: 1, minWidth: 0 }}
                    options={options}
                    value={selectedId ?? undefined}
                    onChange={(v) => setSelectedId(typeof v === 'number' ? v : null)}
                    loading={isLoading}
                    optionFilterProp="label"
                    aria-label="Selecionar resposta rápida"
                />
                <Button
                    icon={<MessageSquareText size={ICON_SIZE_MD} aria-hidden />}
                    loading={applying}
                    disabled={selectedId == null}
                    onClick={() => void handleApply()}
                >
                    Inserir
                </Button>
            </Space.Compact>
        </div>
    );
}