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

const _fmtDate = (iso) => {
  if (!iso) return '—';
  const d = new Date(iso);
  return d.toLocaleDateString('pt-BR') + ' · ' + d.toLocaleTimeString('pt-BR', { hour:'2-digit', minute:'2-digit' });
};

// =====================================================================
// HISTÓRICO DE SIMULAÇÕES — agora conectado ao Supabase
// =====================================================================
function HistoricoSimView({ items, loaded, onReload, onView, onDelete, disabled }) {
  return (
    <>
      <div className="hist-toolbar">
        <h1>Histórico de simulações</h1>
        <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
          <span className="meta">{loaded ? `${items.length} registros` : 'Não carregado'}</span>
          <button className="btn btn-ghost btn-sm" onClick={onReload} disabled={disabled}>
            <window.Icons.IcoRefresh size={12} /> Atualizar
          </button>
        </div>
      </div>

      {!loaded && (
        <div className="banner banner-info">
          <window.Icons.IcoClock size={14} />
          <div>
            Clique em <strong>Atualizar</strong> para buscar o histórico do banco.
            Cada simulação salva é um snapshot imutável.
          </div>
        </div>
      )}

      {loaded && items.length === 0 && (
        <div className="banner banner-info">
          <window.Icons.IcoClock size={14} />
          <div>Nenhuma simulação salva ainda. Clique em <strong>Salvar simulação</strong> na aba Venda para registrar a primeira.</div>
        </div>
      )}

      {loaded && items.length > 0 && (
        <div className="hist-table">
          <div className="hist-row head">
            <div>ID</div>
            <div>Produto</div>
            <div>Data</div>
            <div className="num" style={{ textAlign: 'right' }}>Qtd</div>
            <div className="num" style={{ textAlign: 'right' }}>Valor</div>
            <div>Canal</div>
            <div className="num" style={{ textAlign: 'right' }}>Lucro líq.</div>
            <div style={{ textAlign: 'right' }}>Ações</div>
          </div>
          {items.map(s => (
            <div className="hist-row" key={s.id}>
              <div><span className="seq">#{String(s.seq).padStart(4, '0')}</span></div>
              <div style={{ overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>{s.produto_nome}</div>
              <div style={{ fontSize: 11.5, color: 'var(--text-3)' }}>{_fmtDate(s.created_at)}</div>
              <div className="num">{intFmt(s.qtd)}</div>
              <div className="num">{brl(s.valor_total)}</div>
              <div>
                <span className="pill">{s.marketplace ? 'MKT' : 'Direto'}</span>
              </div>
              <div className="num" style={{ color: s.lucro_liq >= 0 ? 'var(--positive)' : 'var(--negative)' }}>
                {brl(s.lucro_liq)}
              </div>
              <div className="actions">
                <button onClick={() => onView(s.id)} title="Carregar na aba Venda">
                  <window.Icons.IcoEye size={11} /> Ver
                </button>
                <button className="del" onClick={() => onDelete(s.id, s.seq)} title="Excluir">
                  <window.Icons.IcoTrash size={11} />
                </button>
              </div>
            </div>
          ))}
        </div>
      )}
    </>
  );
}

// =====================================================================
// HISTÓRICO DE PRODUTOS — conectado ao Supabase
// =====================================================================
function HistoricoProdView({ items, loaded, onReload, onView, onDelete, disabled }) {
  return (
    <>
      <div className="hist-toolbar">
        <h1>Versões de produtos</h1>
        <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
          <span className="meta">{loaded ? `${items.length} versões` : 'Não carregado'}</span>
          <button className="btn btn-ghost btn-sm" onClick={onReload} disabled={disabled}>
            <window.Icons.IcoRefresh size={12} /> Atualizar
          </button>
        </div>
      </div>

      {!loaded && (
        <div className="banner banner-info">
          <window.Icons.IcoStack size={14} />
          <div>
            Clique em <strong>Atualizar</strong> para buscar as versões de produto do banco.
            Cada save é uma versão imutável.
          </div>
        </div>
      )}

      {loaded && items.length === 0 && (
        <div className="banner banner-info">
          <window.Icons.IcoStack size={14} />
          <div>Nenhuma versão salva ainda. Vá em uma aba de produto e clique em <strong>Salvar produto</strong>.</div>
        </div>
      )}

      {loaded && items.length > 0 && (
        <div className="hist-table">
          <div className="hist-row head" style={{ gridTemplateColumns: '70px 1fr 130px 110px 110px 130px 100px' }}>
            <div>ID</div>
            <div>Produto</div>
            <div>NCM</div>
            <div className="num" style={{ textAlign: 'right' }}>Qtd / dia</div>
            <div className="num" style={{ textAlign: 'right' }}>CMV / un</div>
            <div>Data</div>
            <div style={{ textAlign: 'right' }}>Ações</div>
          </div>
          {items.map(s => (
            <div className="hist-row" key={s.id} style={{ gridTemplateColumns: '70px 1fr 130px 110px 110px 130px 100px' }}>
              <div><span className="seq">v#{String(s.seq).padStart(4, '0')}</span></div>
              <div style={{ overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>{s.nome}</div>
              <div style={{ fontFamily: 'var(--font-mono)', color: 'var(--text-3)', fontSize: 11.5 }}>
                {s.ncm || '—'}
              </div>
              <div className="num">{intFmt(s.qtd_dia)}</div>
              <div className="num" style={{ color: 'var(--accent)' }}>{brl(s.cmv_calc, 4)}</div>
              <div style={{ fontSize: 11.5, color: 'var(--text-3)' }}>{_fmtDate(s.created_at)}</div>
              <div className="actions">
                <button onClick={() => onView(s.id)} title="Carregar no produto ativo">
                  <window.Icons.IcoEye size={11} /> Ver
                </button>
                <button className="del" onClick={() => onDelete(s.id, s.seq)} title="Excluir">
                  <window.Icons.IcoTrash size={11} />
                </button>
              </div>
            </div>
          ))}
        </div>
      )}
    </>
  );
}

// =====================================================================
// PARÂMETROS
// =====================================================================
function ParamsView({ params, setParams }) {
  const set = (patch) => setParams({ ...params, ...patch });
  return (
    <>
      <div className="banner banner-info" style={{ fontSize: 12.5 }}>
        <window.Icons.IcoSliders size={14} />
        <div>
          Alíquotas e premissas do regime <strong>Lucro Real</strong>. Alterações aqui afetam todos os cálculos.
        </div>
      </div>

      <div className="card">
        <div className="card-head">
          <div className="h-title">
            <span className="h-num">01</span>
            <span className="h-label">Alíquotas de tributos</span>
          </div>
        </div>
        <div className="card-body">
          <div className="grid grid-3">
            <div className="field">
              <label className="field-label">ICMS interno SP (%)</label>
              <window.NumInput value={params.icmsSp} onChange={(n) => set({ icmsSp: n })} />
              <div className="field-hint">art. 52, RICMS/SP</div>
            </div>
            <div className="field">
              <label className="field-label">IPI envelope plástico (%)</label>
              <window.NumInput value={params.ipi} onChange={(n) => set({ ipi: n })} />
              <div className="field-hint">TIPI Cap. 39</div>
            </div>
            <div className="field">
              <label className="field-label">PIS não-cumulativo (%)</label>
              <window.NumInput value={params.pis} onChange={(n) => set({ pis: n })} />
            </div>
            <div className="field">
              <label className="field-label">COFINS não-cumulativa (%)</label>
              <window.NumInput value={params.cofins} onChange={(n) => set({ cofins: n })} />
            </div>
            <div className="field">
              <label className="field-label">IRPJ base (%)</label>
              <window.NumInput value={params.irpj} onChange={(n) => set({ irpj: n })} />
              <div className="field-hint">sobre lucro real</div>
            </div>
            <div className="field">
              <label className="field-label">CSLL (%)</label>
              <window.NumInput value={params.csll} onChange={(n) => set({ csll: n })} />
            </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">Premissas de operação</span>
          </div>
        </div>
        <div className="card-body">
          <div className="grid grid-2">
            <div className="field">
              <label className="field-label">Custos fixos sobre faturamento (%)</label>
              <window.NumInput value={params.fixos} onChange={(n) => set({ fixos: n })} />
              <div className="field-hint">overhead administrativo, financeiro, comercial</div>
            </div>
            <div className="field">
              <label className="field-label">IRPJ adicional</label>
              <div className="computed" style={{ opacity: 0.6 }}>10% acima de R$ 20k/mês</div>
              <div className="field-hint">não aplicado em conta unitária</div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

// =====================================================================
// UFs
// =====================================================================
function UFsView() {
  return (
    <>
      <div className="banner banner-info">
        <window.Icons.IcoMap size={14} />
        <div>
          Alíquotas interestaduais a partir de <strong>SP</strong> e alíquotas internas dos estados de destino — usadas para DIFAL pela base dupla (LC 190/2022).
        </div>
      </div>

      <div className="uf-grid">
        <div className="uf-row head">
          <div>UF</div>
          <div>Interestadual (SP → UF)</div>
          <div>Interna destino</div>
          <div>Diferencial</div>
          <div>Visual</div>
        </div>
        {window.UFS.map(([uf, ie, ii]) => {
          const diff = ii - ie;
          return (
            <div className="uf-row" key={uf}>
              <div className="uf">{uf}</div>
              <div className="v">{pct(ie)}</div>
              <div className="v">{pct(ii)}</div>
              <div className="v"><span className="pill accent">+{pct(diff)}</span></div>
              <div>
                <div style={{
                  height: 5, borderRadius: 3, background: 'var(--surface-3)',
                  position: 'relative', overflow: 'hidden'
                }}>
                  <div style={{
                    position: 'absolute', left: 0, top: 0, bottom: 0,
                    width: `${ie / 0.25 * 100}%`, background: 'var(--text-4)'
                  }} />
                  <div style={{
                    position: 'absolute', left: `${ie / 0.25 * 100}%`, top: 0, bottom: 0,
                    width: `${diff / 0.25 * 100}%`, background: 'var(--accent)'
                  }} />
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </>
  );
}

window.HistoricoSimView = HistoricoSimView;
window.HistoricoProdView = HistoricoProdView;
window.ParamsView = ParamsView;
window.UFsView = UFsView;