"use client";

import { useEffect, useMemo, useRef, useState } from "react";
import Link from "next/link";
import Image from "next/image";
import { useRouter, useSearchParams } from "next/navigation";
import { PageHeader } from "@/components/ui/page-header";
import { Button } from "@/components/ui/button";
import CaixaDeConfirmacao, { type Confirmacao } from "@/components/ui/caixa-de-confirmacao";
import { usePermissoes } from "@/lib/permissoes-do-usuario";
import { Input } from "@/components/ui/input";
import {
  ArrowUpRight,
  ArrowDownRight,
  BadgeAlert,
  BarChart3,
  CalendarDays,
  CheckCircle2,
  CircleDashed,
  Clock3,
  Filter,
  Loader2,
  Package2,
  ReceiptText,
  Search,
  ShoppingBag,
  Trash2,
  TrendingUp,
  UserCircle2,
  UserRoundX,
  Wallet,
} from "lucide-react";

type CatalogOrderRow = {
  id: string;
  number: number;
  user_id: string;
  status: "pending" | "approved" | "canceled";
  /* "quote_request" é o pedido de orçamento feito pela loja: os preços
     gravados são os do cadastro, e o cliente NÃO os viu. */
  kind: "order" | "quote_request";
  customer_name: string | null;
  customer_whatsapp: string | null;
  total: number | null;
  approved_order_id: string | null;
  created_at: string;
  client_id: string | null;
  notes: string | null;
  payment_status: "unpaid" | "pending" | "approved" | "rejected" | "cancelled" | "refunded" | "charged_back";
  payment_method: string | null;
  payment_reference: string | null;
  paid_at: string | null;
  item_count: number;
  item_preview: string[];
  clients?: { id: string; name: string | null; company_name: string | null; avatar_url: string | null } | null;
  catalog_order_items?: { id: string; title: string; quantity: number; total_price: number }[] | null;
};

function normalizeCatalogOrderRows(input: unknown): CatalogOrderRow[] {
  if (!Array.isArray(input)) return [];

  return input.map((row, index) => {
    const record = (row && typeof row === "object" ? row : {}) as Record<string, unknown>;
    const clientsRaw = record.clients;
    const clientRecord = Array.isArray(clientsRaw)
      ? (clientsRaw[0] as Record<string, unknown> | undefined) || null
      : (clientsRaw as Record<string, unknown> | null) || null;
    const itemsRaw = Array.isArray(record.catalog_order_items) ? record.catalog_order_items : [];

    return {
      id: typeof record.id === "string" ? record.id : `catalog-order-${index}`,
      number: Number(record.number) || 0,
      user_id: typeof record.user_id === "string" ? record.user_id : "",
      status:
        record.status === "approved" || record.status === "canceled"
          ? record.status
          : "pending",
      kind: record.kind === "quote_request" ? "quote_request" : "order",
      customer_name: typeof record.customer_name === "string" ? record.customer_name : null,
      customer_whatsapp: typeof record.customer_whatsapp === "string" ? record.customer_whatsapp : null,
      total: Number.isFinite(Number(record.total)) ? Number(record.total) : 0,
      approved_order_id: typeof record.approved_order_id === "string" ? record.approved_order_id : null,
      created_at: typeof record.created_at === "string" ? record.created_at : new Date().toISOString(),
      client_id: typeof record.client_id === "string" ? record.client_id : null,
      notes: typeof record.notes === "string" ? record.notes : null,
      payment_status:
        record.payment_status === "approved" ||
        record.payment_status === "pending" ||
        record.payment_status === "rejected" ||
        record.payment_status === "cancelled" ||
        record.payment_status === "refunded" ||
        record.payment_status === "charged_back"
          ? record.payment_status
          : "unpaid",
      payment_method: typeof record.payment_method === "string" ? record.payment_method : null,
      payment_reference: typeof record.payment_reference === "string" ? record.payment_reference : null,
      paid_at: typeof record.paid_at === "string" ? record.paid_at : null,
      item_count: Number(record.item_count) || 0,
      item_preview: Array.isArray(record.item_preview)
        ? record.item_preview.map((item) => String(item || "").trim()).filter(Boolean)
        : [],
      clients: clientRecord
        ? {
            id: typeof clientRecord.id === "string" ? clientRecord.id : "",
            name: typeof clientRecord.name === "string" ? clientRecord.name : null,
            company_name: typeof clientRecord.company_name === "string" ? clientRecord.company_name : null,
            avatar_url: typeof clientRecord.avatar_url === "string" ? clientRecord.avatar_url : null,
          }
        : null,
      catalog_order_items: itemsRaw
        .map((item) => {
          const itemRecord = (item && typeof item === "object" ? item : {}) as Record<string, unknown>;
          const id = typeof itemRecord.id === "string" ? itemRecord.id : "";
          return id
            ? {
                id,
                title: typeof itemRecord.title === "string" ? itemRecord.title : "Item",
                quantity: Number(itemRecord.quantity) || 0,
                total_price: Number(itemRecord.total_price) || 0,
              }
            : null;
        })
        .filter((item): item is { id: string; title: string; quantity: number; total_price: number } => item !== null),
    };
  });
}

const formatMoney = (value: number) =>
  new Intl.NumberFormat("pt-BR", { style: "currency", currency: "BRL" }).format(Number.isFinite(value) ? value : 0);

const formatDate = (value: string) =>
  new Date(value).toLocaleString("pt-BR", {
    day: "2-digit",
    month: "2-digit",
    year: "numeric",
    hour: "2-digit",
    minute: "2-digit",
  });

function statusLabel(status: CatalogOrderRow["status"]) {
  if (status === "approved") return "Aprovado";
  if (status === "canceled") return "Cancelado";
  return "Pendente";
}

