// Parâmetros globais, knobs de insumos/MO/BDI com preview de impacto agregado
// Materializa a dor #1 da Ana: propagação manual de mudança de preço/dissídio.

const { useState: usePG, useMemo: useMPG } = React;

function ParametrosGlobais({ forceRefresh }) {
  const data = window.DESTACA_DATA;
  const [overrides, setOverrides] = usePG({}); // chave: 'mat:diesel' -> novo valor
  const [aplicado, setAplicado] = usePG(false);

  // Helper: pega valor atual de um item
  const getCurrent = (kind, id, field) => {
    if (kind === 'mat') return data.materiais.find(m => m.id === id)?.custo;
    if (kind === 'sal') return data.cargos.find(c => c.id === id)?.salario;
    if (kind === 'bdi') return data.bdi[id];
    return null;
  };
  const getOverride = (kind, id) => overrides[`${kind}:${id}`];
  const setOverride = (kind, id, val) => setOverrides(o => ({ ...o, [`${kind}:${id}`]: val }));

  // Calcula impacto: simula DESTACA_DATA com overrides aplicados, recalcula projetos ativos
  const impacto = useMPG(() => {
    const projetosAtivos = data.projetos.filter(p => p.status !== 'aprovado' && p.status !== 'perdido');
    return projetosAtivos.map(p => {
      let custoOriginal = 0, custoNovo = 0;
      p.obras.forEach(o => {
        o.frentes.forEach(f => {
          try {
            const orig = window.DESTACA_CALC.estimarFrente(f);
            custoOriginal += orig.total;
            // Clone data com overrides
            const dataMod = JSON.parse(JSON.stringify(data));
            Object.entries(overrides).forEach(([k, v]) => {
              const [kind, id] = k.split(':');
              if (kind === 'mat') {
                const m = dataMod.materiais.find(x => x.id === id);
                if (m) m.custo = Number(v);
              }
              if (kind === 'sal') {
                const c = dataMod.cargos.find(x => x.id === id);
                if (c) c.salario = Number(v);
              }
              if (kind === 'bdi') {
                dataMod.bdi[id] = Number(v);
              }
            });
            const novo = window.DESTACA_CALC.estimarFrente(f, dataMod);
            custoNovo += novo.total;
          } catch (e) {}
        });
      });
      return { id: p.id, nome: p.nome, cliente: p.cliente, status: p.status,
        custoOriginal, custoNovo, delta: custoNovo - custoOriginal,
        deltaPct: custoOriginal > 0 ? (custoNovo - custoOriginal) / custoOriginal : 0 };
    });
  }, [overrides]);

  const recalcing = DUI.useRecalc([overrides], 600);
  const totalDelta = impacto.reduce((s, p) => s + p.delta, 0);
  const haAlteracoes = Object.keys(overrides).length > 0;
  const top3 = [...impacto].sort((a, b) => Math.abs(b.delta) - Math.abs(a.delta)).slice(0, 3);

  const aplicar = () => {
    Object.entries(overrides).forEach(([k, v]) => {
      const [kind, id] = k.split(':');
      if (kind === 'mat') {
        const m = data.materiais.find(x => x.id === id);
        if (m) m.custo = Number(v);
      }
      if (kind === 'sal') {
        const c = data.cargos.find(x => x.id === id);
        if (c) c.salario = Number(v);
      }
      if (kind === 'bdi') {
        data.bdi[id] = Number(v);
      }
    });
    setOverrides({});
    setAplicado(true);
    setTimeout(() => setAplicado(false), 2200);
    forceRefresh();
  };

  const resetar = () => setOverrides({});

  return (
    <div style={{ maxWidth: 1280, margin: '0 auto', position: 'relative' }}>
      <DUI.Callout num="⑤" anchor="left" top={50} left={-12} width={230}>
        Mudou diesel/dissídio aqui? <strong>Painel direito mostra impacto em todos projetos ativos</strong> antes de aplicar. Substitui horas de cópia manual.
      </DUI.Callout>

      <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 20 }}>
        {/* ESQUERDA, knobs */}
        <div>
          {aplicado && (
            <div className="card" style={{ padding: 12, marginBottom: 14, background: 'var(--d-green-soft)', borderColor: '#22A94A', display: 'flex', alignItems: 'center', gap: 10 }}>
              <DUI.Icon name="check" size={16} style={{color: '#1a8a3c'}}/>
              <span style={{ font: '500 12.5px/1.4 Inter', color: '#1a8a3c' }}><strong>Alterações aplicadas.</strong> Novos valores vigentes para todos os orçamentos a partir de agora.</span>
            </div>
          )}

          <SectionPG title="Insumos" subtitle="Materiais comprados. Diesel é o mais sensível, afeta toda equipe motorizada.">
            <KnobTable kind="mat" items={data.materiais.map(m => ({ id: m.id, nome: m.nome, atual: m.custo, unid: 'R$/' + m.unid, step: m.id === 'diesel' ? 0.05 : 0.5 }))} getOverride={getOverride} setOverride={setOverride}/>
          </SectionPG>

          <SectionPG title="Mão de obra" subtitle={<>Salário base mensal. <DUI.Term>Dissídio</DUI.Term> e encargos são aplicados em cima do valor configurado.</>}>
            <KnobTable kind="sal" items={[
              { id: 'op-perf', nome: 'Operador Perfuratriz' },
              { id: 'op-mart', nome: 'Operador Martelo' },
              { id: 'op-guind', nome: 'Op. de Guindaste' },
              { id: 'soldador', nome: 'Soldador' },
              { id: 'aju-a', nome: 'Ajudante A' },
              { id: 'aju-c', nome: 'Ajudante C' },
            ].map(i => ({ ...i, atual: data.cargos.find(c => c.id === i.id)?.salario, unid: 'R$/mês', step: 100 }))} getOverride={getOverride} setOverride={setOverride}/>
          </SectionPG>

          <SectionPG title={<><DUI.Term>BDI</DUI.Term> e encargos</>} subtitle="Composição padrão aplicada a todos novos orçamentos.">
            <KnobTable kind="bdi" items={[
              { id: 'lucro', nome: 'Lucro', atual: data.bdi.lucro, unid: '%', step: 0.005, ispct: true },
              { id: 'impostos', nome: 'Impostos', atual: data.bdi.impostos, unid: '%', step: 0.005, ispct: true },
              { id: 'despesas_ind', nome: 'Despesas indiretas', atual: data.bdi.despesas_ind, unid: '%', step: 0.005, ispct: true },
              { id: 'riscos', nome: 'Riscos', atual: data.bdi.riscos, unid: '%', step: 0.0025, ispct: true },
            ]} getOverride={getOverride} setOverride={setOverride}/>
          </SectionPG>

          <DUI.MockArea label="// definir no MVP" style={{ padding: 12, marginTop: 14 }}>
            <div style={{ font: '500 12px/1.5 Inter', color: 'var(--d-text-3)' }}>
              <strong style={{color:'var(--d-text-2)'}}>Versionamento de tabelas, agendamento de reajuste (ex: dissídio out/26), histórico de mudanças, aprovação por papel</strong>
            </div>
          </DUI.MockArea>
        </div>

        {/* DIREITA, impacto */}
        <div style={{ position: 'sticky', top: 0, alignSelf: 'flex-start' }}>
          <div className="card" style={{ padding: 18 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
              <h3 style={{ margin: 0, font: '700 16px/1 Inter' }}>Impacto se aplicar</h3>
              {recalcing && <DUI.Recalc/>}
            </div>
            <p style={{ margin: '4px 0 14px', font: '500 12px/1.4 Inter', color: 'var(--d-text-3)' }}>
              {haAlteracoes
                ? `${Object.keys(overrides).length} alteração(ões) pendente(s) · ${impacto.length} projetos ativos serão afetados`
                : 'Altere algum parâmetro à esquerda para simular impacto.'}
            </p>

            {haAlteracoes && (
              <>
                <div style={{ padding: 12, background: totalDelta >= 0 ? 'var(--d-warn-bg)' : 'var(--d-green-soft)', borderRadius: 6, marginBottom: 14 }}>
                  <div style={{ font: '600 10.5px/1 Inter', color: 'var(--d-text-3)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>Impacto agregado</div>
                  <div className="d-mono" style={{ font: '800 24px/1.1 JetBrains Mono', marginTop: 6, color: totalDelta >= 0 ? '#a46a02' : '#1a8a3c' }}>
                    {totalDelta >= 0 ? '+' : ''}{window.DESTACA_CALC.fmtBRLk(totalDelta)}
                  </div>
                  <div style={{ font: '500 11.5px/1.3 Inter', color: 'var(--d-text-2)', marginTop: 4 }}>
                    em {impacto.length} orçamentos ativos · {totalDelta >= 0 ? 'custo a mais' : 'economia'}
                  </div>
                </div>

                {top3.length > 0 && (
                  <>
                    <div style={{ font: '600 10px/1 Inter', color: 'var(--d-text-3)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 8 }}>Top afetados</div>
                    {top3.map(p => (
                      <div key={p.id} style={{ padding: '10px 0', borderTop: '1px solid var(--d-border)' }}>
                        <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
                          <span className="d-mono" style={{ font: '500 10.5px/1 JetBrains Mono', color: 'var(--d-text-3)' }}>{p.id}</span>
                          <span className="d-mono" style={{ font: '700 12px/1 JetBrains Mono', color: p.delta >= 0 ? '#c8302a' : '#1a8a3c', marginLeft: 'auto' }}>
                            {p.delta >= 0 ? '+' : ''}{(p.deltaPct*100).toFixed(2)}%
                          </span>
                        </div>
                        <div style={{ font: '600 12px/1.3 Inter', marginTop: 3 }}>{p.nome}</div>
                        <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginTop: 3 }}>
                          <span className="d-mono" style={{ font: '500 10.5px/1 JetBrains Mono', color: 'var(--d-text-3)' }}>{window.DESTACA_CALC.fmtBRLk(p.custoOriginal)}</span>
                          <span style={{ color: 'var(--d-text-3)', fontSize: 11 }}>→</span>
                          <span className="d-mono" style={{ font: '600 10.5px/1 JetBrains Mono', color: 'var(--d-text)' }}>{window.DESTACA_CALC.fmtBRLk(p.custoNovo)}</span>
                          <span className="d-mono" style={{ font: '500 10.5px/1 JetBrains Mono', color: p.delta >= 0 ? '#c8302a' : '#1a8a3c', marginLeft: 'auto' }}>
                            {p.delta >= 0 ? '+' : ''}{window.DESTACA_CALC.fmtBRLk(p.delta)}
                          </span>
                        </div>
                      </div>
                    ))}
                  </>
                )}

                <div style={{ display: 'flex', gap: 8, marginTop: 16 }}>
                  <button className="btn" style={{ flex: 1 }} onClick={resetar}>Descartar</button>
                  <button className="btn btn-primary" style={{ flex: 2 }} onClick={aplicar}>
                    <DUI.Icon name="check" size={13}/>Aplicar a todos
                  </button>
                </div>
              </>
            )}

            {!haAlteracoes && (
              <div style={{ padding: 24, textAlign: 'center', color: 'var(--d-text-3)' }}>
                <DUI.Icon name="info" size={20} style={{ marginBottom: 8 }}/>
                <div style={{ font: '500 12.5px/1.5 Inter' }}>Use o painel à esquerda para simular um reajuste, diesel, salário, BDI…</div>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}

function SectionPG({ title, subtitle, children }) {
  return (
    <div style={{ marginBottom: 22 }}>
      <h3 style={{ margin: '0 0 4px', font: '700 14px/1.2 Inter' }}>{title}</h3>
      {subtitle && <p style={{ margin: '0 0 12px', font: '500 12px/1.5 Inter', color: 'var(--d-text-3)' }}>{subtitle}</p>}
      {children}
    </div>
  );
}

function KnobTable({ kind, items, getOverride, setOverride }) {
  return (
    <div className="card" style={{ padding: 0, boxShadow: 'none' }}>
      <table className="tbl">
        <thead><tr>
          <th>Item</th>
          <th className="num" style={{ width: 100 }}>Atual</th>
          <th className="num" style={{ width: 130 }}>Novo</th>
          <th className="num" style={{ width: 70 }}>Δ</th>
        </tr></thead>
        <tbody>
          {items.map(it => {
            const ov = getOverride(kind, it.id);
            const novo = ov != null ? Number(ov) : it.atual;
            const delta = it.atual ? ((novo - it.atual) / it.atual) * 100 : 0;
            const display = (v) => it.ispct ? (v*100).toFixed(2) : v?.toLocaleString('pt-BR');
            return (
              <tr key={it.id}>
                <td>
                  <div style={{ fontWeight: 500 }}>{it.nome}</div>
                  <div style={{ font: '500 10.5px/1 Inter', color: 'var(--d-text-3)', marginTop: 3 }}>{it.unid}</div>
                </td>
                <td className="num d-mono" style={{ color: 'var(--d-text-3)' }}>{display(it.atual)}</td>
                <td className="num">
                  <input className="inp inp-num" type="number" step={it.step} value={ov != null ? (it.ispct ? (Number(ov)*100).toFixed(3) : ov) : (it.ispct ? (it.atual*100).toFixed(3) : it.atual)}
                    onChange={(e) => setOverride(kind, it.id, it.ispct ? Number(e.target.value) / 100 : Number(e.target.value))}
                    style={{ height: 28, width: '100%' }}/>
                </td>
                <td className="num">
                  {ov != null && ov !== '' ? (
                    <span className="d-mono" style={{ font: '600 12px/1 JetBrains Mono', color: delta > 0 ? '#c8302a' : delta < 0 ? '#1a8a3c' : 'var(--d-text-3)' }}>
                      {delta > 0 ? '+' : ''}{delta.toFixed(1)}%
                    </span>
                  ) : <span style={{ color: 'var(--d-text-4)' }}>—</span>}
                </td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}

window.ParametrosGlobais = ParametrosGlobais;