import { useState } from 'react';
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
import { Filter, SlidersHorizontal, Code2, ArrowRight } from 'lucide-react';

type Json = any;

function safeParse(raw: unknown): { ok: true; value: Json } | { ok: false } {
    if (raw == null || raw === '') return { ok: true, value: null };
    if (typeof raw === 'object') return { ok: true, value: raw };
    try { return { ok: true, value: JSON.parse(String(raw)) }; }
    catch { return { ok: false }; }
}

const OP_LABEL: Record<string, string> = {
    '==': 'igual a', '===': 'idêntico a', '!=': 'diferente de', '!==': 'diferente de',
    '>': 'maior que', '>=': 'maior ou igual a', '<': 'menor que', '<=': 'menor ou igual a',
};

function Chip({ children, tone = 'muted' }: { children: React.ReactNode; tone?: 'muted' | 'blue' | 'emerald' }) {
    const toneClass = {
        muted:   'bg-muted text-foreground',
        blue:    'bg-blue-50 dark:bg-blue-950 text-blue-700 dark:text-blue-400',
        emerald: 'bg-emerald-50 dark:bg-emerald-950 text-emerald-700 dark:text-emerald-400',
    }[tone];
    return <code className={`font-mono text-[11px] px-1.5 py-0.5 rounded ${toneClass}`}>{children}</code>;
}

function Tag({ children }: { children: React.ReactNode }) {
    return <span className="text-[9px] font-bold text-muted-foreground uppercase tracking-wide">{children}</span>;
}

function conditionsList(parsed: Json): Array<{ field: string; operator?: string; value: any }> {
    if (!parsed) return [];
    if (Array.isArray(parsed)) return parsed;
    if (parsed.field !== undefined) return [parsed];
    return [];
}

function ConditionsSummary({ parsed }: { parsed: Json }) {
    const list = conditionsList(parsed);
    if (list.length === 0) return <p className="text-xs text-muted-foreground">Nenhuma condição configurada.</p>;

    return (
        <div className="flex flex-col gap-2">
            {list.map((c, i) => (
                <div key={i} className="flex items-center gap-1.5 flex-wrap">
                    {i > 0 && <Tag>e</Tag>}
                    <Chip>{c.field}</Chip>
                    <span className="text-xs text-muted-foreground">{OP_LABEL[c.operator ?? '=='] ?? c.operator}</span>
                    {Array.isArray(c.value)
                        ? c.value.map((v, vi) => <Chip key={vi} tone="blue">{String(v)}</Chip>)
                        : <Chip tone="blue">{String(c.value)}</Chip>}
                </div>
            ))}
        </div>
    );
}

function SetValue({ value }: { value: any }) {
    if (value && typeof value === 'object' && 'path' in value) {
        return (
            <span className="inline-flex items-center gap-1">
                <ArrowRight size={10} className="text-muted-foreground" strokeWidth={2.5} />
                <Chip tone="emerald">{value.path}</Chip>
            </span>
        );
    }
    return <Chip tone="emerald">{String(value)}</Chip>;
}

function DefaultValuesSummary({ parsed }: { parsed: Json }) {
    const sourceMap: any[] = Array.isArray(parsed?.source_map) ? parsed.source_map : [];
    const calcMap: any[]   = Array.isArray(parsed?.calc_map)   ? parsed.calc_map   : [];
    const rest = Object.entries(parsed ?? {}).filter(([k]) => k !== 'source_map' && k !== 'calc_map');

    if (sourceMap.length === 0 && calcMap.length === 0 && rest.length === 0) {
        return <p className="text-xs text-muted-foreground">Nenhuma regra configurada.</p>;
    }

    return (
        <div className="flex flex-col gap-2.5">
            {sourceMap.map((rule, i) => (
                <div key={`sm_${i}`} className="rounded-lg border border-border p-2.5 bg-muted/30">
                    <div className="flex items-center gap-1.5 flex-wrap mb-1.5">
                        <Tag>se</Tag>
                        <Chip>{rule.path}</Chip>
                        <span className="text-xs text-muted-foreground">=</span>
                        <Chip tone="blue">{String(rule.equals)}</Chip>
                    </div>
                    <div className="flex flex-col gap-1 pl-3 border-l-2 border-emerald-200 dark:border-emerald-800">
                        {Object.entries(rule.set ?? {}).map(([field, value]) => (
                            <div key={field} className="flex items-center gap-1.5 flex-wrap">
                                <Tag>define</Tag>
                                <Chip>{field}</Chip>
                                <span className="text-xs text-muted-foreground">=</span>
                                <SetValue value={value} />
                            </div>
                        ))}
                    </div>
                </div>
            ))}

            {calcMap.map((rule, i) => (
                <div key={`cm_${i}`} className="rounded-lg border border-border p-2.5 bg-muted/30">
                    <div className="flex items-center gap-1.5 flex-wrap">
                        <Chip>{rule.field}</Chip>
                        <span className="text-xs text-muted-foreground">=</span>
                        <Tag>{rule.operation}</Tag>
                        <Chip tone="blue">{rule.source}</Chip>
                        {rule.by !== undefined && (
                            <>
                                <span className="text-xs text-muted-foreground">por</span>
                                <Chip tone="blue">{rule.by}</Chip>
                            </>
                        )}
                    </div>
                </div>
            ))}

            {rest.length > 0 && (
                <div className="rounded-lg border border-border p-2.5 bg-muted/30">
                    <div className="flex flex-col gap-1">
                        {rest.map(([key, value]) => (
                            <div key={key} className="flex items-center gap-1.5 flex-wrap">
                                <Chip>{key}</Chip>
                                <span className="text-xs text-muted-foreground">=</span>
                                <Chip tone="emerald">{typeof value === 'object' ? JSON.stringify(value) : String(value)}</Chip>
                            </div>
                        ))}
                    </div>
                </div>
            )}
        </div>
    );
}

