/* global React, Icon, Button, Drawer, Field, brl, numBr */

// ─── Produtos · reajuste de preço em LOTE ───────────────────────────────────
// Mexe em dinheiro, então o desenho é deliberadamente cauteloso:
//   1. escolher canais + regra (percentual ou valor) + arredondamento
//   2. PRÉVIA obrigatória, uma linha por PREÇO (não por produto), com a margem
//      resultante e BLOQUEIO do que ficaria abaixo do custo
//   3. confirmação digitando a quantidade de produtos
// Tudo o que é aplicado vira linha em `precos_log` (quem, quando, de quanto pra
// quanto, com que regra) — reajuste sem rastro ninguém desfaz depois.

const CANAIS_PRECO = [
  { key: 'precoDiv',   col: 'preco_dist',  label: 'Distribuidor' },
  { key: 'precoSalao', col: 'preco_salao', label: 'Salão' },
  { key: 'venda',      col: 'preco_venda', label: 'Cliente final' },
  { key: 'precoPromo', col: 'preco_promo', label: 'Promocional' },
];

// Arredondamento "psicológico": terminar em ,90 / ,99 / inteiro.
function arredondaPreco(v, modo) {
  const n = Number(v) || 0;
  if (!modo || modo === 'nenhum') return Math.round(n * 100) / 100;
  if (modo === 'inteiro') return Math.round(n);
  const centavos = modo === '90' ? 0.90 : 0.99;
  const base = Math.floor(n);
  const cand = base + centavos;
  // fica no valor terminado em ,90/,99 mais próximo (pra cima quando empata)
  return (n - cand) > 0.5 ? base + 1 + centavos : cand;
}

function calculaNovoPreco(atual, regra) {
  const a = Number(atual) || 0;
  const v = numBr(regra.valor);
  let novo = a;
  if (regra.tipo === 'pct')      novo = a * (1 + v / 100);
  else if (regra.tipo === 'val') novo = a + v;
  else if (regra.tipo === 'fixo') novo = v;
  return arredondaPreco(novo, regra.arredondar);
}

function descreveRegra(regra) {
  const v = numBr(regra.valor);
  const sinal = v >= 0 ? '+' : '';
  const base = regra.tipo === 'pct' ? `${sinal}${v}%`
    : regra.tipo === 'val' ? `${sinal}R$ ${brl(Math.abs(v))}`
    : `fixar em R$ ${brl(v)}`;
  const arr = regra.arredondar && regra.arredondar !== 'nenhum'
    ? ` · arredondado para terminar em ${regra.arredondar === 'inteiro' ? 'inteiro' : ',' + regra.arredondar}` : '';
  return base + arr;
}

