import { useState, useEffect, useCallback, useRef } from 'react'
import {
  Search, ShoppingCart, X, Tag, Percent,
  Package, ChevronDown, CheckCircle2, AlertCircle,
  ShoppingBag, Truck, MapPin, FileText, RefreshCw, Zap, Clock, Home,
} from 'lucide-react'
import { ProdutoClienteAPI, CotacaoClienteAPI } from '../api'

// ─── Validações CPF / CNPJ ────────────────────────────────────────────────────

function validarCPF(cpf: string): boolean {
  const n = cpf.replace(/\D/g, '')
  if (n.length !== 11 || /^(\d)\1+$/.test(n)) return false
  let s = 0
  for (let i = 0; i < 9; i++) s += +n[i] * (10 - i)
  let r = (s * 10) % 11; if (r === 10 || r === 11) r = 0
  if (r !== +n[9]) return false
  s = 0
  for (let i = 0; i < 10; i++) s += +n[i] * (11 - i)
  r = (s * 10) % 11; if (r === 10 || r === 11) r = 0
  return r === +n[10]
}

function validarCNPJ(cnpj: string): boolean {
  const n = cnpj.replace(/\D/g, '')
  if (n.length !== 14 || /^(\d)\1+$/.test(n)) return false
  const calc = (len: number) => {
    let s = 0, pos = len - 7
    for (let i = len; i >= 1; i--) { s += +n[len - i] * pos--; if (pos < 2) pos = 9 }
    const r = s % 11
    return r < 2 ? 0 : 11 - r
  }
  return calc(12) === +n[12] && calc(13) === +n[13]
}

function validarDocumento(doc: string): boolean {
  const d = doc.replace(/\D/g, '')
  return d.length === 11 ? validarCPF(d) : d.length === 14 ? validarCNPJ(d) : false
}

function maskDoc(v: string) {
  const d = v.replace(/\D/g, '').slice(0, 14)
  if (d.length <= 11)
    return d.replace(/(\d{3})(\d{3})(\d{3})(\d{0,2})/, (_,a,b,c,e) => [a,b,c].filter(Boolean).join('.')+(e?'-'+e:''))
  return d.replace(/(\d{2})(\d{3})(\d{3})(\d{4})(\d{0,2})/, (_,a,b,c,d,e) => `${a}.${b}.${c}/${d}${e?'-'+e:''}`)
}

function maskCEP(v: string) {
  return v.replace(/\D/g, '').slice(0, 8).replace(/(\d{5})(\d{0,3})/, '$1-$2')
}

// ─── Hook ViaCEP ─────────────────────────────────────────────────────────────

interface Endereco { cep: string; rua: string; numero: string; complemento: string; bairro: string; cidade: string; estado: string }
const enderecoVazio: Endereco = { cep: '', rua: '', numero: '', complemento: '', bairro: '', cidade: '', estado: '' }

function useCEP(cep: string, setEnd: (fn: (e: Endereco) => Endereco) => void) {
  const [buscando, setBuscando] = useState(false)
  useEffect(() => {
    const digits = cep.replace(/\D/g, '')
    if (digits.length !== 8) return
    setBuscando(true)
    fetch(`https://viacep.com.br/ws/${digits}/json/`)
      .then(r => r.json())
      .then(d => {
        if (d.erro) return
        setEnd(e => ({ ...e, rua: d.logradouro || '', bairro: d.bairro || '', cidade: d.localidade || '', estado: d.uf || '' }))
      })
      .catch(() => {})
      .finally(() => setBuscando(false))
  }, [cep])
  return buscando
}

// ─── Tipos ────────────────────────────────────────────────────────────────────

interface Produto {
  id: number
  nome: string
  sku: string
  preco: number
  preco_promocional?: number
  unidade: string
  estoque: number
  categoria: string
  descricao?: string
  imagem?: string
  promocao_id?: number
}

interface ItemCarrinho {
  id: number
  produto_id: number
  nome_produto: string
  sku: string
  quantidade: number
  preco_unitario: number
  preco_promocional?: number
  desconto_pct: number
  subtotal: number
  observacao?: string
}

interface Carrinho {
  id: number
  status: string
  total: number
  cliente_tipo?: string
  itens: ItemCarrinho[]
}

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

function fmt(v: number | string | undefined | null) {
  if (v == null) return '—'
  return `R$ ${Number(v).toFixed(2).replace('.', ',')}`
}

function descVolumePJ(total_itens: number): { pct: number; label: string } | null {
  if (total_itens >= 50) return { pct: 8, label: '50+ itens' }
  if (total_itens >= 30) return { pct: 5, label: '30+ itens' }
  if (total_itens >= 10) return { pct: 3, label: '10+ itens' }
  return null
}

// ─── Flash Promo Banner com countdown (PROMO-10) ─────────────────────────────

interface FlashPromo {
  id: number
  discount_pct: number
  label: string
  ends_at: string
  produto_nome?: string
  produto_sku?: string
}

function useCountdown(endsAt: string | null) {
  const [secs, setSecs] = useState(0)
  useEffect(() => {
    if (!endsAt) return
    const endDate = new Date(endsAt)
    function calc() { setSecs(Math.max(0, Math.floor((endDate.getTime() - Date.now()) / 1000))) }
    calc()
    const iv = setInterval(calc, 1000)
    return () => clearInterval(iv)
  }, [endsAt])
  const h = Math.floor(secs / 3600)
  const m = Math.floor((secs % 3600) / 60)
  const s = secs % 60
  return { expired: secs === 0, h, m, s, secs }
}

function FlashPromoBanner({ promo }: { promo: FlashPromo }) {
  const { expired, h, m, s } = useCountdown(promo.ends_at)
  if (expired) return null
  const pad = (n: number) => String(n).padStart(2, '0')

  return (
    <div className="w-full bg-gradient-to-r from-rose-600 to-orange-500 rounded-2xl px-4 py-3 flex flex-wrap items-center gap-3 mb-6">
      <div className="flex items-center gap-2 text-white">
        <Zap size={18} className="shrink-0 animate-pulse" />
        <div>
          <p className="text-xs font-black uppercase tracking-widest opacity-80">Promoção Relâmpago</p>
          <p className="text-sm font-bold leading-tight">
            {promo.label}
            {promo.produto_nome ? ` — ${promo.produto_nome}` : ''}
          </p>
        </div>
      </div>
      <div className="ml-auto flex items-center gap-2">
        <span className="text-white font-black text-xl">-{promo.discount_pct}%</span>
        <div className="flex items-center gap-1 bg-black/20 rounded-lg px-2 py-1">
          <Clock size={12} className="text-white/70" />
          <span className="text-white font-mono text-sm font-bold">
            {h > 0 ? `${pad(h)}:` : ''}{pad(m)}:{pad(s)}
          </span>
        </div>
      </div>
    </div>
  )
}

