"use client";

import { useVisaoDaLoja } from "@/components/VisaoDaLojaContext";

/*
  A faixa fina no topo da loja que explica por que nao da para comprar
  agora: loja em pausa (com o recado do lojista) ou cadastro ainda em
  analise. Fica fora dos templates de proposito: e a mesma frase em todos.
  O Vendor e a Boutique desenham a deles dentro do shell (VendorShell,
  BoutiqueShell), entao aqui ela so aparece no Padrao e no Vitrine.
*/

export default function FaixaDaLoja({ tema }: { tema?: string | null }) {
  const visao = useVisaoDaLoja();
  if (tema === "vendor" || tema === "boutique") return null;
  if (!visao.lojaPausada && !visao.aguardandoAprovacao && !visao.cadastroRecusado) return null;

  const texto = visao.lojaPausada
    ? visao.regras.mensagemDaSituacao || "A loja está em pausa. Você pode olhar à vontade, mas os pedidos estão fechados por enquanto."
    : visao.cadastroRecusado
      ? "Seu cadastro não foi aprovado pela loja. Fale com a loja para liberar o acesso."
      : "Seu cadastro está em análise pela loja. Assim que for aprovado, os preços e a compra ficam liberados.";
  const volta = visao.lojaPausada && visao.regras.voltaEm ? ` Previsão de volta: ${formatarData(visao.regras.voltaEm)}.` : "";

  return (
    <div
      role="status"
      className={`px-4 py-2.5 text-center text-sm font-medium ${
        visao.lojaPausada
          ? "bg-amber-50 text-amber-900 border-b border-amber-100"
          : visao.cadastroRecusado
            ? "bg-rose-50 text-rose-900 border-b border-rose-100"
            : "bg-sky-50 text-sky-900 border-b border-sky-100"
      }`}
    >
      {texto}
      {volta}
    </div>
  );
}

function formatarData(valor: string) {
  const partes = String(valor).slice(0, 10).split("-");
  if (partes.length !== 3) return valor;
  return `${partes[2]}/${partes[1]}/${partes[0]}`;
}