function statusTone(status: CatalogOrderRow["status"]) {
  if (status === "approved") return "border-emerald-200 bg-emerald-50 text-emerald-700";
  if (status === "canceled") return "border-rose-200 bg-rose-50 text-rose-700";
  return "border-amber-200 bg-amber-50 text-amber-700";
}

function paymentStatusLabel(status: CatalogOrderRow["payment_status"]) {
  if (status === "approved") return "Pagamento aprovado";
  if (status === "pending") return "Pagamento pendente";
  if (status === "rejected") return "Pagamento recusado";
  if (status === "cancelled") return "Pagamento cancelado";
  if (status === "refunded") return "Pagamento estornado";
  if (status === "charged_back") return "Chargeback";
  return "Sem pagamento";
}

function paymentStatusTone(status: CatalogOrderRow["payment_status"]) {
  if (status === "approved") return "border-emerald-200 bg-emerald-50 text-emerald-700";
  if (status === "pending") return "border-sky-200 bg-sky-50 text-sky-700";
  if (status === "rejected" || status === "cancelled" || status === "charged_back") {
    return "border-rose-200 bg-rose-50 text-rose-700";
  }
  if (status === "refunded") return "border-fuchsia-200 bg-fuchsia-50 text-fuchsia-700";
  return "border-slate-200 bg-slate-50 text-slate-600";
}

function formatWhatsapp(value: string | null) {
  const digits = String(value || "").replace(/\D/g, "");
  if (!digits) return null;
  if (digits.length === 11) return `(${digits.slice(0, 2)}) ${digits.slice(2, 7)}-${digits.slice(7)}`;
  if (digits.length === 10) return `(${digits.slice(0, 2)}) ${digits.slice(2, 6)}-${digits.slice(6)}`;
  return value;
}

function getInitials(name: string) {
  const parts = name.trim().split(/\s+/).filter(Boolean);
  if (!parts.length) return "CL";
  return parts.slice(0, 2).map((part) => part[0]?.toUpperCase() || "").join("");
}

function getUrgencyMeta(order: CatalogOrderRow) {
  if (order.status !== "pending") {
    return null;
  }

  const createdAt = new Date(order.created_at);
  const diffMs = Date.now() - createdAt.getTime();
  const diffHours = diffMs / (1000 * 60 * 60);

  if (diffHours >= 72) {
    return {
      label: "Pendente crítico",
      description: "Há mais de 72 horas sem revisão",
      className: "border-rose-200 bg-rose-50 text-rose-700",
    };
  }

  if (diffHours >= 24) {
    return {
      label: "Pendente em atenção",
      description: "Há mais de 24 horas aguardando",
      className: "border-amber-200 bg-amber-50 text-amber-700",
    };
  }

  return {
    label: "Pendente recente",
    description: "Recebido nas últimas 24 horas",
    className: "border-sky-200 bg-sky-50 text-sky-700",
  };
}

function getHighValueMeta(order: CatalogOrderRow) {
  const total = Number(order.total || 0);
  if (total >= 5000) {
    return {
      label: "Valor premium",
      className: "border-fuchsia-200 bg-fuchsia-50 text-fuchsia-700",
    };
  }
  if (total >= 2000) {
    return {
      label: "Alto valor",
      className: "border-violet-200 bg-violet-50 text-violet-700",
    };
  }
  return null;
}

function getDateGroupLabel(value: string) {
  const target = new Date(value);
  const now = new Date();
  const startOfToday = new Date(now.getFullYear(), now.getMonth(), now.getDate());
  const startOfTarget = new Date(target.getFullYear(), target.getMonth(), target.getDate());
  const diffDays = Math.round((startOfToday.getTime() - startOfTarget.getTime()) / (1000 * 60 * 60 * 24));

  if (diffDays === 0) return "Hoje";
  if (diffDays === 1) return "Ontem";
  if (diffDays <= 7) {
    return target.toLocaleDateString("pt-BR", { weekday: "long" });
  }
  return target.toLocaleDateString("pt-BR", { day: "2-digit", month: "long", year: "numeric" });
}

