/**
 * Tarefas — o ecrã do David e do Daniel: as etapas em aberto de que são
 * responsáveis, com o botão para as dar como concluídas. O Bruno vê as de todos.
 */

function LinhaTarefa({ item, etapa, subtarefa, onConcluir }) {
  const { abrirItem, acoes, utilizador } = useLista();
  // Quem só consulta não conclui; um item parado ou fechado também não avança
  const podeAvancar = utilizador.perfil !== 'leitor' && !['bloqueado', 'perdido', 'concluido'].includes(item.estado);
  const aviso = item.estado === 'bloqueado'
    ? <Badge variante="erro" Icone={IconCadeado}>Bloqueado, aguarda OK do Bruno</Badge>
    : item.estado === 'stand_by' ? <Badge variante="contorno" Icone={IconPausa}>Stand-by</Badge> : null;

  return (
    <div className="grid grid-cols-[24px_minmax(0,1fr)] items-center gap-x-4 gap-y-3 px-4 py-3.5 sm:grid-cols-[24px_minmax(0,1fr)_auto] md:px-5">
      {subtarefa ? <span className="cabine s-no-prazo" style={{ height: 22 }} aria-hidden="true" /> : <Cabine etapa={etapa} className="!h-[22px]" />}
      <div className="min-w-0">
        <div className="flex flex-wrap items-center gap-x-2 gap-y-1">
          <span className="font-medium">{item.numero} {item.cliente}: {subtarefa ? subtarefa.texto : nomeEtapa(etapa)}</span>
          {aviso}
        </div>
        <p className="mt-0.5 text-sm text-muted-foreground">
          {subtarefa ? `Subtarefa de ${nomeEtapa(etapa)}`
            // Parado: as datas não pressionam, por isso não se conta "em atraso há N dias"
            : item.parado ? `Data prevista: ${previstaLonga(etapa.prevista)} (item parado)`
            : frasePrazo(etapa)}
          {!subtarefa && etapa.risco ? '. Em risco: a etapa anterior está atrasada' : ''}
        </p>
      </div>
      <div className="col-span-2 flex flex-wrap gap-2 sm:col-span-1 sm:justify-end">
        {!podeAvancar ? null : subtarefa ? (
          <button type="button" className={BOTAO_PRIMARIO} onClick={() => acoes.alternarSubtarefa(item.numero, etapa.idx, subtarefa.indice)}>
            <IconCheck size={14} /> Marcar feita
          </button>
        ) : (
          <button type="button" className={BOTAO_PRIMARIO} onClick={() => onConcluir(item, etapa)}>
            <IconCheck size={14} /> Marcar concluída
          </button>
        )}
        <button type="button" className={BOTAO_SECUNDARIO} onClick={() => abrirItem(item.numero)}>Ver item</button>
      </div>
    </div>
  );
}

function ScreenTarefas() {
  const { itens, utilizador } = useLista();
  const [aConcluir, setAConcluir] = React.useState(null); // { item, etapa }
  const admin = utilizador.perfil === 'admin';
  const ativos = itens.filter((a) => a.aberto);

  const etapas = ativos.flatMap((a) => a.abertas.map((e) => ({ item: a, etapa: e, resp: e.responsavel })));
  const subtarefas = ativos.flatMap((a) => a.etapas.flatMap((e) => (e.subtarefas || [])
    .map((s, si) => ({ item: a, etapa: e, subtarefa: Object.assign({ indice: si }, s), resp: s.responsavel }))
    .filter((x) => !x.subtarefa.concluida)));

  // Os itens parados (stand-by, bloqueados) vão para o fim: as datas deles não pressionam
  const ordem = (x, y) => (x.item.parado - y.item.parado)
    || (GRAVIDADE[y.etapa.estado] || 0) - (GRAVIDADE[x.etapa.estado] || 0)
    || ((x.etapa.prazo ? x.etapa.prazo.getTime() : Infinity) - (y.etapa.prazo ? y.etapa.prazo.getTime() : Infinity));

  const pessoas = admin ? Array.from(new Set(etapas.map((t) => t.resp).concat(subtarefas.map((t) => t.resp)))) : [utilizador.nome];

  return (
    <>
      <CabecalhoPagina titulo={admin ? 'Tarefas da equipa' : 'As minhas tarefas'}>
        {admin
          ? 'Estás a ver as tarefas de todos, por pessoa. As atrasadas primeiro; os itens parados no fim.'
          : utilizador.perfil === 'leitor'
            ? 'Só consulta: vês as etapas em aberto, sem as alterar.'
            : 'Marca cada etapa como concluída quando a fizeres. Fica registado em teu nome e é publicado no grupo do Teams.'}
      </CabecalhoPagina>

      <div className="space-y-8">
        {pessoas.map((nome) => {
          const minhas = etapas.filter((t) => t.resp === nome).sort(ordem);
          const minhasSub = subtarefas.filter((t) => t.resp === nome);
          const total = minhas.length + minhasSub.length;
          return (
            <section key={nome}>
              <TituloSeccao meta={plural(total, 'tarefa em aberto', 'tarefas em aberto')}>
                {nome === utilizador.nome ? (admin ? 'As minhas' : 'Por fazer') : nome}
              </TituloSeccao>
              <div className="border bg-card divide-y divide-[var(--border)]">
                {total === 0 && <p className="px-5 py-6 text-sm text-muted-foreground">Sem tarefas em aberto.</p>}
                {minhas.map((t) => (
                  <LinhaTarefa key={`${t.item.numero}-${t.etapa.idx}`} item={t.item} etapa={t.etapa} onConcluir={(item, etapa) => setAConcluir({ item, etapa })} />
                ))}
                {minhasSub.map((t) => (
                  <LinhaTarefa key={`${t.item.numero}-${t.etapa.idx}-s${t.subtarefa.indice}`} item={t.item} etapa={t.etapa} subtarefa={t.subtarefa} />
                ))}
              </div>
            </section>
          );
        })}
      </div>

      {aConcluir && <ModalConcluirEtapa item={aConcluir.item} etapa={aConcluir.etapa} onFechar={() => setAConcluir(null)} />}
    </>
  );
}