import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
import { Link } from '@inertiajs/react';
import { ChevronDown, ChevronUp, Search, Sparkles, Timer, TriangleAlert, X } from 'lucide-react';
import React, { useState } from 'react';
import OrderFlowWithModal from '../pedidos/OrderFlowWithModal';
import OrderLogWithModal from '../pedidos/OrderLogWithModal';
import { getLevel } from '../pedidos/shared';
import { orderEditUrl } from './filters';

// Mesmas colunas/ações da tabela de pedidos/Index.tsx, sem Integração/Cliente
// (a página já é de uma integração só).

export const LEVEL_CONFIG: Record<number, { color: string; bg: string; label: string }> = {
    0: { color: 'text-rose-600 dark:text-rose-400', bg: 'text-rose-500', label: 'Crítico' },
    1: { color: 'text-amber-600 dark:text-amber-400', bg: 'text-amber-500', label: 'Médio' },
    2: { color: 'text-emerald-600', bg: 'text-emerald-600', label: 'Básico' },
    3: { color: 'text-blue-600 dark:text-blue-400', bg: 'text-blue-500', label: 'Condicionante' },
};

const iconBtn = 'w-7 h-7 flex items-center justify-center rounded-lg border border-border hover:bg-muted transition-colors';

// Datas vêm em UTC do banco; o navegador converte para o horário local.
export function fmtUtc(value?: string | null) {
    if (!value) return '—';
    const d = new Date(value.replace(' ', 'T').replace(/Z?$/, 'Z'));
    if (isNaN(d.getTime())) return value;
    return d.toLocaleString('pt-BR', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' });
}

function TruncCell({ value, max }: { value?: string; max: number }) {
    if (!value) return <span className="text-xs text-muted-foreground">—</span>;
    if (value.length <= max) return <span className="font-mono text-xs text-foreground">{value}</span>;
    return (
        <Tooltip>
            <TooltipTrigger asChild>
                <span className="cursor-default font-mono text-xs text-foreground">{value.substring(0, max)}…</span>
            </TooltipTrigger>
            <TooltipContent>{value}</TooltipContent>
        </Tooltip>
    );
}

function ExpandField({ label, value }: { label: string; value?: string | number | null }) {
    return (
        <div>
            <p className="mb-0.5 text-[10px] font-semibold tracking-widest text-muted-foreground uppercase">{label}</p>
            <p className="text-xs break-all text-foreground">{value || <span className="text-muted-foreground">—</span>}</p>
        </div>
    );
}

function xsrf() {
    return decodeURIComponent(document.cookie.match(/XSRF-TOKEN=([^;]+)/)?.[1] ?? '');
}

export function OrdersTable({ orders, integrationName }: { orders: any[]; integrationName: string }) {
    const [expanded, setExpanded] = useState<Set<number>>(new Set());
    const [notifOrder, setNotifOrder] = useState<any>(null);
    const [payload, setPayload] = useState('');

    const toggleRow = (id: number) =>
        setExpanded((prev) => {
            const next = new Set(prev);
            next.has(id) ? next.delete(id) : next.add(id);
            return next;
        });

    const openNotification = async (order: any) => {
        setPayload('');
        setNotifOrder(order);
        try {
            const res = await fetch('/notificacoes/payload', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'X-XSRF-TOKEN': xsrf(), Accept: 'application/json' },
                body: JSON.stringify({ id: order.id }),
            });
            const json = await res.json();
            setPayload(json.payload ?? '');
        } catch {
            /* silencioso */
        }
    };

    const laura = (message: string) => window.dispatchEvent(new CustomEvent('laura:send-message', { detail: { message } }));

    const explainOrder = (order: any) => {
        const parts = [
            `Explique a situação deste pedido:`,
            `integração="${integrationName}" fluxo="${order.activity_flow?.name ?? ''}" atividade="${order.activity ?? ''}"`,
            `increment_id=${order.increment_id} order_id=${order.order_id}${order.nf_data?.nf_id ? ` nf_id=${order.nf_data.nf_id}` : ''}`,
            `tipo=${order.order_type?.type ?? ''} modelo=${order.sales_model ?? ''}`,
        ];
        if (order.notification) parts.push(`notificação="${order.notification}"`);
        laura(parts.join('\n'));
    };

    const formatNotification = () => {
        const text = `Formate esta notificação de integração:\n\nMensagem: ${notifOrder.notification}\nPayload: ${payload}`;
        setNotifOrder(null);
        laura(text);
    };

    const cols = ['Fluxo', 'Order ID', 'Increment ID', 'NF ID', 'Modelo', 'Atividade Atual', 'Tempo Ocioso', 'Data Criação', 'Ações'];
    const level = notifOrder ? LEVEL_CONFIG[getLevel(notifOrder)] : undefined;

    return (
        <>
            <div className="overflow-x-auto rounded-xl border border-border bg-card">
                <Table>
                    <TableHeader>
                        <TableRow className="bg-muted/50 hover:bg-muted/50">
                            {cols.map((h) => (
                                <TableHead key={h} className="h-10 text-[10px] font-semibold tracking-widest whitespace-nowrap text-muted-foreground uppercase">
                                    {h}
                                </TableHead>
                            ))}
                        </TableRow>
                    </TableHeader>
                    <TableBody>
                        {orders.length === 0 && (
                            <TableRow>
                                <TableCell colSpan={cols.length} className="py-14 text-center text-xs text-muted-foreground">
                                    Nenhum pedido encontrado.
                                </TableCell>
                            </TableRow>
                        )}
                        {orders.map((order) => (
                            <React.Fragment key={order.id}>
                                <TableRow className="transition-colors hover:bg-muted/30" style={{ opacity: order.is_deleted ? 0.45 : 1 }}>
                                    <TableCell className="py-2.5">
                                        <span className="text-xs text-muted-foreground">{order.activity_flow?.name ?? '—'}</span>
                                    </TableCell>
                                    <TableCell className="py-2.5">
                                        <TruncCell value={order.order_id} max={15} />
                                    </TableCell>
                                    <TableCell className="py-2.5">
                                        <TruncCell value={order.increment_id} max={15} />
                                    </TableCell>
                                    <TableCell className="py-2.5">
                                        <TruncCell value={order.nf_data?.nf_id} max={10} />
                                    </TableCell>
                                    <TableCell className="py-2.5">
                                        <span className="text-xs text-muted-foreground">
                                            {order.order_type?.type} {order.sales_model}
                                        </span>
                                    </TableCell>
                                    <TableCell className="py-2.5">
                                        <OrderFlowWithModal
                                            orderId={order.order_id}
                                            incrementId={order.increment_id}
                                            activityFlow={order.activity_orig_dest ?? []}
                                            flow={order.activity}
                                        />
                                    </TableCell>
                                    <TableCell className="py-2.5">
                                        <OrderLogWithModal orderId={order.order_id} incrementId={order.increment_id} time={order.activity_time} logs={order.logs} />
                                    </TableCell>
                                    <TableCell className="py-2.5 text-xs whitespace-nowrap text-muted-foreground">{fmtUtc(order.created_at)}</TableCell>
                                    <TableCell className="py-2.5">
                                        <div className="flex items-center gap-1.5">
                                            <Tooltip>
                                                <TooltipTrigger asChild>
                                                    <Link
                                                        href={orderEditUrl(order.id)}
                                                        className={`${iconBtn} text-muted-foreground hover:text-foreground`}
                                                    >
                                                        <Search size={12} strokeWidth={2} />
                                                    </Link>
                                                </TooltipTrigger>
                                                <TooltipContent>Ver detalhes</TooltipContent>
                                            </Tooltip>

                                            <Tooltip>
                                                <TooltipTrigger asChild>
                                                    <button type="button" onClick={() => explainOrder(order)} className={`${iconBtn} text-amber-500`}>
                                                        <Sparkles size={12} strokeWidth={2} />
                                                    </button>
                                                </TooltipTrigger>
                                                <TooltipContent>Explicar com Laura</TooltipContent>
                                            </Tooltip>

                                            {order.notification ? (
                                                <Tooltip>
                                                    <TooltipTrigger asChild>
                                                        <button type="button" onClick={() => openNotification(order)} className={iconBtn}>
                                                            <TriangleAlert size={12} className={LEVEL_CONFIG[getLevel(order)]?.bg ?? 'text-rose-500'} />
                                                        </button>
                                                    </TooltipTrigger>
                                                    <TooltipContent>{LEVEL_CONFIG[getLevel(order)]?.label ?? 'Notificação'} — clique para ver</TooltipContent>
                                                </Tooltip>
                                            ) : (
                                                <div className="pointer-events-none h-7 w-7 opacity-0" />
                                            )}

                                            {order.delayed ? (
                                                <Tooltip>
                                                    <TooltipTrigger asChild>
                                                        <div className={iconBtn}>
                                                            <Timer size={12} className="text-violet-500" />
                                                        </div>
                                                    </TooltipTrigger>
                                                    <TooltipContent>Pedido atrasado na atividade</TooltipContent>
                                                </Tooltip>
                                            ) : (
                                                <div className="pointer-events-none h-7 w-7 opacity-0" />
                                            )}

                                            <Tooltip>
                                                <TooltipTrigger asChild>
                                                    <button
                                                        type="button"
                                                        onClick={() => toggleRow(order.id)}
                                                        className={`${iconBtn} text-muted-foreground hover:text-foreground`}
                                                    >
                                                        {expanded.has(order.id) ? <ChevronUp size={12} strokeWidth={2} /> : <ChevronDown size={12} strokeWidth={2} />}
                                                    </button>
                                                </TooltipTrigger>
                                                <TooltipContent>{expanded.has(order.id) ? 'Fechar' : 'Abrir'}</TooltipContent>
                                            </Tooltip>
                                        </div>
                                    </TableCell>
                                </TableRow>

                                {expanded.has(order.id) && (
                                    <TableRow className="bg-muted/20 hover:bg-muted/20">
                                        <TableCell colSpan={cols.length} className="px-6 py-4">
                                            <div className="grid grid-cols-2 gap-x-8 gap-y-4 sm:grid-cols-3">
                                                <ExpandField label="Chave de Acesso" value={order.nf_data?.chave_de_acesso} />
                                                <ExpandField label="Protocolo" value={order.nf_data?.protocolo} />
                                                <ExpandField label="Texto NF" value={order.nf_data?.text} />
                                                <ExpandField label="Rastreio" value={order.tracking_data?.codigo_de_rastreio} />
                                                <ExpandField label="Transportadora" value={order.tracking_data?.transp_name} />
                                                <ExpandField label="Previsão Entrega" value={order.tracking_data?.delivery_prediction_at} />
                                            </div>
                                        </TableCell>
                                    </TableRow>
                                )}
                            </React.Fragment>
                        ))}
                    </TableBody>
                </Table>
            </div>

            {/* ── Modal notificação ── */}
            {notifOrder && (
                <div
                    className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
                    onClick={(e) => {
                        if (e.target === e.currentTarget) setNotifOrder(null);
                    }}
                >
                    <div className="w-full max-w-lg overflow-hidden rounded-2xl border border-border bg-card shadow-xl">
                        <div className="flex items-center justify-between border-b border-border px-5 py-4">
                            <div>
                                <p className="text-sm font-semibold text-foreground">Notificação — #{notifOrder.id}</p>
                                {level && <span className={`text-[10px] font-bold ${level.color}`}>{level.label}</span>}
                            </div>
                            <div className="flex items-center gap-2">
                                <Tooltip>
                                    <TooltipTrigger asChild>
                                        <button type="button" onClick={formatNotification} className="flex h-8 w-8 items-center justify-center rounded-lg border border-border hover:bg-muted">
                                            <Sparkles size={14} className="text-amber-400" />
                                        </button>
                                    </TooltipTrigger>
                                    <TooltipContent>Formatar com Laura</TooltipContent>
                                </Tooltip>
                                <button
                                    type="button"
                                    onClick={() => setNotifOrder(null)}
                                    className="flex h-8 w-8 items-center justify-center rounded-lg border border-border text-muted-foreground hover:bg-muted"
                                >
                                    <X size={14} strokeWidth={2} />
                                </button>
                            </div>
                        </div>

                        <div className="flex max-h-96 flex-col gap-3 overflow-y-auto px-5 py-4">
                            {notifOrder.class && <ExpandField label="Classe" value={notifOrder.class} />}
                            {notifOrder.notification && <ExpandField label="Mensagem" value={notifOrder.notification} />}
                            {payload && <ExpandField label="Payload" value={payload} />}
                        </div>
                    </div>
                </div>
            )}
        </>
    );
}