Notas

</div>
      </form>
    </Modal>
  );
}

/**
 * "Lojas e painéis" é uma entrada só no menu (28 Set, de 7 para 5 entradas):
 * as Lojas e os Painéis e assistente ficam a um clique, nestes separadores no
 * topo dos dois ecrãs. São ligações entre páginas (cada uma tem o seu URL), e
 * por isso `nav` com aria-current, e não role=tab.
 */
function SeparadoresRede({ slug, activo, onNavegar }) {
  const itens = [['lojas', 'Lojas'], ['paineis-pdv', 'Painéis e assistente']];
  return (
    <nav aria-label="Lojas e painéis" className="flex flex-wrap gap-x-6 border-b border-border">
      {itens.map(([chave, rotulo]) => (
        <a
          key={chave}
          href={`/${slug}/${chave}`}
          aria-current={activo === chave ? 'page' : undefined}
          onClick={(e) => { if (onNavegar) { e.preventDefault(); onNavegar(`/${slug}/${chave}`); } }}
          className={`-mb-px border-b-2 py-3 text-sm outline-none ${
            activo === chave ? 'border-primary font-medium text-foreground' : 'border-transparent text-muted-foreground hover:text-foreground'
          }`}
        >
          {rotulo}
        </a>
      ))}
    </nav>
  );
}

function ScreenLojas({ slug, onNavegar }) {
  const [dados, setDados] = React.useState(null);
  const [erro, setErro] = React.useState(null);
  const [ocupado, setOcupado] = React.useState(false);
  const [aEditar, setAEditar] = React.useState(undefined); // undefined = fechado
  const [toast, setToast] = React.useState(null);
  const fecharToast = React.useCallback(() => setToast(null), []);

const carregar = React.useCallback(
    () =>
      api
        .get(`/api/${slug}/lojas`)
        .then(setDados)
        .catch((e) => setErro(e.message || 'Não foi possível ler as lojas.')),
    [slug]
  );

React.useEffect(() => {
    setDados(null);
    setErro(null);
    carregar();
  }, [carregar]);

const cabecalho = (
    <header className="space-y-4">
      <h1 className="font-display text-4xl uppercase leading-none tracking-wide">Lojas e painéis</h1>
      <SeparadoresRede slug={slug} activo="lojas" onNavegar={onNavegar} />
    </header>
  );

if (erro) {
    return (
      <div className="space-y-6">
        {cabecalho}
        <div className="border border-border bg-card px-6 py-12 text-center">
          <p className="font-display text-xl tracking-wide">Não deu para ler as lojas</p>
          <p className="mt-2 text-sm text-muted-foreground">{erro}</p>
        </div>
      </div>
    );
  }

if (!dados) {
    return (
      <div className="space-y-6">
        {cabecalho}
        <SkeletonTabela linhas={3} />
      </div>
    );
  }

const noTecto = dados.limite !== null && dados.lojas.length >= dados.limite;

return (
    <div className="space-y-9">
      {cabecalho}

<section>
        <div className="flex flex-wrap items-start justify-between gap-4">
          <div className="min-w-0">
            <p className="text-sm text-muted-foreground">
              {dados.lojas.length}{' '}
              {dados.lojas.length === 1 ? 'loja' : 'lojas'}
              {dados.limite === null
                ? '. O teu plano não tem limite.'
                : ` de ${dados.limite} ${dados.limite === 1 ? 'que o plano dá' : 'que o plano dá'}.`}
              {noTecto && (
                <>
                  {' '}
                  <span className="text-accent">Não há mais lugares</span> — fala com a NetScreen
                  para mudar de plano.
                </>
              )}
            </p>
          </div>
          {!dados.podes_gerir && <SoQuemPode className="max-w-xs" accao="acrescentar ou mudar lojas" />}
          {dados.podes_gerir && (
            <button
              type="button"
              disabled={noTecto}
              onClick={() => setAEditar(null)}
              title={noTecto ? 'O plano não dá mais lojas' : undefined}
              className="shrink-0 bg-primary px-4 py-2 text-sm text-primary-foreground outline-none hover:bg-primary/90 disabled:cursor-not-allowed"
            >
              Nova loja
            </button>
          )}
        </div>

{dados.lojas.length === 0 ? (
          <div className="mt-3 border border-dashed border-border bg-card px-6 py-10 text-center">
            <p className="text-sm text-foreground">Ainda não há lojas.</p>
            <p className="mx-auto mt-2 max-w-prose text-xs leading-relaxed text-muted-foreground">
              As campanhas escolhem em que lojas ficam activas, e os painéis são instalados numa.
              Começa por acrescentar a primeira.
            </p>
          </div>
        ) : (
          <ul className="mt-5 grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
            {dados.lojas.map((l) => (
              <LojaLinha
                key={l.id}
                loja={l}
                podeMexer={dados.podes_gerir}
                ocupado={ocupado}
                onEditar={setAEditar}
                onApagar={(loja) =>
                  comAviso(() => api.del(`/api/${slug}/lojas/${loja.id}`), 'Loja apagada.')
                }
              />
            ))}
          </ul>
        )}

{dados.limite !== null && (
          <div className="mt-6 max-w-sm">
            <BarraUso rotulo="Lojas que o plano dá" usado={dados.lojas.length} limite={dados.limite} />
          </div>
        )}
      </section>

<ModalLoja
        aberto={aEditar !== undefined}
        loja={aEditar || null}
        ocupado={ocupado}
        onFechar={() => setAEditar(undefined)}
        onGuardar={guardar}
      />
      <Toast toast={toast} onFechar={fecharToast} />
    </div>
  );
}