// ─── Badge "Em Promoção" ──────────────────────────────────────────────────────

function PromoBadge() {
  return (
    <span className="inline-flex items-center gap-1 bg-amber-500 text-black text-[10px] font-black uppercase tracking-wider px-2 py-0.5 rounded-full">
      <Tag size={9} /> Promoção
    </span>
  )
}

// ─── Card de Produto ──────────────────────────────────────────────────────────

function ProdutoCard({
  produto,
  onAdd,
  qtdNoCarrinho,
}: {
  produto: Produto
  onAdd: (p: Produto, qty: number) => void
  qtdNoCarrinho: number
}) {
  const temPromo = produto.preco_promocional != null && Number(produto.preco_promocional) > 0
  const precoFinal = temPromo ? Number(produto.preco_promocional) : Number(produto.preco)
  const descPct = temPromo
    ? Math.round((1 - Number(produto.preco_promocional!) / Number(produto.preco)) * 100)
    : 0
  const semEstoque = Number(produto.estoque) <= 0

  function handleAdd() {
    if (semEstoque) return
    onAdd(produto, 1)
  }

  return (
    <div className="bg-slate-900 border border-white/10 rounded-xl p-4 flex flex-col gap-3 hover:border-amber-500/30 transition-colors">
      {/* Header */}
      <div className="flex items-start justify-between gap-2">
        <div className="flex-1 min-w-0">
          <p className="text-[10px] text-slate-500 font-mono mb-0.5 truncate">{produto.sku}</p>
          <p className="text-sm font-semibold text-white leading-tight">{produto.nome}</p>
        </div>
        {temPromo && <PromoBadge />}
      </div>

      {/* Categoria */}
      <span className="text-[10px] text-slate-500 bg-white/5 px-2 py-0.5 rounded-full w-fit">
        {produto.categoria}
      </span>

      {/* Preço */}
      <div>
        {temPromo ? (
          <>
            <p className="text-xs text-slate-500 line-through">{fmt(produto.preco)} / {produto.unidade}</p>
            <div className="flex items-baseline gap-2">
              <p className="text-lg font-black text-amber-400">{fmt(precoFinal)}</p>
              <span className="text-xs font-bold text-emerald-400">-{descPct}%</span>
            </div>
            <p className="text-xs text-slate-500">por {produto.unidade}</p>
          </>
        ) : (
          <>
            <p className="text-lg font-black text-white">{fmt(produto.preco)}</p>
            <p className="text-xs text-slate-500">por {produto.unidade}</p>
          </>
        )}
      </div>

      {/* Estoque */}
      <p className={`text-xs font-medium ${semEstoque ? 'text-rose-400' : 'text-emerald-400'}`}>
        {semEstoque ? '⚠ Indisponível' : `✓ Disponível (${produto.estoque} ${produto.unidade})`}
      </p>

      {/* Botão */}
      <button
        onClick={handleAdd}
        disabled={semEstoque}
        className={`mt-auto w-full flex items-center justify-center gap-2 py-2 rounded-lg text-sm font-semibold transition-colors
          ${semEstoque
            ? 'bg-white/5 text-slate-600 cursor-not-allowed'
            : qtdNoCarrinho > 0
              ? 'bg-amber-500/20 text-amber-400 border border-amber-500/30 hover:bg-amber-500/30'
              : 'bg-amber-500 text-black hover:bg-amber-400'
          }`}
      >
        <ShoppingCart size={14} />
        {qtdNoCarrinho > 0 ? `No carrinho (${qtdNoCarrinho})` : 'Adicionar'}
      </button>
    </div>
  )
}

// ─── Drawer do Carrinho ───────────────────────────────────────────────────────

type Passo = 'carrinho' | 'checkout' | 'sucesso'

