/**
 * Resumo — o equivalente ao cabeçalho do email do Bruno: o que precisa de
 * atenção, as notas dele, o que vence nos próximos 14 dias e o que mudou.
 */

function CabecalhoPagina({ titulo, children }) {
  return (
    <header className="mb-6">
      <h1 className="text-2xl font-semibold tracking-tight">{titulo}</h1>
      {children && <p className="mt-1 text-sm text-muted-foreground">{children}</p>}
    </header>
  );
}

function CartaoNumero({ numero, rotulo, cor = '' }) {
  return (
    <div className="border bg-card px-5 py-4">
      <div className={`font-display tabular-nums text-5xl leading-none ${cor}`}>{numero}</div>
      <div className="mt-2 text-sm text-muted-foreground">{rotulo}</div>
    </div>
  );
}

function BlocoLateral({ titulo, Icone, children }) {
  return (
    <section className="border bg-card p-5">
      <h2 className="mb-3 flex items-center gap-2 text-sm font-semibold">
        {Icone && <Icone size={16} className="text-muted-foreground" />}
        {titulo}
      </h2>
      {children}
    </section>
  );
}

function ScreenResumo() {
  const { dados, itens, abrirItem, pesquisa } = useLista();
  const ativos = itens.filter((a) => a.aberto);
  const comAtraso = ativos.filter((a) => a.pior === 'atraso' && !a.parado);
  const chamadas = ativos.filter((a) => a.chamadaAtencao);
  const porConfirmar = ativos.reduce((n, a) => n + a.abertas.filter((e) => e.estado === 'por-confirmar').length, 0);

  const precisam = ativos.filter((a) => pesoAtencao(a) > 0)
    .sort((a, b) => pesoAtencao(b) - pesoAtencao(a) || ordenarPorEntrega(a, b));

  const limite = somarDias(HOJE, 14);
  const proximos = ativos
    .filter((a) => !a.parado)
    .flatMap((a) => a.abertas
      .filter((e) => e.prazo && !e.prevista.incerta && e.prazo >= HOJE && e.prazo <= limite)
      .map((e) => ({ a, e })))
    .sort((x, y) => x.e.prazo - y.e.prazo);

  const recentes = itens
    .flatMap((a) => (a.historico || []).map((h) => Object.assign({ numero: a.numero, cliente: a.cliente }, h)))
    .filter((h) => diasEntre(parseData(h.data.slice(0, 10)), HOJE) <= 30)
    .sort((a, b) => b.data.localeCompare(a.data))
    .slice(0, 8);

  const LinkItem = ({ a }) => (
    <button type="button" className="font-medium underline decoration-[var(--border)] underline-offset-4 hover:decoration-current" onClick={() => abrirItem(a.numero)}>
      {a.numero} {a.cliente}
    </button>
  );

  return (
    <>
      <CabecalhoPagina titulo="Resumo">
        {plural(ativos.length, 'item em curso', 'itens em curso')}. A última lista por email foi enviada a {fmtLongo(parseData(dados.listaDe))}.
      </CabecalhoPagina>

      {pesquisa.trim() && (
        <section className="mb-8">
          <TituloSeccao meta={`pesquisa "${pesquisa.trim()}", em curso e fechados`}>{plural(itens.length, 'item encontrado', 'itens encontrados')}</TituloSeccao>
          <ListaItens itens={itens.slice().sort((a, b) => b.numero - a.numero).slice(0, 30)} vazio="Nenhum item com esse nº, cliente ou equipamento." />
        </section>
      )}

      <div className="mb-8 grid grid-cols-2 gap-4 lg:grid-cols-4">
        <CartaoNumero numero={comAtraso.length} rotulo={comAtraso.length === 1 ? 'item com etapas em atraso' : 'itens com etapas em atraso'} cor={comAtraso.length ? 'text-[hsl(var(--offline))]' : ''} />
        <CartaoNumero numero={chamadas.length} rotulo={chamadas.length === 1 ? 'chamada de atenção' : 'chamadas de atenção'} />
        <CartaoNumero numero={porConfirmar} rotulo="datas por confirmar (??)" cor="text-muted-foreground" />
        <CartaoNumero numero={proximos.length} rotulo="etapas nos próximos 14 dias" cor={proximos.length ? 'text-accent' : ''} />
      </div>

      <div className="grid gap-6 xl:grid-cols-[minmax(0,1fr)_340px]">
        <section className="min-w-0">
          <TituloSeccao meta="chamadas do Bruno, bloqueios, prazos, itens por validar e por finalizar">Precisa de atenção</TituloSeccao>
          <ListaItens itens={precisam} vazio="Nada precisa de atenção neste momento." />
          <div className="mt-4"><LegendaCabines /></div>
        </section>

        <aside className="space-y-4">
          <BlocoLateral titulo="Notas do Bruno" Icone={IconBandeira}>
            {(dados.notas || []).length === 0 && <p className="text-sm text-muted-foreground">Sem notas.</p>}
            <div className="divide-y divide-[var(--border)]">
              {(dados.notas || []).map((n, i) => (
                <div key={i} className="py-3 text-sm first:pt-0 last:pb-0">
                  <p className="text-xs text-muted-foreground">Para {listaNomes(n.para)}</p>
                  <p className="mt-1">{n.texto}</p>
                </div>
              ))}
            </div>
          </BlocoLateral>

          <BlocoLateral titulo="Próximos 14 dias" Icone={IconCalendario}>
            {proximos.length === 0 && <p className="text-sm text-muted-foreground">Nenhuma etapa com prazo nos próximos 14 dias.</p>}
            <ul className="space-y-2.5 text-sm">
              {proximos.map(({ a, e }) => (
                <li key={`${a.numero}-${e.idx}`} className="grid grid-cols-[48px_1fr] gap-2">
                  <span className="tabular-nums text-muted-foreground">{fmtCurto(e.prazo)}</span>
                  <span><LinkItem a={a} />: {nomeEtapa(e)} <span className="text-muted-foreground">({e.responsavel})</span></span>
                </li>
              ))}
            </ul>
          </BlocoLateral>

          <BlocoLateral titulo="Mudou recentemente" Icone={IconSino}>
            {recentes.length === 0 && <p className="text-sm text-muted-foreground">Sem alterações nos últimos 30 dias.</p>}
            <ul className="space-y-2.5 text-sm">
              {recentes.map((h, i) => (
                <li key={i} className="grid grid-cols-[88px_1fr] gap-2">
                  <span className="tabular-nums text-muted-foreground">{fmtMomento(h.data)}</span>
                  <span><LinkItem a={h} />: {h.texto}</span>
                </li>
              ))}
            </ul>
          </BlocoLateral>
        </aside>
      </div>
    </>
  );
}