/**
 * <ListaItens> — o cartão com as linhas dos itens. Cada linha abre o detalhe.
 * <EtiquetasItem> — chamada de atenção, bloqueado, stand-by, por validar, por finalizar, concluído, perdido.
 */

function EtiquetasItem({ item }) {
  return (
    <>
      {item.chamadaAtencao && <Badge variante="neutro" Icone={IconBandeira}>Chamada de atenção</Badge>}
      {item.estado === 'bloqueado' && <Badge variante="erro" Icone={IconCadeado}>Bloqueado</Badge>}
      {item.estado === 'stand_by' && <Badge variante="contorno" Icone={IconPausa}>Stand-by</Badge>}
      {item.porValidar && <Badge variante="accent" Icone={IconAlerta}>Por validar</Badge>}
      {item.porFinalizar && <Badge variante="contorno" Icone={IconCheck}>Por finalizar</Badge>}
      {item.concluido && <Badge variante="sucesso" Icone={IconCheck}>Concluído</Badge>}
      {item.perdido && <Badge variante="contorno">Perdido</Badge>}
    </>
  );
}

const GRELHA_LINHA = 'md:grid-cols-[72px_minmax(0,1fr)_380px]';

function LinhaItem({ item, mostrarObs }) {
  const { abrirItem } = useLista();
  const esbatido = item.estado === 'stand_by' || !item.aberto;

  function aoTeclar(e) {
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault();
      abrirItem(item.numero);
    }
  }

  return (
    <div
      role="button"
      tabIndex={0}
      onClick={() => abrirItem(item.numero)}
      onKeyDown={aoTeclar}
      aria-label={`Abrir o item ${item.numero}, ${item.cliente}`}
      className={`linha-item relative grid cursor-pointer grid-cols-[56px_minmax(0,1fr)] gap-x-4 gap-y-3 px-4 py-4 ${GRELHA_LINHA} md:items-center md:px-5 ${item.chamadaAtencao ? 'chamada' : ''}`}
    >
      <span className={`font-display tabular-nums text-4xl leading-none ${esbatido ? 'text-muted-foreground' : ''}`}>
        {item.numero}
      </span>
      <div className="min-w-0">
        <div className="flex flex-wrap items-center gap-x-2.5 gap-y-1">
          <span className={`font-semibold ${esbatido ? 'text-muted-foreground' : ''}`}>{item.cliente}</span>
          <EtiquetasItem item={item} />
        </div>
        <p className="mt-1 truncate text-sm text-muted-foreground">
          {item.comerciais.length ? item.comerciais.join(' / ') : 'Comercial por atribuir'} — {resumoEquipamento(item)}
        </p>
        {mostrarObs && item.obs && <p className="mt-1 text-sm text-accent">{item.obs}</p>}
      </div>
      <div className="col-span-2 md:col-span-1">
        <TiraEtapas item={item} />
      </div>
    </div>
  );
}

function ListaItens({ itens, vazio = 'Nenhum item.', mostrarObs = false }) {
  return (
    <div className="border bg-card overflow-hidden">
      {itens.length === 0 ? (
        <p className="px-5 py-6 text-sm text-muted-foreground">{vazio}</p>
      ) : (
        <>
          <div className={`hidden gap-x-4 border-b border-border px-5 py-2.5 text-xs font-medium text-muted-foreground md:grid ${GRELHA_LINHA}`}>
            <span>Item</span>
            <span>Cliente e equipamento</span>
            <div className="mr-9 grid grid-cols-5 gap-1.5 text-center">
              {TIPOS_ETAPA.map((t) => <span key={t}>{NOME_CURTO_ETAPA[t]}</span>)}
            </div>
          </div>
          <div className="divide-y divide-[var(--border)]">
            {itens.map((i) => <LinhaItem key={i.numero} item={i} mostrarObs={mostrarObs} />)}
          </div>
        </>
      )}
    </div>
  );
}

/** Título de secção: caixa normal, com a contagem à frente em cinzento. */
function TituloSeccao({ children, meta }) {
  return (
    <h2 className="mb-3 flex flex-wrap items-baseline gap-x-3 gap-y-1 text-lg font-semibold">
      {children}
      {meta && <span className="text-sm font-normal text-muted-foreground">{meta}</span>}
    </h2>
  );
}