function CarrinhoDrawer({
  carrinho,
  open,
  onClose,
  onRemove,
  onFinalizar,
  loading,
}: {
  carrinho: Carrinho | null
  open: boolean
  onClose: () => void
  onRemove: (cotacaoId: number, itemId: number) => void
  onFinalizar: (data: { forma_pagto: string; tipo_entrega: string; observacao: string; endereco?: Endereco; cpf_cnpj?: string }) => void
  loading: boolean
}) {
  const [passo, setPasso] = useState<Passo>('carrinho')
  const [formaPagto, setFormaPagto] = useState('pix')
  const [tipoEntrega, setTipoEntrega] = useState('entrega')
  const [observacao, setObservacao] = useState('')
  const [endereco, setEndereco] = useState<Endereco>(enderecoVazio)
  const [cpfCnpj, setCpfCnpj] = useState('')
  const [erroDoc, setErroDoc] = useState('')
  const [erroEnd, setErroEnd] = useState('')
  const buscandoCEP = useCEP(endereco.cep, setEndereco)

  // Observações por item: { [itemId]: string }
  const [obsMap, setObsMap] = useState<Record<number, string>>({})
  const obsTimers = useRef<Record<number, ReturnType<typeof setTimeout>>>({})

  // Sync obsMap quando itens mudam (ex: drawer abre)
  useEffect(() => {
    if (carrinho?.itens) {
      setObsMap(prev => {
        const next = { ...prev }
        for (const item of carrinho.itens) {
          if (!(item.id in next)) next[item.id] = item.observacao ?? ''
        }
        return next
      })
    }
  }, [carrinho?.itens])

  function handleObsChange(itemId: number, value: string) {
    setObsMap(prev => ({ ...prev, [itemId]: value }))
    if (obsTimers.current[itemId]) clearTimeout(obsTimers.current[itemId])
    obsTimers.current[itemId] = setTimeout(() => {
      if (carrinho) CotacaoClienteAPI.updateItemObs(carrinho.id, itemId, value).catch(() => {})
    }, 600)
  }

  // Reset ao fechar
  useEffect(() => {
    if (!open) {
      setPasso('carrinho'); setObservacao(''); setEndereco(enderecoVazio)
      setCpfCnpj(''); setErroDoc(''); setErroEnd('')
    }
  }, [open])

  const itens = carrinho?.itens ?? []
  const totalItens = itens.reduce((s, i) => s + Number(i.quantidade), 0)
  const isPJ = carrinho?.cliente_tipo === 'PJ'
  const volDesc = isPJ ? descVolumePJ(totalItens) : null
  const subtotalBruto = itens.reduce((s, i) => s + Number(i.subtotal), 0)
  const descontoVolume = volDesc ? subtotalBruto * volDesc.pct / 100 : 0
  const totalFinal = subtotalBruto - descontoVolume

  function handleFinalizar() {
    setErroDoc(''); setErroEnd('')
    // Valida CPF/CNPJ se informado
    if (cpfCnpj && !validarDocumento(cpfCnpj)) {
      setErroDoc('CPF ou CNPJ inválido.')
      return
    }
    // Valida endereço se entrega
    if (tipoEntrega === 'entrega') {
      if (!endereco.cep || !endereco.rua || !endereco.numero || !endereco.cidade) {
        setErroEnd('Preencha CEP, rua, número e cidade para entrega.')
        return
      }
    }
    onFinalizar({
      forma_pagto: formaPagto,
      tipo_entrega: tipoEntrega,
      observacao,
      endereco: tipoEntrega === 'entrega' ? endereco : undefined,
      cpf_cnpj: cpfCnpj || undefined,
    })
    setPasso('sucesso')
  }

  return (
    <>
      {/* Overlay */}
      {open && (
        <div
          className="fixed inset-0 bg-black/60 backdrop-blur-sm z-40"
          onClick={onClose}
        />
      )}

      {/* Drawer */}
      <div className={`fixed top-0 right-0 h-full w-full sm:w-[420px] bg-slate-950 border-l border-white/10 z-50
        flex flex-col transform transition-transform duration-300
        ${open ? 'translate-x-0' : 'translate-x-full'}`}
      >
        {/* Header */}
        <div className="flex items-center justify-between px-5 py-4 border-b border-white/10">
          <div className="flex items-center gap-2">
            <ShoppingCart size={18} className="text-amber-400" />
            <span className="font-bold text-white">
              {passo === 'sucesso' ? 'Pedido Enviado!' : passo === 'checkout' ? 'Finalizar Compra' : 'Carrinho'}
            </span>
            {passo === 'carrinho' && itens.length > 0 && (
              <span className="bg-amber-500 text-black text-xs font-black px-2 py-0.5 rounded-full">
                {totalItens}
              </span>
            )}
          </div>
          <button onClick={onClose} className="text-slate-400 hover:text-white transition-colors">
            <X size={20} />
          </button>
        </div>

        {/* Conteúdo */}
        <div className="flex-1 overflow-y-auto">

          {/* ── Sucesso ──────────────────────────────────────────────────────── */}
          {passo === 'sucesso' && (
            <div className="flex flex-col items-center justify-center h-full gap-4 px-6 text-center">
              <div className="w-16 h-16 rounded-full bg-emerald-500/10 border border-emerald-500/30 flex items-center justify-center">
                <CheckCircle2 size={32} className="text-emerald-400" />
              </div>
              <h3 className="text-xl font-bold text-white">Pedido enviado com sucesso!</h3>
              <p className="text-slate-400 text-sm">
                Seu pedido foi registrado e está sendo processado. Você pode acompanhar o status na aba <strong>Meus Pedidos</strong>.
              </p>
              <button
                onClick={onClose}
                className="mt-4 bg-amber-500 text-black font-bold px-6 py-2.5 rounded-lg hover:bg-amber-400 transition-colors"
              >
                Fechar
              </button>
            </div>
          )}

          {/* ── Carrinho vazio ────────────────────────────────────────────────── */}
          {passo === 'carrinho' && itens.length === 0 && (
            <div className="flex flex-col items-center justify-center h-full gap-3 px-6 text-center">
              <ShoppingBag size={40} className="text-slate-700" />
              <p className="text-slate-500 text-sm">Seu carrinho está vazio.</p>
              <p className="text-slate-600 text-xs">Adicione produtos do catálogo para continuar.</p>
            </div>
          )}

          {/* ── Itens ─────────────────────────────────────────────────────────── */}
          {passo === 'carrinho' && itens.length > 0 && (
            <div className="p-4 flex flex-col gap-3">
              {itens.map(item => {
                const temPromo = item.preco_promocional != null && Number(item.preco_promocional) > 0
                const precoUsado = temPromo ? Number(item.preco_promocional) : Number(item.preco_unitario)
                return (
                  <div key={item.id} className="bg-slate-900 rounded-xl p-3 flex flex-col gap-2">
                    <div className="flex gap-3">
                      <div className="flex-1 min-w-0">
                        <p className="text-xs text-slate-500 font-mono">{item.sku}</p>
                        <p className="text-sm font-semibold text-white leading-tight">{item.nome_produto}</p>
                        {temPromo && (
                          <div className="flex items-center gap-1 mt-0.5">
                            <PromoBadge />
                            <span className="text-[10px] text-slate-500 line-through">{fmt(item.preco_unitario)}</span>
                          </div>
                        )}
                        <p className="text-xs text-amber-400 mt-0.5">
                          {fmt(precoUsado)} × {Number(item.quantidade)} = <strong>{fmt(item.subtotal)}</strong>
                        </p>
                        {item.desconto_pct > 0 && (
                          <p className="text-[10px] text-emerald-400">Desconto PJ {item.desconto_pct}% aplicado</p>
                        )}
                      </div>
                      <button
                        onClick={() => carrinho && onRemove(carrinho.id, item.id)}
                        className="text-slate-600 hover:text-rose-400 transition-colors mt-1 shrink-0"
                      >
                        <X size={16} />
                      </button>
                    </div>
                    {/* Observação por item */}
                    <input
                      type="text"
                      value={obsMap[item.id] ?? ''}
                      onChange={e => handleObsChange(item.id, e.target.value)}
                      placeholder="Observação (ex: sabor morango, tamanho M...)"
                      maxLength={200}
                      className="w-full bg-slate-800 border border-white/8 rounded-lg px-2.5 py-1.5 text-xs text-white placeholder:text-slate-600 focus:outline-none focus:border-amber-500/40"
                    />
                  </div>
                )
              })}

              {/* Desconto por volume PJ */}
              {volDesc && (
                <div className="bg-emerald-900/20 border border-emerald-500/20 rounded-xl p-3 flex items-center gap-3">
                  <Percent size={16} className="text-emerald-400 shrink-0" />
                  <div>
                    <p className="text-xs font-bold text-emerald-400">Desconto por volume PJ</p>
                    <p className="text-[10px] text-emerald-300/70">{volDesc.label} → {volDesc.pct}% off sobre subtotal</p>
                  </div>
                </div>
              )}

              {/* Totais */}
              <div className="bg-slate-900 rounded-xl p-3 flex flex-col gap-1.5 mt-1">
                <div className="flex justify-between text-sm text-slate-400">
                  <span>Subtotal</span>
                  <span>{fmt(subtotalBruto)}</span>
                </div>
                {descontoVolume > 0 && (
                  <div className="flex justify-between text-sm text-emerald-400">
                    <span>Desconto volume ({volDesc!.pct}%)</span>
                    <span>-{fmt(descontoVolume)}</span>
                  </div>
                )}
                <div className="flex justify-between text-base font-bold text-white border-t border-white/10 pt-2 mt-1">
                  <span>Total estimado</span>
                  <span>{fmt(totalFinal)}</span>
                </div>
                {isPJ && !volDesc && totalItens < 10 && (
                  <p className="text-[10px] text-slate-500 text-center mt-1">
                    Adicione {10 - totalItens} item(s) para garantir 3% de desconto PJ
                  </p>
                )}
              </div>
            </div>
          )}

          {/* ── Checkout ──────────────────────────────────────────────────────── */}
          {passo === 'checkout' && (
            <div className="p-4 flex flex-col gap-4">
              {/* Forma de pagamento */}
              <div>
                <p className="text-xs font-bold text-slate-400 uppercase tracking-wider mb-2">Forma de pagamento</p>
                <div className="grid grid-cols-3 gap-2">
                  {[
                    { id: 'pix',       label: 'PIX',       icon: '⚡' },
                    { id: 'cartao',    label: 'Cartão',    icon: '💳' },
                    { id: 'faturado',  label: 'Faturado',  icon: '📄' },
                    { id: 'na_retirada', label: 'Na Retirada', icon: '🏪' },
                    { id: 'na_entrega',  label: 'Na Entrega',  icon: '🚚' },
                  ].map(op => (
                    <button
                      key={op.id}
                      onClick={() => {
                        setFormaPagto(op.id)
                        if (op.id === 'na_retirada') setTipoEntrega('retirada')
                        if (op.id === 'na_entrega')  setTipoEntrega('entrega')
                      }}
                      className={`flex flex-col items-center gap-1 p-3 rounded-xl border text-sm font-semibold transition-colors
                        ${formaPagto === op.id
                          ? 'bg-amber-500/10 border-amber-500/50 text-amber-400'
                          : 'bg-slate-900 border-white/10 text-slate-400 hover:border-white/20'
                        }`}
                    >
                      <span className="text-xl">{op.icon}</span>
                      {op.label}
                    </button>
                  ))}
                </div>
                {formaPagto === 'faturado' && (
                  <p className="text-[10px] text-amber-400/70 mt-1.5">
                    Faturamento disponível somente para clientes PJ com cadastro aprovado.
                  </p>
                )}
                {formaPagto === 'na_retirada' && (
                  <p className="text-[10px] text-slate-400 mt-1.5">
                    Pagamento realizado no momento da retirada do pedido.
                  </p>
                )}
                {formaPagto === 'na_entrega' && (
                  <div className="mt-1.5 bg-amber-500/10 border border-amber-500/20 rounded-lg px-3 py-2">
                    <p className="text-[10px] text-amber-400 font-semibold">⚠️ Mediante avaliação</p>
                    <p className="text-[10px] text-amber-400/70 mt-0.5">
                      Pagamento na entrega está sujeito à aprovação do pedido pela nossa equipe. Entraremos em contato para confirmar.
                    </p>
                  </div>
                )}
              </div>

              {/* Tipo de entrega */}
              <div>
                <p className="text-xs font-bold text-slate-400 uppercase tracking-wider mb-2">Entrega</p>
                <div className="grid grid-cols-2 gap-2">
                  {[
                    { id: 'entrega', label: 'Entrega', icon: Truck },
                    { id: 'retirada', label: 'Retirada', icon: MapPin },
                  ].map(op => {
                    const Icon = op.icon
                    return (
                      <button
                        key={op.id}
                        onClick={() => setTipoEntrega(op.id)}
                        className={`flex items-center justify-center gap-2 p-3 rounded-xl border text-sm font-semibold transition-colors
                          ${tipoEntrega === op.id
                            ? 'bg-amber-500/10 border-amber-500/50 text-amber-400'
                            : 'bg-slate-900 border-white/10 text-slate-400 hover:border-white/20'
                          }`}
                      >
                        <Icon size={14} /> {op.label}
                      </button>
                    )
                  })}
                </div>
              </div>

              {/* Endereço — aparece somente na entrega */}
              {tipoEntrega === 'entrega' && (
                <div>
                  <p className="text-xs font-bold text-slate-400 uppercase tracking-wider mb-2 flex items-center gap-1.5">
                    <Home size={12} /> Endereço de Entrega
                  </p>
                  <div className="flex flex-col gap-2">
                    {/* CEP */}
                    <div className="relative">
                      <input
                        value={endereco.cep}
                        onChange={e => setEndereco(d => ({ ...d, cep: maskCEP(e.target.value) }))}
                        placeholder="CEP (00000-000)"
                        className="w-full bg-slate-900 border border-white/10 rounded-xl px-3 py-2 text-sm text-white placeholder:text-slate-600 focus:outline-none focus:border-amber-500/50"
                      />
                      {buscandoCEP && <span className="absolute right-3 top-2.5 text-[10px] text-amber-400 animate-pulse">buscando...</span>}
                    </div>
                    {/* Rua + Número */}
                    <div className="grid grid-cols-3 gap-2">
                      <input
                        value={endereco.rua}
                        onChange={e => setEndereco(d => ({ ...d, rua: e.target.value }))}
                        placeholder="Rua / Av."
                        className="col-span-2 bg-slate-900 border border-white/10 rounded-xl px-3 py-2 text-sm text-white placeholder:text-slate-600 focus:outline-none focus:border-amber-500/50"
                      />
                      <input
                        value={endereco.numero}
                        onChange={e => setEndereco(d => ({ ...d, numero: e.target.value }))}
                        placeholder="Nº"
                        className="bg-slate-900 border border-white/10 rounded-xl px-3 py-2 text-sm text-white placeholder:text-slate-600 focus:outline-none focus:border-amber-500/50"
                      />
                    </div>
                    {/* Complemento */}
                    <input
                      value={endereco.complemento}
                      onChange={e => setEndereco(d => ({ ...d, complemento: e.target.value }))}
                      placeholder="Complemento (opcional)"
                      className="w-full bg-slate-900 border border-white/10 rounded-xl px-3 py-2 text-sm text-white placeholder:text-slate-600 focus:outline-none focus:border-amber-500/50"
                    />
                    {/* Bairro + Cidade + Estado */}
                    <div className="grid grid-cols-3 gap-2">
                      <input
                        value={endereco.bairro}
                        onChange={e => setEndereco(d => ({ ...d, bairro: e.target.value }))}
                        placeholder="Bairro"
                        className="bg-slate-900 border border-white/10 rounded-xl px-3 py-2 text-sm text-white placeholder:text-slate-600 focus:outline-none focus:border-amber-500/50"
                      />
                      <input
                        value={endereco.cidade}
                        onChange={e => setEndereco(d => ({ ...d, cidade: e.target.value }))}
                        placeholder="Cidade"
                        className="bg-slate-900 border border-white/10 rounded-xl px-3 py-2 text-sm text-white placeholder:text-slate-600 focus:outline-none focus:border-amber-500/50"
                      />
                      <input
                        value={endereco.estado}
                        onChange={e => setEndereco(d => ({ ...d, estado: e.target.value.toUpperCase().slice(0, 2) }))}
                        placeholder="UF"
                        className="bg-slate-900 border border-white/10 rounded-xl px-3 py-2 text-sm text-white placeholder:text-slate-600 focus:outline-none focus:border-amber-500/50"
                      />
                    </div>
                    {erroEnd && <p className="text-[11px] text-rose-400 font-semibold">{erroEnd}</p>}
                  </div>
                </div>
              )}

              {/* CPF / CNPJ */}
              <div>
                <p className="text-xs font-bold text-slate-400 uppercase tracking-wider mb-2">CPF / CNPJ (opcional)</p>
                <input
                  value={cpfCnpj}
                  onChange={e => { setCpfCnpj(maskDoc(e.target.value)); setErroDoc('') }}
                  placeholder="000.000.000-00 ou 00.000.000/0000-00"
                  className={`w-full bg-slate-900 border rounded-xl px-3 py-2 text-sm text-white placeholder:text-slate-600 focus:outline-none transition-colors
                    ${erroDoc ? 'border-rose-500/60 focus:border-rose-500' : 'border-white/10 focus:border-amber-500/50'}`}
                />
                {erroDoc && <p className="text-[11px] text-rose-400 mt-1 font-semibold">{erroDoc}</p>}
                {cpfCnpj && !erroDoc && validarDocumento(cpfCnpj) && (
                  <p className="text-[11px] text-emerald-400 mt-1 font-semibold flex items-center gap-1">
                    <CheckCircle2 size={11} /> Documento válido
                  </p>
                )}
              </div>

              {/* Observação */}
              <div>
                <p className="text-xs font-bold text-slate-400 uppercase tracking-wider mb-2">Observações</p>
                <textarea
                  value={observacao}
                  onChange={e => setObservacao(e.target.value)}
                  placeholder="Ex: entregar no 2º andar, ligar antes..."
                  rows={3}
                  className="w-full bg-slate-900 border border-white/10 rounded-xl px-3 py-2 text-sm text-white placeholder:text-slate-600 resize-none focus:outline-none focus:border-amber-500/50"
                />
              </div>

              {/* Resumo breakdown */}
              <div className="bg-slate-900 rounded-xl p-3 flex flex-col gap-1.5">
                <p className="text-xs font-bold text-slate-400 uppercase tracking-wider mb-1">Resumo do pedido</p>
                <div className="flex justify-between text-sm text-slate-400">
                  <span>Subtotal ({totalItens} iten{totalItens !== 1 ? 's' : ''})</span>
                  <span>{fmt(subtotalBruto)}</span>
                </div>
                {descontoVolume > 0 && (
                  <div className="flex justify-between text-sm text-emerald-400">
                    <span>Desconto volume PJ ({volDesc!.pct}%)</span>
                    <span>- {fmt(descontoVolume)}</span>
                  </div>
                )}
                <div className="flex justify-between text-sm text-slate-400">
                  <span>Entrega</span>
                  <span className="text-slate-500">{tipoEntrega === 'retirada' ? 'Grátis (retirada)' : 'A combinar'}</span>
                </div>
                <div className="flex justify-between text-sm text-slate-400">
                  <span>Pagamento</span>
                  <span className="text-slate-500">
                    {formaPagto === 'pix' && 'PIX'}
                    {formaPagto === 'cartao' && 'Cartão'}
                    {formaPagto === 'faturado' && 'Faturado'}
                    {formaPagto === 'na_retirada' && 'Na retirada'}
                    {formaPagto === 'na_entrega' && (
                      <span className="text-amber-400/80">Na entrega (a avaliar)</span>
                    )}
                  </span>
                </div>
                <div className="flex justify-between text-base font-bold text-white border-t border-white/10 pt-2 mt-1">
                  <span>Total</span>
                  <span className="text-amber-400">{fmt(totalFinal)}</span>
                </div>
              </div>
            </div>
          )}
        </div>

        {/* Footer com botões */}
        {passo !== 'sucesso' && itens.length > 0 && (
          <div className="p-4 border-t border-white/10 flex gap-2">
            {passo === 'carrinho' && (
              <>
                <button
                  onClick={() => setPasso('checkout')}
                  className="flex-1 bg-amber-500 text-black font-bold py-2.5 rounded-xl hover:bg-amber-400 transition-colors"
                >
                  Finalizar Compra
                </button>
              </>
            )}
            {passo === 'checkout' && (
              <>
                <button
                  onClick={() => setPasso('carrinho')}
                  className="px-4 py-2.5 rounded-xl border border-white/10 text-slate-400 hover:text-white hover:border-white/20 transition-colors text-sm"
                >
                  Voltar
                </button>
                <button
                  onClick={handleFinalizar}
                  disabled={loading}
                  className="flex-1 bg-emerald-500 text-white font-bold py-2.5 rounded-xl hover:bg-emerald-400 disabled:opacity-50 transition-colors flex items-center justify-center gap-2"
                >
                  {loading && <RefreshCw size={14} className="animate-spin" />}
                  Confirmar Pedido
                </button>
              </>
            )}
          </div>
        )}
      </div>
    </>
  )
}

