import type { Metadata } from "next";
import { getSupabaseClient } from "@/lib/supabase";
import { notFound } from "next/navigation";
import Image from "next/image";
import { PublicQuoteTabs } from "@/components/PublicQuoteActions";
import { cronograma, descreverCondicoes, formatarDia, normalizarCondicoes } from "@/lib/condicoes-comerciais";
import { minimoDaLinhaGravada, ROTULO_DO_MINIMO } from "@/lib/adicionais";

export const revalidate = 0;
export const dynamic = "force-dynamic";
export const dynamicParams = true;
const DISPLAY_TIMEZONE = "America/Sao_Paulo";

interface PublicQuoteProfile {
  id: string;
  store_name: string | null;
  catalog_name: string | null;
  logo_url: string | null;
  catalog_logo_url: string | null;
  quote_signature_required?: boolean | null;
  quote_art_registration_enabled?: boolean | null;
  quote_art_approval_required?: boolean | null;
  quote_default_notes_enabled?: boolean | null;
  quote_default_notes?: string | null;
  cnpj?: string | null;
  phone: string | null;
  company_phone: string | null;
  company_whatsapp?: string | null;
  company_email: string | null;
  address: string | null;
  slug?: string | null;
}

interface PublicQuoteClient {
  id: string;
  name: string;
  company_name: string | null;
  document?: string | null;
  email: string | null;
  phone: string | null;
  whatsapp: string | null;
  address_city?: string | null;
  address_state?: string | null;
}

interface PublicQuoteRow {
  id: string;
  number: number;
  created_at: string;
  updated_at?: string;
  status?: string;
  title: string | null;
  currency: string;
  subtotal: number;
  discount: number;
  shipping: number;
  total: number;
  expires_at: string | null;
  delivery_date?: string | null;
  notes: string | null;
  list_price_mode?: boolean | null;
  payment_terms?: unknown;
}

interface PublicQuoteItem {
  id: string;
  position: number;
  product_id: string | null;
  unit_type: string | null;
  width_m: number | null;
  height_m: number | null;
  length_m: number | null;
  title: string;
  description: string | null;
  quantity: number;
  unit_price: number;
  line_total: number;
  valor_minimo_aplicado?: number | null;
  valor_sem_minimo?: number | null;
  selected_options?: {
    options?: Array<{
      attribute_name?: string | null;
      label?: string | null;
    }>;
  } | null;
  arts?: Array<{
    id: string;
    quote_item_id: string;
    title: string | null;
    notes: string | null;
    image_urls: string[];
    approval_status?: string | null;
    approval_notes?: string | null;
    approved_at?: string | null;
    reviewed_at?: string | null;
    created_at?: string;
    messages?: Array<{
      id: string;
      sender: "client" | "company";
      message: string;
      status?: string | null;
      created_at?: string | null;
      delivered_at?: string | null;
      read_at?: string | null;
    }>;
  }>;
}

interface PublicOrderRow {
  id: string;
  number: number;
  created_at: string;
  updated_at?: string;
  status: string;
  total_amount: number;
  delivery_date?: string | null;
  payment_terms?: unknown;
  share_token?: string | null;
  share_enabled?: boolean | null;
  approval_signature?: string | null;
  approval_signed_at?: string | null;
  approval_signed_name?: string | null;
}

interface PublicOrderItem {
  id: string;
  product_id: string | null;
  unit_type: string | null;
  width_m: number | null;
  height_m: number | null;
  length_m: number | null;
  title: string;
  description: string | null;
  quantity: number;
  unit_price: number;
  total_price: number;
  valor_minimo_aplicado?: number | null;
  valor_sem_minimo?: number | null;
  selected_options?: {
    options?: Array<{
      attribute_name?: string | null;
      label?: string | null;
    }>;
  } | null;
}

interface PublicQuotePayload {
  profile: PublicQuoteProfile;
  quote: PublicQuoteRow;
  client: PublicQuoteClient;
  order: PublicOrderRow | null;
  items: PublicQuoteItem[];
  order_items: PublicOrderItem[];
}

async function fetchPublicQuote(token: string): Promise<PublicQuotePayload | null> {
  const supabase = getSupabaseClient();
  const { data, error } = await supabase.rpc("get_public_quote", { p_token: token });
  if (error || !data) return null;
  return data as unknown as PublicQuotePayload;
}