function countRules(kind: 'conditions' | 'default_values', parsed: Json): number {
    if (kind === 'conditions') return conditionsList(parsed).length;
    const sourceMap = Array.isArray(parsed?.source_map) ? parsed.source_map.length : 0;
    const calcMap   = Array.isArray(parsed?.calc_map)   ? parsed.calc_map.length   : 0;
    const rest      = parsed && typeof parsed === 'object' ? Object.keys(parsed).filter(k => k !== 'source_map' && k !== 'calc_map').length : 0;
    return sourceMap + calcMap + rest;
}

export function ConfigPreview({ kind, raw }: { kind: 'conditions' | 'default_values'; raw: unknown }) {
    const [open, setOpen] = useState(false);
    const [showRaw, setShowRaw] = useState(false);

    if (raw == null || raw === '') {
        return <span className="text-xs text-muted-foreground">—</span>;
    }

    const parsedResult = safeParse(raw);

    // JSON inválido: mantém o comportamento anterior (texto cru truncado)
    if (!parsedResult.ok) {
        return (
            <Tooltip>
                <TooltipTrigger asChild>
                    <span className="text-xs text-rose-500 font-mono max-w-[120px] truncate inline-block align-middle">{String(raw)}</span>
                </TooltipTrigger>
                <TooltipContent>JSON inválido: {String(raw)}</TooltipContent>
            </Tooltip>
        );
    }

    const parsed = parsedResult.value;
    const count  = countRules(kind, parsed);
    const Icon   = kind === 'conditions' ? Filter : SlidersHorizontal;
    const label  = kind === 'conditions' ? 'Condições' : 'Valores Padrão';

    if (count === 0) {
        return <span className="text-xs text-muted-foreground">—</span>;
    }

    return (
        <>
            <Tooltip>
                <TooltipTrigger asChild>
                    <button
                        type="button"
                        onClick={() => setOpen(true)}
                        className="inline-flex items-center gap-1 text-[10px] font-semibold px-2 py-1 rounded-md border border-blue-200 dark:border-blue-800 bg-blue-50 dark:bg-blue-950 text-blue-700 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-900 transition-colors"
                    >
                        <Icon size={10} strokeWidth={2.5} />
                        {count} {count === 1 ? 'regra' : 'regras'}
                    </button>
                </TooltipTrigger>
                <TooltipContent>Ver {label.toLowerCase()}</TooltipContent>
            </Tooltip>

            <Dialog open={open} onOpenChange={setOpen}>
                <DialogContent className="max-w-lg max-h-[80vh] flex flex-col">
                    <DialogHeader>
                        <DialogTitle className="flex items-center justify-between pr-6">
                            <span className="flex items-center gap-2 text-sm">
                                <Icon size={14} strokeWidth={2} className="text-blue-600 dark:text-blue-400" />
                                {label}
                            </span>
                            <button
                                type="button"
                                onClick={() => setShowRaw(s => !s)}
                                className="inline-flex items-center gap-1 text-[10px] font-semibold px-2 py-1 rounded-md border border-border text-muted-foreground hover:bg-muted transition-colors"
                            >
                                <Code2 size={10} strokeWidth={2.5} />
                                {showRaw ? 'Ver resumo' : 'Ver JSON'}
                            </button>
                        </DialogTitle>
                    </DialogHeader>

                    <div className="flex-1 min-h-0 overflow-y-auto">
                        {showRaw ? (
                            <pre className="text-[11px] font-mono bg-zinc-950 text-zinc-300 rounded-lg p-3 overflow-x-auto whitespace-pre-wrap break-all">
                                {JSON.stringify(parsed, null, 2)}
                            </pre>
                        ) : kind === 'conditions' ? (
                            <ConditionsSummary parsed={parsed} />
                        ) : (
                            <DefaultValuesSummary parsed={parsed} />
                        )}
                    </div>
                </DialogContent>
            </Dialog>
        </>
    );
}