// ─── Aba: Meus Pedidos ────────────────────────────────────────────────────────

const PEDIDO_STATUS_LABEL: Record<string, string> = {
  aguardando: 'Aguardando',
  separacao:  'Em separação',
  embalagem:  'Em embalagem',
  auditoria:  'Em auditoria',
  fiscal:     'Fiscal',
  expedicao:  'Em expedição',
  entregue:   'Entregue',
  cancelado:  'Cancelado',
}
const PEDIDO_STATUS_COLOR: Record<string, string> = {
  aguardando: 'bg-yellow-500/10 text-yellow-400 border border-yellow-500/20',
  separacao:  'bg-blue-500/10 text-blue-400 border border-blue-500/20',
  embalagem:  'bg-purple-500/10 text-purple-400 border border-purple-500/20',
  auditoria:  'bg-orange-500/10 text-orange-400 border border-orange-500/20',
  fiscal:     'bg-cyan-500/10 text-cyan-400 border border-cyan-500/20',
  expedicao:  'bg-teal-500/10 text-teal-400 border border-teal-500/20',
  entregue:   'bg-emerald-500/10 text-emerald-400 border border-emerald-500/20',
  cancelado:  'bg-rose-500/10 text-rose-400 border border-rose-500/20',
}
const PAGTO_LABEL: Record<string, string> = {
  pix: 'PIX', cartao: 'Cartão', faturado: 'Faturado',
  na_retirada: 'Na retirada', na_entrega: 'Na entrega',
}

