/* global React */
const { useState } = React;
const { brl, pct, intFmt } = window;

function VendaView({ state, setState, calc, viewingMode, onExitView, onSave, savingHint, onExport }) {
  const v = state.venda;
  const c = calc;
  const denom = c.dre.receitaBruta || 1;
  const produto = state.produtos.find(p => p.id === v.produtoId);
  const cmvZero = c.cmvUn === 0;

  const setV = (patch) => setState({ ...state, venda: { ...state.venda, ...patch }});

  const dreRows = [
    { label: 'Valor total da nota fiscal', val: c.dre.valorNota, cls: 'subtotal' },
    { label: '(−) IPI (não compõe receita)', val: -c.dre.ipi, cls: '' },
    { label: 'Receita bruta (produtos)', val: c.dre.receitaBruta, cls: 'subtotal' },
    { label: c.isNaoContrib && c.aliqIPI > 0 ? '(−) ICMS débito (B2C: base inclui IPI)' : '(−) ICMS débito', val: -c.dre.icmsDeb, cls: '' },
    { label: '(−) PIS (base sem ICMS — Tema 69)', val: -c.dre.pis, cls: '' },
    { label: '(−) COFINS (base sem ICMS — Tema 69)', val: -c.dre.cofins, cls: '' },
    { label: '(−) DIFAL (LC 190/22 base dupla)', val: -c.dre.difal, cls: '' },
    { label: 'Receita líquida', val: c.dre.receitaLiq, cls: 'subtotal' },
    { label: '(−) CMV', val: -c.dre.cmvTotal, cls: '' },
    { label: 'Lucro bruto', val: c.dre.lucroBruto, cls: 'subtotal' },
    { label: '(−) Comissão marketplace', val: -c.dre.comissao, cls: '' },
    { label: `(−) Custos fixos (${state.params.fixos}%)`, val: -c.dre.custosFixos, cls: '' },
    { label: 'Lucro antes de IR/CSLL', val: c.dre.lucroAntesIR, cls: 'subtotal' },
    { label: `(−) IRPJ (${state.params.irpj}%)`, val: -c.dre.irpj, cls: '' },
    { label: `(−) CSLL (${state.params.csll}%)`, val: -c.dre.csll, cls: '' },
    { label: 'Lucro líquido', val: c.dre.lucroLiq, cls: 'final' },
  ];

  return (
    <>
      {viewingMode && (
        <div className="view-banner">
          <div className="view-banner-info">
            <window.Icons.IcoEye size={14} />
            <div>
              <strong>Modo visualização — simulação #{String(viewingMode.seq).padStart(4, '0')}</strong>
              <span style={{ opacity: 0.7, marginLeft: 8 }}>
                salva em {new Date(viewingMode.createdAt).toLocaleString('pt-BR')}
              </span>
            </div>
          </div>
          <button className="btn btn-ghost btn-sm" onClick={onExitView}>
            ← Voltar à edição
          </button>
        </div>
      )}

      {cmvZero && (
        <div className="banner banner-warn">
          <svg className="ico" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
            <path d="M10.3 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.7 3.86a2 2 0 00-3.4 0zM12 9v4M12 17h.01" />
          </svg>
          <div>
            <strong>CMV unitário = R$ 0,00.</strong> O produto "{produto?.nome || ''}" está sem dados de matéria-prima ou produção.
            O lucro abaixo está <strong>inflado artificialmente</strong>. Vá até a aba do produto e preencha NF de compra + produção diária.
          </div>
        </div>
      )}

      <div className="card">
        <div className="card-head">
          <div className="h-title">
            <span className="h-num">01</span>
            <span className="h-label">Produto e quantidade</span>
          </div>
        </div>
        <div className="card-body">
          <div className="grid grid-3">
            <div className="field">
              <label className="field-label">Produto</label>
              <select value={v.produtoId} onChange={(e) => setV({ produtoId: e.target.value })}>
                {state.produtos.map(p => <option key={p.id} value={p.id}>{p.nome}</option>)}
              </select>
            </div>
            <div className="field">
              <label className="field-label">Quantidade vendida (un)</label>
              <window.NumInput value={v.qtd} onChange={(n) => setV({ qtd: n })} />
            </div>
            <div className="field">
              <label className="field-label">Valor total da venda (R$)</label>
              <window.NumInput value={v.valor} onChange={(n) => setV({ valor: n })} />
            </div>
            <div className="field">
              <label className="field-label">Preço unitário</label>
              <div className="computed accent">{brl(c.precoUn, 4)}</div>
            </div>
            <div className="field">
              <label className="field-label">CMV unitário</label>
              <div className="computed positive">{brl(c.cmvUn, 4)}</div>
            </div>
            <div className="field">
              <label className="field-label">Com IPI?</label>
              <window.Segmented
                value={v.ipi}
                onChange={(val) => setV({ ipi: val })}
                options={[{ value: 'SIM', label: 'Sim' }, { value: 'NAO', label: 'Não' }]}
              />
            </div>
          </div>
        </div>
      </div>

      <div className="card">
        <div className="card-head">
          <div className="h-title">
            <span className="h-num">02</span>
            <span className="h-label">Cliente e canal</span>
          </div>
        </div>
        <div className="card-body">
          <div className="grid grid-4">
            <div className="field">
              <label className="field-label">UF de destino</label>
              <select value={v.uf} onChange={(e) => setV({ uf: e.target.value })}>
                {window.UFS.map(u => <option key={u[0]} value={u[0]}>{u[0]}</option>)}
              </select>
            </div>
            <div className="field">
              <label className="field-label">
                Contribuinte ICMS?
                <window.Tooltip text="Se cliente é contribuinte de ICMS (indústria, atacadista, comércio), não há DIFAL para venda interestadual. Não-contribuinte (consumidor final, PF, ente público) gera DIFAL pelo remetente." />
              </label>
              <window.Segmented
                value={v.contrib}
                onChange={(val) => setV({ contrib: val })}
                options={[{ value: 'SIM', label: 'Sim' }, { value: 'NAO', label: 'Não' }]}
              />
            </div>
            <div className="field">
              <label className="field-label">
                Marketplace?
                <window.Tooltip text="Se a venda foi via marketplace, informe a comissão para que seja descontada no DRE." />
              </label>
              <window.Segmented
                value={v.mkt}
                onChange={(val) => setV({ mkt: val })}
                options={[{ value: 'SIM', label: 'Sim' }, { value: 'NAO', label: 'Não' }]}
              />
            </div>
            <div className="field">
              <label className="field-label">Comissão MKT (%)</label>
              <window.NumInput value={v.comissao} onChange={(n) => setV({ comissao: n })} disabled={v.mkt === 'NAO'} />
            </div>
          </div>

          <div className="subhead">Resumo da operação</div>
          <div className="grid grid-4">
            <div className="field">
              <label className="field-label">Tipo</label>
              <div className="computed">{c.tipo}</div>
            </div>
            <div className="field">
              <label className="field-label">Alíq. ICMS aplicada</label>
              <div className="computed">{pct(c.aliqICMS)}</div>
            </div>
            <div className="field">
              <label className="field-label">Alíq. interna destino</label>
              <div className="computed">{pct(c.aliqInterna)}</div>
            </div>
            <div className="field">
              <label className="field-label">
                DIFAL aplicável?
                <window.Tooltip text="DIFAL aplicável apenas em venda interestadual para não-contribuintes (LC 190/2022). Calculado pela base dupla." />
              </label>
              <div className={`computed ${c.difalAplicavel ? 'negative' : ''}`}>{c.difalAplicavel ? 'Sim' : 'Não'}</div>
            </div>
          </div>
        </div>
      </div>

      <div className="card">
        <div className="card-head">
          <div className="h-title">
            <span className="h-num">03</span>
            <span className="h-label">DRE da venda</span>
          </div>
          <button className="btn btn-ghost btn-sm" onClick={onExport}>
            <window.Icons.IcoDownload size={12} /> Exportar PDF
          </button>
        </div>
        <div className="card-body flush">
          <div className="dre">
            <div className="dre-row head">
              <div>Item</div>
              <div style={{ textAlign: 'right' }}>Valor</div>
              <div style={{ textAlign: 'right' }}>% Receita</div>
              <div style={{ textAlign: 'right' }}>R$ / un</div>
            </div>
            {dreRows.map((r, i) => (
              <div key={i} className={`dre-row ${r.cls}`}>
                <div className="label">{r.label}</div>
                <div className={`value ${r.val < 0 ? 'neg' : ''}`}>{brl(r.val)}</div>
                <div className="pct">{pct(r.val / denom)}</div>
                <div className="unit">{brl(v.qtd > 0 ? r.val / v.qtd : 0, 4)}</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div className="save-bar">
        <span className="hint">Salvar registra um snapshot imutável no histórico.</span>
        <button className="btn btn-primary btn-lg" onClick={onSave} disabled={savingHint}>
          <window.Icons.IcoSave size={13} /> {savingHint ? 'Salvando…' : 'Salvar simulação'}
        </button>
      </div>
    </>
  );
}
window.VendaView = VendaView;