/* global React */
const { useState: useStateFin, useMemo: useMemoFin } = React;

// =====================================================================
// FinanceiroView — total bruto/líquido por hospital, mês a mês
// =====================================================================

function FinanceiroView({ blocos, hospitais }) {
  const proximoMes = useMemoFin(() => {
    const d = new Date();
    return `${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}`;
  }, []);
  const [mes, setMes] = useStateFin(proximoMes);

  const [y, m] = mes.split('-').map(Number);
  const totalDias = new Date(y, m, 0).getDate();
  const ini = window.toISO(new Date(y, m-1, 1));
  const fim = window.toISO(new Date(y, m-1, totalDias));

  const blocosDoMes = (blocos || []).filter(b => b.data >= ini && b.data <= fim);
  const r = window.calcRemuneracaoPeriodo(blocosDoMes, hospitais);
  const grupos = Object.values(r.porHospital);
  grupos.sort((a, b) => b.bruto - a.bruto);

  // Hospitais que não têm remuneração ativa (mas têm plantões no mês)
  const hospSemRem = (hospitais || []).filter(h => {
    const tem = blocosDoMes.some(b => b.tipo === 'plantao' && b.hospitalId === h.id);
    return tem && (!h.remuneracao?.ativo || !h.remuneracao?.valorHoraBase);
  });

  // Histórico — últimos 6 meses
  const historico = useMemoFin(() => {
    const out = [];
    for (let i = 5; i >= 0; i--) {
      const d = new Date(y, m - 1 - i, 1);
      const yy = d.getFullYear(), mm = d.getMonth();
      const ddIni = window.toISO(d);
      const ddFim = window.toISO(new Date(yy, mm + 1, 0));
      const blocosM = (blocos || []).filter(b => b.data >= ddIni && b.data <= ddFim);
      const rr = window.calcRemuneracaoPeriodo(blocosM, hospitais);
      out.push({ mes: `${yy}-${String(mm+1).padStart(2,'0')}`, label: `${window.MESES_CURTO[mm]}/${String(yy).slice(2)}`, bruto: rr.totalBruto, liquido: rr.totalLiquido });
    }
    return out;
  }, [blocos, hospitais, y, m]);

  const maxBruto = Math.max(...historico.map(h => h.bruto), 1);

  return (
    <div style={{display:'grid', gap:'var(--s-5)'}}>
      <div>
        <h2 className="h2" style={{margin: 0}}>Financeiro</h2>
        <p className="lede" style={{margin: '4px 0 0', maxWidth: 600}}>
          Bruto e líquido por hospital. Cálculo baseado nas regras de remuneração que você cadastrou em cada hospital.
        </p>
      </div>

      <div style={{display:'flex', gap:'var(--s-3)', alignItems:'flex-end', flexWrap:'wrap'}}>
        <label style={{display:'block'}}>
          <div className="eyebrow" style={{fontSize: 11, marginBottom: 4}}>Mês</div>
          <input type="month" className="input" value={mes} onChange={e => setMes(e.target.value)}/>
        </label>
        <button type="button" className="btn"
          onClick={() => window.imprimirExtrato(mes, blocos, hospitais)}
          disabled={grupos.length === 0}
          style={{
            background: grupos.length > 0 ? 'var(--ink)' : 'var(--bg-alt)',
            color: grupos.length > 0 ? 'var(--bg)' : 'var(--ink-3)',
            padding: '8px 16px', fontSize: 12, fontWeight: 600,
          }}>
          📄 Extrato (PDF)
        </button>
      </div>

      {grupos.length === 0 ? (
        <div className="card" style={{padding:'var(--s-5)', textAlign:'center', color:'var(--ink-3)'}}>
          {hospSemRem.length > 0
            ? `${hospSemRem.length} hospital(is) com plantões no mês mas sem calculadora ativada (${hospSemRem.map(h => h.abrev).join(', ')}). Vá em Hospitais → Calculadora de plantão pra ligar.`
            : 'Nenhum plantão remunerado em ' + window.MESES[m-1] + ' ' + y + '.'}
        </div>
      ) : (
        <>
          {/* Totais */}
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:'var(--s-4)'}} className="form-2col">
            <div className="card" style={{padding:'var(--s-4)'}}>
              <div className="eyebrow" style={{fontSize: 10}}>Bruto</div>
              <div style={{
                fontFamily:'var(--font-display)', fontSize: 36, fontWeight: 500,
                color:'var(--ink)', lineHeight: 1, marginTop: 4,
              }}>{window.fmtBRL(r.totalBruto)}</div>
            </div>
            <div className="card" style={{padding:'var(--s-4)'}}>
              <div className="eyebrow" style={{fontSize: 10}}>Líquido</div>
              <div style={{
                fontFamily:'var(--font-display)', fontSize: 36, fontWeight: 500,
                color:'var(--ok, #5A6E50)', lineHeight: 1, marginTop: 4,
              }}>{window.fmtBRL(r.totalLiquido)}</div>
              {r.totalBruto !== r.totalLiquido && (
                <div className="small" style={{fontSize: 11, marginTop: 4, color:'var(--ink-3)'}}>
                  − {window.fmtBRL(r.totalBruto - r.totalLiquido)} em descontos
                </div>
              )}
            </div>
          </div>

          {/* Por hospital */}
          <div>
            <div className="eyebrow" style={{marginBottom:'var(--s-3)'}}>Por hospital</div>
            <div style={{display:'grid', gap: 8}}>
              {grupos.map((g, i) => {
                const pct = r.totalBruto > 0 ? (g.bruto / r.totalBruto) * 100 : 0;
                return (
                  <div key={i} style={{
                    display:'grid', gridTemplateColumns:'1fr auto', gap: 8,
                    padding: 'var(--s-3) var(--s-4)',
                    background: g.corWash || 'var(--bg)',
                    border: `1px solid ${g.cor || 'var(--line)'}66`,
                    borderRadius: 'var(--r-md)',
                  }}>
                    <div>
                      <div style={{display:'flex', alignItems:'baseline', gap: 8}}>
                        <strong style={{color: g.corDeep || 'var(--ink)'}}>{g.hospitalAbrev}</strong>
                        <span className="small" style={{fontSize: 11, color:'var(--ink-3)'}}>{g.hospitalNome}</span>
                      </div>
                      <div className="small" style={{fontSize: 11, color:'var(--ink-2)', marginTop: 2}}>
                        {g.plantoes} plantões · {g.horas}h
                      </div>
                      <div style={{
                        height: 4, background:'var(--bg-alt)', borderRadius: 2,
                        marginTop: 6, overflow:'hidden',
                      }}>
                        <div style={{height:'100%', width:`${pct}%`, background: g.cor || 'var(--ink)'}}/>
                      </div>
                    </div>
                    <div style={{textAlign:'right', fontFamily:'ui-monospace, SFMono-Regular, monospace'}}>
                      <div style={{fontSize: 16, fontWeight: 700, color: g.corDeep || 'var(--ink)'}}>
                        {window.fmtBRL(g.bruto)}
                      </div>
                      {g.bruto !== g.liquido && (
                        <div className="small" style={{fontSize: 11, color:'var(--ok, #5A6E50)'}}>
                          {window.fmtBRL(g.liquido)} líq.
                        </div>
                      )}
                    </div>
                  </div>
                );
              })}
            </div>
          </div>

          {hospSemRem.length > 0 && (
            <div className="card" style={{
              padding: 'var(--s-3) var(--s-4)',
              background: 'var(--warn-bg, #FBF1E1)',
              border:'1px solid var(--warn, #B98A3F)33',
              borderRadius: 'var(--r-md)', fontSize: 12,
            }}>
              <strong>Sem calculadora ativa em:</strong>{' '}
              {hospSemRem.map(h => h.abrev).join(', ')} ·{' '}
              <em>vá em Hospitais → editar → Calculadora de plantão pra incluir.</em>
            </div>
          )}

          {/* Histórico 6 meses */}
          <div>
            <div className="eyebrow" style={{marginBottom:'var(--s-3)'}}>Últimos 6 meses</div>
            <div style={{display:'grid', gridTemplateColumns:'repeat(6, 1fr)', gap: 6, alignItems:'end', height: 140}}>
              {historico.map(h => {
                const altura = (h.bruto / maxBruto) * 100;
                return (
                  <div key={h.mes} style={{display:'grid', gap: 4, alignContent:'end', textAlign:'center'}}>
                    <div style={{fontSize: 10, color:'var(--ink-3)', fontFamily:'ui-monospace, monospace'}}>
                      {h.bruto > 0 ? window.fmtBRL(h.bruto).replace(/\s/g, '') : '—'}
                    </div>
                    <div style={{
                      height: `${Math.max(altura, 2)}%`,
                      minHeight: 4,
                      background: h.mes === mes ? 'var(--ink)' : 'var(--bg-alt)',
                      borderRadius: 'var(--r-sm) var(--r-sm) 0 0',
                      transition: 'background 0.2s ease',
                    }}/>
                    <div className="eyebrow" style={{fontSize: 9}}>{h.label}</div>
                  </div>
                );
              })}
            </div>
          </div>
        </>
      )}
    </div>
  );
}

Object.assign(window, { FinanceiroView });