import { useEffect, useMemo, useState } from "react";
import { createFileRoute } from "@tanstack/react-router";
import jsPDF from "jspdf";
import autoTable from "jspdf-autotable";
import { DEFAULT_CATALOG, EMPRESA, type Catalog } from "@/lib/catalog";
import logoUrl from "@/assets/logo.png";

type TipoDesconto = "valor" | "percent";

export const Route = createFileRoute("/")({
  head: () => ({
    meta: [
      { title: "Orçamentos — Viveiro Valdemar Depiné" },
      {
        name: "description",
        content:
          "Sistema de orçamentos do Viveiro Valdemar Depiné. Mudas frutíferas, nativas e ornamentais. Geração de PDF, envio por WhatsApp.",
      },
    ],
  }),
  component: OrcamentoApp,
});

interface ItemOrcamento {
  id: string;
  categoria: string;
  nome: string;
  preco: number;
  quantidade: number;
}

interface Cliente {
  nome: string;
  telefone: string;
  cidade: string;
  observacoes: string;
}

const LS_PRECOS = "vvd:precos";
const LS_TEMA = "vvd:tema";
const LS_NUMERO = "vvd:numero";
const LS_CLIENTE = "vvd:cliente";
const LS_ITENS = "vvd:itens";
const LS_FIN = "vvd:fin";
const LS_VALIDADE = "vvd:validade";

const LS_FRETE_GRATIS = "vvd:fretegratis";
const LS_TIPO_DESC = "vvd:tipodesc";

function brl(n: number) {
  return n.toLocaleString("pt-BR", { style: "currency", currency: "BRL" });
}
function maskTel(v: string) {
  const d = v.replace(/\D/g, "").slice(0, 11);
  if (d.length <= 10)
    return d.replace(/^(\d{0,2})(\d{0,4})(\d{0,4}).*/, (_, a, b, c) =>
      [a && `(${a}`, a && a.length === 2 ? ") " : "", b, c && `-${c}`].filter(Boolean).join(""),
    );
  return d.replace(/^(\d{2})(\d{5})(\d{0,4}).*/, "($1) $2-$3");
}

function loadJSON<T>(key: string, fallback: T): T {
  if (typeof window === "undefined") return fallback;
  try {
    const raw = localStorage.getItem(key);
    return raw ? (JSON.parse(raw) as T) : fallback;
  } catch {
    return fallback;
  }
}

