import { useState, useEffect } from 'react';
import { useMutation, useQueryClient } from '@tanstack/react-query';
import {
  Alert,
  App,
  AutoComplete,
  Button,
  Card,
  Col,
  Divider,
  Empty,
  Grid,
  Input,
  InputNumber,
  Modal,
  Radio,
  Row,
  Select,
  Space,
  Table,
  Tag,
  Tooltip,
  Typography,
} from 'antd';
import type { TableColumnsType } from 'antd';
import {
  AppstoreOutlined,
  ArrowLeftOutlined,
  CheckCircleOutlined,
  CloseOutlined,
  DeleteOutlined,
  DownOutlined,
  HistoryOutlined,
  PlusOutlined,
  SearchOutlined,
  ShoppingCartOutlined,
  UpOutlined,
  UserOutlined,
} from '@ant-design/icons';
import { useNavigate, useSearch } from '@tanstack/react-router';
import type {
  ClientSummary,
  CreatePedido,
  FormaPagamento,
  Pauta,
  ProdutoSummary,
  TopProduto,
} from '@sar/api-interface';
import { useClientList, useClientDetail, useClientTopProdutos } from '../../lib/queries/clients';
import { useOrderDetail } from '../../lib/queries/orders';
import { useCatalog, useFormasPagamento, usePautas } from '../../lib/queries/catalog';
import { useCondicoesComerciais, useTetoDesconto } from '../../lib/condicoes-comerciais';
import { CondicaoTag } from '../../components/CondicaoTag';
import { apiFetch } from '../../lib/api-client';
import { enqueueOrder } from '../../lib/offline/order-queue';
import { randomUUID } from '../../lib/uuid';

const { Title, Text } = Typography;
const { useBreakpoint } = Grid;

// ─── Tipos internos ────────────────────────────────────────────────────────────

type CartItem = {
  key: string;
  idProduto: number;
  codProduto: string;
  descProduto: string;
  unidade: string;
  qtd: number;
  precoUnitario: number;
  descontoPerc: number;
  loteMulVenda: number | null;
  // Grupo/subgrupo do produto — usados para calcular o teto de desconto do item
  codGrupo: number | null;
  codSubgrupo: number | null;
};

type SearchParams = { clientId?: string; editar?: string };

// ─── Helpers ──────────────────────────────────────────────────────────────────

function fmt(n: number) {
  return n.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' });
}

function itemTotal(item: CartItem) {
  return Math.round(item.qtd * item.precoUnitario * (1 - item.descontoPerc / 100) * 100) / 100;
}

function stockColor(qtd: string | null): string {
  if (qtd == null) return '#CBD5E1';
  const n = Number(qtd);
  if (n <= 0) return '#f5222d';
  if (n < 10) return '#faad14';
  return '#52c41a';
}

function stockTitle(qtd: string | null): string {
  if (qtd == null) return 'Estoque desconhecido';
  const n = Number(qtd);
  if (n <= 0) return 'Sem estoque';
  return `Estoque: ${n.toLocaleString('pt-BR')}`;
}

// ─── Estilos compartilhados ───────────────────────────────────────────────────

const cardStyle: React.CSSProperties = {
  borderRadius: 12,
  boxShadow: '0 1px 6px rgba(0,0,0,0.07)',
  border: '1px solid #EBF0F5',
  marginBottom: 16,
};

const sectionLabel: React.CSSProperties = {
  fontSize: 11,
  fontWeight: 700,
  letterSpacing: '0.09em',
  textTransform: 'uppercase',
  color: '#003B8E',
  marginBottom: 16,
  display: 'block',
};

const fieldLabel: React.CSSProperties = {
  fontSize: 12,
  fontWeight: 600,
  color: '#64748B',
  marginBottom: 4,
};

// ─── CustomerSearch ───────────────────────────────────────────────────────────

function CustomerSearch({
  value,
  selected,
  onSearch,
  onSelect,
}: {
  value: string;
  selected: ClientSummary | null;
  onSearch: (v: string) => void;
  onSelect: (client: ClientSummary) => void;
}) {
  const { data, isFetching } = useClientList({ q: value || undefined, limit: 12 });

  const options = (data?.data ?? []).map((c) => ({
    value: String(c.idCliente),
    label: (
      <Space size={8}>
        <UserOutlined style={{ color: '#64748B' }} />
        <span style={{ fontWeight: 600, color: '#1F2937' }}>{c.razao ?? c.nome}</span>
        {c.cgcpf && (
          <Text type="secondary" style={{ fontSize: 12 }}>
            {c.cgcpf}
          </Text>
        )}
      </Space>
    ),
    client: c,
  }));

  return (
    <AutoComplete
      value={selected ? (selected.razao ?? selected.nome) : value}
      options={options}
      onSearch={(v) => onSearch(v)}
      onSelect={(_val, opt) => onSelect((opt as (typeof options)[0]).client)}
      onChange={(v) => {
        if (!v) onSearch('');
      }}
      style={{ width: '100%' }}
      notFoundContent={
        value.length > 1 && !isFetching ? (
          <Text type="secondary" style={{ padding: '8px 12px', display: 'block' }}>
            Nenhum cliente encontrado
          </Text>
        ) : null
      }
    >
      <Input
        size="large"
        prefix={<SearchOutlined style={{ color: '#64748B' }} />}
        placeholder="Digite o nome fantasia, razão social ou CNPJ..."
        allowClear
        style={{ borderRadius: 8 }}
      />
    </AutoComplete>
  );
}

// ─── ProductSearch ────────────────────────────────────────────────────────────

function ProductSearch({
  idPauta,
  onAdd,
  onOpenCatalog,
}: {
  idPauta: number | undefined;
  onAdd: (p: ProdutoSummary) => void;
  onOpenCatalog: () => void;
}) {
  const [q, setQ] = useState('');
  const screens = useBreakpoint();
  const isMobile = !screens.md;
  const { data, isFetching } = useCatalog({ q: q || undefined, idPauta, limit: 25 });
  const condicoesDe = useCondicoesComerciais();

  const options = (data?.data ?? []).map((p) => ({
    value: String(p.idErp),
    label: (
      <div
        style={{
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'flex-start',
          gap: 8,
        }}
      >
        <Space size={6} align="start" style={{ flex: 1, minWidth: 0 }}>
          <Tag style={{ margin: 0, fontSize: 11, flexShrink: 0 }}>{p.codigo.trim()}</Tag>
          <div style={{ minWidth: 0 }}>
            <div
              style={{
                color: '#1F2937',
                fontWeight: 500,
                lineHeight: 1.3,
                display: 'flex',
                alignItems: 'center',
                gap: 6,
                flexWrap: 'wrap',
              }}
            >
              {p.descricao.trim()}
              <CondicaoTag conds={condicoesDe(p)} compact />
            </div>
            {p.grupo && (
              <div style={{ fontSize: 11, color: '#94A3B8', lineHeight: 1.2 }}>
                {p.grupo.trim()}
              </div>
            )}
          </div>
        </Space>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexShrink: 0 }}>
          <div
            title={stockTitle(p.qtdEstoque)}
            style={{
              width: 8,
              height: 8,
              borderRadius: '50%',
              background: stockColor(p.qtdEstoque),
              marginTop: 2,
            }}
          />
          <Text strong style={{ color: '#003B8E', whiteSpace: 'nowrap' }}>
            {fmt(Number(p.vlPreco1))}
          </Text>
        </div>
      </div>
    ),
    produto: p,
  }));

  return (
    <div style={{ display: 'flex', gap: 0, width: '100%' }}>
      <AutoComplete
        value={q}
        options={options}
        onSearch={setQ}
        onSelect={(_val, opt) => {
          onAdd((opt as (typeof options)[0]).produto);
          setQ('');
        }}
        style={{ flex: 1 }}
        notFoundContent={
          q.length > 1 && !isFetching ? (
            <Text type="secondary" style={{ padding: '8px 12px', display: 'block' }}>
              Nenhum produto encontrado
            </Text>
          ) : null
        }
      >
        <Input
          size="large"
          prefix={<ShoppingCartOutlined style={{ color: '#64748B' }} />}
          placeholder={
            isMobile ? 'Nome ou código...' : 'Pesquise por nome, código ou código de barras...'
          }
          style={{ borderRadius: '8px 0 0 8px', borderRight: 'none' }}
        />
      </AutoComplete>
      <Tooltip title={isMobile ? 'Ver catálogo' : undefined}>
        <Button
          size="large"
          icon={<AppstoreOutlined />}
          onClick={onOpenCatalog}
          style={{
            height: 40,
            borderRadius: '0 8px 8px 0',
            paddingInline: isMobile ? 12 : 16,
            borderLeft: 'none',
            color: '#003B8E',
            fontWeight: 600,
          }}
        >
          {!isMobile && 'Ver catálogo'}
        </Button>
      </Tooltip>
    </div>
  );
}