/* O link de acompanhamento do pedido. O token de status nasce sozinho na
   primeira visita depois da aprovação (função ensure_public_order_status_token),
   para o cliente não depender de alguém gerar e mandar. Se o admin desligou
   o compartilhamento do pedido, não há link. */
async function tokenDeAcompanhamento(quoteToken: string, order: PublicOrderRow | null) {
  if (!order?.id || order.share_enabled === false) return null;
  const atual = String(order.share_token || "").trim();
  if (atual) return atual;
  const supabase = getSupabaseClient();
  const { data, error } = await supabase.rpc("ensure_public_order_status_token", { p_token: quoteToken });
  if (error || typeof data !== "string" || !data.trim()) return null;
  return data.trim();
}

async function fetchProfileNotes(profileId: string): Promise<{ quote_default_notes_enabled: boolean | null; quote_default_notes: string | null }> {
  const supabase = getSupabaseClient();
  const { data } = await supabase
    .from("profiles")
    .select("quote_default_notes_enabled, quote_default_notes")
    .eq("id", profileId)
    .maybeSingle();
  return {
    quote_default_notes_enabled: (data as { quote_default_notes_enabled?: boolean | null } | null)?.quote_default_notes_enabled ?? null,
    quote_default_notes: (data as { quote_default_notes?: string | null } | null)?.quote_default_notes ?? null,
  };
}

function formatMoney(currency: string, value: number) {
  const resolvedCurrency = currency || "BRL";
  return new Intl.NumberFormat("pt-BR", { style: "currency", currency: resolvedCurrency }).format(value || 0);
}

function getSelectedOptionsSummary(
  selectedOptions:
    | {
        options?: Array<{
          attribute_name?: string | null;
          label?: string | null;
        }>;
      }
    | null
    | undefined
) {
  const options = Array.isArray(selectedOptions?.options) ? selectedOptions.options : [];
  return options
    .map((option) => {
      const attribute = String(option.attribute_name || "").trim();
      const label = String(option.label || "").trim();
      if (!attribute && !label) return "";
      if (!attribute) return label;
      if (!label) return attribute;
      return `${attribute}: ${label}`;
    })
    .filter(Boolean)
    .join(" • ");
}

function formatDateBr(value: string | null | undefined) {
  if (!value) return "";
  const normalized = value.split("T")[0];
  const parts = normalized.split("-");
  if (parts.length === 3 && parts[0].length === 4) {
    const [y, m, d] = parts;
    return `${d}/${m}/${y}`;
  }
  const dt = new Date(value);
  if (!Number.isFinite(dt.getTime())) return normalized;
  return dt.toLocaleDateString("pt-BR", { timeZone: DISPLAY_TIMEZONE });
}

function formatDateTimeBr(value: string | null | undefined) {
  if (!value) return "";
  const dt = new Date(value);
  if (!Number.isFinite(dt.getTime())) return "";
  return dt.toLocaleString("pt-BR", { dateStyle: "short", timeStyle: "short", timeZone: DISPLAY_TIMEZONE });
}

/* Telefone e WhatsApp: número que vem só com dígitos (com ou sem +55) ganha
   máscara (DD) 9XXXX-XXXX; o que já veio escrito fica como está. */
function formatarTelefone(valor: string | null | undefined) {
  const texto = (valor || "").trim();
  if (!texto || !/^\+?\d+$/.test(texto)) return texto;
  let digitos = texto.replace(/\D/g, "");
  if ((digitos.length === 12 || digitos.length === 13) && digitos.startsWith("55")) digitos = digitos.slice(2);
  if (digitos.length === 11) return digitos.replace(/(\d{2})(\d{5})(\d{4})/, "($1) $2-$3");
  if (digitos.length === 10) return digitos.replace(/(\d{2})(\d{4})(\d{4})/, "($1) $2-$3");
  return texto;
}

/* Os contatos da empresa numa linha só na folha do orçamento, sem repetir
   telefone e WhatsApp quando são o mesmo número. */
function contatosDaEmpresa(telefone?: string | null, whatsapp?: string | null, email?: string | null) {
  const tel = formatarTelefone(telefone);
  const zap = formatarTelefone(whatsapp);
  const partes: string[] = [];
  if (tel && zap && tel === zap) partes.push(`Tel./WhatsApp ${tel}`);
  else {
    if (tel) partes.push(`Tel. ${tel}`);
    if (zap) partes.push(`WhatsApp ${zap}`);
  }
  const mail = (email || "").trim();
  if (mail) partes.push(mail);
  return partes.join("  ·  ");
}