export default function CatalogOrdersPage() {
  const { pode } = usePermissoes();
  const podeMexerNoCatalogo = pode("catalog.orders.write");

  const searchParams = useSearchParams();
  const router = useRouter();
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");
  const [search, setSearch] = useState("");
  const [orders, setOrders] = useState<CatalogOrderRow[]>([]);
  const [statusFilter, setStatusFilter] = useState<"all" | CatalogOrderRow["status"]>("all");
  const [kindFilter, setKindFilter] = useState<"all" | CatalogOrderRow["kind"]>("all");
  const [linkFilter, setLinkFilter] = useState<"all" | "linked" | "unlinked" | "generated">("all");
  const [valueFilter, setValueFilter] = useState<"all" | "zero" | "low" | "mid" | "high">("all");
  const [periodFilter, setPeriodFilter] = useState<"all" | "today" | "7d" | "30d">("all");
  const [sortBy, setSortBy] = useState<"recent" | "oldest" | "highest" | "lowest">("recent");
  const [openingId, setOpeningId] = useState<string | null>(null);
  const [deletingId, setDeletingId] = useState<string | null>(null);
  const [confirmacao, setConfirmacao] = useState<Confirmacao | null>(null);
  const orderRefs = useRef<Record<string, HTMLElement | null>>({});
  const focusedOrderId = searchParams.get("order");

  useEffect(() => {
    let mounted = true;
    const load = async () => {
      setLoading(true);
      setError("");
      try {
        const response = await fetch("/api/catalog/orders", { cache: "no-store" });
        const payload = (await response.json().catch(() => null)) as
          | { ok?: boolean; error?: string; orders?: unknown[] }
          | null;

        if (!mounted) return;
        if (!response.ok || !payload?.ok) {
          setError(payload?.error || "Não foi possível carregar os pedidos do catálogo.");
          setOrders([]);
          setLoading(false);
          return;
        }
        setOrders(normalizeCatalogOrderRows(payload.orders));
      } catch (loadError) {
        if (!mounted) return;
        setError(loadError instanceof Error ? loadError.message : "Não foi possível carregar os pedidos do catálogo.");
        setOrders([]);
        setLoading(false);
        return;
      }
      setLoading(false);
    };
    void load();
    return () => {
      mounted = false;
    };
  }, []);

  const summary = useMemo(() => {
    const pending = orders.filter((order) => order.status === "pending").length;
    const approved = orders.filter((order) => order.status === "approved").length;
    const canceled = orders.filter((order) => order.status === "canceled").length;
    const withoutClient = orders.filter((order) => !order.client_id).length;
    const urgent = orders.filter((order) => {
      const urgency = getUrgencyMeta(order);
      return Boolean(urgency && urgency.label !== "Pendente recente");
    }).length;
    const highValue = orders.filter((order) => Number(order.total || 0) >= 2000).length;
    const totalValue = orders.reduce((sum, order) => sum + Number(order.total || 0), 0);
    const conversionRate = orders.length ? Math.round((approved / orders.length) * 100) : 0;
    const averageTicket = orders.length ? totalValue / orders.length : 0;
    return { pending, approved, canceled, withoutClient, urgent, highValue, totalValue, conversionRate, averageTicket };
  }, [orders]);

  const filtered = useMemo(() => {
    const term = search.trim().toLowerCase();
    const now = new Date();
    const list = orders.filter((order) => {
      if (statusFilter !== "all" && order.status !== statusFilter) return false;
      if (kindFilter !== "all" && order.kind !== kindFilter) return false;
      if (linkFilter === "linked" && !order.client_id) return false;
      if (linkFilter === "unlinked" && order.client_id) return false;
      if (linkFilter === "generated" && !order.approved_order_id) return false;

      const total = Number(order.total || 0);
      if (valueFilter === "zero" && total !== 0) return false;
      if (valueFilter === "low" && !(total > 0 && total <= 500)) return false;
      if (valueFilter === "mid" && !(total > 500 && total <= 2000)) return false;
      if (valueFilter === "high" && total <= 2000) return false;

      if (periodFilter !== "all") {
        const createdAt = new Date(order.created_at);
        const diffMs = now.getTime() - createdAt.getTime();
        const diffDays = diffMs / (1000 * 60 * 60 * 24);
        if (periodFilter === "today" && createdAt.toDateString() !== now.toDateString()) return false;
        if (periodFilter === "7d" && diffDays > 7) return false;
        if (periodFilter === "30d" && diffDays > 30) return false;
      }

      if (!term) return true;
      const clientName = order.clients?.company_name || order.clients?.name || "";
      const haystack = [
        `#${order.number}`,
        order.customer_name || "",
        order.customer_whatsapp || "",
        clientName,
        order.item_preview.join(" "),
        order.notes || "",
      ]
        .join(" ")
        .toLowerCase();
      return haystack.includes(term);
    });

    return [...list].sort((a, b) => {
      if (sortBy === "oldest") return new Date(a.created_at).getTime() - new Date(b.created_at).getTime();
      if (sortBy === "highest") return Number(b.total || 0) - Number(a.total || 0);
      if (sortBy === "lowest") return Number(a.total || 0) - Number(b.total || 0);
      return new Date(b.created_at).getTime() - new Date(a.created_at).getTime();
    });
  }, [orders, search, statusFilter, kindFilter, linkFilter, valueFilter, periodFilter, sortBy]);

  const quoteRequestCount = useMemo(() => orders.filter((order) => order.kind === "quote_request").length, [orders]);

  const filterChips = [
    { key: "all", label: "Todos", count: orders.length },
    { key: "pending", label: "Pendentes", count: summary.pending },
    { key: "approved", label: "Aprovados", count: summary.approved },
    { key: "canceled", label: "Cancelados", count: orders.filter((order) => order.status === "canceled").length },
  ] as const;

  const groupedFiltered = useMemo(() => {
    const groups = new Map<string, CatalogOrderRow[]>();
    filtered.forEach((order) => {
      const label = getDateGroupLabel(order.created_at);
      const current = groups.get(label) || [];
      current.push(order);
      groups.set(label, current);
    });
    return Array.from(groups.entries()).map(([label, items]) => ({ label, items }));
  }, [filtered]);

  useEffect(() => {
    if (!focusedOrderId || loading) return;
    const target = orderRefs.current[focusedOrderId];
    if (!target) return;
    const timer = window.setTimeout(() => {
      target.scrollIntoView({ behavior: "smooth", block: "center" });
    }, 80);
    return () => window.clearTimeout(timer);
  }, [focusedOrderId, loading, groupedFiltered]);

  function pedirParaExcluir(order: CatalogOrderRow) {
    setConfirmacao({
      titulo:
        order.kind === "quote_request"
          ? `Excluir o pedido de orçamento #${order.number}?`
          : `Excluir o pedido do catálogo #${order.number}?`,
      texto: order.approved_order_id
        ? "O pedido de produção que já foi gerado continua onde está — some apenas o registro da compra no catálogo."
        : "O registro da compra some desta lista. Não dá para desfazer.",
      confirmar: "Excluir pedido",
      tom: "perigo",
      aoConfirmar: () => {
        setConfirmacao(null);
        return handleDelete(order);
      },
    });
  }

  async function handleDelete(order: CatalogOrderRow) {
    try {
      setDeletingId(order.id);
      setError("");
      const response = await fetch(`/api/catalog/orders/${order.id}`, { method: "DELETE" });
      const result = (await response.json().catch(() => null)) as { error?: string; ok?: boolean } | null;
      if (!response.ok || !result?.ok) {
        throw new Error(result?.error || "Não foi possível excluir o pedido do catálogo.");
      }
      setOrders((current) => current.filter((item) => item.id !== order.id));
    } catch (deleteError) {
      setError(deleteError instanceof Error ? deleteError.message : "Não foi possível excluir o pedido do catálogo.");
    } finally {
      setDeletingId(null);
    }
  }

  async function handleOpenAndReview(order: CatalogOrderRow) {
    try {
      setOpeningId(order.id);
      setError("");
      const response = await fetch(`/api/catalog/orders/${order.id}/quote`, { method: "POST" });
      const result = (await response.json().catch(() => null)) as { ok?: boolean; error?: string; quote_id?: string } | null;
      if (!response.ok || !result?.ok || !result.quote_id) {
        throw new Error(result?.error || "Não foi possível abrir o editor do pedido.");
      }
      router.push(`/dashboard/quotes/${result.quote_id}?catalog_order_id=${order.id}&from_catalog=1`);
    } catch (openError) {
      setError(openError instanceof Error ? openError.message : "Não foi possível abrir o editor do pedido.");
    } finally {
      setOpeningId(null);
    }
  }

  return (
    <main className="space-y-6">
      <PageHeader
        eyebrow="Catálogo"
        title="Pedidos do catálogo"
        subtitle="Revise solicitações enviadas pelo checkout público antes de aprovar."
      />

      <section className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
        {[
          {
            label: "Total de pedidos",
            value: orders.length.toString(),
            hint: `${filtered.length} na visualização atual`,
            icon: ShoppingBag,
            tone: "bg-[linear-gradient(135deg,#4f46e5_0%,#7c3aed_100%)] text-white",
            iconTone: "bg-white/15 text-white",
          },
          {
            label: "Pendentes",
            value: summary.pending.toString(),
            hint: `${summary.urgent} em atenção imediata`,
            icon: CircleDashed,
            tone: "bg-white text-[var(--ks-color-text-primary)]",
            iconTone: "bg-amber-50 text-amber-600",
          },
          {
            label: "Aprovados",
            value: summary.approved.toString(),
            hint: "Já viraram pedido interno",
            icon: CheckCircle2,
            tone: "bg-white text-[var(--ks-color-text-primary)]",
            iconTone: "bg-emerald-50 text-emerald-600",
          },
          {
            label: "Volume total",
            value: formatMoney(summary.totalValue),
            hint: `${summary.withoutClient} sem vínculo de cliente`,
            icon: Wallet,
            tone: "bg-white text-[var(--ks-color-text-primary)]",
            iconTone: "bg-sky-50 text-sky-600",
          },
        ].map((card) => (
          <div
            key={card.label}
            className={`rounded-[26px] border border-[var(--ks-color-border-subtle)] p-5 shadow-[0_12px_30px_rgba(15,23,42,0.04)] ${card.tone}`}
          >
            <div className="flex items-start justify-between gap-4">
              <div>
                <div className="text-sm font-medium opacity-80">{card.label}</div>
                <div className="mt-2 text-2xl font-semibold tracking-[-0.04em]">{card.value}</div>
                <div className="mt-1 text-xs opacity-70">{card.hint}</div>
              </div>
              <div className={`flex h-11 w-11 items-center justify-center rounded-2xl ${card.iconTone}`}>
                <card.icon className="h-5 w-5" />
              </div>
            </div>
          </div>
        ))}
      </section>

      <section className="rounded-[28px] border border-[var(--ks-color-border-subtle)] bg-white p-4 md:p-5">
        <div className="flex flex-col gap-4 border-b border-[var(--ks-color-border-subtle)] pb-4">
          <div className="flex flex-wrap items-start justify-between gap-3">
            <div>
              <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-[var(--ks-color-text-soft)]">
                Visualização
              </div>
              <div className="mt-1 text-lg font-semibold tracking-[-0.03em] text-[var(--ks-color-text-primary)]">
                {filtered.length} pedidos filtrados
              </div>
              <div className="mt-1 text-sm text-[var(--ks-color-text-secondary)]">
                Combine filtros por status, vínculo, valor, período e texto para localizar rapidamente.
              </div>
            </div>
            <div className="flex flex-wrap gap-2">
              <div className="rounded-full border border-amber-200 bg-amber-50 px-3 py-1.5 text-xs font-semibold text-amber-700">
                {summary.pending} pendentes
              </div>
              <div className="rounded-full border border-rose-200 bg-rose-50 px-3 py-1.5 text-xs font-semibold text-rose-700">
                {summary.urgent} urgentes
              </div>
              <div className="rounded-full border border-zinc-200 bg-zinc-50 px-3 py-1.5 text-xs font-semibold text-zinc-700">
                {summary.withoutClient} sem vínculo
              </div>
            </div>
          </div>

          <div className="flex flex-col gap-3 xl:flex-row xl:items-end xl:justify-between">
            <div className="flex-1">
              <Input
                value={search}
                onChange={(e) => setSearch(e.target.value)}
                placeholder="Buscar por número, cliente, WhatsApp, item ou observação"
                icon={<Search className="h-4 w-4" />}
              />
            </div>
            <div className="grid gap-3 sm:grid-cols-3 xl:min-w-[560px]">
              <label className="space-y-2">
                <span className="text-xs font-semibold uppercase tracking-[0.14em] text-[var(--ks-color-text-soft)]">Período</span>
                <select
                  value={periodFilter}
                  onChange={(e) => setPeriodFilter(e.target.value as typeof periodFilter)}
                  className="h-11 w-full rounded-xl border border-[var(--ks-color-border-subtle)] bg-white px-3 text-sm text-[var(--ks-color-text-primary)] outline-none"
                >
                  <option value="all">Todos os períodos</option>
                  <option value="today">Hoje</option>
                  <option value="7d">Últimos 7 dias</option>
                  <option value="30d">Últimos 30 dias</option>
                </select>
              </label>
              <label className="space-y-2">
                <span className="text-xs font-semibold uppercase tracking-[0.14em] text-[var(--ks-color-text-soft)]">Faixa de valor</span>
                <select
                  value={valueFilter}
                  onChange={(e) => setValueFilter(e.target.value as typeof valueFilter)}
                  className="h-11 w-full rounded-xl border border-[var(--ks-color-border-subtle)] bg-white px-3 text-sm text-[var(--ks-color-text-primary)] outline-none"
                >
                  <option value="all">Todos os valores</option>
                  <option value="zero">Sem valor</option>
                  <option value="low">Até R$ 500</option>
                  <option value="mid">R$ 500 a R$ 2.000</option>
                  <option value="high">Acima de R$ 2.000</option>
                </select>
              </label>
              <label className="space-y-2">
                <span className="text-xs font-semibold uppercase tracking-[0.14em] text-[var(--ks-color-text-soft)]">Ordenação</span>
                <select
                  value={sortBy}
                  onChange={(e) => setSortBy(e.target.value as typeof sortBy)}
                  className="h-11 w-full rounded-xl border border-[var(--ks-color-border-subtle)] bg-white px-3 text-sm text-[var(--ks-color-text-primary)] outline-none"
                >
                  <option value="recent">Mais recentes</option>
                  <option value="oldest">Mais antigos</option>
                  <option value="highest">Maior valor</option>
                  <option value="lowest">Menor valor</option>
                </select>
              </label>
            </div>
          </div>

          <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-4">
            {[
              {
                label: "Conversão",
                value: `${summary.conversionRate}%`,
                hint: `${summary.approved} aprovados de ${orders.length}`,
                icon: TrendingUp,
                tone: "border-emerald-200 bg-emerald-50 text-emerald-700",
              },
              {
                label: "Ticket médio",
                value: formatMoney(summary.averageTicket),
                hint: "Média por pedido recebido",
                icon: BarChart3,
                tone: "border-violet-200 bg-violet-50 text-violet-700",
              },
              {
                label: "Alto valor",
                value: summary.highValue.toString(),
                hint: "Pedidos acima de R$ 2.000",
                icon: BadgeAlert,
                tone: "border-fuchsia-200 bg-fuchsia-50 text-fuchsia-700",
              },
              {
                label: "Timeline",
                value: filtered.length ? getDateGroupLabel(filtered[0].created_at) : "Sem dados",
                hint: "Grupo mais recente na visualização",
                icon: CalendarDays,
                tone: "border-sky-200 bg-sky-50 text-sky-700",
              },
            ].map((item) => (
              <div key={item.label} className={`rounded-[22px] border px-4 py-3 ${item.tone}`}>
                <div className="flex items-center justify-between gap-3">
                  <div>
                    <div className="text-[11px] font-semibold uppercase tracking-[0.14em] opacity-80">{item.label}</div>
                    <div className="mt-1 text-lg font-semibold tracking-[-0.03em]">{item.value}</div>
                    <div className="mt-1 text-xs opacity-80">{item.hint}</div>
                  </div>
                  <div className="flex h-10 w-10 items-center justify-center rounded-2xl bg-white/70">
                    <item.icon className="h-4.5 w-4.5" />
                  </div>
                </div>
              </div>
            ))}
          </div>

          <div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
            <div className="flex flex-wrap items-center gap-2">
              {filterChips.map((chip) => (
                <Button
                  key={chip.key}
                  variant={statusFilter === chip.key ? "primary" : "outline"}
                  size="sm"
                  onClick={() => setStatusFilter(chip.key)}
                  className="rounded-full"
                >
                  <span className="inline-flex items-center gap-2">
                    <span>{chip.label}</span>
                    <span
                      className={`inline-flex min-w-[22px] items-center justify-center rounded-full px-1.5 py-0.5 text-[10px] font-bold ${
                        statusFilter === chip.key ? "bg-white/20 text-white" : "bg-[var(--ks-color-surface-muted)] text-[var(--ks-color-text-primary)]"
                      }`}
                    >
                      {chip.count}
                    </span>
                  </span>
                </Button>
              ))}
            </div>

            <div className="flex flex-wrap items-center gap-2">
              {/* Pedido de orçamento é outro assunto: chega sem o cliente ter
                  visto preço, e quem revisa quer achá-los de uma vez. */}
              <span className="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.14em] text-[var(--ks-color-text-soft)]">
                <Filter className="h-3.5 w-3.5" />
                Tipo
              </span>
              <Button variant={kindFilter === "all" ? "primary" : "outline"} size="sm" className="rounded-full" onClick={() => setKindFilter("all")}>
                Todos
              </Button>
              <Button variant={kindFilter === "order" ? "primary" : "outline"} size="sm" className="rounded-full" onClick={() => setKindFilter("order")}>
                Pedidos
              </Button>
              <Button
                variant={kindFilter === "quote_request" ? "primary" : "outline"}
                size="sm"
                className="rounded-full"
                onClick={() => setKindFilter("quote_request")}
              >
                <span className="inline-flex items-center gap-2">
                  <span>Pedidos de orçamento</span>
                  {quoteRequestCount > 0 ? (
                    <span
                      className={`inline-flex min-w-[22px] items-center justify-center rounded-full px-1.5 py-0.5 text-[10px] font-bold ${
                        kindFilter === "quote_request" ? "bg-white/20 text-white" : "bg-[var(--ks-color-surface-muted)] text-[var(--ks-color-text-primary)]"
                      }`}
                    >
                      {quoteRequestCount}
                    </span>
                  ) : null}
                </span>
              </Button>
              <span className="mx-1 hidden h-5 w-px bg-[var(--ks-color-border-subtle)] sm:block" aria-hidden />
              <span className="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.14em] text-[var(--ks-color-text-soft)]">
                <Filter className="h-3.5 w-3.5" />
                Vínculo
              </span>
              <Button variant={linkFilter === "all" ? "primary" : "outline"} size="sm" className="rounded-full" onClick={() => setLinkFilter("all")}>
                Todos
              </Button>
              <Button variant={linkFilter === "linked" ? "primary" : "outline"} size="sm" className="rounded-full" onClick={() => setLinkFilter("linked")}>
                Com cliente
              </Button>
              <Button variant={linkFilter === "unlinked" ? "primary" : "outline"} size="sm" className="rounded-full" onClick={() => setLinkFilter("unlinked")}>
                Sem cliente
              </Button>
              <Button variant={linkFilter === "generated" ? "primary" : "outline"} size="sm" className="rounded-full" onClick={() => setLinkFilter("generated")}>
                Com pedido gerado
              </Button>
            </div>
          </div>
        </div>

        {loading ? (
          <div className="flex min-h-[200px] items-center justify-center text-sm text-[var(--ks-color-text-secondary)]">
            <span className="inline-flex items-center gap-2">
              <Loader2 className="h-4 w-4 animate-spin" />
              Carregando pedidos...
            </span>
          </div>
        ) : error ? (
          <div className="mt-4 rounded-xl border border-rose-200 bg-rose-50 px-3 py-2 text-sm font-medium text-rose-700">{error}</div>
        ) : filtered.length === 0 ? (
          <div className="mt-6 overflow-hidden rounded-[28px] border border-dashed border-[var(--ks-color-border-subtle)] bg-[linear-gradient(180deg,rgba(248,250,252,1)_0%,rgba(245,247,255,1)_100%)]">
            <div className="flex min-h-[280px] flex-col items-center justify-center px-6 py-10 text-center">
              <div className="flex h-16 w-16 items-center justify-center rounded-[22px] bg-white shadow-[0_12px_30px_rgba(15,23,42,0.06)]">
                <ShoppingBag className="h-8 w-8 text-[var(--ks-color-text-soft)]" />
              </div>
              <div className="mt-5 text-lg font-semibold tracking-[-0.03em] text-[var(--ks-color-text-primary)]">
                Nenhum pedido combina com os filtros atuais
              </div>
              <div className="mt-2 max-w-xl text-sm leading-6 text-[var(--ks-color-text-secondary)]">
                Limpe os filtros ativos ou tente buscar por número, nome do cliente, WhatsApp, item ou observação para reencontrar os pedidos.
              </div>
              <div className="mt-6 flex flex-wrap justify-center gap-3">
                <Button
                  variant="primary"
                  onClick={() => {
                    setSearch("");
                    setStatusFilter("all");
                    setKindFilter("all");
                    setLinkFilter("all");
                    setValueFilter("all");
                    setPeriodFilter("all");
                    setSortBy("recent");
                  }}
                >
                  Limpar filtros
                </Button>
                <Button variant="outline" onClick={() => setStatusFilter("pending")}>
                  Ver pendentes
                </Button>
              </div>
            </div>
          </div>
        ) : (
          <div className="mt-5 space-y-6">
            {groupedFiltered.map((group) => (
              <section key={group.label} className="space-y-4">
                <div className="flex items-center gap-3">
                  <div className="flex h-9 w-9 items-center justify-center rounded-2xl bg-[var(--ks-color-surface-muted)] text-[var(--ks-color-text-secondary)]">
                    <CalendarDays className="h-4 w-4" />
                  </div>
                  <div>
                    <div className="text-sm font-semibold tracking-[-0.03em] text-[var(--ks-color-text-primary)]">
                      {group.label}
                    </div>
                    <div className="text-xs text-[var(--ks-color-text-secondary)]">
                      {group.items.length} {group.items.length === 1 ? "pedido" : "pedidos"}
                    </div>
                  </div>
                </div>

                {group.items.map((order) => {
              const clientLabel = order.clients?.company_name || order.clients?.name || "Sem cliente vinculado";
              const isDeleting = deletingId === order.id;
              const displayName = order.customer_name || order.clients?.name || "Cliente do catálogo";
              const avatarAlt = order.clients?.name || displayName;
              const whatsapp = formatWhatsapp(order.customer_whatsapp);
              const urgency = getUrgencyMeta(order);
              const highValue = getHighValueMeta(order);
              return (
                <article
                  key={order.id}
                  ref={(node) => {
                    orderRefs.current[order.id] = node;
                  }}
                  className={`overflow-hidden rounded-[26px] border bg-white shadow-[0_12px_32px_rgba(15,23,42,0.04)] ${
                    focusedOrderId === order.id
                      ? "ring-2 ring-violet-400 ring-offset-4 ring-offset-[var(--ks-color-surface)]"
                      :
                    urgency
                      ? urgency.label === "Pendente crítico"
                        ? "border-rose-200"
                        : urgency.label === "Pendente em atenção"
                          ? "border-amber-200"
                          : "border-[var(--ks-color-border-subtle)]"
                      : "border-[var(--ks-color-border-subtle)]"
                  }`}
                >
                  <div className="flex flex-col gap-5 p-5 lg:flex-row lg:items-start lg:justify-between">
                    <div className="min-w-0 flex-1">
                      <div className="flex flex-wrap items-center gap-2">
                        <span className="rounded-full border border-sky-200 bg-sky-50 px-2.5 py-1 text-[11px] font-bold uppercase tracking-[0.08em] text-sky-700">
                          Catálogo
                        </span>
                        {order.kind === "quote_request" ? (
                          <span className="rounded-full border border-[var(--ks-color-primary)] bg-[var(--ks-color-primary)] px-2.5 py-1 text-[11px] font-bold uppercase tracking-[0.08em] text-white">
                            Pedido de orçamento
                          </span>
                        ) : null}
                        <span className={`rounded-full border px-2.5 py-1 text-[11px] font-semibold ${statusTone(order.status)}`}>
                          {statusLabel(order.status)}
                        </span>
                        {order.kind === "quote_request" ? null : (
                          <span className={`rounded-full border px-2.5 py-1 text-[11px] font-semibold ${paymentStatusTone(order.payment_status)}`}>
                            {paymentStatusLabel(order.payment_status)}
                          </span>
                        )}
                        <span className="text-sm font-semibold text-[var(--ks-color-text-primary)]">
                          {order.kind === "quote_request" ? "Pedido de orçamento" : "Pedido"} #{order.number}
                        </span>
                        <span className="text-xs text-[var(--ks-color-text-soft)]">{formatDate(order.created_at)}</span>
                        {highValue ? (
                          <span className={`inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-[11px] font-semibold ${highValue.className}`}>
                            <ReceiptText className="h-3.5 w-3.5" />
                            {highValue.label}
                          </span>
                        ) : null}
                        {urgency ? (
                          <span className={`inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-[11px] font-semibold ${urgency.className}`}>
                            <Clock3 className="h-3.5 w-3.5" />
                            {urgency.label}
                          </span>
                        ) : null}
                      </div>

                      <div className="mt-4 flex flex-col gap-4 lg:flex-row lg:items-start">
                        <div className="flex items-center gap-3">
                          <div className="flex h-14 w-14 items-center justify-center overflow-hidden rounded-2xl border border-[var(--ks-color-border-subtle)] bg-[var(--ks-color-surface-muted)] text-sm font-semibold text-[var(--ks-color-text-primary)]">
                            {order.clients?.avatar_url ? (
                              <Image
                                src={order.clients.avatar_url}
                                alt={avatarAlt}
                                width={56}
                                height={56}
                                className="h-14 w-14 object-cover"
                                unoptimized
                              />
                            ) : (
                              getInitials(displayName)
                            )}
                          </div>
                          <div className="min-w-0">
                            <div className="truncate text-base font-semibold tracking-[-0.03em] text-[var(--ks-color-text-primary)]">
                              {displayName}
                            </div>
                            <div className="mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-sm text-[var(--ks-color-text-secondary)]">
                              {whatsapp ? <span>{whatsapp}</span> : null}
                              <span>{clientLabel}</span>
                              {!order.client_id ? (
                                <span className="inline-flex items-center gap-1.5 text-amber-700">
                                  <UserRoundX className="h-3.5 w-3.5" />
                                  Sem vínculo interno
                                </span>
                              ) : null}
                            </div>
                          </div>
                        </div>

                        <div className="grid flex-1 gap-3 sm:grid-cols-3">
                          <div className="rounded-2xl bg-[var(--ks-color-surface-muted)] p-3.5">
                            <div className="flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.12em] text-[var(--ks-color-text-soft)]">
                              <Wallet className="h-3.5 w-3.5" />
                              Valor
                            </div>
                            <div className="mt-2 text-lg font-semibold tracking-[-0.03em] text-[var(--ks-color-text-primary)]">
                              {formatMoney(Number(order.total || 0))}
                            </div>
                            {order.kind === "quote_request" ? (
                              <div className="mt-1 text-[11px] leading-4 text-[var(--ks-color-text-soft)]">
                                Preços do cadastro. O cliente não os viu.
                              </div>
                            ) : null}
                          </div>
                          <div className="rounded-2xl bg-[var(--ks-color-surface-muted)] p-3.5">
                            <div className="flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.12em] text-[var(--ks-color-text-soft)]">
                              <Package2 className="h-3.5 w-3.5" />
                              Itens
                            </div>
                            <div className="mt-2 text-lg font-semibold tracking-[-0.03em] text-[var(--ks-color-text-primary)]">
                              {order.item_count}
                            </div>
                          </div>
                          <div className="rounded-2xl bg-[var(--ks-color-surface-muted)] p-3.5">
                            <div className="flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.12em] text-[var(--ks-color-text-soft)]">
                              <UserCircle2 className="h-3.5 w-3.5" />
                              Cliente
                            </div>
                            <div className="mt-2 truncate text-sm font-semibold text-[var(--ks-color-text-primary)]">
                              {clientLabel}
                            </div>
                          </div>
                        </div>
                      </div>

                      {order.payment_status !== "unpaid" ? (
                        <div className="mt-4 rounded-2xl border border-[var(--ks-color-border-subtle)] bg-[var(--ks-color-surface-muted)] px-3.5 py-3 text-sm text-[var(--ks-color-text-secondary)]">
                          <div className="font-semibold text-[var(--ks-color-text-primary)]">{paymentStatusLabel(order.payment_status)}</div>
                          <div className="mt-1 flex flex-wrap gap-x-4 gap-y-1">
                            <span>Metodo: {order.payment_method || "Mercado Pago"}</span>
                            {order.payment_reference ? <span>Ref: {order.payment_reference}</span> : null}
                            {order.paid_at ? <span>Pago em: {formatDate(order.paid_at)}</span> : null}
                          </div>
                        </div>
                      ) : null}

                      <div className="mt-4 flex flex-wrap gap-2">
                        {(order.item_preview.length ? order.item_preview : ["Sem preview de itens"]).map((item) => (
                          <span
                            key={`${order.id}-${item}`}
                            className="inline-flex items-center rounded-full border border-[var(--ks-color-border-subtle)] bg-[var(--ks-color-surface-muted)] px-3 py-1 text-xs font-medium text-[var(--ks-color-text-secondary)]"
                          >
                            {item}
                          </span>
                        ))}
                        {(order.catalog_order_items?.length || 0) > order.item_preview.length ? (
                          <span className="inline-flex items-center rounded-full border border-[var(--ks-color-border-subtle)] bg-white px-3 py-1 text-xs font-medium text-[var(--ks-color-text-secondary)]">
                            +{(order.catalog_order_items?.length || 0) - order.item_preview.length} itens
                          </span>
                        ) : null}
                      </div>

                      {order.notes ? (
                        <div className="mt-4 rounded-2xl border border-[var(--ks-color-border-subtle)] bg-[var(--ks-color-surface-muted)] px-3.5 py-3 text-sm text-[var(--ks-color-text-secondary)]">
                          {order.notes}
                        </div>
                      ) : null}

                      {urgency ? (
                        <div className={`mt-4 inline-flex items-center gap-2 rounded-full border px-3 py-1.5 text-xs font-medium ${urgency.className}`}>
                          <Clock3 className="h-3.5 w-3.5" />
                          {urgency.description}
                        </div>
                      ) : null}
                    </div>

                    <div className="flex w-full shrink-0 flex-col gap-3 lg:w-[220px]">
                      <button
                        type="button"
                        onClick={() => void handleOpenAndReview(order)}
                        disabled={openingId === order.id}
                        className="inline-flex h-11 items-center justify-center gap-2 rounded-2xl bg-[var(--ks-color-primary)] px-4 text-sm font-semibold text-white transition hover:opacity-95 disabled:cursor-not-allowed disabled:opacity-70"
                      >
                        {openingId === order.id ? (
                          <>
                            <Loader2 size={16} className="animate-spin" />
                            Abrindo editor...
                          </>
                        ) : (
                          <>
                            Abrir e revisar
                            <ArrowUpRight className="h-4 w-4" />
                          </>
                        )}
                      </button>

                      {order.approved_order_id ? (
                        <Link
                          href={`/dashboard/orders/${order.approved_order_id}`}
                          className="inline-flex h-11 items-center justify-center gap-2 rounded-2xl border border-[var(--ks-color-border-subtle)] bg-white px-4 text-sm font-semibold text-[var(--ks-color-text-primary)] transition hover:bg-[var(--ks-color-surface-muted)]"
                        >
                          Pedido gerado
                          <ArrowUpRight className="h-4 w-4" />
                        </Link>
                      ) : (
                        <div className="rounded-2xl border border-dashed border-[var(--ks-color-border-subtle)] px-4 py-3 text-center text-xs font-medium text-[var(--ks-color-text-soft)]">
                          Ainda sem pedido interno
                        </div>
                      )}

                      {podeMexerNoCatalogo && (<button
                        type="button"
                        onClick={() => pedirParaExcluir(order)}
                        disabled={isDeleting}
                        className="inline-flex h-11 items-center justify-center gap-2 rounded-2xl border border-rose-200 bg-white px-4 text-sm font-semibold text-rose-600 transition hover:bg-rose-50 disabled:cursor-not-allowed disabled:opacity-60"
                        aria-label={`Excluir pedido do catálogo #${order.number}`}
                        title="Excluir pedido do catálogo"
                      >
                        {isDeleting ? <Loader2 size={16} className="animate-spin" /> : <Trash2 size={16} />}
                        Excluir
                      </button>)}
                    </div>
                  </div>

                  <div className="flex flex-wrap items-center gap-x-5 gap-y-2 border-t border-[var(--ks-color-border-subtle)] bg-[var(--ks-color-surface-muted)] px-5 py-3 text-xs text-[var(--ks-color-text-secondary)]">
                    <span className="inline-flex items-center gap-2">
                      <ShoppingBag className="h-3.5 w-3.5" />
                      #{order.number}
                    </span>
                    <span className="inline-flex items-center gap-2">
                      <Package2 className="h-3.5 w-3.5" />
                      {order.item_count} {order.item_count === 1 ? "item" : "itens"}
                    </span>
                    <span className="inline-flex items-center gap-2">
                      <Wallet className="h-3.5 w-3.5" />
                      {formatMoney(Number(order.total || 0))}
                    </span>
                    <span className="inline-flex items-center gap-2">
                      <UserCircle2 className="h-3.5 w-3.5" />
                      {order.client_id ? "Cliente vinculado" : "Sem vínculo"}
                    </span>
                    <span className={`inline-flex items-center gap-2 ${order.payment_status === "approved" ? "text-emerald-700" : "text-[var(--ks-color-text-secondary)]"}`}>
                      <Wallet className="h-3.5 w-3.5" />
                      {paymentStatusLabel(order.payment_status)}
                    </span>
                    {order.status === "approved" ? (
                      <span className="inline-flex items-center gap-2 text-emerald-700">
                        <ArrowUpRight className="h-3.5 w-3.5" />
                        Convertido em pedido
                      </span>
                    ) : null}
                    {order.status === "canceled" ? (
                      <span className="inline-flex items-center gap-2 text-rose-700">
                        <ArrowDownRight className="h-3.5 w-3.5" />
                        Encerrado sem conversão
                      </span>
                    ) : null}
                  </div>
                </article>
              );
                })}
              </section>
            ))}
          </div>
        )}
      </section>

      <CaixaDeConfirmacao
        pedido={confirmacao}
        ocupado={Boolean(deletingId)}
        aoFechar={() => setConfirmacao(null)}
      />
    </main>
  );
}