// ─── CatalogBrowserModal ──────────────────────────────────────────────────────

const MODAL_LIMIT = 20;

function CatalogBrowserModal({
  open,
  onClose,
  idPauta,
  cart,
  onAdd,
}: {
  open: boolean;
  onClose: () => void;
  idPauta: number | undefined;
  cart: CartItem[];
  onAdd: (p: ProdutoSummary, qty: number) => void;
}) {
  const screens = useBreakpoint();
  const isMobile = !screens.md;

  const [q, setQ] = useState('');
  const [debouncedQ, setDebouncedQ] = useState('');
  const [page, setPage] = useState(1);
  const [qtys, setQtys] = useState<Record<number, number>>({});

  useEffect(() => {
    if (open) {
      setQ('');
      setDebouncedQ('');
      setPage(1);
      setQtys({});
    }
  }, [open]);

  useEffect(() => {
    const t = setTimeout(() => {
      setDebouncedQ(q);
      setPage(1);
    }, 400);
    return () => clearTimeout(t);
  }, [q]);

  const { data, isLoading } = useCatalog({
    q: debouncedQ || undefined,
    idPauta,
    page,
    limit: MODAL_LIMIT,
  });
  const condicoesDe = useCondicoesComerciais();

  const cartMap = new Map(cart.map((it) => [it.idProduto, it.qtd]));

  function getQty(p: ProdutoSummary): number {
    return qtys[p.idErp] ?? p.loteMulVenda ?? 1;
  }

  const desktopColumns: TableColumnsType<ProdutoSummary> = [
    {
      title: 'Código',
      dataIndex: 'codigo',
      width: 90,
      render: (v: string) => <Tag style={{ fontSize: 11, margin: 0 }}>{v.trim()}</Tag>,
    },
    {
      title: 'Produto',
      render: (_: unknown, row: ProdutoSummary) => (
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
            <Text style={{ fontWeight: 500 }}>{row.descricao.trim()}</Text>
            <CondicaoTag conds={condicoesDe(row)} compact />
          </div>
          {row.grupo && (
            <Text type="secondary" style={{ fontSize: 11, display: 'block' }}>
              {row.grupo.trim()}
            </Text>
          )}
        </div>
      ),
    },
    {
      title: 'Un.',
      dataIndex: 'unidade',
      width: 50,
      align: 'center',
      render: (v: string | null) => (
        <Text type="secondary" style={{ fontSize: 12 }}>
          {v ?? '—'}
        </Text>
      ),
    },
    {
      title: 'Preço',
      dataIndex: 'vlPreco1',
      width: 110,
      align: 'right',
      render: (v: string) => (
        <Text strong className="tabular-nums" style={{ color: '#003B8E' }}>
          {Number(v).toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' })}
        </Text>
      ),
    },
    {
      title: 'Estoque',
      dataIndex: 'qtdEstoque',
      width: 85,
      align: 'right',
      render: (v: string | null) => {
        if (v == null) return <Text type="secondary">—</Text>;
        const n = Number(v);
        return (
          <Text style={{ color: n > 0 ? '#389e0d' : '#f5222d' }} className="tabular-nums">
            {n.toLocaleString('pt-BR')}
          </Text>
        );
      },
    },
    {
      title: 'Qtd',
      width: 100,
      render: (_: unknown, row: ProdutoSummary) => {
        const lote = row.loteMulVenda ?? 1;
        const qty = getQty(row);
        const invalid = lote > 1 && qty % lote !== 0;
        return (
          <Tooltip
            title={invalid ? `Múltiplo de ${lote}` : lote > 1 ? `Lote: ${lote}` : undefined}
            color={invalid ? 'red' : 'blue'}
          >
            <InputNumber
              min={lote}
              step={lote}
              value={qty}
              size="small"
              style={{ width: 80 }}
              status={invalid ? 'error' : undefined}
              onChange={(v) => setQtys((prev) => ({ ...prev, [row.idErp]: v ?? lote }))}
            />
          </Tooltip>
        );
      },
    },
    {
      title: '',
      width: 48,
      align: 'center',
      render: (_: unknown, row: ProdutoSummary) => {
        const inCart = cartMap.has(row.idErp);
        return (
          <Tooltip title={inCart ? 'Adicionar mais' : 'Adicionar ao pedido'}>
            <Button
              type={inCart ? 'default' : 'primary'}
              size="small"
              icon={
                inCart ? <CheckCircleOutlined style={{ color: '#389e0d' }} /> : <PlusOutlined />
              }
              style={{ borderRadius: 6 }}
              onClick={() => {
                onAdd(row, getQty(row));
                setQtys((prev) => {
                  const n = { ...prev };
                  delete n[row.idErp];
                  return n;
                });
              }}
            />
          </Tooltip>
        );
      },
    },
  ];

  // Mobile: merge código no produto, remove Un., estoque vira bolinha, qty compacto
  const mobileColumns: TableColumnsType<ProdutoSummary> = [
    {
      title: 'Produto',
      render: (_: unknown, row: ProdutoSummary) => (
        <div>
          <div
            style={{
              display: 'flex',
              alignItems: 'center',
              gap: 6,
              marginBottom: 2,
              flexWrap: 'wrap',
            }}
          >
            <Tag style={{ fontSize: 10, margin: 0, padding: '0 4px' }}>{row.codigo.trim()}</Tag>
            <div
              title={stockTitle(row.qtdEstoque)}
              style={{
                width: 7,
                height: 7,
                borderRadius: '50%',
                background: stockColor(row.qtdEstoque),
                flexShrink: 0,
              }}
            />
            <CondicaoTag conds={condicoesDe(row)} compact />
          </div>
          <Text style={{ fontWeight: 500, fontSize: 13 }}>{row.descricao.trim()}</Text>
          {row.grupo && (
            <Text type="secondary" style={{ fontSize: 11, display: 'block' }}>
              {row.grupo.trim()}
            </Text>
          )}
          <Text
            strong
            className="tabular-nums"
            style={{ color: '#003B8E', fontSize: 13, display: 'block', marginTop: 2 }}
          >
            {Number(row.vlPreco1).toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' })}
          </Text>
        </div>
      ),
    },
    {
      title: 'Qtd',
      width: 88,
      render: (_: unknown, row: ProdutoSummary) => {
        const lote = row.loteMulVenda ?? 1;
        const qty = getQty(row);
        const invalid = lote > 1 && qty % lote !== 0;
        return (
          <InputNumber
            min={lote}
            step={lote}
            value={qty}
            size="small"
            style={{ width: 76 }}
            status={invalid ? 'error' : undefined}
            onChange={(v) => setQtys((prev) => ({ ...prev, [row.idErp]: v ?? lote }))}
          />
        );
      },
    },
    {
      title: '',
      width: 40,
      align: 'center',
      render: (_: unknown, row: ProdutoSummary) => {
        const inCart = cartMap.has(row.idErp);
        return (
          <Button
            type={inCart ? 'default' : 'primary'}
            size="small"
            icon={inCart ? <CheckCircleOutlined style={{ color: '#389e0d' }} /> : <PlusOutlined />}
            style={{ borderRadius: 6 }}
            onClick={() => {
              onAdd(row, getQty(row));
              setQtys((prev) => {
                const n = { ...prev };
                delete n[row.idErp];
                return n;
              });
            }}
          />
        );
      },
    },
  ];

  return (
    <Modal
      title="Catálogo de Produtos"
      open={open}
      onCancel={onClose}
      centered
      width={isMobile ? '95vw' : 960}
      destroyOnHidden
      styles={{ body: { padding: isMobile ? '12px 16px' : undefined } }}
      footer={
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <Text type="secondary" style={{ fontSize: 12 }}>
            {cart.length > 0
              ? `${cart.length} item(ns) · ${cart.reduce((a, i) => a + i.qtd, 0).toLocaleString('pt-BR')} un.`
              : 'Nenhum item ainda'}
          </Text>
          <Button onClick={onClose}>Fechar</Button>
        </div>
      }
    >
      <div style={{ display: 'flex', gap: 12, alignItems: 'center', marginBottom: 12 }}>
        <Input
          value={q}
          onChange={(e) => setQ(e.target.value)}
          placeholder="Buscar por código ou descrição..."
          prefix={<SearchOutlined style={{ color: '#94A3B8' }} />}
          allowClear
          style={{ flex: 1, borderRadius: 8 }}
        />
        {data?.total !== undefined && (
          <Text type="secondary" style={{ fontSize: 12, whiteSpace: 'nowrap' }}>
            {data.total.toLocaleString('pt-BR')} prod.
          </Text>
        )}
      </div>

      <Table<ProdutoSummary>
        rowKey="idErp"
        columns={isMobile ? mobileColumns : desktopColumns}
        dataSource={data?.data ?? []}
        loading={isLoading}
        size="small"
        pagination={{
          current: page,
          pageSize: MODAL_LIMIT,
          total: data?.total ?? 0,
          showSizeChanger: false,
          onChange: (p) => setPage(p),
          style: { padding: '8px 0 0' },
        }}
        onRow={(row) => ({
          style: {
            background: cartMap.has(row.idErp) ? '#f0f7ff' : undefined,
            transition: 'background 0.15s',
          },
        })}
        scroll={isMobile ? { y: 320 } : { y: 380 }}
      />
    </Modal>
  );
}

// ─── MobileCartItem ───────────────────────────────────────────────────────────

function MobileCartItem({
  item,
  teto,
  onQtyChange,
  onDiscChange,
  onRemove,
}: {
  item: CartItem;
  teto: number;
  onQtyChange: (key: string, qty: number) => void;
  onDiscChange: (key: string, disc: number) => void;
  onRemove: (key: string) => void;
}) {
  const lote = item.loteMulVenda ?? 1;
  const invalid = lote > 1 && item.qtd % lote !== 0;
  const acimaTeto = item.descontoPerc > teto + 0.001;

  return (
    <div
      style={{
        padding: '12px 14px',
        borderBottom: '1px solid #EBF0F5',
        background: invalid ? '#fffbe6' : '#fff',
      }}
    >
      {/* Linha 1: código + nome + botão remover */}
      <div
        style={{
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'flex-start',
          gap: 8,
        }}
      >
        <div style={{ flex: 1, minWidth: 0 }}>
          <Tag style={{ fontSize: 11, marginBottom: 4 }}>{item.codProduto.trim()}</Tag>
          <Text strong style={{ fontSize: 14, display: 'block', lineHeight: 1.3 }}>
            {item.descProduto.trim()}
          </Text>
        </div>
        <Button
          type="text"
          danger
          size="small"
          icon={<DeleteOutlined />}
          onClick={() => onRemove(item.key)}
          style={{ flexShrink: 0, marginTop: 2 }}
        />
      </div>

      {/* Linha 2: preço unitário + un. */}
      <div style={{ marginTop: 4, marginBottom: 8 }}>
        <Text type="secondary" style={{ fontSize: 12 }}>
          {fmt(item.precoUnitario)} / {item.unidade || 'un.'}
        </Text>
      </div>

      {/* Linha 3: qtd + desc% + total */}
      <div style={{ display: 'flex', gap: 10, alignItems: 'flex-end' }}>
        <div>
          <Text type="secondary" style={{ fontSize: 11, display: 'block', marginBottom: 2 }}>
            Qtd
          </Text>
          <Tooltip
            title={invalid ? `Múltiplo de ${lote}` : lote > 1 ? `Lote: ${lote}` : undefined}
            color={invalid ? 'red' : 'blue'}
          >
            <InputNumber
              min={lote}
              step={lote}
              value={item.qtd}
              size="small"
              style={{ width: 88 }}
              status={invalid ? 'error' : undefined}
              onChange={(n) => onQtyChange(item.key, n ?? lote)}
            />
          </Tooltip>
          {lote > 1 && (
            <div style={{ fontSize: 10, color: invalid ? '#f5222d' : '#94A3B8', marginTop: 2 }}>
              lote: {lote}
            </div>
          )}
        </div>
        <div>
          <Text type="secondary" style={{ fontSize: 11, display: 'block', marginBottom: 2 }}>
            Desc%
          </Text>
          <Tooltip
            title={
              acimaTeto
                ? `Acima do teto de ${teto}% — a transmissão será bloqueada`
                : `Teto do item: ${teto}%`
            }
            color={acimaTeto ? 'red' : 'blue'}
          >
            <InputNumber
              min={0}
              max={100}
              step={0.5}
              value={item.descontoPerc}
              size="small"
              style={{ width: 88 }}
              addonAfter="%"
              status={acimaTeto ? 'error' : undefined}
              onChange={(n) => onDiscChange(item.key, n ?? 0)}
            />
          </Tooltip>
          <div style={{ fontSize: 10, color: acimaTeto ? '#f5222d' : '#94A3B8', marginTop: 2 }}>
            {acimaTeto ? `acima do teto ${teto}%` : `teto: ${teto}%`}
          </div>
        </div>
        <div style={{ marginLeft: 'auto', textAlign: 'right' }}>
          <Text type="secondary" style={{ fontSize: 11, display: 'block', marginBottom: 2 }}>
            Total
          </Text>
          <Text strong className="tabular-nums" style={{ fontSize: 16, color: '#003B8E' }}>
            {fmt(itemTotal(item))}
          </Text>
        </div>
      </div>
    </div>
  );
}

// ─── ClientHistoryPanel ───────────────────────────────────────────────────────

function ClientHistoryPanel({
  idCliente,
  cart,
  onAdd,
}: {
  idCliente: number;
  cart: CartItem[];
  onAdd: (p: TopProduto, qty: number) => void;
}) {
  const screens = useBreakpoint();
  const isMobile = !screens.md;
  // Sempre fecha ao abrir a tela — o banner chamativo convida o rep a expandir
  const [collapsed, setCollapsed] = useState(true);
  const [qtys, setQtys] = useState<Record<number, number>>({});

  const { data: produtos = [], isLoading } = useClientTopProdutos(idCliente, 15);

  const cartSet = new Set(cart.map((it) => it.idProduto));

  function defaultQty(p: TopProduto): number {
    // Média de qtd por pedido, mínimo 1
    return Math.max(1, Math.round(p.qtdTotal / Math.max(1, p.numPedidos)));
  }

  function getQty(p: TopProduto): number {
    return qtys[p.idProduto] ?? defaultQty(p);
  }

  if (isLoading) return null;
  if (produtos.length === 0) return null;

  const desktopColumns: TableColumnsType<TopProduto> = [
    {
      title: 'Produto',
      render: (_: unknown, row: TopProduto) => (
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
            <Tag style={{ fontSize: 10, padding: '0 4px', margin: 0 }}>{row.codProduto.trim()}</Tag>
            {cartSet.has(row.idProduto) && (
              <CheckCircleOutlined style={{ color: '#389e0d', fontSize: 12 }} />
            )}
          </div>
          <Text style={{ fontWeight: 500, fontSize: 13 }}>{row.descricao}</Text>
        </div>
      ),
    },
    {
      title: 'Ult. compra',
      dataIndex: 'ultimaCompra',
      width: 110,
      render: (v: string) => (
        <Text type="secondary" style={{ fontSize: 12 }}>
          {new Date(v).toLocaleDateString('pt-BR')}
        </Text>
      ),
    },
    {
      title: 'Ult. preço',
      dataIndex: 'ultimoPreco',
      width: 110,
      align: 'right',
      render: (v: number) => (
        <Text strong className="tabular-nums" style={{ color: '#003B8E', fontSize: 13 }}>
          {fmt(v)}
        </Text>
      ),
    },
    {
      title: 'Qtd',
      width: 90,
      render: (_: unknown, row: TopProduto) => (
        <InputNumber
          min={1}
          value={getQty(row)}
          size="small"
          style={{ width: 76 }}
          onChange={(v) => setQtys((prev) => ({ ...prev, [row.idProduto]: v ?? 1 }))}
        />
      ),
    },
    {
      title: '',
      width: 48,
      align: 'center',
      render: (_: unknown, row: TopProduto) => (
        <Tooltip title={cartSet.has(row.idProduto) ? 'Adicionar mais' : 'Adicionar ao pedido'}>
          <Button
            type={cartSet.has(row.idProduto) ? 'default' : 'primary'}
            size="small"
            icon={
              cartSet.has(row.idProduto) ? (
                <CheckCircleOutlined style={{ color: '#389e0d' }} />
              ) : (
                <PlusOutlined />
              )
            }
            style={{ borderRadius: 6 }}
            onClick={() => {
              onAdd(row, getQty(row));
              setQtys((prev) => {
                const n = { ...prev };
                delete n[row.idProduto];
                return n;
              });
            }}
          />
        </Tooltip>
      ),
    },
  ];

  const mobileColumns: TableColumnsType<TopProduto> = [
    {
      title: 'Produto',
      render: (_: unknown, row: TopProduto) => (
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 4, marginBottom: 2 }}>
            <Tag style={{ fontSize: 10, padding: '0 4px', margin: 0 }}>{row.codProduto.trim()}</Tag>
            {cartSet.has(row.idProduto) && (
              <CheckCircleOutlined style={{ color: '#389e0d', fontSize: 11 }} />
            )}
          </div>
          <Text style={{ fontWeight: 500, fontSize: 13 }}>{row.descricao}</Text>
          <Text type="secondary" style={{ fontSize: 11, display: 'block' }}>
            {fmt(row.ultimoPreco)} · {new Date(row.ultimaCompra).toLocaleDateString('pt-BR')}
          </Text>
        </div>
      ),
    },
    {
      title: 'Qtd',
      width: 82,
      render: (_: unknown, row: TopProduto) => (
        <InputNumber
          min={1}
          value={getQty(row)}
          size="small"
          style={{ width: 70 }}
          onChange={(v) => setQtys((prev) => ({ ...prev, [row.idProduto]: v ?? 1 }))}
        />
      ),
    },
    {
      title: '',
      width: 40,
      align: 'center',
      render: (_: unknown, row: TopProduto) => (
        <Button
          type={cartSet.has(row.idProduto) ? 'default' : 'primary'}
          size="small"
          icon={
            cartSet.has(row.idProduto) ? (
              <CheckCircleOutlined style={{ color: '#389e0d' }} />
            ) : (
              <PlusOutlined />
            )
          }
          style={{ borderRadius: 6 }}
          onClick={() => {
            onAdd(row, getQty(row));
            setQtys((prev) => {
              const n = { ...prev };
              delete n[row.idProduto];
              return n;
            });
          }}
        />
      ),
    },
  ];

  return (
    <div style={{ marginTop: 16 }}>
      {/* Banner âmbar de destaque — fechado por padrão, convida o rep a abrir */}
      <div
        style={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          gap: 10,
          padding: '10px 14px',
          background: '#FFF7E6',
          border: '1px solid #FFD591',
          borderRadius: collapsed ? 8 : '8px 8px 0 0',
          cursor: 'pointer',
          userSelect: 'none',
        }}
        onClick={() => setCollapsed((c) => !c)}
      >
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, minWidth: 0 }}>
          <HistoryOutlined style={{ color: '#D46B08', fontSize: 18, flexShrink: 0 }} />
          <div style={{ minWidth: 0 }}>
            <Text
              strong
              style={{ color: '#873800', fontSize: 13, display: 'block', lineHeight: 1.3 }}
            >
              Este cliente já comprou {produtos.length} produto{produtos.length !== 1 ? 's' : ''}{' '}
              com você
            </Text>
            <Text style={{ color: '#AD6800', fontSize: 11 }}>
              Veja o histórico e repita itens no pedido com um clique
            </Text>
          </div>
        </div>
        <Button
          size="small"
          style={{
            borderColor: '#FFD591',
            color: '#D46B08',
            background: '#fff',
            fontWeight: 600,
            flexShrink: 0,
          }}
          icon={collapsed ? <DownOutlined /> : <UpOutlined />}
          iconPosition="end"
        >
          {collapsed ? 'Ver produtos' : 'Ocultar'}
        </Button>
      </div>

      {!collapsed && (
        <div
          style={{
            border: '1px solid #FFD591',
            borderTop: 'none',
            borderRadius: '0 0 8px 8px',
            overflow: 'hidden',
            background: '#FFFDF7',
          }}
        >
          <Table<TopProduto>
            rowKey="idProduto"
            columns={isMobile ? mobileColumns : desktopColumns}
            dataSource={produtos}
            size="small"
            pagination={false}
            showHeader={false}
            onRow={(row) => ({
              style: {
                background: cartSet.has(row.idProduto) ? '#f0f7ff' : undefined,
                transition: 'background 0.15s',
              },
            })}
          />
        </div>
      )}
    </div>
  );
}