/* CPF e CNPJ com máscara na folha; qualquer outra coisa sai como veio. */
function formatarDocumento(valor: string | null | undefined) {
  const digitos = (valor || "").replace(/\D/g, "");
  if (digitos.length === 11) return `CPF ${digitos.replace(/(\d{3})(\d{3})(\d{3})(\d{2})/, "$1.$2.$3-$4")}`;
  if (digitos.length === 14) return `CNPJ ${digitos.replace(/(\d{2})(\d{3})(\d{3})(\d{4})(\d{2})/, "$1.$2.$3/$4-$5")}`;
  const texto = (valor || "").trim();
  return texto ? `Documento ${texto}` : "";
}

/* Rótulos e títulos de seção da folha do orçamento. */
const ROTULO_DO_DOCUMENTO = "mb-1 text-[9.5px] font-bold uppercase tracking-[0.14em] text-zinc-500";
const TITULO_DE_SECAO_DO_DOCUMENTO =
  "mb-1.5 border-b border-zinc-300 pb-1 text-[10px] font-bold uppercase tracking-[0.14em] text-zinc-600";

export async function generateMetadata(props: { params: Promise<{ slug: string; token: string }> }): Promise<Metadata> {
  const params = await props.params;
  const data = await fetchPublicQuote(params.token);
  const storeName = data?.profile.catalog_name || data?.profile.store_name || "Loja";
  const quoteNumber = data?.quote?.number ? `#${data.quote.number}` : "";
  const isListPriceMode = Boolean(data?.quote?.list_price_mode);
  const title = `${quoteNumber ? `${isListPriceMode ? "LISTA DE PREÇOS" : "ORÇAMENTO"} ${quoteNumber}` : isListPriceMode ? "LISTA DE PREÇOS" : "ORÇAMENTO"} | ${storeName}`;
  const description = "Seu orçamento está pronto, veja no link e aprove online";
  const imageUrl = data?.profile.logo_url || data?.profile.catalog_logo_url || "/brand-logo.svg";

  return {
    title: { absolute: title },
    description,
    openGraph: {
      type: "article",
      locale: "pt_BR",
      siteName: storeName,
      title,
      description,
      images: [
        {
          url: imageUrl,
          alt: storeName,
        },
      ],
    },
    twitter: {
      card: "summary_large_image",
      title,
      description,
      images: [imageUrl],
    },
  };
}

