import Image from "next/image";
import { MessageCircle } from "lucide-react";
import { normalizeWhatsappForLink } from "@/lib/phone";

/*
  A pagina "em breve" da loja fechada.

  O lojista fechou a loja (ferias, reforma, mudanca de endereco) e deixou um
  recado. Quem chega ve o logo, o recado, a data de volta e um jeito de falar
  com a loja. A equipe nao cai aqui: o cookie do painel deixa passar.
*/

export default function LojaFechada({
  nome,
  logoUrl,
  corDaMarca,
  recado,
  voltaEm,
  whatsapp,
}: {
  nome: string;
  logoUrl?: string | null;
  corDaMarca?: string | null;
  recado?: string | null;
  voltaEm?: string | null;
  whatsapp?: string | null;
}) {
  const cor = corDaMarca || "#4F46E5";
  const digitos = normalizeWhatsappForLink(whatsapp || "");
  const data = voltaEm ? formatarData(voltaEm) : "";
  return (
    <main className="flex min-h-screen items-center justify-center bg-gray-50 px-4 py-16">
      <div className="w-full max-w-md rounded-3xl border border-gray-100 bg-white p-8 text-center shadow-sm">
        {logoUrl ? (
          <Image src={logoUrl} alt={nome} width={160} height={64} className="mx-auto h-14 w-auto object-contain" unoptimized />
        ) : (
          <div className="mx-auto flex h-14 w-14 items-center justify-center rounded-2xl text-xl font-bold text-white" style={{ backgroundColor: cor }}>
            {nome.slice(0, 1).toUpperCase()}
          </div>
        )}
        <h1 className="mt-6 text-2xl font-semibold tracking-tight text-gray-900">{nome}</h1>
        <p className="mt-3 text-base leading-relaxed text-gray-600">
          {recado || "A loja está fechada no momento. Voltamos em breve."}
        </p>
        {data ? <p className="mt-2 text-sm font-medium text-gray-500">Previsão de volta: {data}</p> : null}
        {digitos ? (
          <a
            href={`https://wa.me/${digitos}`}
            target="_blank"
            rel="noopener noreferrer"
            className="mt-6 inline-flex items-center gap-2 rounded-full px-5 py-3 text-sm font-semibold text-white"
            style={{ backgroundColor: "#25D366" }}
          >
            <MessageCircle size={18} />
            Falar com a loja
          </a>
        ) : null}
      </div>
    </main>
  );
}

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