// ─── OrderItemsTable ──────────────────────────────────────────────────────────

function OrderItemsTable({
  items,
  tetoDe,
  onQtyChange,
  onDiscChange,
  onRemove,
}: {
  items: CartItem[];
  tetoDe: (item: CartItem) => number;
  onQtyChange: (key: string, qty: number) => void;
  onDiscChange: (key: string, disc: number) => void;
  onRemove: (key: string) => void;
}) {
  const screens = useBreakpoint();
  const isMobile = !screens.md;

  // ── Mobile: cards empilhados ──────────────────────────────────────
  if (isMobile) {
    if (items.length === 0) {
      return (
        <div
          style={{
            marginTop: 16,
            border: '1px solid #EBF0F5',
            borderRadius: 8,
            padding: '32px 16px',
            textAlign: 'center',
          }}
        >
          <ShoppingCartOutlined
            style={{ fontSize: 40, color: '#D9E2EC', display: 'block', margin: '0 auto 12px' }}
          />
          <Text type="secondary" style={{ display: 'block' }}>
            Nenhum produto adicionado.
          </Text>
          <Text type="secondary" style={{ fontSize: 12 }}>
            Pesquise acima ou abra o catálogo.
          </Text>
        </div>
      );
    }
    return (
      <div
        style={{ marginTop: 16, border: '1px solid #EBF0F5', borderRadius: 8, overflow: 'hidden' }}
      >
        {items.map((item) => (
          <MobileCartItem
            key={item.key}
            item={item}
            teto={tetoDe(item)}
            onQtyChange={onQtyChange}
            onDiscChange={onDiscChange}
            onRemove={onRemove}
          />
        ))}
      </div>
    );
  }

  // ── Desktop: tabela ───────────────────────────────────────────────
  const columns: TableColumnsType<CartItem> = [
    {
      title: 'Cód.',
      dataIndex: 'codProduto',
      width: 80,
      render: (v: string) => <Tag style={{ fontSize: 11 }}>{v}</Tag>,
    },
    {
      title: 'Descrição',
      dataIndex: 'descProduto',
      ellipsis: true,
    },
    {
      title: 'Qtd',
      dataIndex: 'qtd',
      width: 120,
      render: (v: number, row: CartItem) => {
        const lote = row.loteMulVenda ?? 1;
        const invalid = lote > 1 && v % lote !== 0;
        return (
          <div>
            <Tooltip
              title={
                invalid ? `Deve ser múltiplo de ${lote}` : lote > 1 ? `Lote: ${lote}` : undefined
              }
              color={invalid ? 'red' : 'blue'}
            >
              <InputNumber
                min={lote}
                step={lote}
                value={v}
                size="small"
                style={{ width: 84 }}
                status={invalid ? 'error' : undefined}
                onChange={(n) => onQtyChange(row.key, n ?? lote)}
              />
            </Tooltip>
            {lote > 1 && (
              <div style={{ fontSize: 10, color: invalid ? '#f5222d' : '#94A3B8', marginTop: 2 }}>
                lote: {lote}
              </div>
            )}
          </div>
        );
      },
    },
    {
      title: 'Un.',
      dataIndex: 'unidade',
      width: 60,
      render: (v: string) => (
        <Text type="secondary" style={{ fontSize: 12 }}>
          {v || '—'}
        </Text>
      ),
    },
    {
      title: 'Preço Unit.',
      dataIndex: 'precoUnitario',
      width: 110,
      align: 'right',
      render: (v: number) => <span className="tabular-nums">{fmt(v)}</span>,
    },
    {
      title: 'Desc %',
      dataIndex: 'descontoPerc',
      width: 110,
      render: (v: number, row: CartItem) => {
        const teto = tetoDe(row);
        const acimaTeto = v > teto + 0.001;
        return (
          <div>
            <Tooltip
              title={
                acimaTeto
                  ? `Acima do teto de ${teto}% — a transmissão será bloqueada`
                  : `Teto do item: ${teto}%`
              }
              color={acimaTeto ? 'red' : 'blue'}
            >
              <InputNumber
                min={0}
                max={100}
                step={0.5}
                value={v}
                size="small"
                style={{ width: 76 }}
                addonAfter="%"
                status={acimaTeto ? 'error' : undefined}
                onChange={(n) => onDiscChange(row.key, n ?? 0)}
              />
            </Tooltip>
            <div style={{ fontSize: 10, color: acimaTeto ? '#f5222d' : '#94A3B8', marginTop: 2 }}>
              {acimaTeto ? `acima do teto ${teto}%` : `teto: ${teto}%`}
            </div>
          </div>
        );
      },
    },
    {
      title: 'Total',
      width: 120,
      align: 'right',
      render: (_: unknown, row: CartItem) => (
        <Text strong className="tabular-nums">
          {fmt(itemTotal(row))}
        </Text>
      ),
    },
    {
      title: '',
      width: 48,
      render: (_: unknown, row: CartItem) => (
        <Tooltip title="Remover item">
          <Button
            type="text"
            danger
            size="small"
            icon={<DeleteOutlined />}
            onClick={() => onRemove(row.key)}
          />
        </Tooltip>
      ),
    },
  ];

  return (
    <Table<CartItem>
      rowKey="key"
      columns={columns}
      dataSource={items}
      size="small"
      pagination={false}
      locale={{
        emptyText: (
          <Empty
            image={<ShoppingCartOutlined style={{ fontSize: 48, color: '#D9E2EC' }} />}
            styles={{ image: { height: 60 } }}
            description={
              <Space orientation="vertical" size={2}>
                <Text type="secondary">Nenhum produto adicionado ao pedido ainda.</Text>
                <Text type="secondary" style={{ fontSize: 12 }}>
                  Pesquise acima ou abra o catálogo para incluir itens.
                </Text>
              </Space>
            }
          />
        ),
      }}
      style={{ marginTop: 16 }}
    />
  );
}