export default async function PublicQuotePage(props: { params: Promise<{ slug: string; token: string }> }) {
  const params = await props.params;
  const { slug, token } = params;

  // 1. Tenta carregar dados pelo token
  const data = await fetchPublicQuote(token);
  if (!data) return notFound();

  // Validar se o slug da URL bate com o slug da loja do orçamento
  // Isso é importante para segurança e consistência
  // Mas vamos ser flexíveis se o slug do perfil não estiver configurado (legacy support)
  if (data.profile.slug && data.profile.slug !== slug) {
     // Logar discrepância, mas talvez permitir se for crítico?
     // O usuário reclamou de 404, então provavelmente o slug estava errado na URL.
     // Mas se o usuário quer "slug e token", vamos validar.
     // Se não bater, é 404.
     // return notFound();
     // EDIT: Vamos ser permissivos por enquanto para evitar quebrar links antigos se o slug mudar
     // Mas idealmente redirecionaríamos para a URL correta.
  }

  const { profile: profileFromRpc, quote, client, items, order, order_items } = data;

  // A RPC não retorna campos adicionados após sua criação. Busca separada para observação padrão.
  const profileNotes = await fetchProfileNotes(profileFromRpc.id);
  const profile = { ...profileFromRpc, ...profileNotes };
  /* Relativo de propósito: de /loja/o/<token> vai para /loja/status/<token>
     e, num domínio próprio, de /o/<token> para /status/<token>. */
  const tokenDeStatus = await tokenDeAcompanhamento(token, order);
  const linkDeAcompanhamento = tokenDeStatus ? `../status/${tokenDeStatus}` : null;

  const logoUrl = profile?.logo_url || profile?.catalog_logo_url || "";
  const requireSignature = Boolean(profile?.quote_signature_required);
  const artRegistrationEnabled = Boolean(profile?.quote_art_registration_enabled);
  const artApprovalRequired = Boolean(profile?.quote_art_approval_required);
  const currency = quote?.currency || "BRL";
  const subtotal = Number(quote?.subtotal) || 0;
  const discount = Number(quote?.discount) || 0;
  const shipping = Number(quote?.shipping) || 0;
  const total = Number(quote?.total) || Math.max(0, subtotal - discount + shipping);
  const isListPriceMode = Boolean(quote?.list_price_mode);
  const orderNumber = order?.number ?? null;
  const hasOrder = Boolean(order?.id);
  /* As condições de pagamento: depois de aprovado, valem as do pedido (o
     retrato da aprovação); antes, as da proposta. Em Lista de Preço os
     valores ficam de fora. */
  const condicoes = normalizarCondicoes(hasOrder ? order?.payment_terms : quote?.payment_terms);
  const totalDasCondicoes = isListPriceMode ? 0 : hasOrder ? Number(order?.total_amount) || total : total;
  const condicoesEscritas = condicoes ? descreverCondicoes(condicoes, totalDasCondicoes) : null;
  const parcelas = condicoes
    ? cronograma(condicoes, totalDasCondicoes, {
        aprovacao: hasOrder ? order?.created_at : null,
        entrega: (hasOrder ? order?.delivery_date : null) ?? quote?.delivery_date ?? null,
      })
    : [];
  const mostraParcelas = parcelas.length > 1 || parcelas.some((parcela) => parcela.vencimento);
  const orderItems = Array.isArray(order_items) ? order_items : [];
  const rawItems = hasOrder && orderItems.length > 0
    ? orderItems.map((orderItem, index) => {
        const quoteItem = items[index];
        return {
          ...orderItem,
          description: orderItem.description ?? quoteItem?.description ?? null,
          selected_options: orderItem.selected_options ?? quoteItem?.selected_options ?? null,
        };
      })
    : items;
  const displayItems = rawItems.map((it) => {
    const lineTotal = "total_price" in it ? Number(it.total_price) || 0 : Number(it.line_total) || 0;
    return {
      id: it.id,
      unit_type: it.unit_type,
      width_m: it.width_m,
      height_m: it.height_m,
      length_m: it.length_m,
      title: it.title,
      description: it.description,
      quantity: Number(it.quantity) || 0,
      unit_price: Number(it.unit_price) || 0,
      line_total: lineTotal,
      /* Valor mínimo do item (migrations 194/195): a linha vale o mínimo. */
      minimo: minimoDaLinhaGravada(it),
      selected_options: it.selected_options || null,
      arts: "arts" in it ? (Array.isArray(it.arts) ? it.arts : []) : [],
    };
  });
  const orderItemsTotal = displayItems.reduce((acc, it) => acc + (Number(it.line_total) || 0), 0);
  const resolvedTotal = hasOrder ? (Number(order?.total_amount) || orderItemsTotal) : total;
  const artGroups = Array.isArray(items) && artRegistrationEnabled
    ? items
        .map((it, index) => ({
          itemId: it.id,
          itemIndex: Number.isFinite(it.position) && Number(it.position) > 0 ? Number(it.position) : index + 1,
          itemTitle: it.title,
          itemDescription: it.description,
          arts: Array.isArray(it.arts) ? it.arts : [],
        }))
        .filter((group) => group.arts.length > 0)
    : [];
  const approvalSignature = order?.approval_signature || "";
  const approvalSignedName = order?.approval_signed_name || "";
  const approvalSignedAt = order?.approval_signed_at || null;
  
  // AQUI: Removemos a timeline de status do pedido para focar apenas no orçamento/pedido em si.
  // A timeline agora fica na rota /status/[token].
  
  const nomeDaEmpresa = profile?.catalog_name || profile?.store_name || "Empresa";
  const contatos = contatosDaEmpresa(
    profile?.company_phone || profile?.phone,
    profile?.company_whatsapp || profile?.phone,
    profile?.company_email
  );
  const rotuloDoDocumento = isListPriceMode ? "LISTA DE PREÇOS" : hasOrder ? "PEDIDO" : "ORÇAMENTO";
  const statusDoPedido =
    {
      pending_production: "Aguardando produção",
      in_production: "Em produção",
      finished: "Finalizado",
      delivered: "Entregue",
      canceled: "Cancelado",
    }[order?.status || ""] || "Em andamento";
  const documentoDoCliente = formatarDocumento(client?.document);
  const contatosDoCliente = [
    documentoDoCliente,
    client?.whatsapp ? `WhatsApp ${formatarTelefone(client.whatsapp)}` : "",
    client?.email ? client.email : "",
  ]
    .filter(Boolean)
    .join("  ·  ");
  const mostraDetalhes = hasOrder || Boolean(quote?.expires_at || quote?.delivery_date);

  /* A folha: uma página limpa, sem caixas. Cabeçalho com a empresa e o
     número, cliente e detalhes lado a lado, tabela de itens com filetes,
     totais, condições, assinatura, observações e rodapé. É o mesmo desenho do
     PDF do admin. */
  const quoteContent = (
    <div className="documento mt-8 text-[12px] leading-[1.45] text-zinc-900 print:mt-0">
      <div className="documento-secao flex flex-col gap-4 border-b-2 border-zinc-900 pb-4 sm:flex-row sm:items-start sm:justify-between sm:gap-6">
        <div className="flex min-w-0 items-start gap-4">
          {logoUrl && (
            <Image
              src={logoUrl}
              alt="Logo"
              className="h-14 w-auto max-w-[150px] object-contain"
              width={160}
              height={56}
              unoptimized
            />
          )}
          <div className="min-w-0">
            <div className="text-[17px] font-bold leading-tight text-zinc-900">{nomeDaEmpresa}</div>
            <div className="mt-1 space-y-0.5 text-[11px] leading-snug text-zinc-600">
              {profile?.cnpj && <div>CNPJ {profile.cnpj}</div>}
              {profile?.address && <div>{profile.address}</div>}
              {contatos && <div>{contatos}</div>}
            </div>
          </div>
        </div>
        <div className="shrink-0 sm:text-right">
          <div className="text-[10px] font-semibold uppercase tracking-[0.2em] text-zinc-500" data-quote-type-target>
            {rotuloDoDocumento}
          </div>
          <div className="mt-0.5 text-[26px] font-black leading-none tracking-tight text-zinc-900" data-order-number-target>
            #{orderNumber ?? quote?.number ?? ""}
          </div>
          {(hasOrder ? order?.created_at : quote?.created_at) && (
            <div className="mt-2 text-[11px] text-zinc-600">
              Emitido em {formatDateBr(hasOrder ? order?.created_at : quote?.created_at)}
            </div>
          )}
        </div>
      </div>

      <div className="documento-secao mt-4 grid grid-cols-1 gap-4 border-b border-zinc-200 pb-4 sm:grid-cols-[1.35fr_1fr] sm:gap-8">
        <div className="min-w-0">
          <div className={ROTULO_DO_DOCUMENTO}>{hasOrder ? "Cliente do pedido" : "Cliente"}</div>
          <div className="text-[13px] font-semibold text-zinc-900">{client?.company_name || client?.name || ""}</div>
          {client?.company_name && client?.name ? <div className="text-[12px] text-zinc-700">{client.name}</div> : null}
          {contatosDoCliente && <div className="mt-0.5 text-[11px] text-zinc-600">{contatosDoCliente}</div>}
        </div>
        {mostraDetalhes && (
          <div>
            <div className={ROTULO_DO_DOCUMENTO}>Detalhes</div>
            <dl className="grid grid-cols-[auto_1fr] gap-x-3 gap-y-0.5 text-[11px]">
              {hasOrder && (
                <>
                  <dt className="text-zinc-500">Status do pedido</dt>
                  <dd className="font-medium text-zinc-900">
                    {statusDoPedido}
                    {order?.updated_at && (
                      <span className="font-normal text-zinc-500"> · atualizado em {formatDateTimeBr(order.updated_at)}</span>
                    )}
                  </dd>
                  <dt className="text-zinc-500">Orçamento de origem</dt>
                  <dd className="font-medium text-zinc-900">#{quote?.number ?? ""}</dd>
                </>
              )}
              {!hasOrder && quote?.expires_at && (
                <>
                  <dt className="text-zinc-500">Validade da proposta</dt>
                  <dd className="font-medium text-zinc-900">{formatDateBr(quote.expires_at)}</dd>
                </>
              )}
              {quote?.delivery_date && (
                <>
                  <dt className="text-zinc-500">{hasOrder ? "Previsão de entrega" : "Entrega prevista"}</dt>
                  <dd className="font-medium text-zinc-900">{formatDateBr(quote.delivery_date)}</dd>
                </>
              )}
            </dl>
          </div>
        )}
      </div>

      {quote?.title && <div className="mt-4 text-[14px] font-semibold text-zinc-900">{quote.title}</div>}

      {/* data-leitura: as partes que a leitura do orçamento anota quando
          aparecem na tela (lib/leitura-do-orcamento.ts). */}
      <table className="mt-3 hidden w-full border-collapse md:table print:table" data-leitura="itens">
        <thead>
          <tr className="border-b-[1.5px] border-zinc-900 text-[9.5px] font-bold uppercase tracking-[0.12em] text-zinc-500">
            <th className="w-7 py-1.5 pr-2 text-left font-bold">#</th>
            <th className="py-1.5 pr-2 text-left font-bold">Descrição</th>
            <th className="w-[17%] px-2 py-1.5 text-left font-bold">Tamanho</th>
            <th className="w-[9%] px-2 py-1.5 text-right font-bold">Qtd</th>
            <th className="w-[15%] px-2 py-1.5 text-right font-bold">Unitário</th>
            <th className="w-[16%] py-1.5 pl-2 text-right font-bold">Total</th>
          </tr>
        </thead>
        <tbody>
          {displayItems.map((it, idx) => {
            const unitType = String(it.unit_type || "unit");
            const quantity = Number(it.quantity) || 0;
            const unitPrice = Number(it.unit_price) || 0;
            const lineTotal = Number(it.line_total) || quantity * unitPrice;
            const selectedOptionsSummary = getSelectedOptionsSummary(it.selected_options);
            const width = Number(it.width_m) || 0;
            const height = Number(it.height_m) || 0;
            const length = Number(it.length_m) || 0;
            const sizeLabel =
              unitType === "square_meter" && width > 0 && height > 0
                ? `${String(width).replace(".", ",")}m x ${String(height).replace(".", ",")}m`
                : (unitType === "linear_meter" || unitType === "meter") && length > 0
                  ? `${String(length).replace(".", ",")}m`
                  : "—";
            const area = width * height;
            const displayUnitPrice = unitType === "square_meter" && area > 0 ? area * unitPrice : unitPrice;
            return (
              <tr key={it.id || String(idx)} className="border-b border-zinc-200 align-top">
                <td className="py-2 pr-2 text-zinc-500 tabular-nums">{idx + 1}</td>
                <td className="py-2 pr-2">
                  <div className="font-semibold text-zinc-900">{it.title || "Item"}</div>
                  {selectedOptionsSummary ? (
                    <div className="mt-0.5 text-[11px] text-zinc-600">Variações: {selectedOptionsSummary}</div>
                  ) : null}
                  {it.description ? (
                    <div className="mt-0.5 whitespace-pre-wrap text-[11px] text-zinc-600">Obs.: {it.description}</div>
                  ) : null}
                  {it.minimo ? (
                    <div className="mt-1">
                      <span className="inline-block rounded-sm bg-zinc-900 px-1.5 py-0.5 text-[9.5px] font-bold uppercase tracking-[0.06em] text-white print:border print:border-zinc-900 print:bg-white print:text-zinc-900">
                        {ROTULO_DO_MINIMO}
                      </span>
                    </div>
                  ) : null}
                </td>
                <td className="px-2 py-2 text-zinc-700">{sizeLabel}</td>
                <td className="px-2 py-2 text-right text-zinc-900 tabular-nums">{quantity}</td>
                <td className="px-2 py-2 text-right text-zinc-900 tabular-nums">
                  {it.minimo ? "Valor mínimo" : formatMoney(currency, displayUnitPrice)}
                </td>
                <td className="py-2 pl-2 text-right font-semibold text-zinc-900 tabular-nums">{formatMoney(currency, lineTotal)}</td>
              </tr>
            );
          })}
        </tbody>
      </table>

      {/* No celular a tabela vira uma lista corrida: as mesmas informações,
          uma linha por item, com filete entre elas. */}
      <div className="mt-3 divide-y divide-zinc-200 border-y border-zinc-900 md:hidden print:hidden" data-leitura="itens">
        {displayItems.map((it, idx) => {
          const unitType = String(it.unit_type || "unit");
          const quantity = Number(it.quantity) || 0;
          const unitPrice = Number(it.unit_price) || 0;
          const lineTotal = Number(it.line_total) || quantity * unitPrice;
          const selectedOptionsSummary = getSelectedOptionsSummary(it.selected_options);
          const width = Number(it.width_m) || 0;
          const height = Number(it.height_m) || 0;
          const length = Number(it.length_m) || 0;
          const sizeLabel =
            unitType === "square_meter" && width > 0 && height > 0
              ? `${String(width).replace(".", ",")}m x ${String(height).replace(".", ",")}m`
              : (unitType === "linear_meter" || unitType === "meter") && length > 0
                ? `${String(length).replace(".", ",")}m`
                : "";
          const area = width * height;
          const displayUnitPrice = unitType === "square_meter" && area > 0 ? area * unitPrice : unitPrice;

          return (
            <div key={it.id || String(idx)} className="flex items-start gap-3 py-2.5">
              <div className="w-5 shrink-0 pt-px text-[11px] text-zinc-500 tabular-nums">{idx + 1}</div>
              <div className="min-w-0 flex-1">
                <div className="text-[13px] font-semibold text-zinc-900">{it.title || "Item"}</div>
                {selectedOptionsSummary ? (
                  <div className="mt-0.5 text-[11px] text-zinc-600">Variações: {selectedOptionsSummary}</div>
                ) : null}
                {it.description ? (
                  <div className="mt-0.5 whitespace-pre-wrap text-[11px] text-zinc-600">Obs.: {it.description}</div>
                ) : null}
                <div className="mt-1 text-[11px] text-zinc-600 tabular-nums">
                  {it.minimo ? `${quantity} · Valor mínimo` : `${quantity} × ${formatMoney(currency, displayUnitPrice)}`}
                  {sizeLabel ? ` · ${sizeLabel}` : ""}
                </div>
                {it.minimo ? (
                  <div className="mt-1">
                    <span className="inline-block rounded-sm bg-zinc-900 px-1.5 py-0.5 text-[9.5px] font-bold uppercase tracking-[0.06em] text-white">
                      {ROTULO_DO_MINIMO}
                    </span>
                  </div>
                ) : null}
              </div>
              <div className="shrink-0 text-right text-[13px] font-semibold text-zinc-900 tabular-nums">{formatMoney(currency, lineTotal)}</div>
            </div>
          );
        })}
      </div>

      {!isListPriceMode && (
        <div className="documento-secao mt-3 flex justify-end" data-leitura="total">
          {hasOrder ? (
            <table className="w-full max-w-[300px] text-[12px]">
              <tbody>
                <tr className="border-t-[1.5px] border-zinc-900">
                  <td className="pt-1.5 text-[13px] font-bold text-zinc-900">Total do pedido</td>
                  <td className="pt-1.5 text-right text-[18px] font-black leading-none text-zinc-900 tabular-nums">{formatMoney(currency, resolvedTotal)}</td>
                </tr>
              </tbody>
            </table>
          ) : (
            <table className="w-full max-w-[300px] text-[12px]">
              <tbody>
                <tr>
                  <td className="py-0.5 text-zinc-600">Subtotal</td>
                  <td className="py-0.5 text-right text-zinc-900 tabular-nums">{formatMoney(currency, subtotal)}</td>
                </tr>
                {discount > 0 && (
                  <tr>
                    <td className="py-0.5 text-zinc-600">Desconto</td>
                    <td className="py-0.5 text-right text-zinc-900 tabular-nums">- {formatMoney(currency, discount)}</td>
                  </tr>
                )}
                {shipping > 0 && (
                  <tr>
                    <td className="py-0.5 text-zinc-600">Frete</td>
                    <td className="py-0.5 text-right text-zinc-900 tabular-nums">+ {formatMoney(currency, shipping)}</td>
                  </tr>
                )}
                <tr className="border-t-[1.5px] border-zinc-900">
                  <td className="pt-1.5 text-[13px] font-bold text-zinc-900">Total</td>
                  <td className="pt-1.5 text-right text-[18px] font-black leading-none text-zinc-900 tabular-nums">{formatMoney(currency, total)}</td>
                </tr>
              </tbody>
            </table>
          )}
        </div>
      )}

      {condicoes && condicoesEscritas && (
        <div className="documento-secao mt-5" data-leitura="condicoes">
          <div className={TITULO_DE_SECAO_DO_DOCUMENTO}>Condições de pagamento</div>
          <div className="text-[12px] text-zinc-800">{condicoesEscritas.pagamento}</div>
          {condicoesEscritas.formas && (
            <div className="text-[12px] text-zinc-700">Formas de pagamento: {condicoesEscritas.formas}</div>
          )}
          {mostraParcelas && (
            <table className="mt-2 w-full text-[11px]">
              <thead>
                <tr className="border-b border-zinc-300 text-left text-[9.5px] font-bold uppercase tracking-[0.12em] text-zinc-500">
                  <th className="py-1 pr-2 font-bold">Parcela</th>
                  <th className="py-1 pr-2 font-bold">Quando</th>
                  <th className="py-1 pr-2 font-bold">Vencimento</th>
                  {!isListPriceMode && <th className="py-1 text-right font-bold">Valor</th>}
                </tr>
              </thead>
              <tbody>
                {parcelas.map((parcela) => (
                  <tr key={parcela.numero} className="border-b border-zinc-100">
                    <td className="py-1 pr-2 font-medium text-zinc-900">{parcela.rotulo}</td>
                    <td className="py-1 pr-2 text-zinc-700">{parcela.quando}</td>
                    <td className="py-1 pr-2 text-zinc-700">{parcela.vencimento ? formatarDia(parcela.vencimento) : "—"}</td>
                    {!isListPriceMode && (
                      <td className="py-1 text-right font-semibold text-zinc-900 tabular-nums">{formatMoney(currency, parcela.valor)}</td>
                    )}
                  </tr>
                ))}
              </tbody>
            </table>
          )}
          {condicoesEscritas.observacoes && (
            <div className="mt-2 whitespace-pre-wrap text-[11px] text-zinc-600">{condicoesEscritas.observacoes}</div>
          )}
        </div>
      )}

      {hasOrder && approvalSignature && (
        <div className="documento-secao mt-5">
          <div className={TITULO_DE_SECAO_DO_DOCUMENTO}>Aprovação do cliente</div>
          <div className="flex flex-wrap items-end gap-6">
            <Image
              src={approvalSignature}
              alt="Assinatura do cliente"
              width={600}
              height={96}
              sizes="100vw"
              className="h-16 w-auto max-w-[260px] object-contain object-left"
              unoptimized
            />
            <div className="text-[11px] text-zinc-600">
              <div className="font-medium text-zinc-900">{approvalSignedName || "Assinatura digital"}</div>
              {documentoDoCliente && <div>{documentoDoCliente}</div>}
              {approvalSignedAt && <div>{formatDateBr(approvalSignedAt)}</div>}
            </div>
          </div>
        </div>
      )}

      {(profile?.quote_default_notes_enabled && profile?.quote_default_notes) || quote?.notes ? (
        <div className="documento-secao mt-5" data-leitura="observacoes">
          <div className={TITULO_DE_SECAO_DO_DOCUMENTO}>Observações</div>
          <div className="space-y-2 text-[11.5px] leading-relaxed text-zinc-700">
            {profile?.quote_default_notes_enabled && profile?.quote_default_notes && (
              <div className="whitespace-pre-wrap">{profile.quote_default_notes}</div>
            )}
            {quote?.notes && <div className="whitespace-pre-wrap">{quote.notes}</div>}
          </div>
        </div>
      ) : null}
    </div>
  );

  return (
    <div className="min-h-screen bg-zinc-50 print:min-h-0 print:bg-white">
      <div className="mx-auto max-w-[920px] p-3 sm:p-6 print:max-w-none print:p-0">
        <div className="documento-folha rounded-2xl border border-zinc-200 bg-white p-5 sm:p-8 print:rounded-none print:border-0 print:p-0">
          <PublicQuoteTabs
            token={token}
            quoteId={quote.id}
            quoteNumber={quote.number}
            notificationTargetId={profile.id}
            orderNumber={orderNumber}
            currency={currency}
            total={total}
            status={quote.status}
            logoUrl={logoUrl}
            artGroups={artGroups}
            requireSignature={requireSignature}
            artRegistrationEnabled={artRegistrationEnabled}
            artApprovalRequired={artApprovalRequired}
            hideTotalInPublic={isListPriceMode}
            statusLink={linkDeAcompanhamento}
            quoteContent={quoteContent}
          />
        </div>
      </div>
      <style>{`
        @media print {
          @page {
            size: A4;
            margin: 14mm;
          }
          .print-hidden {
            display: none !important;
          }
          body {
            background: #fff !important;
          }
          /* A folha impressa: sem o cartão da tela; o cabeçalho da tabela
             repete a cada página e nenhuma linha ou seção fica partida. */
          .documento-folha {
            border: 0 !important;
            border-radius: 0 !important;
            padding: 0 !important;
          }
          .documento thead {
            display: table-header-group;
          }
          .documento tr,
          .documento .documento-secao,
          .documento img {
            break-inside: avoid;
            page-break-inside: avoid;
          }
        }
      `}</style>
    </div>
  );
}