/**
 * <Cabine> — uma etapa desenhada como uma cabine LED. Estilos em css/lista-itens.css.
 * <TiraEtapas> — as cinco etapas fixas de um item, com a data por baixo; as
 * etapas "outra" contam-se ao lado.
 */

function Cabine({ etapa, className = '' }) {
  const dica = `${nomeEtapa(etapa)}: ${ROTULO_ESTADO[etapa.estado]}`
    + `${etapa.falhou ? ', prazo falhado' : ''}${etapa.risco ? ', em risco por atraso anterior' : ''}`;
  return (
    <span
      className={`cabine s-${etapa.estado}${etapa.risco ? ' risco' : ''}${etapa.falhou ? ' falhou' : ''} ${className}`}
      title={dica}
      role="img"
      aria-label={dica}
    />
  );
}

/** A data que aparece por baixo da cabine: a real se está feita, a prevista se não. */
function QuandoEtapa({ etapa }) {
  if (!etapa.aplicavel) return <span className="text-muted-foreground">—</span>;
  if (etapa.concluida) {
    return (
      <span className="inline-flex items-center gap-1 text-[hsl(var(--online))]">
        <IconCheck size={11} />
        {etapa.dataReal ? fmtCurto(parseData(etapa.dataReal)) : 'feito'}
      </span>
    );
  }
  const cor = etapa.estado === 'atraso' ? 'font-medium text-[hsl(var(--offline))]'
    : etapa.estado === 'atencao' ? 'font-medium text-accent'
    : 'text-muted-foreground';
  return <span className={cor}>{previstaCurta(etapa.prevista)}</span>;
}

function TiraEtapas({ item }) {
  const extra = item.outras.filter((e) => e.aplicavel);
  return (
    <div className="flex items-start gap-2">
      <div className="grid min-w-0 flex-1 grid-cols-5 gap-1.5">
        {item.fixas.map((e) => (
          <div key={e.idx} className="flex min-w-0 flex-col items-center gap-1.5">
            <span className="text-[11px] font-medium text-muted-foreground md:hidden">{NOME_CURTO_ETAPA[e.tipo]}</span>
            <Cabine etapa={e} />
            <span className="max-w-full truncate text-xs tabular-nums">
              <QuandoEtapa etapa={e} />
            </span>
          </div>
        ))}
      </div>
      {/* Espaço sempre reservado, para as colunas alinharem com o cabeçalho da lista */}
      <span className="w-7 shrink-0 pt-0.5 md:pt-1">
        {extra.length > 0 && (
          <span className="block rounded-md bg-secondary py-0.5 text-center text-[11px] text-muted-foreground" title={extra.map(nomeEtapa).join(', ')}>
            +{extra.length}
          </span>
        )}
      </span>
    </div>
  );
}

function LegendaCabines() {
  const exemplos = [
    ['concluida', 'Concluída'],
    ['no-prazo', 'No prazo'],
    ['atencao', `Atenção (${DIAS_UTEIS_ATENCAO} dias úteis ou menos)`],
    ['atraso', 'Em atraso'],
    ['por-confirmar', 'Data por confirmar'],
    ['na', 'Não se aplica'],
  ];
  return (
    <div className="flex flex-wrap gap-x-5 gap-y-2 text-xs text-muted-foreground" aria-label="Legenda">
      {exemplos.map(([estado, rotulo]) => (
        <span key={estado} className="inline-flex items-center gap-2">
          <span className={`cabine s-${estado}`} style={{ width: 24, height: 14 }} aria-hidden="true" />
          {rotulo}
        </span>
      ))}
      <span className="inline-flex items-center gap-2">
        <span className="cabine s-concluida falhou" style={{ width: 24, height: 14 }} aria-hidden="true" />
        Prazo falhado (fica mesmo com nova data)
      </span>
      <span className="inline-flex items-center gap-2">
        <span className="cabine s-no-prazo risco" style={{ width: 24, height: 14 }} aria-hidden="true" />
        Em risco (etapa anterior atrasada)
      </span>
    </div>
  );
}