/* global React */
const { useMemo: useMemoMY, useState: useStateMY } = React;

// =====================================================================
// VISTA MÊS — calendário tradicional, 6 semanas × 7 dias
// =====================================================================
function MesView({ blocos, ano, mes, onSelectBloco, onSelectSemana, onSelectDia }) {
  // Construir grid: encontrar segunda-feira da primeira semana que contém dia 1
  const primeiroDia = new Date(ano, mes, 1);
  const ultimoDia = new Date(ano, mes + 1, 0);
  const dowPrim = (primeiroDia.getDay() + 6) % 7;
  const inicioGrid = new Date(ano, mes, 1 - dowPrim);

  // 6 linhas x 7 dias = 42 células
  const celulas = [];
  for (let i = 0; i < 42; i++) {
    const d = new Date(inicioGrid);
    d.setDate(d.getDate() + i);
    const iso = window.toISO(d);
    const noMes = d.getMonth() === mes;
    const blocosDia = blocos.filter(b => b.data === iso && (b.tipo === 'plantao' || b.tipo === 'deslocamento'));
    const horas = blocosDia.reduce((a, b) => a + b.duracao, 0);
    celulas.push({ iso, dt: d, noMes, blocos: blocosDia, horas });
  }

  // Cadeias para destacar dias críticos
  const cadeias = window.calcCadeias(blocos);
  const diasCriticos = new Set();
  cadeias.forEach(c => {
    c.blocos.forEach(b => diasCriticos.add(b.data));
  });

  // Carga semanal: para cada linha, a soma daqueles 7 dias
  const cargaSemana = (rowIdx) => {
    const row = celulas.slice(rowIdx * 7, rowIdx * 7 + 7);
    return row.reduce((a, c) => a + c.horas, 0);
  };

  return (
    <div style={{
      background: 'var(--bg)',
      borderRadius: 'var(--r-lg)',
      boxShadow: 'var(--shadow-sm)',
      overflow: 'hidden',
      border: '1px solid var(--line)',
    }}>
      {/* Header de dias */}
      <div style={{
        display: 'grid',
        gridTemplateColumns: '60px repeat(7, 1fr)',
        background: 'var(--bg-alt)',
        borderBottom: '1px solid var(--line)',
      }}>
        <div style={{padding: '10px 8px', borderRight: '1px solid var(--line)'}}>
          <div className="eyebrow" style={{fontSize: 9}}>Carga</div>
        </div>
        {window.DIAS_SEMANA.map(d => (
          <div key={d} style={{
            padding: '10px 12px',
            textAlign: 'left',
            borderLeft: '1px solid var(--line)',
            fontFamily: 'var(--font-body)', fontSize: 11, fontWeight: 700,
            color: 'var(--ink-2)', letterSpacing: '0.04em', textTransform: 'uppercase',
          }}>{d}</div>
        ))}
      </div>

      {/* 6 linhas */}
      {Array.from({length: 6}).map((_, row) => {
        const rowCells = celulas.slice(row * 7, row * 7 + 7);
        const cargaRow = cargaSemana(row);
        const cls = window.classifyCarga(cargaRow);
        const corCarga = cls.zone === 'ok' ? 'var(--ok)' : cls.zone === 'warn' ? 'var(--warn)' : 'var(--err)';
        const semanaInicioISO = window.toISO(rowCells[0].dt);

        return (
          <div key={row} style={{
            display: 'grid',
            gridTemplateColumns: '60px repeat(7, 1fr)',
            borderTop: row > 0 ? '1px solid var(--line)' : 'none',
            minHeight: 100,
          }}>
            {/* Coluna de carga semanal */}
            <button
              type="button"
              onClick={() => onSelectSemana && onSelectSemana(semanaInicioISO)}
              style={{
                padding: '10px 6px',
                borderRight: '1px solid var(--line)',
                borderTop: 0, borderLeft: 0, borderBottom: 0,
                background: cls.zone === 'err' ? 'var(--colo-coral-50)' : cls.zone === 'warn' ? 'var(--colo-sand-50)' : 'var(--bg)',
                display: 'flex', flexDirection: 'column', alignItems: 'center',
                justifyContent: 'center', gap: 2,
                cursor: 'pointer', fontFamily: 'var(--font-body)',
                transition: 'background var(--dur-1) var(--ease)',
              }}
              title="Abrir esta semana"
            >
              <span style={{
                fontFamily: 'var(--font-display)',
                fontSize: 18, fontWeight: 600,
                color: cargaRow > 0 ? corCarga : 'var(--ink-3)',
                lineHeight: 1,
              }}>{cargaRow ? Math.round(cargaRow) : '—'}</span>
              {cargaRow > 0 && <span style={{fontSize: 9, color: 'var(--ink-3)'}}>h</span>}
            </button>

            {rowCells.map((cell, ci) => {
              const ehHoje = cell.iso === window.HOJE_ISO;
              const cls2 = window.classifyCarga(cell.horas);
              const corDia = cell.horas > 0 ? (cls2.zone === 'err' ? 'var(--err)' : cls2.zone === 'warn' ? 'var(--warn)' : 'var(--ok)') : 'transparent';
              const ehCritico = diasCriticos.has(cell.iso);

              return (
                <div key={ci}
                  onClick={() => onSelectDia && onSelectDia(cell.iso)}
                  style={{
                    borderLeft: '1px solid var(--line)',
                    padding: 'var(--s-2)',
                    background: ehHoje ? 'rgba(155,194,231,0.12)' : (cell.noMes ? 'var(--bg)' : 'var(--bg-alt)'),
                    display: 'flex', flexDirection: 'column', gap: 4,
                    minHeight: 100,
                    opacity: cell.noMes ? 1 : 0.5,
                    cursor: 'pointer',
                    position: 'relative',
                  }}
                >
                  <div style={{
                    display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start',
                    marginBottom: 2,
                  }}>
                    <span style={{
                      fontFamily: 'var(--font-display)',
                      fontSize: 16, fontWeight: ehHoje ? 700 : 500,
                      color: ehHoje ? 'var(--colo-blue-tag)' : (cell.noMes ? 'var(--ink)' : 'var(--ink-3)'),
                    }}>{cell.dt.getDate()}</span>
                    {ehCritico && (
                      <span title="Cadeia >24h" style={{
                        width: 8, height: 8, borderRadius: 999,
                        background: 'var(--err)',
                      }}/>
                    )}
                  </div>

                  {/* Pílulas dos plantões */}
                  <div style={{display: 'flex', flexDirection: 'column', gap: 2}}>
                    {cell.blocos.slice(0, 3).map((b, bi) => {
                      const h = b.tipo === 'plantao' ? window.getHospital(b.hospitalId) : window.getHospital(b.hospitalDestinoId);
                      return (
                        <button key={b.id}
                          type="button"
                          onClick={(e) => { e.stopPropagation(); onSelectBloco(b); }}
                          style={{
                            display: 'flex', alignItems: 'center', gap: 4,
                            padding: '2px 6px',
                            background: h.cor,
                            color: h.corDeep,
                            border: 0,
                            borderRadius: 3,
                            fontFamily: 'var(--font-body)', fontSize: 10,
                            fontWeight: 600,
                            cursor: 'pointer',
                            textAlign: 'left',
                            opacity: b.tipo === 'deslocamento' ? 0.65 : 1,
                          }}
                        >
                          <span style={{fontWeight: 700}}>{h.abrev}</span>
                          <span style={{opacity: 0.7, fontSize: 9}}>{window.fmtHora(b.horaInicio)}</span>
                        </button>
                      );
                    })}
                    {cell.blocos.length > 3 && (
                      <span style={{fontSize: 10, color: 'var(--ink-3)'}}>+{cell.blocos.length - 3}</span>
                    )}
                  </div>

                  {/* Indicador de carga */}
                  {cell.horas > 0 && (
                    <span style={{
                      position:'absolute', bottom: 4, right: 6,
                      fontSize: 9, color: corDia,
                      fontFamily: 'var(--font-body)', fontWeight: 700,
                      letterSpacing: '0.02em',
                    }}>{cell.horas}h</span>
                  )}
                </div>
              );
            })}
          </div>
        );
      })}
    </div>
  );
}