function ReajustePrecoModal({ produtos, onClose, onAplicado }) {
  const [canais, setCanais] = React.useState({ precoDiv: true, precoSalao: true, venda: true, precoPromo: false });
  const [regra, setRegra] = React.useState({ tipo: 'pct', valor: '', arredondar: 'nenhum' });
  const [passo, setPasso] = React.useState(1);          // 1 regra · 2 prévia · 3 aplicando
  const [excecoes, setExcecoes] = React.useState({});   // chave da linha -> true (abaixo do custo aceito)
  const [confirma, setConfirma] = React.useState('');
  const [erro, setErro] = React.useState('');
  const [resultado, setResultado] = React.useState(null);

  const canaisAtivos = CANAIS_PRECO.filter(c => canais[c.key]);

  // Uma linha por PREÇO — é assim que ela confere, e é assim que o log grava.
  const linhas = [];
  produtos.forEach(p => {
    const custo = Number(p.custo) || 0;
    canaisAtivos.forEach(c => {
      const atual = Number(p[c.key]);
      if (!(atual > 0)) return;                          // preço não usado nesse canal: não inventa
      const novo = calculaNovoPreco(atual, regra);
      const chave = `${p.id}:${c.key}`;
      const abaixoCusto = custo > 0 && novo < custo;
      const margem = novo > 0 ? ((novo - custo) / novo) * 100 : 0;
      linhas.push({ chave, produto: p, canal: c, atual, novo, custo, abaixoCusto, margem });
    });
  });

  const bloqueadas = linhas.filter(l => l.abaixoCusto && !excecoes[l.chave]);
  const aplicaveis = linhas.filter(l => !l.abaixoCusto || excecoes[l.chave]).filter(l => Math.abs(l.novo - l.atual) > 0.004);
  const podeIr = numBr(regra.valor) !== 0 && canaisAtivos.length > 0 && linhas.length > 0;
  const podeAplicar = aplicaveis.length > 0 && String(confirma).trim() === String(produtos.length);

  const aplicar = async () => {
    if (!podeAplicar || !window.tmSupabase) return;
    setPasso(3); setErro('');
    const quem = (window.tmUserProfile && window.tmUserProfile.nome) || (window.tmUser && window.tmUser.email) || 'sem identificação';
    const regraTxt = descreveRegra(regra);
    try {
      // por produto: junta os canais num único update
      const porProduto = {};
      aplicaveis.forEach(l => {
        porProduto[l.produto.id] = porProduto[l.produto.id] || { produto: l.produto, patch: {}, linhas: [] };
        porProduto[l.produto.id].patch[l.canal.col] = l.novo;
        porProduto[l.produto.id].linhas.push(l);
      });
      const logs = [];
      for (const id of Object.keys(porProduto)) {
        const item = porProduto[id];
        const { error } = await window.tmSupabase.from('produtos').update(item.patch).eq('id', id);
        if (error) throw error;
        item.linhas.forEach(l => logs.push({
          produto_id: l.produto.id, produto_sku: l.produto.sku || null, produto_nome: l.produto.name || l.produto.nome || null,
          campo: l.canal.col, valor_antes: l.atual, valor_depois: l.novo,
          origem: 'lote', regra: regraTxt, abaixo_custo: !!l.abaixoCusto, quem,
          empresa_id: window.tmEmpresaId || null,
        }));
      }
      // rastro: item de array nunca leva id (regra do CLAUDE.md)
      if (logs.length) {
        const { error: eLog } = await window.tmSupabase.from('precos_log').insert(logs);
        if (eLog) throw new Error('Preços aplicados, mas o registro falhou: ' + (eLog.message || eLog));
      }
      setResultado({ precos: logs.length, produtos: Object.keys(porProduto).length });
      if (onAplicado) onAplicado();
    } catch (e) { setErro(String((e && e.message) || e)); setPasso(2); }
  };

  const fmtMargem = (m) => `${m.toFixed(0)}%`;
  const toneMargem = (m) => m >= 40 ? 'b-ok' : m >= 15 ? 'b-warn' : 'b-danger';

  return (
    <Drawer open={true} width={900}
      title={`Reajustar preço · ${produtos.length} produto${produtos.length > 1 ? 's' : ''}`}
      subtitle={passo === 1 ? 'Passo 1 de 3 · a regra' : passo === 2 ? 'Passo 2 de 3 · confira antes de aplicar' : 'Aplicando…'}
      onClose={onClose}
      footer={resultado ? (<><span style={{ flex: 1 }} /><Button variant="primary" size="sm" onClick={onClose}>Concluir</Button></>)
        : passo === 1 ? (<><span style={{ flex: 1 }} />
            <Button variant="secondary" size="sm" onClick={onClose}>Cancelar</Button>
            <Button variant="primary" size="sm" icon="eye" disabled={!podeIr} onClick={() => setPasso(2)}>Ver prévia</Button></>)
        : (<>
            <span style={{ flex: 1, fontSize: 11.5, color: 'var(--tm-fg-4)' }}>
              Digite <b>{produtos.length}</b> para confirmar a quantidade de produtos
            </span>
            <input className="input" style={{ width: 70, textAlign: 'center' }} value={confirma}
              onChange={(e) => setConfirma(e.target.value)} placeholder="0" />
            <Button variant="secondary" size="sm" onClick={() => setPasso(1)}>Voltar</Button>
            <Button variant="primary" size="sm" icon="check" disabled={!podeAplicar || passo === 3} onClick={aplicar}>
              {passo === 3 ? 'Aplicando…' : `Aplicar em ${aplicaveis.length} preço${aplicaveis.length !== 1 ? 's' : ''}`}
            </Button></>)}>

      {resultado ? (
        <div style={{ display: 'flex', gap: 10, alignItems: 'center', padding: '12px 14px', borderRadius: 8,
                      background: 'rgba(91,177,122,0.10)', border: '1px solid var(--tm-success)' }}>
          <Icon name="check-circle" size={18} style={{ color: 'var(--tm-success)' }} />
          <div style={{ fontSize: 13 }}>
            <b>{resultado.precos} preço{resultado.precos !== 1 ? 's' : ''}</b> atualizado{resultado.precos !== 1 ? 's' : ''} em{' '}
            <b>{resultado.produtos} produto{resultado.produtos !== 1 ? 's' : ''}</b> — tudo registrado com quem, quando e de quanto pra quanto.
          </div>
        </div>
      ) : passo === 1 ? (<>
        <div style={{ fontSize: 10.5, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '.08em', color: 'var(--tm-fg-4)', marginBottom: 8 }}>
          Quais preços mexer
        </div>
        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginBottom: 16 }}>
          {CANAIS_PRECO.map(c => (
            <label key={c.key} style={{ display: 'inline-flex', alignItems: 'center', gap: 7, padding: '7px 12px',
              borderRadius: 8, cursor: 'pointer', fontSize: 12.5,
              background: canais[c.key] ? 'color-mix(in srgb, var(--tm-brand-champagne) 14%, transparent)' : 'var(--tm-bg-2)',
              border: '1px solid ' + (canais[c.key] ? 'var(--tm-brand-champagne)' : 'var(--tm-line-2)'),
              color: canais[c.key] ? 'var(--tm-brand-champagne)' : 'var(--tm-fg-3)' }}>
              <input type="checkbox" checked={!!canais[c.key]} onChange={(e) => setCanais(s => ({ ...s, [c.key]: e.target.checked }))} />
              {c.label}
            </label>
          ))}
        </div>

        <div className="field-grid-4">
          <Field label="Como reajustar">
            <select className="input" value={regra.tipo} onChange={(e) => setRegra(r => ({ ...r, tipo: e.target.value }))}>
              <option value="pct">Percentual (%)</option>
              <option value="val">Somar/subtrair valor (R$)</option>
              <option value="fixo">Definir valor fixo (R$)</option>
            </select>
          </Field>
          <Field label={regra.tipo === 'pct' ? 'Percentual' : 'Valor'}
            hint={regra.tipo === 'pct' ? 'negativo reduz: -5' : regra.tipo === 'val' ? 'negativo reduz' : 'mesmo preço pra todos'}>
            <input className="input num right" inputMode="decimal" value={regra.valor} placeholder={regra.tipo === 'pct' ? '10' : '0,00'}
              onChange={(e) => setRegra(r => ({ ...r, valor: e.target.value }))} />
          </Field>
          <Field label="Arredondar" hint="preço redondo vende melhor">
            <select className="input" value={regra.arredondar} onChange={(e) => setRegra(r => ({ ...r, arredondar: e.target.value }))}>
              <option value="nenhum">Não arredondar</option>
              <option value="90">Terminar em ,90</option>
              <option value="99">Terminar em ,99</option>
              <option value="inteiro">Valor inteiro</option>
            </select>
          </Field>
        </div>

        <div style={{ marginTop: 14, fontSize: 12, color: 'var(--tm-fg-3)', lineHeight: 1.6 }}>
          {linhas.length > 0
            ? <>Serão avaliados <b>{linhas.length} preços</b> em {produtos.length} produto{produtos.length > 1 ? 's' : ''}.
                Preço zerado ou vazio no canal é ignorado — o reajuste não inventa preço onde não havia.</>
            : <>Nenhum dos produtos selecionados tem preço nos canais escolhidos.</>}
        </div>
      </>) : (<>
        <div style={{ fontSize: 12.5, color: 'var(--tm-fg-3)', marginBottom: 10 }}>
          <b style={{ color: 'var(--tm-fg-1)' }}>{descreveRegra(regra)}</b> em {canaisAtivos.map(c => c.label.toLowerCase()).join(', ')}
        </div>

        <table className="tbl" style={{ fontSize: 12.5 }}>
          <thead><tr>
            <th>Produto · canal</th>
            <th style={{ width: 100 }} className="num right">Atual</th>
            <th style={{ width: 24 }}></th>
            <th style={{ width: 110 }} className="num right">Novo</th>
            <th style={{ width: 190 }}>Situação</th>
          </tr></thead>
          <tbody>
            {linhas.map(l => {
              const aceito = !!excecoes[l.chave];
              return (
                <tr key={l.chave} style={l.abaixoCusto && !aceito ? { background: 'color-mix(in srgb, var(--tm-danger) 10%, transparent)' } : null}>
                  <td>{l.produto.name || l.produto.nome} <span style={{ color: 'var(--tm-fg-4)' }}>· {l.canal.label.toLowerCase()}</span></td>
                  <td className="num right" style={{ color: 'var(--tm-fg-3)' }}>R$ {brl(l.atual)}</td>
                  <td style={{ textAlign: 'center', color: 'var(--tm-fg-4)' }}>→</td>
                  <td className="num right" style={{ fontWeight: 600, color: l.abaixoCusto && !aceito ? 'var(--tm-danger)' : 'var(--tm-brand-champagne)' }}>
                    R$ {brl(l.novo)}
                  </td>
                  <td>
                    {l.abaixoCusto ? (
                      <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                        <span className="badge2 b-danger">abaixo do custo (R$ {brl(l.custo)})</span>
                        <label style={{ fontSize: 10.5, color: 'var(--tm-fg-3)', display: 'flex', gap: 5, alignItems: 'center', cursor: 'pointer' }}>
                          <input type="checkbox" checked={aceito}
                            onChange={(e) => setExcecoes(s => ({ ...s, [l.chave]: e.target.checked }))} />
                          sim, quero vender abaixo do custo
                        </label>
                      </div>
                    ) : l.custo > 0 ? <span className={'badge2 ' + toneMargem(l.margem)}>margem {fmtMargem(l.margem)}</span>
                    : <span className="badge2 b-info">sem custo cadastrado</span>}
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>

        <div style={{ marginTop: 12, padding: '10px 12px', borderRadius: 8, background: 'var(--tm-bg-2)', fontSize: 12, color: 'var(--tm-fg-3)', lineHeight: 1.6 }}>
          <b style={{ color: 'var(--tm-fg-1)' }}>
            {aplicaveis.length} preço{aplicaveis.length !== 1 ? 's' : ''} {aplicaveis.length === 1 ? 'será alterado' : 'serão alterados'}
            {bloqueadas.length > 0 && ` · ${bloqueadas.length} bloqueado${bloqueadas.length > 1 ? 's' : ''}`}
          </b><br />
          {bloqueadas.length > 0 && <>O que está abaixo do custo não é aplicado enquanto a caixa não for marcada. </>}
          Tudo o que for aplicado fica registrado (quem, quando, de quanto para quanto) e pode ser conferido depois.
        </div>
        {erro && <div style={{ fontSize: 12.5, color: 'var(--tm-danger)', marginTop: 10 }}>{erro}</div>}
      </>)}
    </Drawer>
  );
}

Object.assign(window, { ReajustePrecoModal, CANAIS_PRECO, arredondaPreco, calculaNovoPreco, descreveRegra });