// Etapas visíveis na timeline (ordem do fluxo)
const TIMELINE_ETAPAS = [
  { key: 'aguardando', label: 'Recebido',    icon: '📋' },
  { key: 'separacao',  label: 'Separação',   icon: '📦' },
  { key: 'embalagem',  label: 'Embalagem',   icon: '🎁' },
  { key: 'expedicao',  label: 'Expedição',   icon: '🚚' },
  { key: 'entregue',   label: 'Entregue',    icon: '✅' },
]

function fmt_hora(iso: string) {
  const d = new Date(iso)
  return d.toLocaleDateString('pt-BR', { day: '2-digit', month: '2-digit' }) +
    ' ' + d.toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' })
}

function PedidoTimeline({ log, statusAtual, tipoEntrega }: {
  log: { status: string; created_at: string }[]
  statusAtual: string
  tipoEntrega?: string
}) {
  const cancelado = statusAtual === 'cancelado'

  // Para retirada, pula expedição
  const etapas = tipoEntrega === 'retirada'
    ? TIMELINE_ETAPAS.filter(e => e.key !== 'expedicao')
    : TIMELINE_ETAPAS

  // Mapa de status → timestamp do log
  const logMap: Record<string, string> = {}
  for (const l of (log || [])) logMap[l.status] = l.created_at

  // Índice atual no pipeline
  const idxAtual = etapas.findIndex(e => e.key === statusAtual)

  if (cancelado) {
    return (
      <div className="mx-4 mb-4 flex items-center gap-2 text-xs text-rose-400 bg-rose-500/10 border border-rose-500/20 rounded-xl px-3 py-2">
        ❌ <span className="font-semibold">Pedido cancelado</span>
        {logMap['cancelado'] && <span className="text-rose-500 ml-auto">{fmt_hora(logMap['cancelado'])}</span>}
      </div>
    )
  }

  return (
    <div className="mx-4 mb-4">
      <div className="flex items-start gap-0">
        {etapas.map((etapa, idx) => {
          const concluida = idx < idxAtual || statusAtual === etapa.key && etapa.key === 'entregue'
          const atual     = etapa.key === statusAtual

          return (
            <div key={etapa.key} className="flex-1 flex flex-col items-center">
              {/* Linha conectora */}
              <div className="flex items-center w-full">
                <div className={`h-0.5 flex-1 ${idx === 0 ? 'opacity-0' : concluida || atual ? 'bg-amber-500' : 'bg-slate-700'}`} />
                <div className={`w-7 h-7 rounded-full flex items-center justify-center text-sm shrink-0 border-2 transition-colors ${
                  concluida || atual
                    ? 'bg-amber-500 border-amber-500 text-black'
                    : 'bg-slate-800 border-slate-700 text-slate-600'
                } ${atual && etapa.key !== 'entregue' ? 'ring-2 ring-amber-500/30' : ''}`}>
                  {concluida || atual ? etapa.icon : <span className="text-slate-600">○</span>}
                </div>
                <div className={`h-0.5 flex-1 ${idx === etapas.length - 1 ? 'opacity-0' : concluida ? 'bg-amber-500' : 'bg-slate-700'}`} />
              </div>
              {/* Label + horário */}
              <div className="mt-1 text-center">
                <p className={`text-[10px] font-bold leading-tight ${atual ? 'text-amber-400' : concluida ? 'text-slate-400' : 'text-slate-600'}`}>
                  {etapa.label}
                </p>
                {logMap[etapa.key] && (
                  <p className="text-[9px] text-slate-500 leading-tight">
                    {fmt_hora(logMap[etapa.key])}
                  </p>
                )}
              </div>
            </div>
          )
        })}
      </div>
    </div>
  )
}