// =====================================================================
// VISTA ANO — 12 meses, barras + cadeias críticas
// =====================================================================
function AnoView({ blocos, ano, onSelectMes }) {
  // Para cada mês, calcular: total, média semanal, picos, # de cadeias críticas
  const cadeias = window.calcCadeias(blocos);
  const stats = window.MESES.map((nome, m) => {
    const ini = window.toISO(new Date(ano, m, 1));
    const fim = window.toISO(new Date(ano, m+1, 0));
    const dosBlocos = blocos.filter(b => b.data >= ini && b.data <= fim
      && (b.tipo === 'plantao' || b.tipo === 'deslocamento'));
    const total = dosBlocos.reduce((a,b) => a+b.duracao, 0);
    // Picos: maior carga em uma única semana do mês
    const semanas = {};
    dosBlocos.forEach(b => {
      const segIso = window.inicioSemana(b.data);
      semanas[segIso] = (semanas[segIso] || 0) + b.duracao;
    });
    const valores = Object.values(semanas);
    const pico = valores.length ? Math.max(...valores) : 0;
    const media = valores.length ? total / valores.length : 0;
    const cadeiasMes = cadeias.filter(c => c.data >= ini && c.data <= fim);
    return { mes: m, nome, total, pico, media, cadeias: cadeiasMes.length };
  });

  const maxPico = Math.max(80, ...stats.map(s => s.pico));

  // Heatmap: 12 meses verticais × ~31 dias horizontais
  const diasMes = (m) => window.diasNoMes(ano, m);

  return (
    <div style={{display: 'grid', gap: 'var(--s-5)'}}>
      {/* Cabeçalho com totais */}
      <div style={{
        background: 'var(--bg)', borderRadius: 'var(--r-lg)',
        boxShadow: 'var(--shadow-sm)', padding: 'var(--s-6)',
        display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 'var(--s-5)',
      }}>
        <SummaryStat label="Total no ano" value={`${Math.round(stats.reduce((a,s)=>a+s.total,0))}h`}/>
        <SummaryStat label="Mês mais pesado" value={(() => {
          const top = [...stats].sort((a,b) => b.total - a.total)[0];
          return top.total > 0 ? `${top.nome} · ${Math.round(top.total)}h` : '—';
        })()}/>
        <SummaryStat label="Maior pico semanal"
          value={(() => {
            const top = [...stats].sort((a,b) => b.pico - a.pico)[0];
            return top.pico > 0 ? `${Math.round(top.pico)}h` : '—';
          })()}
          warn={stats.some(s => s.pico >= 60)}/>
        <SummaryStat label="Cadeias >24h"
          value={cadeias.length}
          warn={cadeias.length > 4}/>
      </div>

      {/* Barras por mês */}
      <div style={{
        background: 'var(--bg)', borderRadius: 'var(--r-lg)',
        boxShadow: 'var(--shadow-sm)', padding: 'var(--s-6)',
      }}>
        <div className="eyebrow">Carga por mês</div>
        <h3 className="h3" style={{marginTop: 4, marginBottom: 'var(--s-2)'}}>{ano}</h3>
        <p className="small" style={{marginBottom: 'var(--s-6)', maxWidth: 540}}>
          Cada barra é a média semanal do mês; o ponto coral marca o pico — a semana mais pesada.
          Clique em um mês para abri-lo.
        </p>

        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)',
          gap: 'var(--s-2)', alignItems: 'flex-end',
          height: 240, paddingTop: 28,
        }}>
          {stats.map(s => {
            const cls = window.classifyCarga(s.pico);
            const corPico = cls.zone === 'err' ? 'var(--err)' : cls.zone === 'warn' ? 'var(--warn)' : 'var(--ok)';
            const mediaPct = (s.media / maxPico) * 100;
            const picoPct = (s.pico / maxPico) * 100;
            return (
              <button key={s.mes} type="button" onClick={() => onSelectMes(s.mes)}
                style={{
                  display: 'flex', flexDirection: 'column', alignItems: 'center',
                  gap: 6, border: 0, background: 'transparent',
                  cursor: 'pointer', fontFamily: 'var(--font-body)',
                  padding: 0,
                }}>
                <div style={{
                  position: 'relative',
                  width: '100%', maxWidth: 32, height: 200,
                  background: 'var(--bg-alt)',
                  borderRadius: 'var(--r-sm)',
                  overflow: 'visible',
                  border: '1px solid var(--line)',
                }}>
                  {/* Barra média */}
                  <div style={{
                    position: 'absolute', bottom: 0, left: 0, right: 0,
                    height: `${mediaPct}%`,
                    background: 'var(--ink-2)',
                    opacity: 0.35,
                    borderRadius: 'var(--r-sm) var(--r-sm) 0 0',
                  }}/>
                  {/* Marcador pico */}
                  {s.pico > 0 && (
                    <>
                      <div style={{
                        position: 'absolute', left: -4, right: -4,
                        bottom: `${picoPct}%`,
                        height: 2, background: corPico,
                      }}/>
                      <div style={{
                        position: 'absolute', left: '50%',
                        bottom: `calc(${picoPct}% - 4px)`,
                        width: 8, height: 8,
                        background: corPico,
                        borderRadius: 999,
                        transform: 'translateX(-50%)',
                        boxShadow: '0 0 0 2px var(--bg)',
                      }}/>
                    </>
                  )}
                  {/* Indicador cadeia >24h */}
                  {s.cadeias > 0 && (
                    <div style={{
                      position: 'absolute', top: -22, left: '50%',
                      transform: 'translateX(-50%)',
                      fontSize: 10, color: 'var(--err)',
                      display: 'flex', alignItems: 'center', gap: 2,
                      fontWeight: 700,
                    }}>
                      <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0Z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
                      {s.cadeias}
                    </div>
                  )}
                </div>
                <span style={{
                  fontSize: 10, color: 'var(--ink-2)',
                  textTransform: 'uppercase', letterSpacing: '0.04em',
                  fontWeight: 600,
                }}>{window.MESES_CURTO[s.mes]}</span>
              </button>
            );
          })}
        </div>
        <div style={{
          marginTop: 'var(--s-5)', display: 'flex', gap: 'var(--s-5)',
          fontSize: 11, color: 'var(--ink-2)', flexWrap: 'wrap',
        }}>
          <LegendaItem swatch={<span style={{display:'inline-block', width:14, height:8, background:'var(--ink-2)', opacity:0.35, borderRadius:2}}/>} label="Média semanal"/>
          <LegendaItem swatch={<span style={{display:'inline-block', width:8, height:8, background:'var(--err)', borderRadius:999}}/>} label="Pico (semana mais pesada)"/>
          <LegendaItem swatch={
            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="var(--err)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0Z"/><line x1="12" y1="9" x2="12" y2="13"/></svg>
          } label="Nº cadeias contínuas >24h"/>
        </div>
      </div>

      {/* Heatmap diário */}
      <div style={{
        background: 'var(--bg)', borderRadius: 'var(--r-lg)',
        boxShadow: 'var(--shadow-sm)', padding: 'var(--s-6)',
      }}>
        <div className="eyebrow">Heatmap diário</div>
        <h3 className="h3" style={{marginTop: 4, marginBottom: 'var(--s-5)'}}>O ano dia a dia</h3>
        <div style={{display: 'grid', gap: 4}}>
          {window.MESES.map((nome, m) => {
            const dn = diasMes(m);
            return (
              <div key={m} style={{display: 'grid', gridTemplateColumns: '32px 1fr', alignItems: 'center', gap: 8}}>
                <span style={{fontSize: 10, color: 'var(--ink-2)', fontWeight: 600, textTransform: 'uppercase'}}>{window.MESES_CURTO[m]}</span>
                <div style={{display: 'grid', gridTemplateColumns: 'repeat(31, 1fr)', gap: 2}}>
                  {Array.from({length: 31}).map((_, di) => {
                    if (di >= dn) return <span key={di}/>;
                    const iso = window.toISO(new Date(ano, m, di+1));
                    const horas = blocos
                      .filter(b => b.data === iso && (b.tipo === 'plantao' || b.tipo === 'deslocamento'))
                      .reduce((a,b)=>a+b.duracao,0);
                    let bg = 'var(--bg-alt)';
                    if (horas >= 24) bg = 'var(--err)';
                    else if (horas >= 12) bg = 'var(--colo-sand)';
                    else if (horas > 0) bg = 'var(--colo-sand-50)';
                    const ehHoje = iso === window.HOJE_ISO;
                    return <span key={di} title={`${window.fmtDataCurto(iso)} · ${horas}h`}
                      style={{
                        aspectRatio: '1', background: bg,
                        borderRadius: 2,
                        outline: ehHoje ? '2px solid var(--colo-blue-tag)' : 'none',
                        outlineOffset: 1,
                      }}/>;
                  })}
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}

function SummaryStat({ label, value, warn }) {
  return (
    <div>
      <div className="eyebrow" style={{fontSize: 10}}>{label}</div>
      <div style={{
        fontFamily: 'var(--font-display)',
        fontSize: 32, fontWeight: 500,
        color: warn ? 'var(--err)' : 'var(--ink)',
        marginTop: 4,
        letterSpacing: '-0.02em',
      }}>{value}</div>
    </div>
  );
}

function LegendaItem({ swatch, label }) {
  return <span style={{display:'flex', alignItems:'center', gap: 6}}>{swatch} {label}</span>;
}

Object.assign(window, { MesView, AnoView });