function OrcamentoApp() {
  const [tema, setTema] = useState<"light" | "dark">("light");
  const [catalogo, setCatalogo] = useState<Catalog>(DEFAULT_CATALOG);
  const [categoriaSel, setCategoriaSel] = useState<string>("Todas");
  const [busca, setBusca] = useState("");
  const [cliente, setCliente] = useState<Cliente>({
    nome: "",
    telefone: "",
    cidade: "",
    observacoes: "",
  });
  const [itens, setItens] = useState<ItemOrcamento[]>([]);
  const [desconto, setDesconto] = useState(0);
  const [tipoDesconto, setTipoDesconto] = useState<TipoDesconto>("valor");
  const [frete, setFrete] = useState(0);
  const [freteGratis, setFreteGratis] = useState(false);
  const [numero, setNumero] = useState(1);
  const [validadeDias, setValidadeDias] = useState(7);
  const [toast, setToast] = useState<string | null>(null);
  const [logoData, setLogoData] = useState<string | null>(null);
  const [mounted, setMounted] = useState(false);

  // Load persisted state
  useEffect(() => {
    setMounted(true);
    const t = (localStorage.getItem(LS_TEMA) as "light" | "dark") || "light";
    setTema(t);
    const precos = loadJSON<Catalog | null>(LS_PRECOS, null);
    if (precos) setCatalogo(precos);
    setNumero(loadJSON<number>(LS_NUMERO, 1));
    setCliente(loadJSON<Cliente>(LS_CLIENTE, cliente));
    setItens(loadJSON<ItemOrcamento[]>(LS_ITENS, []));
    const fin = loadJSON<{ desconto: number; frete: number }>(LS_FIN, { desconto: 0, frete: 0 });
    setDesconto(fin.desconto);
    setFrete(fin.frete);
    setFreteGratis(loadJSON<boolean>(LS_FRETE_GRATIS, false));
    setTipoDesconto(loadJSON<TipoDesconto>(LS_TIPO_DESC, "valor"));
    setValidadeDias(loadJSON<number>(LS_VALIDADE, 7));

    // Carrega o logo como dataURL para uso no PDF
    fetch(logoUrl)
      .then((r) => r.blob())
      .then(
        (b) =>
          new Promise<string>((res, rej) => {
            const fr = new FileReader();
            fr.onload = () => res(fr.result as string);
            fr.onerror = rej;
            fr.readAsDataURL(b);
          }),
      )
      .then(setLogoData)
      .catch(() => {});
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  useEffect(() => {
    document.documentElement.classList.toggle("dark", tema === "dark");
    localStorage.setItem(LS_TEMA, tema);
  }, [tema]);

  useEffect(() => localStorage.setItem(LS_PRECOS, JSON.stringify(catalogo)), [catalogo]);
  useEffect(() => localStorage.setItem(LS_CLIENTE, JSON.stringify(cliente)), [cliente]);
  useEffect(() => localStorage.setItem(LS_ITENS, JSON.stringify(itens)), [itens]);
  useEffect(
    () => localStorage.setItem(LS_FIN, JSON.stringify({ desconto, frete })),
    [desconto, frete],
  );
  useEffect(
    () => localStorage.setItem(LS_FRETE_GRATIS, JSON.stringify(freteGratis)),
    [freteGratis],
  );
  useEffect(() => localStorage.setItem(LS_TIPO_DESC, JSON.stringify(tipoDesconto)), [tipoDesconto]);
  useEffect(() => localStorage.setItem(LS_NUMERO, JSON.stringify(numero)), [numero]);
  useEffect(() => localStorage.setItem(LS_VALIDADE, JSON.stringify(validadeDias)), [validadeDias]);

  const categorias = useMemo(() => ["Todas", ...Object.keys(catalogo)], [catalogo]);

  const produtosFiltrados = useMemo(() => {
    const q = busca.trim().toLowerCase();
    const cats = categoriaSel === "Todas" ? Object.keys(catalogo) : [categoriaSel];
    const out: { categoria: string; nome: string; preco: number }[] = [];
    for (const c of cats) {
      for (const p of catalogo[c] || []) {
        if (!q || p.nome.toLowerCase().includes(q) || c.toLowerCase().includes(q))
          out.push({ categoria: c, ...p });
      }
    }
    return out.slice(0, 80);
  }, [catalogo, categoriaSel, busca]);

  const subtotal = itens.reduce((s, i) => s + i.preco * i.quantidade, 0);
  // Desconto incide somente sobre o subtotal das plantas (sem frete)
  const descontoValor =
    tipoDesconto === "percent"
      ? subtotal * (Math.min(100, Math.max(0, desconto || 0)) / 100)
      : Math.max(0, desconto || 0);
  const freteValor = Math.max(0, frete || 0);
  // Quando frete grátis, gera um desconto equivalente ao valor do frete
  const descontoFrete = freteGratis ? freteValor : 0;
  const totalFinal = Math.max(0, subtotal - descontoValor + freteValor - descontoFrete);

  const dataAtual = useMemo(() => {
    if (!mounted) return "";
    const d = new Date();
    return d.toLocaleDateString("pt-BR");
  }, [mounted]);
  

  const numeroFmt = String(numero).padStart(4, "0");

  function showToast(msg: string) {
    setToast(msg);
    setTimeout(() => setToast(null), 2400);
  }

  function addProduto(categoria: string, nome: string, preco: number) {
    const id = `${categoria}::${nome}::${Date.now()}`;
    setItens((arr) => [...arr, { id, categoria, nome, preco, quantidade: 1 }]);
  }
  function updateItem(id: string, patch: Partial<ItemOrcamento>) {
    setItens((arr) =>
      arr.map((i) =>
        i.id === id
          ? {
              ...i,
              ...patch,
              quantidade: Math.max(1, Number(patch.quantidade ?? i.quantidade) || 1),
              preco: Math.max(0, Number(patch.preco ?? i.preco) || 0),
            }
          : i,
      ),
    );
  }
  function removeItem(id: string) {
    setItens((arr) => arr.filter((i) => i.id !== id));
  }

  function updateCatalogPreco(categoria: string, nome: string, preco: number) {
    setCatalogo((c) => ({
      ...c,
      [categoria]: c[categoria].map((p) => (p.nome === nome ? { ...p, preco } : p)),
    }));
  }

  function novoOrcamento() {
    if (!confirm("Iniciar novo orçamento? Os dados atuais serão limpos.")) return;
    setCliente({ nome: "", telefone: "", cidade: "", observacoes: "" });
    setItens([]);
    setDesconto(0);
    setFrete(0);
    setFreteGratis(false);
    setNumero((n) => n + 1);
    showToast("Novo orçamento iniciado");
  }

  function validar(): string | null {
    if (!cliente.nome.trim()) return "Preencha o nome do cliente";
    if (itens.length === 0) return "Adicione pelo menos um produto";
    return null;
  }

  function gerarPDF(action: "download" | "share" = "download") {
    const err = validar();
    if (err) {
      showToast(err);
      return;
    }
    const doc = new jsPDF({ unit: "mm", format: "a4" });
    const W = doc.internal.pageSize.getWidth();
    const H = doc.internal.pageSize.getHeight();

    // Header band
    doc.setFillColor(34, 89, 50);
    doc.rect(0, 0, W, 32, "F");

    // Logo no cabeçalho
    if (logoData) {
      try {
        doc.addImage(logoData, "PNG", W - 14 - 28, 3, 28, 26);
      } catch {
        /* ignore */
      }
    }

    doc.setTextColor(255, 255, 255);
    doc.setFont("helvetica", "bold");
    doc.setFontSize(16);
    doc.text(EMPRESA.nome.toUpperCase(), 14, 14);
    doc.setFont("helvetica", "normal");
    doc.setFontSize(9);
    doc.text(EMPRESA.slogan, 14, 20);
    doc.text(EMPRESA.endereco, 14, 25);
    doc.text(`WhatsApp: ${EMPRESA.whatsapp1}  |  ${EMPRESA.whatsapp2}`, 14, 30);

    doc.setFontSize(10);
    doc.setFont("helvetica", "bold");
    doc.text(`ORÇAMENTO Nº ${numeroFmt}`, 14, 38);
    doc.setFont("helvetica", "normal");
    doc.setFontSize(9);
    doc.setTextColor(60, 60, 60);
    doc.text(`Data: ${dataAtual}`, W - 14, 38, { align: "right" });
    const validadeData = new Date();
    validadeData.setDate(validadeData.getDate() + validadeDias);
    doc.text(`Validade: ${validadeData.toLocaleDateString("pt-BR")}`, W - 14, 43, {
      align: "right",
    });

    // Marca d'água (logo grande e translúcida no centro)
    if (logoData) {
      try {
        const gState = (doc as unknown as {
          GState: new (o: { opacity: number }) => unknown;
          setGState: (g: unknown) => void;
        });
        gState.setGState(new gState.GState({ opacity: 0.08 }));
        const wmW = 140;
        const wmH = 130;
        doc.addImage(logoData, "PNG", (W - wmW) / 2, (H - wmH) / 2, wmW, wmH);
        gState.setGState(new gState.GState({ opacity: 1 }));
      } catch {
        /* ignore */
      }
    }

    // Cliente
    let y = 52;
    doc.setTextColor(40, 40, 40);
    doc.setFont("helvetica", "bold");
    doc.setFontSize(11);
    doc.text("DADOS DO CLIENTE", 14, y);
    doc.setDrawColor(34, 89, 50);
    doc.line(14, y + 1.5, W - 14, y + 1.5);
    y += 7;
    doc.setFont("helvetica", "normal");
    doc.setFontSize(10);
    doc.text(`Cliente: ${cliente.nome}`, 14, y);
    doc.text(`Telefone: ${cliente.telefone || "-"}`, W / 2, y);
    y += 5;
    doc.text(`Cidade: ${cliente.cidade || "-"}`, 14, y);
    y += 6;

    // Produtos
    autoTable(doc, {
      startY: y,
      head: [["#", "Produto", "Categoria", "Qtd.", "Preço Un.", "Subtotal"]],
      body: itens.map((it, idx) => [
        String(idx + 1),
        it.nome,
        it.categoria,
        String(it.quantidade),
        brl(it.preco),
        brl(it.preco * it.quantidade),
      ]),
      styles: { fontSize: 9, cellPadding: 2 },
      headStyles: { fillColor: [34, 89, 50], textColor: 255 },
      alternateRowStyles: { fillColor: [240, 246, 240] },
      columnStyles: {
        0: { cellWidth: 10, halign: "center" },
        3: { halign: "center", cellWidth: 16 },
        4: { halign: "right", cellWidth: 28 },
        5: { halign: "right", cellWidth: 30 },
      },
      margin: { left: 14, right: 14 },
    });

    // @ts-expect-error lastAutoTable injected
    const afterY = (doc.lastAutoTable?.finalY || y) + 6;

    // Totais
    const boxX = W - 14 - 90;
    const boxH = freteGratis ? 44 : 38;
    doc.setDrawColor(34, 89, 50);
    doc.setLineWidth(0.3);
    doc.roundedRect(boxX, afterY, 90, boxH, 2, 2);
    doc.setFontSize(10);
    doc.setFont("helvetica", "normal");
    let ly = afterY + 7;
    doc.text("Subtotal:", boxX + 4, ly);
    doc.text(brl(subtotal), boxX + 86, ly, { align: "right" });
    ly += 6;
    const descLabel =
      tipoDesconto === "percent" ? `Desconto (${desconto || 0}%):` : "Desconto:";
    doc.text(descLabel, boxX + 4, ly);
    doc.text(`- ${brl(descontoValor)}`, boxX + 86, ly, { align: "right" });
    ly += 6;
    doc.text("Frete:", boxX + 4, ly);
    doc.text(`+ ${brl(freteValor)}`, boxX + 86, ly, { align: "right" });
    ly += 6;
    if (freteGratis) {
      doc.setTextColor(180, 60, 60);
      doc.text("Frete Grátis (cortesia):", boxX + 4, ly);
      doc.text(`- ${brl(freteValor)}`, boxX + 86, ly, { align: "right" });
      doc.setTextColor(40, 40, 40);
      ly += 6;
    }
    doc.setFont("helvetica", "bold");
    doc.setFontSize(12);
    doc.setTextColor(34, 89, 50);
    doc.text("TOTAL:", boxX + 4, ly + 2);
    doc.text(brl(totalFinal), boxX + 86, ly + 2, { align: "right" });
    doc.setTextColor(40, 40, 40);

    if (cliente.observacoes) {
      const obsY = afterY + 38;
      doc.setFont("helvetica", "bold");
      doc.setFontSize(10);
      doc.text("Observações:", 14, obsY);
      doc.setFont("helvetica", "normal");
      const lines = doc.splitTextToSize(cliente.observacoes, W - 28);
      doc.text(lines, 14, obsY + 5);
    }

    // Footer
    doc.setDrawColor(34, 89, 50);
    doc.line(14, H - 24, W - 14, H - 24);
    doc.setFontSize(8);
    doc.setTextColor(70, 70, 70);
    doc.text(EMPRESA.site, 14, H - 18);
    doc.text(EMPRESA.instagram, 14, H - 14);
    doc.text(`CNPJ: ${EMPRESA.cnpj}`, 14, H - 10);
    doc.text(`PIX: ${EMPRESA.pix}`, W - 14, H - 10, { align: "right" });
    doc.text("Assinatura: ______________________________", W - 14, H - 18, { align: "right" });

    const filename = `Orcamento_${numeroFmt}_${cliente.nome.replace(/\s+/g, "_")}.pdf`;
    if (action === "download") {
      doc.save(filename);
      showToast("PDF gerado com sucesso");
    } else {
      const blob = doc.output("blob");
      const url = URL.createObjectURL(blob);
      window.open(url, "_blank");
    }
  }

  function imprimir() {
    const err = validar();
    if (err) {
      showToast(err);
      return;
    }
    window.print();
  }

  function enviarWhatsApp() {
    const err = validar();
    if (err) {
      showToast(err);
      return;
    }
    const msg = `Olá ${cliente.nome}, segue seu orçamento Nº ${numeroFmt} do Viveiro Valdemar Depiné no valor total de ${brl(totalFinal)}. Validade ${validadeDias} dias.`;
    const tel = (cliente.telefone || "").replace(/\D/g, "");
    const numeroWa = tel.length >= 10 ? `55${tel}` : EMPRESA.whatsappLink;
    window.open(`https://wa.me/${numeroWa}?text=${encodeURIComponent(msg)}`, "_blank");
  }

  return (
    <div className="min-h-screen bg-background text-foreground">
      {/* Header */}
      <header className="no-print sticky top-0 z-30 border-b border-border bg-card/90 backdrop-blur supports-[backdrop-filter]:bg-card/70">
        <div className="mx-auto flex max-w-7xl items-center justify-between gap-4 px-4 py-3">
          <div className="flex items-center gap-3">
            <div className="grid h-11 w-11 place-items-center overflow-hidden rounded-xl bg-primary shadow-sm">
              <img src={logoUrl} alt="Viveiro Valdemar Depiné" className="h-full w-full object-contain" />
            </div>
            <div className="leading-tight">
              <div className="text-sm font-semibold">{EMPRESA.nome}</div>
              <div className="text-xs text-muted-foreground">Sistema de Orçamentos</div>
            </div>
          </div>
          <div className="flex items-center gap-2">
            <div className="hidden rounded-lg border border-border bg-secondary px-3 py-1.5 text-xs font-semibold text-secondary-foreground sm:block">
              Orçamento Nº {numeroFmt}
            </div>
            <button
              onClick={() => setTema(tema === "dark" ? "light" : "dark")}
              className="rounded-lg border border-border bg-card px-3 py-2 text-sm transition hover:bg-secondary"
              title="Alternar tema"
            >
              {tema === "dark" ? "☀️ Claro" : "🌙 Escuro"}
            </button>
          </div>
        </div>
      </header>

      <main className="mx-auto max-w-7xl px-4 py-6">
        <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
          {/* Coluna esquerda: cliente + catálogo */}
          <div className="space-y-6 lg:col-span-2">
            {/* Cliente */}
            <section className="rounded-2xl border border-border bg-card p-5 shadow-sm">
              <h2 className="mb-4 text-base font-semibold">Dados do cliente</h2>
              <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
                <Field label="Nome*">
                  <input
                    value={cliente.nome}
                    onChange={(e) => setCliente({ ...cliente, nome: e.target.value })}
                    className={inputCls}
                    placeholder="Nome completo"
                  />
                </Field>
                <Field label="Telefone / WhatsApp">
                  <input
                    value={cliente.telefone}
                    onChange={(e) => setCliente({ ...cliente, telefone: maskTel(e.target.value) })}
                    className={inputCls}
                    placeholder="(47) 99999-9999"
                  />
                </Field>
                <Field label="Cidade">
                  <input
                    value={cliente.cidade}
                    onChange={(e) => setCliente({ ...cliente, cidade: e.target.value })}
                    className={inputCls}
                    placeholder="Cidade / UF"
                  />
                </Field>
                <Field label="Validade (dias)">
                  <input
                    type="number"
                    min={1}
                    value={validadeDias}
                    onChange={(e) =>
                      setValidadeDias(Math.max(1, Number(e.target.value) || 7))
                    }
                    className={inputCls}
                  />
                </Field>
                <div className="sm:col-span-2">
                  <Field label="Observações">
                    <textarea
                      value={cliente.observacoes}
                      onChange={(e) => setCliente({ ...cliente, observacoes: e.target.value })}
                      className={`${inputCls} min-h-[64px] resize-y`}
                      placeholder="Condições, instruções de entrega, etc."
                    />
                  </Field>
                </div>
              </div>
            </section>

            {/* Catálogo */}
            <section className="rounded-2xl border border-border bg-card p-5 shadow-sm">
              <div className="mb-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                <h2 className="text-base font-semibold">Catálogo de mudas</h2>
                <input
                  value={busca}
                  onChange={(e) => setBusca(e.target.value)}
                  placeholder="🔎 Buscar produto…"
                  className={`${inputCls} sm:max-w-xs`}
                />
              </div>
              <div className="mb-4 flex flex-wrap gap-2">
                {categorias.map((c) => (
                  <button
                    key={c}
                    onClick={() => setCategoriaSel(c)}
                    className={`rounded-full border px-3 py-1 text-xs font-medium transition ${
                      categoriaSel === c
                        ? "border-primary bg-primary text-primary-foreground"
                        : "border-border bg-secondary text-secondary-foreground hover:bg-muted"
                    }`}
                  >
                    {c}
                  </button>
                ))}
              </div>
              <div className="max-h-[420px] overflow-auto rounded-xl border border-border">
                <table className="w-full text-sm">
                  <thead className="sticky top-0 bg-secondary text-xs uppercase text-secondary-foreground">
                    <tr>
                      <th className="px-3 py-2 text-left">Produto</th>
                      <th className="px-3 py-2 text-left">Categoria</th>
                      <th className="px-3 py-2 text-right">Preço</th>
                      <th className="px-3 py-2"></th>
                    </tr>
                  </thead>
                  <tbody>
                    {produtosFiltrados.map((p) => (
                      <tr
                        key={`${p.categoria}-${p.nome}`}
                        className="border-t border-border hover:bg-muted/50"
                      >
                        <td className="px-3 py-2 font-medium">{p.nome}</td>
                        <td className="px-3 py-2 text-xs text-muted-foreground">{p.categoria}</td>
                        <td className="px-3 py-2 text-right">
                          <input
                            type="number"
                            min={0}
                            step="0.01"
                            value={p.preco}
                            onChange={(e) =>
                              updateCatalogPreco(
                                p.categoria,
                                p.nome,
                                Math.max(0, Number(e.target.value) || 0),
                              )
                            }
                            className="w-24 rounded-md border border-input bg-background px-2 py-1 text-right text-sm"
                          />
                        </td>
                        <td className="px-3 py-2 text-right">
                          <button
                            onClick={() => addProduto(p.categoria, p.nome, p.preco)}
                            className="rounded-md bg-primary px-3 py-1 text-xs font-semibold text-primary-foreground transition hover:bg-accent"
                          >
                            + Adicionar
                          </button>
                        </td>
                      </tr>
                    ))}
                    {produtosFiltrados.length === 0 && (
                      <tr>
                        <td colSpan={4} className="px-3 py-8 text-center text-muted-foreground">
                          Nenhum produto encontrado.
                        </td>
                      </tr>
                    )}
                  </tbody>
                </table>
              </div>
            </section>

            {/* Itens do orçamento */}
            <section className="rounded-2xl border border-border bg-card p-5 shadow-sm">
              <h2 className="mb-4 text-base font-semibold">
                Itens do orçamento ({itens.length})
              </h2>
              {itens.length === 0 ? (
                <p className="rounded-xl border border-dashed border-border bg-muted/40 p-6 text-center text-sm text-muted-foreground">
                  Nenhum item adicionado. Use o catálogo acima para incluir produtos.
                </p>
              ) : (
                <div className="overflow-auto rounded-xl border border-border">
                  <table className="w-full text-sm">
                    <thead className="bg-secondary text-xs uppercase text-secondary-foreground">
                      <tr>
                        <th className="px-3 py-2 text-left">Produto</th>
                        <th className="px-3 py-2 text-center">Qtd.</th>
                        <th className="px-3 py-2 text-right">Preço Un.</th>
                        <th className="px-3 py-2 text-right">Subtotal</th>
                        <th className="px-3 py-2"></th>
                      </tr>
                    </thead>
                    <tbody>
                      {itens.map((it) => (
                        <tr key={it.id} className="border-t border-border">
                          <td className="px-3 py-2">
                            <div className="font-medium">{it.nome}</div>
                            <div className="text-xs text-muted-foreground">{it.categoria}</div>
                          </td>
                          <td className="px-3 py-2 text-center">
                            <input
                              type="number"
                              min={1}
                              value={it.quantidade}
                              onChange={(e) =>
                                updateItem(it.id, { quantidade: Number(e.target.value) })
                              }
                              className="w-20 rounded-md border border-input bg-background px-2 py-1 text-center"
                            />
                          </td>
                          <td className="px-3 py-2 text-right">
                            <input
                              type="number"
                              min={0}
                              step="0.01"
                              value={it.preco}
                              onChange={(e) =>
                                updateItem(it.id, { preco: Number(e.target.value) })
                              }
                              className="w-24 rounded-md border border-input bg-background px-2 py-1 text-right"
                            />
                          </td>
                          <td className="px-3 py-2 text-right font-semibold">
                            {brl(it.preco * it.quantidade)}
                          </td>
                          <td className="px-3 py-2 text-right">
                            <button
                              onClick={() => removeItem(it.id)}
                              className="rounded-md border border-destructive/40 px-2 py-1 text-xs font-semibold text-destructive transition hover:bg-destructive hover:text-destructive-foreground"
                            >
                              Remover
                            </button>
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              )}
            </section>
          </div>

          {/* Coluna direita: totais + ações */}
          <aside className="space-y-6">
            <section className="sticky top-20 space-y-4 rounded-2xl border border-border bg-card p-5 shadow-sm">
              <h2 className="text-base font-semibold">Resumo financeiro</h2>
              <div className="space-y-3 text-sm">
                <Row label="Subtotal (plantas)" value={brl(subtotal)} />

                <div>
                  <div className="mb-1 flex items-center justify-between">
                    <span className="text-xs font-medium text-muted-foreground">
                      Desconto
                    </span>
                    <div className="inline-flex overflow-hidden rounded-md border border-border text-xs">
                      <button
                        type="button"
                        onClick={() => setTipoDesconto("valor")}
                        className={`px-2 py-1 transition ${
                          tipoDesconto === "valor"
                            ? "bg-primary text-primary-foreground"
                            : "bg-card hover:bg-secondary"
                        }`}
                      >
                        R$
                      </button>
                      <button
                        type="button"
                        onClick={() => setTipoDesconto("percent")}
                        className={`px-2 py-1 transition ${
                          tipoDesconto === "percent"
                            ? "bg-primary text-primary-foreground"
                            : "bg-card hover:bg-secondary"
                        }`}
                      >
                        %
                      </button>
                    </div>
                  </div>
                  <div className="relative">
                    <input
                      type="number"
                      min={0}
                      max={tipoDesconto === "percent" ? 100 : undefined}
                      step="0.01"
                      value={desconto}
                      onChange={(e) =>
                        setDesconto(Math.max(0, Number(e.target.value) || 0))
                      }
                      className={`${inputCls} pr-10`}
                    />
                    <span className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-xs text-muted-foreground">
                      {tipoDesconto === "percent" ? "%" : "R$"}
                    </span>
                  </div>
                  {tipoDesconto === "percent" && (
                    <div className="mt-1 text-[11px] text-muted-foreground">
                      {desconto || 0}% sobre {brl(subtotal)} = {brl(descontoValor)}
                    </div>
                  )}
                </div>

                <Field label="Frete (R$) — somado ao total">
                  <input
                    type="number"
                    min={0}
                    step="0.01"
                    value={frete}
                    onChange={(e) => setFrete(Math.max(0, Number(e.target.value) || 0))}
                    className={inputCls}
                  />
                </Field>

                <label className="flex cursor-pointer items-center gap-2 rounded-lg border border-border bg-secondary/50 px-3 py-2 text-xs">
                  <input
                    type="checkbox"
                    checked={freteGratis}
                    onChange={(e) => setFreteGratis(e.target.checked)}
                    className="h-4 w-4 accent-primary"
                  />
                  <span>
                    <b>Frete grátis</b> — exibe o valor e gera desconto equivalente
                  </span>
                </label>

                <div className="space-y-1 border-t border-dashed border-border pt-2 text-xs text-muted-foreground">
                  <div className="flex justify-between">
                    <span>Desconto aplicado</span>
                    <span>- {brl(descontoValor)}</span>
                  </div>
                  <div className="flex justify-between">
                    <span>Frete</span>
                    <span>+ {brl(freteValor)}</span>
                  </div>
                  {freteGratis && (
                    <div className="flex justify-between text-destructive">
                      <span>Frete grátis (cortesia)</span>
                      <span>- {brl(freteValor)}</span>
                    </div>
                  )}
                </div>

                <div className="flex items-center justify-between rounded-xl bg-primary px-4 py-3 text-primary-foreground">
                  <span className="text-sm font-semibold">TOTAL</span>
                  <span className="text-xl font-bold">{brl(totalFinal)}</span>
                </div>
              </div>

              <div className="grid grid-cols-1 gap-2 pt-2">
                <button onClick={() => gerarPDF("download")} className={btnPrimary}>
                  📄 Baixar PDF
                </button>
                <button onClick={imprimir} className={btnSecondary}>
                  🖨️ Imprimir
                </button>
                <button onClick={enviarWhatsApp} className={btnAccent}>
                  💬 Enviar no WhatsApp
                </button>
                <button onClick={novoOrcamento} className={btnGhost}>
                  ✨ Novo orçamento
                </button>
              </div>
            </section>

            <section className="rounded-2xl border border-border bg-card p-5 text-xs text-muted-foreground shadow-sm">
              <div className="mb-1 font-semibold text-foreground">{EMPRESA.nome}</div>
              <div>{EMPRESA.slogan}</div>
              <div className="mt-2">{EMPRESA.endereco}</div>
              <div>WhatsApp: {EMPRESA.whatsapp1}</div>
              <div>WhatsApp: {EMPRESA.whatsapp2}</div>
              <div className="mt-2">CNPJ: {EMPRESA.cnpj}</div>
              <div>PIX: {EMPRESA.pix}</div>
              <div className="mt-2 flex flex-col gap-1">
                <a href={EMPRESA.site} target="_blank" rel="noreferrer" className="text-primary hover:underline">
                  {EMPRESA.site}
                </a>
                <a href={EMPRESA.instagram} target="_blank" rel="noreferrer" className="text-primary hover:underline">
                  Instagram @viveirovaldemar
                </a>
              </div>
            </section>
          </aside>
        </div>
      </main>

      {/* Print-only layout */}
      <div id="print-area" className="hidden print:block" suppressHydrationWarning>
        {mounted && (
          <PrintLayout
            numero={numeroFmt}
            data={dataAtual}
            cliente={cliente}
            itens={itens}
            subtotal={subtotal}
            descontoValor={descontoValor}
            tipoDesconto={tipoDesconto}
            descontoInput={desconto}
            frete={freteValor}
            freteGratis={freteGratis}
            totalFinal={totalFinal}
            validadeDias={validadeDias}
            logoData={logoData}
          />
        )}
      </div>

      {toast && (
        <div className="no-print fixed bottom-6 left-1/2 z-50 -translate-x-1/2 rounded-xl bg-foreground px-5 py-3 text-sm font-medium text-background shadow-lg">
          {toast}
        </div>
      )}
    </div>
  );
}

const inputCls =
  "w-full rounded-lg border border-input bg-background px-3 py-2 text-sm outline-none transition focus:border-primary focus:ring-2 focus:ring-primary/20";
const btnPrimary =
  "rounded-lg bg-primary px-4 py-2.5 text-sm font-semibold text-primary-foreground shadow-sm transition hover:bg-accent";
const btnSecondary =
  "rounded-lg border border-border bg-secondary px-4 py-2.5 text-sm font-semibold text-secondary-foreground transition hover:bg-muted";
const btnAccent =
  "rounded-lg bg-[color:var(--gold)] px-4 py-2.5 text-sm font-semibold text-[oklch(0.22_0.04_150)] shadow-sm transition hover:opacity-90";
const btnGhost =
  "rounded-lg border border-dashed border-border px-4 py-2.5 text-sm font-medium text-muted-foreground transition hover:bg-secondary";

function Field({ label, children }: { label: string; children: React.ReactNode }) {
  return (
    <label className="block text-xs">
      <span className="mb-1 block font-medium text-muted-foreground">{label}</span>
      {children}
    </label>
  );
}
function Row({ label, value }: { label: string; value: string }) {
  return (
    <div className="flex items-center justify-between border-b border-dashed border-border py-1">
      <span className="text-muted-foreground">{label}</span>
      <span className="font-semibold">{value}</span>
    </div>
  );
}

function PrintLayout(props: {
  numero: string;
  data: string;
  cliente: Cliente;
  itens: ItemOrcamento[];
  subtotal: number;
  descontoValor: number;
  tipoDesconto: TipoDesconto;
  descontoInput: number;
  frete: number;
  freteGratis: boolean;
  totalFinal: number;
  validadeDias: number;
  logoData: string | null;
}) {
  const {
    numero,
    data,
    cliente,
    itens,
    subtotal,
    descontoValor,
    tipoDesconto,
    descontoInput,
    frete,
    freteGratis,
    totalFinal,
    validadeDias,
    logoData,
  } = props;
  const validade = new Date();
  validade.setDate(validade.getDate() + validadeDias);
  return (
    <div
      style={{
        padding: 24,
        fontFamily: "Helvetica, Arial, sans-serif",
        color: "#222",
        position: "relative",
      }}
    >
      {/* Marca d'água */}
      {logoData && (
        <img
          src={logoData}
          alt=""
          style={{
            position: "absolute",
            top: "30%",
            left: "50%",
            transform: "translate(-50%, -30%)",
            width: 400,
            opacity: 0.08,
            pointerEvents: "none",
            zIndex: 0,
          }}
        />
      )}

      <div
        style={{
          background: "#225932",
          color: "#fff",
          padding: "14px 18px",
          borderRadius: 8,
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          position: "relative",
          zIndex: 1,
        }}
      >
        <div>
          <div style={{ fontSize: 18, fontWeight: 700 }}>{EMPRESA.nome.toUpperCase()}</div>
          <div style={{ fontSize: 11 }}>{EMPRESA.slogan}</div>
          <div style={{ fontSize: 11 }}>{EMPRESA.endereco}</div>
          <div style={{ fontSize: 11 }}>
            WhatsApp: {EMPRESA.whatsapp1} | {EMPRESA.whatsapp2}
          </div>
        </div>
        {logoData && (
          <img src={logoData} alt="Logo" style={{ height: 70, marginLeft: 16 }} />
        )}
      </div>

      <div
        style={{
          display: "flex",
          justifyContent: "space-between",
          marginTop: 8,
          fontSize: 11,
          position: "relative",
          zIndex: 1,
        }}
      >
        <div style={{ fontWeight: 700 }}>ORÇAMENTO Nº {numero}</div>
        <div>
          Data: {data} · Validade: {validade.toLocaleDateString("pt-BR")}
        </div>
      </div>

      <h3
        style={{
          marginTop: 16,
          borderBottom: "1px solid #225932",
          paddingBottom: 4,
          position: "relative",
          zIndex: 1,
        }}
      >
        Cliente
      </h3>
      <div style={{ fontSize: 12, position: "relative", zIndex: 1 }}>
        <div>
          <b>Nome:</b> {cliente.nome}
        </div>
        <div>
          <b>Telefone:</b> {cliente.telefone || "-"} &nbsp; <b>Cidade:</b>{" "}
          {cliente.cidade || "-"}
        </div>
      </div>

      <table
        style={{
          marginTop: 12,
          width: "100%",
          borderCollapse: "collapse",
          fontSize: 12,
          position: "relative",
          zIndex: 1,
        }}
      >
        <thead>
          <tr style={{ background: "#225932", color: "#fff" }}>
            <th style={thS}>#</th>
            <th style={thS}>Produto</th>
            <th style={thS}>Categoria</th>
            <th style={thS}>Qtd.</th>
            <th style={thS}>Preço Un.</th>
            <th style={thS}>Subtotal</th>
          </tr>
        </thead>
        <tbody>
          {itens.map((it, i) => (
            <tr key={it.id} style={{ background: i % 2 ? "#f0f6f0" : "#fff" }}>
              <td style={tdS}>{i + 1}</td>
              <td style={tdS}>{it.nome}</td>
              <td style={tdS}>{it.categoria}</td>
              <td style={{ ...tdS, textAlign: "center" }}>{it.quantidade}</td>
              <td style={{ ...tdS, textAlign: "right" }}>{brl(it.preco)}</td>
              <td style={{ ...tdS, textAlign: "right" }}>{brl(it.preco * it.quantidade)}</td>
            </tr>
          ))}
        </tbody>
      </table>

      <div
        style={{
          display: "flex",
          justifyContent: "flex-end",
          marginTop: 12,
          position: "relative",
          zIndex: 1,
        }}
      >
        <table style={{ fontSize: 12, minWidth: 280 }}>
          <tbody>
            <tr>
              <td>Subtotal (plantas):</td>
              <td style={{ textAlign: "right" }}>{brl(subtotal)}</td>
            </tr>
            <tr>
              <td>
                Desconto
                {tipoDesconto === "percent" ? ` (${descontoInput}%)` : ""}:
              </td>
              <td style={{ textAlign: "right" }}>- {brl(descontoValor)}</td>
            </tr>
            <tr>
              <td>Frete:</td>
              <td style={{ textAlign: "right" }}>+ {brl(frete)}</td>
            </tr>
            {freteGratis && (
              <tr style={{ color: "#b43c3c" }}>
                <td>Frete Grátis (cortesia):</td>
                <td style={{ textAlign: "right" }}>- {brl(frete)}</td>
              </tr>
            )}
            <tr style={{ background: "#225932", color: "#fff" }}>
              <td style={{ padding: "6px 8px", fontWeight: 700 }}>TOTAL</td>
              <td style={{ padding: "6px 8px", textAlign: "right", fontWeight: 700 }}>
                {brl(totalFinal)}
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      {cliente.observacoes && (
        <div style={{ marginTop: 16, fontSize: 12, position: "relative", zIndex: 1 }}>
          <b>Observações:</b>
          <div>{cliente.observacoes}</div>
        </div>
      )}

      <div
        style={{
          marginTop: 40,
          fontSize: 11,
          borderTop: "1px solid #225932",
          paddingTop: 8,
          position: "relative",
          zIndex: 1,
        }}
      >
        <div>
          {EMPRESA.site} · {EMPRESA.instagram}
        </div>
        <div>
          CNPJ: {EMPRESA.cnpj} · PIX: {EMPRESA.pix}
        </div>
        <div style={{ marginTop: 30, textAlign: "right" }}>
          Assinatura: ______________________________
        </div>
      </div>
    </div>
  );
}

const thS: React.CSSProperties = {
  padding: "6px 8px",
  textAlign: "left",
  fontSize: 11,
};
const tdS: React.CSSProperties = {
  padding: "6px 8px",
  borderBottom: "1px solid #e5e7eb",
};