function MinhasCotacoes(_: { user: any }) {
  const [cotacoes, setCotacoes] = useState<any[]>([])
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    CotacaoClienteAPI.minhas()
      .then(d => setCotacoes(d))
      .catch(() => {})
      .finally(() => setLoading(false))
  }, [])

  if (loading) {
    return (
      <div className="flex items-center justify-center py-16">
        <div className="w-6 h-6 border-2 border-amber-500 border-t-transparent rounded-full animate-spin" />
      </div>
    )
  }

  if (!cotacoes.length) {
    return (
      <div className="text-center py-16 text-slate-500">
        <FileText size={32} className="mx-auto mb-3 opacity-30" />
        <p>Nenhum pedido realizado ainda.</p>
      </div>
    )
  }

  // Filtra apenas finalizadas e não-rascunhos (rascunho atual é o carrinho)
  const visiveis = cotacoes.filter(c => c.status !== 'rascunho')

  if (!visiveis.length) {
    return (
      <div className="text-center py-16 text-slate-500">
        <ShoppingBag size={32} className="mx-auto mb-3 opacity-30" />
        <p>Nenhum pedido realizado ainda.</p>
        <p className="text-sm mt-1">Adicione produtos ao carrinho e finalize sua compra.</p>
      </div>
    )
  }

  return (
    <div className="flex flex-col gap-4">
      {visiveis.map(c => {
        const temPedido = !!c.pedido_id
        const pedidoStatus = c.pedido_status
        const financeiroObs = c.pedido_financeiro_status === 'pendente'
          ? 'Aguardando aprovação do financeiro para pagamento na entrega'
          : c.pedido_financeiro_status === 'rejeitado'
            ? 'Pagamento na entrega não aprovado — entre em contato conosco'
            : null

        return (
          <div key={c.id} className={`bg-slate-900 rounded-2xl overflow-hidden border ${
            c.status === 'cancelada' || pedidoStatus === 'cancelado'
              ? 'border-rose-500/20'
              : temPedido ? 'border-amber-500/20' : 'border-white/10'
          }`}>
            {/* Header */}
            <div className="px-4 pt-4 pb-3 flex items-start justify-between gap-3">
              <div>
                <div className="flex items-center gap-2 flex-wrap">
                  <span className="text-sm font-bold text-white">
                    {temPedido
                      ? `Pedido ${c.pedido_protocolo || '#' + c.pedido_id}`
                      : `Cotação #${c.id}`}
                  </span>
                  {temPedido && pedidoStatus && (
                    <span className={`text-[10px] px-2.5 py-0.5 rounded-full font-black uppercase ${PEDIDO_STATUS_COLOR[pedidoStatus] ?? 'bg-slate-700 text-slate-400'}`}>
                      {PEDIDO_STATUS_LABEL[pedidoStatus] ?? pedidoStatus}
                    </span>
                  )}
                  {(c.status === 'cancelada' || pedidoStatus === 'cancelado') && (
                    <span className="text-[10px] px-2 py-0.5 rounded-full font-bold bg-rose-500/10 text-rose-400 border border-rose-500/20">Cancelado</span>
                  )}
                </div>
                <p className="text-xs text-slate-500 mt-0.5 flex items-center gap-2 flex-wrap">
                  {c.created_at ? new Date(c.created_at).toLocaleDateString('pt-BR') : '—'}
                  {c.total ? ` · ${fmt(c.total)}` : ''}
                  {c.pedido_forma_pagto && (
                    <span>💳 {PAGTO_LABEL[c.pedido_forma_pagto] ?? c.pedido_forma_pagto}</span>
                  )}
                  {c.pedido_tipo_entrega && (
                    <span>{c.pedido_tipo_entrega === 'entrega' ? '🚚 Entrega' : '🏪 Retirada'}</span>
                  )}
                </p>
              </div>
              {temPedido ? <ShoppingBag size={18} className="text-amber-600 shrink-0 mt-0.5" /> : <Package size={18} className="text-slate-700 shrink-0 mt-0.5" />}
            </div>

            {/* Aviso financeiro */}
            {financeiroObs && (
              <div className={`mx-4 mb-4 text-[11px] px-3 py-2 rounded-lg font-semibold ${
                c.pedido_financeiro_status === 'rejeitado'
                  ? 'bg-rose-500/10 text-rose-400'
                  : 'bg-amber-500/10 text-amber-400'
              }`}>
                ⚠️ {financeiroObs}
              </div>
            )}

            {/* Timeline de status */}
            {temPedido && pedidoStatus && (
              <PedidoTimeline
                log={c.pedido_status_log || []}
                statusAtual={pedidoStatus}
                tipoEntrega={c.pedido_tipo_entrega}
              />
            )}
          </div>
        )
      })}
    </div>
  )
}

