/**
 * Por mês — como o email: o mês atual e os dois seguintes, ordenados pela
 * data de entrega ao cliente (a prioridade por defeito, palavra do Bruno).
 */

function ScreenPorMes() {
  const { itens } = useLista();
  // Um pendente de instalação entra aqui quando já tem data de entrega marcada
  const lista = itens.filter((a) => a.aberto && (!a.pendenteInstalacao || a.inicioEntrega)).sort(ordenarPorEntrega);
  const inicioMes = new Date(HOJE.getFullYear(), HOJE.getMonth(), 1);
  const grupos = [];

  const anteriores = lista.filter((a) => a.inicioEntrega && a.inicioEntrega < inicioMes);
  if (anteriores.length) grupos.push({ titulo: 'De meses anteriores', meta: 'entrega prevista antes deste mês', itens: anteriores });

  for (let k = 0; k < 3; k++) {
    const ini = new Date(inicioMes.getFullYear(), inicioMes.getMonth() + k, 1);
    const fim = new Date(inicioMes.getFullYear(), inicioMes.getMonth() + k + 1, 0);
    grupos.push({
      titulo: `${capitalizar(MESES[ini.getMonth()])} ${ini.getFullYear()}`,
      meta: k === 0 ? 'mês atual' : '',
      itens: lista.filter((a) => a.inicioEntrega && a.inicioEntrega >= ini && a.inicioEntrega <= fim),
    });
  }

  const depois = new Date(inicioMes.getFullYear(), inicioMes.getMonth() + 3, 1);
  const maisTarde = lista.filter((a) => a.inicioEntrega && a.inicioEntrega >= depois);
  if (maisTarde.length) grupos.push({ titulo: 'Mais tarde', meta: '', itens: maisTarde });

  const semData = lista.filter((a) => !a.inicioEntrega);
  if (semData.length) grupos.push({ titulo: 'Sem data de entrega', meta: 'falta definir a instalação, recolha ou envio', itens: semData });

  return (
    <>
      <CabecalhoPagina titulo="Por mês">
        Ordenado pela data de entrega ao cliente. Um item entra no mês em que começa a entrega prevista.
      </CabecalhoPagina>
      <div className="mb-6"><LegendaCabines /></div>
      <div className="space-y-8">
        {grupos.map((g) => (
          <section key={g.titulo}>
            <TituloSeccao meta={`${plural(g.itens.length, 'item', 'itens')}${g.meta ? `, ${g.meta}` : ''}`}>{g.titulo}</TituloSeccao>
            <ListaItens itens={g.itens} vazio="Nenhuma entrega prevista para este mês." />
          </section>
        ))}
      </div>
    </>
  );
}
