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

function ProdutoView({ produto, params, setProduto, viewingMode, onExitView, onSave, savingHint, onShowToast }) {
  if (!produto) return null;
  const c = window.calcProduto(produto, params);

  // Estado do XML
  const [xmlText, setXmlText] = useState('');
  const [xmlModalOpen, setXmlModalOpen] = useState(false);
  const [xmlParsed, setXmlParsed] = useState(null);

  const setNF = (patch) => setProduto({ ...produto, nf: { ...produto.nf, ...patch } });
  const setProd = (patch) => setProduto({ ...produto, prod: { ...produto.prod, ...patch } });
  const setInsumo = (idx, patch) => {
    const novo = [...produto.insumos];
    novo[idx] = { ...novo[idx], ...patch };
    setProduto({ ...produto, insumos: novo });
  };
  const addInsumo = () => {
    setProduto({
      ...produto,
      insumos: [...produto.insumos, { nome: 'Novo insumo', valor: 0, credPC: false, credICMS: false, aliqICMS: 18, nota: '', custom: true }]
    });
  };
  const removeInsumo = (idx) => {
    const novo = [...produto.insumos];
    novo.splice(idx, 1);
    setProduto({ ...produto, insumos: novo });
  };

  const processarXml = () => {
    const texto = (xmlText || '').trim();
    if (!texto) {
      onShowToast('Cole o XML da NF-e no campo acima', 'err');
      return;
    }
    const parsed = window.parseXmlNFe(texto);
    if (!parsed.ok) {
      onShowToast(parsed.erro || 'Falha ao processar XML', 'err');
      return;
    }
    // Agrupa para decidir se precisa de seleção
    const grupos = window.agruparItensXml(parsed.itens);
    if (grupos.length === 1) {
      // Item único: aplica direto sem abrir modal
      const selecao = window.calcularSelecaoXml(grupos, parsed);
      aplicarXml(selecao, parsed);
    } else {
      // Múltiplos itens: abre modal de seleção
      setXmlParsed(parsed);
      setXmlModalOpen(true);
    }
  };

  const aplicarXml = (selecao, parsed) => {
    const { produtoAtualizado, kgPreenchido } = window.aplicarXmlAoProduto(produto, selecao, parsed);
    setProduto(produtoAtualizado);
    setXmlText(''); // limpa textarea
    let msg = `XML importado: ${parsed.fornecedor || 'fornecedor'} — ${selecao.qtdItens} item(s)`;
    if (selecao.hasST) msg += ' · ⚠ contém ICMS-ST (sem crédito)';
    if (!kgPreenchido) msg += ` · ⚠ unidade "${selecao.unidade}" — preencha kg manualmente`;
    onShowToast(msg, selecao.hasST || !kgPreenchido ? 'warn' : 'ok');
  };

  const onXmlModalConfirm = ({ selecao, parsed }) => {
    setXmlModalOpen(false);
    aplicarXml(selecao, parsed);
    setXmlParsed(null);
  };

  const onXmlModalCancel = () => {
    setXmlModalOpen(false);
    setXmlParsed(null);
  };

  const kgWarn = produto.nf.xmlInfo && produto.nf.xmlInfo.isKg === false;

  return (
    <>
      {viewingMode && (
        <div className="view-banner">
          <div className="view-banner-info">
            <window.Icons.IcoEye size={14} />
            <div>
              <strong>Modo visualização — versão v#{String(viewingMode.seq).padStart(4, '0')}</strong>
              <span style={{ opacity: 0.7, marginLeft: 8 }}>
                salvo 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>
      )}

      <input
        type="text"
        className="product-name"
        value={produto.nome}
        onChange={(e) => setProduto({ ...produto, nome: e.target.value })}
        placeholder="Nome do produto"
      />
      <div className="product-meta">
        <span className="pill">CMV {brl(c.cmv.cmvUn, 4)} / un</span>
        <span className="pill">{intFmt(produto.prod.qtd)} un / dia</span>
        <span className="pill">{produto.nf.kg} kg / nota</span>
      </div>

      <div className="card">
        <div className="card-head">
          <div className="h-title">
            <span className="h-num">XML</span>
            <span className="h-label">Importar NF-e</span>
          </div>
          <span className="h-sub">Cole o XML para preencher os campos da NF</span>
        </div>
        <div className="card-body">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 12, alignItems: 'end' }}>
            <div className="field">
              <textarea
                placeholder="Cole aqui o XML da NF-e de compra…"
                value={xmlText}
                onChange={(e) => setXmlText(e.target.value)}
              />
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              <button className="btn btn-primary" onClick={processarXml}>
                <window.Icons.IcoFile size={12} /> Processar XML
              </button>
              <button
                className="btn btn-sm btn-ghost"
                onClick={() => setXmlText('')}
                disabled={!xmlText}>
                Limpar
              </button>
            </div>
          </div>
          {produto.nf.xmlInfo && (
            <div className="banner banner-accent" style={{ marginTop: 12, marginBottom: 0 }}>
              <window.Icons.IcoFile size={14} />
              <div>
                <strong>XML importado:</strong> {produto.nf.xmlInfo.fornecedor || '—'} ·{' '}
                {produto.nf.xmlInfo.qtdItens} item(s) · Unidade {produto.nf.xmlInfo.unidade}
              </div>
            </div>
          )}
        </div>
      </div>

      <div className="card">
        <div className="card-head">
          <div className="h-title">
            <span className="h-num">01</span>
            <span className="h-label">Nota fiscal da matéria-prima</span>
          </div>
        </div>
        <div className="card-body">
          <div className="grid grid-3">
            <div className="field">
              <label className="field-label">
                Valor total da nota (R$)
                <window.Tooltip text="Valor total da NF, incluindo IPI, frete, seguro e outras despesas, deduzido o desconto." />
              </label>
              <window.NumInput value={produto.nf.valor} onChange={(n) => setNF({ valor: n })} />
            </div>
            <div className="field">
              <label className="field-label">
                Quantidade (kg)
                <window.Tooltip text="Peso líquido em kg. Se o XML vier em unidade diferente, este campo precisa ser preenchido manualmente." />
              </label>
              <window.NumInput
                value={produto.nf.kg}
                onChange={(n) => setNF({ kg: n })}
                className={`mono ${kgWarn ? 'input-warn' : ''}`}
              />
              {kgWarn && (
                <div className="field-hint warn">
                  ⚠ XML veio em "{produto.nf.xmlInfo.unidade}" — converta manualmente.
                </div>
              )}
            </div>
            <div className="field">
              <label className="field-label">
                Alíquota ICMS (%)
                <window.Tooltip text="Alíquota destacada na NF. Em compra de fornecedor Simples, é a alíquota de crédito (pCredSN)." />
              </label>
              <window.NumInput value={produto.nf.icms} onChange={(n) => setNF({ icms: n })} />
            </div>
            <div className="field">
              <label className="field-label">Alíquota IPI (%)</label>
              <window.NumInput value={produto.nf.ipi} onChange={(n) => setNF({ ipi: n })} />
            </div>
            <div className="field">
              <label className="field-label">
                Fornecedor Simples Nacional?
                <window.Tooltip text="Se SIM, zera o crédito de PIS/COFINS sobre a compra. ICMS continua creditável até o limite destacado." />
              </label>
              <window.Segmented
                value={produto.nf.simples}
                onChange={(val) => setNF({ simples: val })}
                options={[{ value: 'SIM', label: 'Sim' }, { value: 'NAO', label: 'Não' }]}
              />
            </div>
          </div>

          <div className="subhead">
            Despesas acessórias
            <window.Tooltip text="Frete, seguro e outras despesas pagas ao fornecedor entram na base de PIS/COFINS para crédito (Lei 10.833, art. 3º)." />
          </div>
          <div className="grid grid-4">
            <div className="field">
              <label className="field-label">Frete (R$)</label>
              <window.NumInput value={produto.nf.frete || 0} onChange={(n) => setNF({ frete: n })} />
            </div>
            <div className="field">
              <label className="field-label">Seguro (R$)</label>
              <window.NumInput value={produto.nf.seguro || 0} onChange={(n) => setNF({ seguro: n })} />
            </div>
            <div className="field">
              <label className="field-label">Outras despesas (R$)</label>
              <window.NumInput value={produto.nf.outras || 0} onChange={(n) => setNF({ outras: n })} />
            </div>
            <div className="field">
              <label className="field-label">Desconto (R$)</label>
              <window.NumInput value={produto.nf.desconto || 0} onChange={(n) => setNF({ desconto: n })} />
            </div>
          </div>

          <div className="subhead">Decomposição automática</div>
          <div className="grid grid-3">
            <div className="field">
              <label className="field-label">Valor produtos (s/ IPI)</label>
              <div className="computed">{brl(c.nf.valorProd)}</div>
            </div>
            <div className="field">
              <label className="field-label">ICMS destacado</label>
              <div className="computed positive">{brl(c.nf.icmsDestac)}</div>
            </div>
            <div className="field">
              <label className="field-label">Base PIS/COFINS</label>
              <div className="computed">{brl(c.nf.basePC)}</div>
            </div>
            <div className="field">
              <label className="field-label">Crédito PIS</label>
              <div className="computed positive">{brl(c.nf.credPIS)}</div>
            </div>
            <div className="field">
              <label className="field-label">Crédito COFINS</label>
              <div className="computed positive">{brl(c.nf.credCOFINS)}</div>
            </div>
            <div className="field">
              <label className="field-label">Total créditos</label>
              <div className="computed positive">{brl(c.nf.credTotal)}</div>
            </div>
            <div className="field">
              <label className="field-label">Custo MP líquido</label>
              <div className="computed accent">{brl(c.nf.custoLiq)}</div>
            </div>
            <div className="field">
              <label className="field-label">Custo MP por kg</label>
              <div className="computed accent">{brl(c.nf.custoKg, 4)}</div>
            </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">Custos diários de produção</span>
          </div>
          <span className="h-sub">Subtotal: {brl(c.insumos.subtotal)} / dia</span>
        </div>
        <div className="card-body flush">
          <div className="insumos">
            <div className="insumos-head">
              <div>Insumo</div>
              <div>Valor / dia</div>
              <div>Alíq. ICMS</div>
              <div>Créd. PIS/COF.</div>
              <div>Créd. ICMS</div>
              <div>Observação</div>
            </div>
            {produto.insumos.map((item, idx) => (
              <div key={idx} className={`insumo ${item.custom ? 'custom' : ''}`}>
                {item.custom ? (
                  <input
                    className="nome-input"
                    value={item.nome}
                    onChange={(e) => setInsumo(idx, { nome: e.target.value })}
                  />
                ) : (
                  <div className="nome">{item.nome}</div>
                )}
                <window.NumInput value={item.valor} onChange={(n) => setInsumo(idx, { valor: n })} />
                <window.NumInput value={item.aliqICMS} onChange={(n) => setInsumo(idx, { aliqICMS: n })} />
                <window.Segmented
                  value={item.credPC ? 'SIM' : 'NAO'}
                  onChange={(val) => setInsumo(idx, { credPC: val === 'SIM' })}
                  options={[{ value: 'SIM', label: 'Sim' }, { value: 'NAO', label: 'Não' }]}
                />
                <window.Segmented
                  value={item.credICMS ? 'SIM' : 'NAO'}
                  onChange={(val) => setInsumo(idx, { credICMS: val === 'SIM' })}
                  options={[{ value: 'SIM', label: 'Sim' }, { value: 'NAO', label: 'Não' }]}
                />
                <div className="insumo-actions">
                  {item.custom ? (
                    <input
                      className="nota-input"
                      value={item.nota || ''}
                      onChange={(e) => setInsumo(idx, { nota: e.target.value })}
                      placeholder="Observação"
                    />
                  ) : (
                    <div className="nota">{item.nota}</div>
                  )}
                  {item.custom && (
                    <button className="icon-btn" onClick={() => removeInsumo(idx)} title="Remover">×</button>
                  )}
                </div>
              </div>
            ))}
            <div className="insumo-add-bar">
              <button className="btn btn-ghost btn-sm" onClick={addInsumo} style={{ borderStyle: 'dashed' }}>
                <window.Icons.IcoPlus size={12} /> Adicionar insumo
              </button>
            </div>
            <div className="insumo-subtotal">
              <div className="label">Subtotal custos diretos</div>
              <div className="value">{brl(c.insumos.subtotal)}</div>
              <div /><div /><div /><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">Produção diária</span>
          </div>
        </div>
        <div className="card-body">
          <div className="grid grid-2">
            <div className="field">
              <label className="field-label">Consumo de MP por dia (kg)</label>
              <window.NumInput value={produto.prod.mpKg} onChange={(n) => setProd({ mpKg: n })} />
            </div>
            <div className="field">
              <label className="field-label">Quantidade produzida por dia (un)</label>
              <window.NumInput value={produto.prod.qtd} onChange={(n) => setProd({ qtd: n })} />
            </div>
          </div>
        </div>
      </div>

      <div className="card">
        <div className="card-head">
          <div className="h-title">
            <span className="h-num">04</span>
            <span className="h-label">CMV — Custo da mercadoria vendida</span>
          </div>
        </div>
        <div className="card-body flush">
          <div className="dre">
            <div className="dre-row">
              <div className="label">Custo MP líquida (consumo × R$/kg)</div>
              <div className="value">{brl(c.cmv.mpDia)}</div>
              <div /><div />
            </div>
            <div className="dre-row">
              <div className="label">Custos diretos / dia</div>
              <div className="value">{brl(c.insumos.subtotal)}</div>
              <div /><div />
            </div>
            <div className="dre-row">
              <div className="label">(−) Créditos apurados</div>
              <div className="value neg">{brl(-c.insumos.credTotalDiretos)}</div>
              <div /><div />
            </div>
            <div className="dre-row subtotal">
              <div className="label">Custo total de produção / dia</div>
              <div className="value">{brl(c.cmv.custoTotalDia)}</div>
              <div /><div />
            </div>
            <div className="dre-row">
              <div className="label">Quantidade produzida / dia</div>
              <div className="value">{intFmt(produto.prod.qtd)} un</div>
              <div /><div />
            </div>
            <div className="dre-row final">
              <div className="label">CMV unitário</div>
              <div className="value">{brl(c.cmv.cmvUn, 4)}</div>
              <div className="pct">/ un</div>
              <div />
            </div>
          </div>
        </div>
      </div>

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

      <window.XmlSelectModal
        open={xmlModalOpen}
        parsed={xmlParsed}
        onCancel={onXmlModalCancel}
        onConfirm={onXmlModalConfirm}
      />
    </>
  );
}
window.ProdutoView = ProdutoView;