/* global React */
const { useState, useEffect, useMemo } = React;

// =====================================================================
// MODAL DE SELEÇÃO DE ITENS DO XML
// =====================================================================
// Props:
//   open       — boolean
//   parsed     — resultado de parseXmlNFe (com itens, totalNF, etc)
//   onCancel   — fechar sem aplicar
//   onConfirm  — recebe { selecao, parsed, grupos } da seleção
// =====================================================================
function XmlSelectModal({ open, parsed, onCancel, onConfirm }) {
  // grupos derivados dos itens
  const grupos = useMemo(() => {
    if (!parsed || !parsed.ok) return [];
    return window.agruparItensXml(parsed.itens);
  }, [parsed]);

  // índices dos grupos selecionados
  const [selecionados, setSelecionados] = useState(new Set());

  // Quando o modal abre, selecionar todos por padrão
  useEffect(() => {
    if (open && grupos.length > 0) {
      setSelecionados(new Set(grupos.map((_, i) => i)));
    }
  }, [open, grupos]);

  if (!open || !parsed || !parsed.ok) return null;

  const toggleItem = (idx) => {
    setSelecionados(prev => {
      const next = new Set(prev);
      if (next.has(idx)) next.delete(idx);
      else next.add(idx);
      return next;
    });
  };

  const selecionarTodos = () => setSelecionados(new Set(grupos.map((_, i) => i)));
  const limparSelecao = () => setSelecionados(new Set());

  // Calcula totais com base na seleção atual
  const gruposSel = grupos.filter((_, i) => selecionados.has(i));
  const totais = gruposSel.length > 0
    ? window.calcularSelecaoXml(gruposSel, parsed)
    : null;

  const confirmar = () => {
    if (gruposSel.length === 0) return;
    onConfirm({ selecao: totais, parsed, grupos: gruposSel });
  };

  const brl = window.brl;
  const intFmt = window.intFmt;

  return (
    <div className="xml-modal-overlay" onClick={onCancel}>
      <div className="xml-modal-card" onClick={(e) => e.stopPropagation()}>
        <div className="xml-modal-head">
          <div>
            <div className="xml-modal-title">Selecionar itens do XML</div>
            <div className="xml-modal-sub">
              <strong>{parsed.fornecedor || 'Fornecedor não identificado'}</strong>
              {parsed.cnpj && <span> · CNPJ {parsed.cnpj}</span>}
              <span> · {parsed.itens.length} item(s) total</span>
              {parsed.isSimples && <span className="pill" style={{ marginLeft: 8 }}>Simples Nacional</span>}
            </div>
          </div>
          <button className="xml-modal-close" onClick={onCancel} title="Fechar">×</button>
        </div>

        <div className="xml-modal-toolbar">
          <div className="xml-modal-toolbar-info">
            <strong>{selecionados.size}</strong> de <strong>{grupos.length}</strong> grupo(s) selecionado(s)
          </div>
          <div style={{ display: 'flex', gap: 6 }}>
            <button className="btn btn-ghost btn-sm" onClick={selecionarTodos}>Selecionar todos</button>
            <button className="btn btn-ghost btn-sm" onClick={limparSelecao}>Limpar</button>
          </div>
        </div>

        <div className="xml-modal-list">
          {grupos.map((g, idx) => {
            const checked = selecionados.has(idx);
            return (
              <div
                key={idx}
                className={`xml-item ${checked ? 'selected' : ''} ${g.isST ? 'is-st' : ''}`}
                onClick={() => toggleItem(idx)}>
                <div className="xml-item-check">
                  <input
                    type="checkbox"
                    checked={checked}
                    onChange={() => toggleItem(idx)}
                    onClick={(e) => e.stopPropagation()}
                  />
                </div>
                <div className="xml-item-body">
                  <div className="xml-item-title">
                    {g.xProd || '(sem descrição)'}
                    {g.isST && (
                      <span
                        className="pill st-pill"
                        title={`Item com Substituição Tributária — SEM crédito de ICMS (CST/CSOSN: ${g.cstsICMS.join(', ')})`}
                        style={{ marginLeft: 8 }}>
                        ICMS-ST
                      </span>
                    )}
                  </div>
                  <div className="xml-item-meta">
                    {g.nItems.length > 1
                      ? <span>{g.nItems.length}× linhas (#{g.nItems.join(', #')})</span>
                      : <span>Linha #{g.nItems[0]}</span>}
                    {g.ncms.length > 0 && <span> · NCM {g.ncms.join('/')}</span>}
                    <span> · {intFmt(g.qCom)} {g.unidades.join('/')}</span>
                    {g.aliqICMS > 0 && <span> · ICMS {g.aliqICMS.toFixed(2)}%</span>}
                    {g.aliqIPI > 0 && <span> · IPI {g.aliqIPI.toFixed(2)}%</span>}
                  </div>
                </div>
                <div className="xml-item-value">{brl(g.vProd)}</div>
              </div>
            );
          })}
        </div>

        {totais && (
          <div className="xml-modal-summary">
            <div className="xml-summary-row">
              <span>Valor total selecionado</span>
              <strong>{brl(totais.valor)}</strong>
            </div>
            <div className="xml-summary-row">
              <span>Quantidade</span>
              <strong>{intFmt(totais.qtd)} {totais.unidade}</strong>
            </div>
            <div className="xml-summary-row">
              <span>ICMS médio · IPI médio</span>
              <strong>{totais.aliqICMS.toFixed(2)}% · {totais.aliqIPI.toFixed(2)}%</strong>
            </div>
            {(totais.frete > 0 || totais.seguro > 0 || totais.outras > 0 || totais.desconto > 0) && (
              <div className="xml-summary-row">
                <span>Despesas rateadas</span>
                <strong>
                  {totais.frete > 0 && `Frete ${brl(totais.frete)} `}
                  {totais.seguro > 0 && `Seguro ${brl(totais.seguro)} `}
                  {totais.outras > 0 && `Outras ${brl(totais.outras)} `}
                  {totais.desconto > 0 && `Desc. -${brl(totais.desconto)}`}
                </strong>
              </div>
            )}
            {totais.hasST && (
              <div className="xml-summary-warn">
                ⚠ Há item(ns) com ICMS-ST: crédito de ICMS será zerado para os itens marcados como ST.
              </div>
            )}
          </div>
        )}

        <div className="xml-modal-foot">
          <button className="btn btn-ghost" onClick={onCancel}>Cancelar</button>
          <button
            className="btn btn-primary"
            onClick={confirmar}
            disabled={gruposSel.length === 0}>
            Importar {gruposSel.length > 0 && `(${gruposSel.length})`}
          </button>
        </div>
      </div>
    </div>
  );
}

window.XmlSelectModal = XmlSelectModal;