// ─── OrderSummaryFooter ───────────────────────────────────────────────────────

function OrderSummaryFooter({
  total,
  submitting,
  canSubmit,
  missingReason,
  onCancel,
  onSubmit,
}: {
  total: number;
  submitting: boolean;
  canSubmit: boolean;
  missingReason?: string;
  onCancel: () => void;
  onSubmit: () => void;
}) {
  const screens = useBreakpoint();
  const isMobile = !screens.md;

  return (
    <div
      style={{
        position: 'sticky',
        bottom: 0,
        zIndex: 100,
        background: '#fff',
        borderTop: '1px solid #EBF0F5',
        boxShadow: '0 -2px 12px rgba(0,0,0,0.08)',
        padding: isMobile ? '12px 16px' : '16px 32px',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        gap: 12,
      }}
    >
      <div>
        <Text
          style={{
            fontSize: 10,
            fontWeight: 700,
            letterSpacing: '0.08em',
            textTransform: 'uppercase',
            color: '#64748B',
            display: 'block',
          }}
        >
          TOTAL
        </Text>
        <Title
          level={isMobile ? 4 : 3}
          style={{ margin: 0, color: '#003B8E' }}
          className="tabular-nums"
        >
          {fmt(total)}
        </Title>
      </div>

      <Space size={8}>
        {!isMobile && (
          <Button size="large" onClick={onCancel} style={{ borderRadius: 8, minWidth: 110 }}>
            Cancelar
          </Button>
        )}
        <Tooltip title={!canSubmit ? missingReason : undefined}>
          <Button
            type="primary"
            size={isMobile ? 'middle' : 'large'}
            icon={<CheckCircleOutlined />}
            loading={submitting}
            disabled={!canSubmit}
            onClick={onSubmit}
            style={{
              borderRadius: 8,
              minWidth: isMobile ? 140 : 160,
              backgroundColor: canSubmit ? '#389e0d' : undefined,
              borderColor: canSubmit ? '#389e0d' : undefined,
              fontWeight: 600,
            }}
          >
            Finalizar Pedido
          </Button>
        </Tooltip>
      </Space>
    </div>
  );
}