// ─── Página Principal ─────────────────────────────────────────────────────────

type Aba = 'catalogo' | 'cotacoes'

interface Props { user: any }

export default function CotacaoPage({ user }: Props) {
  const [aba, setAba] = useState<Aba>('catalogo')
  const [produtos, setProdutos] = useState<Produto[]>([])
  const [categorias, setCategorias] = useState<string[]>([])
  const [search, setSearch] = useState('')
  const [catFiltro, setCatFiltro] = useState('')
  const [loadingProd, setLoadingProd] = useState(true)
  const [erroProd, setErroProd] = useState('')

  const [carrinho, setCarrinho] = useState<Carrinho | null>(null)
  const [carrinhoOpen, setCarrinhoOpen] = useState(false)
  const [loadingCart, setLoadingCart] = useState(false)
  const [erroCart, setErroCart] = useState('')

  // PROMO-10 — Flash promo
  const [flashPromo, setFlashPromo] = useState<FlashPromo | null>(null)

  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null)

  // PROMO-10 — Carrega flash promo e atualiza a cada 60s
  useEffect(() => {
    CotacaoClienteAPI.flashPromo().then(d => setFlashPromo(d)).catch(() => {})
    const iv = setInterval(() => {
      CotacaoClienteAPI.flashPromo().then(d => setFlashPromo(d)).catch(() => {})
    }, 60_000)
    return () => clearInterval(iv)
  }, [])

  // Carrega categorias + produtos
  useEffect(() => {
    ProdutoClienteAPI.categorias()
      .then(d => setCategorias(d))
      .catch(() => {})
  }, [])

  const buscarProdutos = useCallback((s: string, cat: string) => {
    setLoadingProd(true)
    setErroProd('')
    ProdutoClienteAPI.list({ search: s || undefined, categoria: cat || undefined })
      .then(d => setProdutos(d))
      .catch(() => setErroProd('Erro ao carregar produtos.'))
      .finally(() => setLoadingProd(false))
  }, [])

  // Debounce na busca
  useEffect(() => {
    if (debounceRef.current) clearTimeout(debounceRef.current)
    debounceRef.current = setTimeout(() => buscarProdutos(search, catFiltro), 300)
    return () => { if (debounceRef.current) clearTimeout(debounceRef.current) }
  }, [search, catFiltro, buscarProdutos])

  // Carrega carrinho se autenticado
  useEffect(() => {
    if (!user) return
    CotacaoClienteAPI.carrinho()
      .then(d => setCarrinho(d))
      .catch(() => {})
  }, [user])

  const qtdCarrinho = carrinho?.itens?.reduce((s, i) => s + Number(i.quantidade), 0) ?? 0

  // ── Adiciona item ao carrinho ────────────────────────────────────────────────
  async function addItem(produto: Produto, qty: number) {
    if (!user) { setErroCart('Faça login para adicionar ao carrinho.'); return }
    setLoadingCart(true)
    try {
      let cart: Carrinho | null = carrinho
      if (!cart) {
        cart = await CotacaoClienteAPI.carrinho()
        setCarrinho(cart)
      }
      if (!cart) throw new Error('Não foi possível criar o carrinho.')
      await CotacaoClienteAPI.addItem(cart.id, produto.id, qty)
      // Recarrega carrinho completo
      const updated = await CotacaoClienteAPI.carrinho()
      setCarrinho(updated)
      setCarrinhoOpen(true)
    } catch (e: any) {
      setErroCart(e?.response?.data?.error ?? 'Erro ao adicionar produto.')
    } finally {
      setLoadingCart(false)
    }
  }

  // ── Remove item ──────────────────────────────────────────────────────────────
  async function removeItem(cotacaoId: number, itemId: number) {
    try {
      await CotacaoClienteAPI.removeItem(cotacaoId, itemId)
      const updated = await CotacaoClienteAPI.carrinho()
      setCarrinho(updated)
    } catch { /* silent */ }
  }

  // ── Finaliza pedido ──────────────────────────────────────────────────────────
  async function finalizar(data: { forma_pagto: string; tipo_entrega: string; observacao: string; endereco?: Endereco; cpf_cnpj?: string }) {
    if (!carrinho) return
    setLoadingCart(true)
    try {
      await CotacaoClienteAPI.finalizar(carrinho.id, data)
      // Após finalizar, recarrega carrinho (novo rascunho vazio será criado no próximo addItem)
      setCarrinho(null)
    } catch (e: any) {
      setErroCart(e?.response?.data?.error ?? 'Erro ao finalizar pedido.')
    } finally {
      setLoadingCart(false)
    }
  }

  return (
    <div className="min-h-screen bg-black text-white">
      <div className="max-w-6xl mx-auto px-4 py-10 sm:py-14">

        {/* Header */}
        <div className="flex items-center justify-between gap-4 mb-8 flex-wrap">
          <div>
            <h1 className="text-2xl sm:text-3xl font-black tracking-tight">
              Catálogo &amp; Pedidos
            </h1>
            <p className="text-slate-400 text-sm mt-1">
              Explore nossos produtos, monte seu carrinho e finalize seu pedido.
            </p>
          </div>
          {user && (
            <button
              onClick={() => setCarrinhoOpen(true)}
              className="relative flex items-center gap-2 bg-amber-500 text-black font-bold px-4 py-2.5 rounded-xl hover:bg-amber-400 transition-colors"
            >
              <ShoppingCart size={18} />
              Carrinho
              {qtdCarrinho > 0 && (
                <span className="absolute -top-2 -right-2 bg-red-500 text-white text-xs font-black w-5 h-5 rounded-full flex items-center justify-center">
                  {qtdCarrinho > 9 ? '9+' : qtdCarrinho}
                </span>
              )}
            </button>
          )}
        </div>

        {/* Erro carrinho */}
        {erroCart && (
          <div className="mb-4 flex items-center gap-2 bg-rose-500/10 border border-rose-500/20 rounded-xl px-4 py-3 text-rose-400 text-sm">
            <AlertCircle size={16} className="shrink-0" />
            {erroCart}
            <button onClick={() => setErroCart('')} className="ml-auto"><X size={14} /></button>
          </div>
        )}

        {/* Aviso login */}
        {!user && (
          <div className="mb-6 flex items-center gap-3 bg-amber-500/5 border border-amber-500/20 rounded-xl px-4 py-3 text-amber-400/80 text-sm">
            <AlertCircle size={16} className="shrink-0" />
            <span>
              <strong>Faça login</strong> para adicionar produtos ao carrinho e acompanhar seus pedidos.
            </span>
            <a href="/app/login" className="ml-auto text-amber-400 font-bold hover:underline whitespace-nowrap">Entrar →</a>
          </div>
        )}

        {/* PROMO-10 — Flash Promo Banner */}
        {flashPromo && <FlashPromoBanner promo={flashPromo} />}

        {/* Abas */}
        <div className="flex gap-1 bg-slate-900 rounded-xl p-1 mb-6 w-fit">
          {([
            { id: 'catalogo', label: 'Catálogo', icon: Package },
            { id: 'cotacoes', label: 'Meus Pedidos', icon: ShoppingBag },
          ] as { id: Aba; label: string; icon: any }[]).map(t => {
            const Icon = t.icon
            return (
              <button
                key={t.id}
                onClick={() => setAba(t.id)}
                className={`flex items-center gap-1.5 px-4 py-2 rounded-lg text-sm font-semibold transition-colors
                  ${aba === t.id ? 'bg-amber-500 text-black' : 'text-slate-400 hover:text-white'}`}
              >
                <Icon size={14} /> {t.label}
              </button>
            )
          })}
        </div>

        {/* ── Aba Catálogo ──────────────────────────────────────────────────────── */}
        {aba === 'catalogo' && (
          <>
            {/* Filtros */}
            <div className="flex flex-wrap gap-3 mb-6">
              <div className="flex-1 min-w-[200px] relative">
                <Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-500" />
                <input
                  type="text"
                  value={search}
                  onChange={e => setSearch(e.target.value)}
                  placeholder="Buscar produto ou SKU..."
                  className="w-full bg-slate-900 border border-white/10 rounded-xl pl-9 pr-4 py-2.5 text-sm text-white placeholder:text-slate-600 focus:outline-none focus:border-amber-500/50"
                />
              </div>
              <div className="relative">
                <select
                  value={catFiltro}
                  onChange={e => setCatFiltro(e.target.value)}
                  className="bg-slate-900 border border-white/10 rounded-xl px-3 py-2.5 pr-8 text-sm text-white appearance-none focus:outline-none focus:border-amber-500/50"
                >
                  <option value="">Todas categorias</option>
                  {categorias.map(c => <option key={c} value={c}>{c}</option>)}
                </select>
                <ChevronDown size={14} className="absolute right-2.5 top-1/2 -translate-y-1/2 text-slate-500 pointer-events-none" />
              </div>
            </div>

            {/* Grid */}
            {loadingProd ? (
              <div className="flex items-center justify-center py-20">
                <div className="w-8 h-8 border-2 border-amber-500 border-t-transparent rounded-full animate-spin" />
              </div>
            ) : erroProd ? (
              <p className="text-rose-400 text-sm text-center py-16">{erroProd}</p>
            ) : produtos.length === 0 ? (
              <div className="text-center py-16 text-slate-500">
                <Package size={40} className="mx-auto mb-3 opacity-30" />
                <p>Nenhum produto encontrado.</p>
              </div>
            ) : (
              <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4">
                {produtos.map(p => {
                  const qtdNoCarrinho = carrinho?.itens
                    ?.filter(i => i.produto_id === p.id)
                    .reduce((s, i) => s + Number(i.quantidade), 0) ?? 0
                  return (
                    <ProdutoCard
                      key={p.id}
                      produto={p}
                      onAdd={addItem}
                      qtdNoCarrinho={qtdNoCarrinho}
                    />
                  )
                })}
              </div>
            )}
          </>
        )}

        {/* ── Aba Cotações ──────────────────────────────────────────────────────── */}
        {aba === 'cotacoes' && (
          user
            ? <MinhasCotacoes user={user} />
            : (
              <div className="text-center py-16 text-slate-500">
                <p className="mb-2">Faça login para ver suas cotações.</p>
                <a href="/app/login" className="text-amber-400 hover:underline font-semibold">Entrar →</a>
              </div>
            )
        )}

      </div>

      {/* Drawer Carrinho */}
      <CarrinhoDrawer
        carrinho={carrinho}
        open={carrinhoOpen}
        onClose={() => setCarrinhoOpen(false)}
        onRemove={removeItem}
        onFinalizar={finalizar}
        loading={loadingCart}
      />
    </div>
  )
}