// ─── NewOrderPage ─────────────────────────────────────────────────────────────

export function NewOrderPage() {
  const { clientId: clientIdParam, editar: editarId } = useSearch({
    strict: false,
  }) as SearchParams;
  const navigate = useNavigate();
  const qc = useQueryClient();
  const { message } = App.useApp();

  // ── Modo edição: orçamento (situa 0) carregado para alteração ──
  const { data: editOrder } = useOrderDetail(editarId);

  // ── Dados do cliente ──
  const [clientSearch, setClientSearch] = useState('');
  const [selectedClient, setSelectedClient] = useState<ClientSummary | null>(null);

  const { data: preloadedClient } = useClientDetail(
    clientIdParam ? Number(clientIdParam) : undefined,
  );
  // Para clientes selecionados manualmente, buscamos o Detail para ter endereco/bairro/cep.
  const { data: selectedClientDetail } = useClientDetail(
    !clientIdParam && selectedClient ? selectedClient.idCliente : undefined,
  );
  const { data: editClient } = useClientDetail(
    editarId && editOrder ? editOrder.idCliente : undefined,
  );
  const clientDetail = selectedClientDetail ?? preloadedClient ?? editClient ?? null;
  const effectiveClient = selectedClient ?? preloadedClient ?? editClient ?? null;

  // ── Campos comerciais ──
  const { data: pautas = [] } = usePautas();
  const { data: formasPagamento = [] } = useFormasPagamento();
  const [idPauta, setIdPauta] = useState<number | undefined>();
  const [codFormapag, setCodFormapag] = useState<number | undefined>();
  const [contato, setContato] = useState('');

  // ── Informações adicionais ──
  const [numOC, setNumOC] = useState('');
  const [obs, setObs] = useState('');

  // ── Endereço de entrega ──
  // 'cadastrado' usa o endereço do cliente; 'outro' usa campo livre
  const [endTipo, setEndTipo] = useState<'cadastrado' | 'outro'>('cadastrado');
  const [endCustom, setEndCustom] = useState('');

  // ── Carrinho ──
  const [cart, setCart] = useState<CartItem[]>([]);

  // ── UI ──
  const [error, setError] = useState<string | null>(null);
  const [catalogOpen, setCatalogOpen] = useState(false);

  // Pré-carrega o formulário quando entra em modo edição (uma vez só)
  const [editLoaded, setEditLoaded] = useState(false);
  useEffect(() => {
    if (!editarId || !editOrder || editLoaded) return;
    setEditLoaded(true);
    if (editOrder.situa !== 0) {
      setError('Este pedido já foi transmitido e não pode mais ser editado.');
      return;
    }
    setCart(
      editOrder.itens.map((it) => ({
        key: String(it.idProduto),
        idProduto: it.idProduto,
        codProduto: it.codProduto ?? '',
        descProduto: it.descProduto ?? '',
        unidade: '',
        qtd: Number(it.qtd),
        precoUnitario: Number(it.precoUnitario),
        descontoPerc: Number(it.descontoPerc),
        loteMulVenda: null,
        codGrupo: it.codGrupo ?? null,
        codSubgrupo: it.codSubgrupo ?? null,
      })),
    );
    setIdPauta(editOrder.idPauta ?? undefined);
    setCodFormapag(editOrder.codFormapag ?? undefined);
    setObs(editOrder.obs ?? '');
    if (editOrder.endEntrega) {
      setEndTipo('outro');
      setEndCustom(editOrder.endEntrega);
    }
  }, [editarId, editOrder, editLoaded]);

  // Endereço cadastrado do cliente — usa Detail (tem endereco/bairro/cep), não Summary.
  const clientEndStr = (() => {
    if (!clientDetail) return '';
    const parts = [
      clientDetail.endereco,
      clientDetail.numEndereco ? `nº ${clientDetail.numEndereco}` : null,
      clientDetail.bairro,
      clientDetail.cep,
    ].filter(Boolean);
    return parts.join(', ');
  })();
  const hasClientEnd = !!clientEndStr;

  // Teto de desconto por item (alçada + promoção/regra) — aviso em tempo real
  const tetoDesconto = useTetoDesconto();
  const tetoDe = (it: CartItem) =>
    tetoDesconto({ codigo: it.codProduto, codGrupo: it.codGrupo, codSubgrupo: it.codSubgrupo });

  const totalPedido = cart.reduce((acc, it) => acc + itemTotal(it), 0);
  const loteErrors = cart.filter((it) => {
    const lote = it.loteMulVenda ?? 1;
    return lote > 1 && it.qtd % lote !== 0;
  });
  // Desconto acima do teto bloqueia o Concluir — o backend recusa a criação
  // do orçamento de qualquer forma; aqui a mensagem chega antes do clique.
  const tetoErrors = cart.filter((it) => it.descontoPerc > tetoDe(it) + 0.001);
  const canSubmit =
    !!effectiveClient && cart.length > 0 && loteErrors.length === 0 && tetoErrors.length === 0;
  const missingReason = !effectiveClient
    ? 'Selecione um cliente para continuar'
    : cart.length === 0
      ? 'Adicione ao menos um produto ao pedido'
      : loteErrors.length > 0
        ? 'Corrija as quantidades com lote múltiplo'
        : tetoErrors.length > 0
          ? `Desconto acima do teto em: ${tetoErrors.map((it) => it.codProduto.trim()).join(', ')}`
          : undefined;

  function clearClient() {
    setSelectedClient(null);
    setClientSearch('');
  }

  // ── Handlers do carrinho ──
  // Item entra SEM desconto mesmo quando há promoção/regra vigente (selo
  // "Condição comercial" avisa o rep): a proposta é carta de negociação — o rep
  // concede só se o cliente pedir, e a alçada no backend aceita até o % da regra.
  const addToCart = (p: ProdutoSummary, qty?: number) => {
    const lote = p.loteMulVenda ?? 1;
    const finalQty = qty ?? lote;
    setCart((prev) => {
      const existing = prev.find((it) => it.idProduto === p.idErp);
      if (existing) {
        return prev.map((it) =>
          it.idProduto === p.idErp ? { ...it, qtd: it.qtd + finalQty } : it,
        );
      }
      return [
        ...prev,
        {
          key: String(p.idErp),
          idProduto: p.idErp,
          codProduto: p.codigo,
          descProduto: p.descricao,
          unidade: p.unidade ?? '',
          qtd: finalQty,
          precoUnitario: Number(p.vlPreco1),
          descontoPerc: 0,
          loteMulVenda: p.loteMulVenda,
          codGrupo: p.codGrupo,
          codSubgrupo: p.codSubgrupo,
        },
      ];
    });
  };

  const addHistoryItemToCart = (p: TopProduto, qty: number) => {
    setCart((prev) => {
      const existing = prev.find((it) => it.idProduto === p.idProduto);
      if (existing) {
        return prev.map((it) => (it.idProduto === p.idProduto ? { ...it, qtd: it.qtd + qty } : it));
      }
      return [
        ...prev,
        {
          key: String(p.idProduto),
          idProduto: p.idProduto,
          codProduto: p.codProduto,
          descProduto: p.descricao,
          unidade: p.unidade ?? '',
          qtd: qty,
          precoUnitario: p.ultimoPreco,
          descontoPerc: 0,
          loteMulVenda: null,
          // TopProduto não traz grupo/subgrupo — teto considera só alçada default
          codGrupo: null,
          codSubgrupo: null,
        },
      ];
    });
  };

  const setQty = (key: string, qty: number) =>
    setCart((prev) => prev.map((it) => (it.key === key ? { ...it, qtd: qty } : it)));

  const setDisc = (key: string, disc: number) =>
    setCart((prev) => prev.map((it) => (it.key === key ? { ...it, descontoPerc: disc } : it)));

  const removeItem = (key: string) => setCart((prev) => prev.filter((it) => it.key !== key));

  // ── Submissão ──
  const mutation = useMutation({
    mutationFn: async () => {
      if (!effectiveClient) throw new Error('Selecione um cliente para continuar.');
      if (cart.length === 0) throw new Error('Adicione ao menos um produto ao pedido.');
      const invalidos = cart.filter((it) => {
        const lote = it.loteMulVenda ?? 1;
        return lote > 1 && it.qtd % lote !== 0;
      });
      if (invalidos.length > 0) {
        throw new Error(
          `Quantidade inválida: ${invalidos.map((it) => `${it.codProduto.trim()} (lote múltiplo: ${it.loteMulVenda})`).join(', ')}`,
        );
      }
      // Cobre também o caminho offline (enqueueOrder não passa pelo backend)
      const acimaTeto = cart.filter((it) => it.descontoPerc > tetoDe(it) + 0.001);
      if (acimaTeto.length > 0) {
        throw new Error(
          `Desconto acima do teto: ${acimaTeto.map((it) => `${it.codProduto.trim()} (máx. ${tetoDe(it)}%)`).join(', ')}`,
        );
      }

      const obsCompleta = [
        contato ? `Contato: ${contato}` : null,
        numOC ? `OC: ${numOC}` : null,
        obs || null,
      ]
        .filter(Boolean)
        .join(' | ');

      const endEntregaValue =
        endTipo === 'cadastrado' ? clientEndStr || undefined : endCustom.trim() || undefined;

      const body: CreatePedido = {
        idCliente: effectiveClient.idCliente,
        idPauta,
        codFormapag,
        descontoPerc: 0,
        obs: obsCompleta || undefined,
        endEntrega: endEntregaValue,
        idempotencyKey: editarId ? undefined : randomUUID(),
        itens: cart.map((it, idx) => ({
          idProduto: it.idProduto,
          codProduto: it.codProduto,
          descProduto: it.descProduto,
          ordem: idx + 1,
          qtd: it.qtd,
          precoUnitario: it.precoUnitario,
          descontoPerc: it.descontoPerc,
        })),
      };

      // Edição altera o orçamento existente — requer conexão
      if (editarId) {
        if (!navigator.onLine) {
          throw new Error('Edição de orçamento requer conexão. Tente novamente online.');
        }
        return apiFetch(`/orders/${editarId}`, { method: 'PATCH', body }) as Promise<{
          id: string;
        }>;
      }

      if (!navigator.onLine) {
        await enqueueOrder(body, effectiveClient.nome);
        window.dispatchEvent(new CustomEvent('sar:order-queued'));
        return null;
      }

      return apiFetch('/orders', { method: 'POST', body }) as Promise<{ id: string }>;
    },
    onSuccess: (created) => {
      void qc.invalidateQueries({ queryKey: ['orders'] });
      void qc.invalidateQueries({ queryKey: ['clients'] });
      if (editarId && created) {
        message.success('Orçamento atualizado');
        void navigate({ to: '/pedidos/$id', params: { id: created.id } });
        return;
      }
      if (!created) {
        setError(null);
        setCart([]);
        setSelectedClient(null);
        setClientSearch('');
        setIdPauta(undefined);
        setCodFormapag(undefined);
        setObs('');
        setContato('');
        setNumOC('');
        setEndTipo('cadastrado');
        setEndCustom('');
        message.success('Pedido salvo offline — será transmitido ao reconectar');
        return;
      }
      void navigate({ to: '/pedidos/$id', params: { id: created.id } });
    },
    onError: (e: unknown) => setError(e instanceof Error ? e.message : 'Erro ao salvar pedido'),
  });

  return (
    <div style={{ maxWidth: 1100, margin: '0 auto' }}>
      {/* ── Cabeçalho ─────────────────────────────────────────────────── */}
      <div
        style={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          marginBottom: 20,
        }}
      >
        <Title level={3} style={{ margin: 0, color: '#003B8E' }}>
          {editarId
            ? `Editar Orçamento${editOrder ? ` ${editOrder.numPedSar}` : ''}`
            : 'Lançamento de Pedido'}
        </Title>
        <Button
          icon={<ArrowLeftOutlined />}
          onClick={() =>
            void (clientIdParam
              ? navigate({ to: '/clientes/$id', params: { id: clientIdParam } })
              : navigate({ to: '/pedidos' }))
          }
          style={{ borderRadius: 8 }}
        >
          Voltar
        </Button>
      </div>

      {error && (
        <Alert
          type="error"
          message={error}
          showIcon
          closable
          onClose={() => setError(null)}
          style={{ marginBottom: 16, borderRadius: 8 }}
        />
      )}

      {/* ── Card 1: Dados do Pedido ────────────────────────────────────── */}
      <Card style={cardStyle} styles={{ body: { padding: '20px 24px' } }}>
        <span style={sectionLabel}>Dados do Pedido</span>

        <CustomerSearch
          value={clientSearch}
          selected={selectedClient ?? preloadedClient ?? null}
          onSearch={setClientSearch}
          onSelect={(c) => {
            setSelectedClient(c);
            setClientSearch('');
          }}
        />

        {effectiveClient && (
          <div
            style={{
              margin: '10px 0 16px',
              padding: '8px 12px',
              background: '#F0F7FF',
              borderRadius: 8,
              border: '1px solid #BAD7FF',
              display: 'flex',
              alignItems: 'center',
              gap: 8,
              flexWrap: 'wrap',
            }}
          >
            <CheckCircleOutlined style={{ color: '#0057D9' }} />
            <Text style={{ color: '#003B8E', fontWeight: 600, flex: 1, minWidth: 120 }}>
              {effectiveClient.razao ?? effectiveClient.nome}
            </Text>
            {effectiveClient.cgcpf && (
              <Text type="secondary" style={{ fontSize: 12 }}>
                {effectiveClient.cgcpf}
              </Text>
            )}
            {effectiveClient.limiteCreditoStr && (
              <Text type="secondary" style={{ fontSize: 12 }}>
                Limite: {fmt(Number(effectiveClient.limiteCreditoStr))}
              </Text>
            )}
            {!clientIdParam && (
              <Tooltip title="Trocar cliente">
                <Button
                  type="text"
                  size="small"
                  icon={<CloseOutlined />}
                  onClick={clearClient}
                  style={{ color: '#64748B' }}
                />
              </Tooltip>
            )}
          </div>
        )}

        <Row gutter={[16, 16]} style={{ marginTop: effectiveClient ? 0 : 16 }}>
          <Col xs={24} sm={8}>
            <div style={fieldLabel}>Pauta de Preço</div>
            <Select
              style={{ width: '100%' }}
              placeholder="Pauta padrão"
              allowClear
              value={idPauta}
              onChange={setIdPauta}
              options={pautas.map((p: Pauta) => ({ value: p.idPauta, label: p.descricao }))}
            />
          </Col>
          <Col xs={24} sm={8}>
            <div style={fieldLabel}>Condição de Pagamento</div>
            <Select
              style={{ width: '100%' }}
              placeholder="Selecione..."
              allowClear
              value={codFormapag}
              onChange={setCodFormapag}
              options={formasPagamento.map((f: FormaPagamento) => ({
                value: f.codigo,
                label: f.descricao,
              }))}
            />
          </Col>
          <Col xs={24} sm={8}>
            <div style={fieldLabel}>Contato Responsável</div>
            <Input
              value={contato}
              onChange={(e) => setContato(e.target.value)}
              placeholder="Nome de quem está comprando"
              style={{ borderRadius: 6 }}
            />
          </Col>
        </Row>

        <Divider style={{ margin: '20px 0 16px' }} />

        <Row gutter={[16, 16]}>
          <Col xs={24} sm={8}>
            <div style={fieldLabel}>Nº Ordem de Compra (Cliente)</div>
            <Input
              value={numOC}
              onChange={(e) => setNumOC(e.target.value)}
              placeholder="Ex: OC-98765"
              style={{ borderRadius: 6 }}
            />
          </Col>
          <Col xs={24} sm={16}>
            <div style={fieldLabel}>Observações do Pedido</div>
            <Input.TextArea
              value={obs}
              onChange={(e) => setObs(e.target.value)}
              placeholder="Instruções de entrega, detalhes logísticos, etc..."
              maxLength={400}
              rows={2}
              style={{ borderRadius: 6, resize: 'vertical' }}
            />
          </Col>
        </Row>

        {/* Endereço de entrega — aparece apenas quando há cliente selecionado */}
        {effectiveClient && (
          <>
            <Divider style={{ margin: '20px 0 16px' }} />
            <div style={fieldLabel}>Endereço de Entrega</div>
            <Radio.Group
              value={endTipo}
              onChange={(e) => setEndTipo(e.target.value as 'cadastrado' | 'outro')}
              style={{ marginBottom: 10 }}
            >
              <Radio value="cadastrado" disabled={!hasClientEnd}>
                Endereço cadastrado
              </Radio>
              <Radio value="outro">Outro endereço</Radio>
            </Radio.Group>

            {endTipo === 'cadastrado' && hasClientEnd && (
              <div
                style={{
                  padding: '8px 12px',
                  background: '#F8FAFC',
                  border: '1px solid #EBF0F5',
                  borderRadius: 6,
                  fontSize: 13,
                  color: '#475569',
                }}
              >
                {clientEndStr}
              </div>
            )}

            {(endTipo === 'outro' || !hasClientEnd) && (
              <Input
                value={endCustom}
                onChange={(e) => setEndCustom(e.target.value)}
                placeholder="Ex: Rua das Flores, 123 — Bairro Industrial — CEP 12345-678"
                maxLength={120}
                style={{ borderRadius: 6 }}
              />
            )}
          </>
        )}
      </Card>

      {/* ── Card 2: Produtos ────────────────────────────────────────────── */}
      <Card style={cardStyle} styles={{ body: { padding: '20px 24px' } }}>
        <span style={sectionLabel}>Pesquisar e Adicionar Produtos</span>

        <ProductSearch
          idPauta={idPauta}
          onAdd={(p) => addToCart(p)}
          onOpenCatalog={() => setCatalogOpen(true)}
        />

        {effectiveClient && (
          <ClientHistoryPanel
            idCliente={effectiveClient.idCliente}
            cart={cart}
            onAdd={addHistoryItemToCart}
          />
        )}

        <Divider style={{ margin: '16px 0 0' }} />

        <OrderItemsTable
          items={cart}
          tetoDe={tetoDe}
          onQtyChange={setQty}
          onDiscChange={setDisc}
          onRemove={removeItem}
        />

        {cart.length > 0 && (
          <div
            style={{
              display: 'flex',
              justifyContent: 'flex-end',
              marginTop: 12,
              paddingTop: 12,
              borderTop: '1px solid #EBF0F5',
              gap: 24,
            }}
          >
            <Text type="secondary">
              {cart.length} item(ns) · {cart.reduce((a, i) => a + i.qtd, 0).toLocaleString('pt-BR')}{' '}
              unidades
            </Text>
          </div>
        )}
      </Card>

      {/* ── Alerta de lote múltiplo ────────────────────────────────────── */}
      {loteErrors.length > 0 && (
        <Alert
          type="warning"
          showIcon
          style={{ marginBottom: 16, borderRadius: 8 }}
          message="Quantidade não respeita o lote múltiplo de venda"
          description={loteErrors
            .map(
              (it) => `${it.codProduto.trim()} — ${it.descProduto.trim()}: lote ${it.loteMulVenda}`,
            )
            .join(' · ')}
        />
      )}

      {/* ── Rodapé fixo ─────────────────────────────────────────────────── */}
      <OrderSummaryFooter
        total={totalPedido}
        submitting={mutation.isPending}
        canSubmit={canSubmit}
        missingReason={missingReason}
        onCancel={() =>
          void navigate({ to: clientIdParam ? `/clientes/${clientIdParam}` : '/pedidos' })
        }
        onSubmit={() => mutation.mutate()}
      />

      {/* ── Modal do catálogo ─────────────────────────────────────────── */}
      <CatalogBrowserModal
        open={catalogOpen}
        onClose={() => setCatalogOpen(false)}
        idPauta={idPauta}
        cart={cart}
        onAdd={addToCart}
      />
    </div>
  );
}
