"use client";

import Image from "next/image";
import Link from "next/link";
import type { ComponentType } from "react";
import { Building2, MapPin, MessageCircle, Phone } from "lucide-react";
import type { Destino } from "@/lib/navegacao-da-loja";
import { LinkDoMenu } from "./MenuDaLoja";

/*
  O rodapé que a loja montou no editor, nos temas Padrão e Vitrine.

  Só entra quando a loja publicou um rodapé diferente do padrão (colunas de
  links, texto "Sobre", algum bloco desligado). Cada variante repete o
  desenho do rodapé de sempre do tema — mesmas cores, mesmo container, mesma
  linha de baixo com o selo do Ktalogu —, só que com as colunas da loja.
*/

export type ColunaPronta = { id: string; titulo: string; links: Array<{ id: string; rotulo: string; destino: Destino }> };

type Paleta = {
  bg: string;
  text: string;
  muted: string;
  subtleBg: string;
  subtleBgHover: string;
  divider: string;
  chipBg: string;
  isLightText: boolean;
};

type Rede = { key: string; href: string; label: string; Icon: ComponentType<{ className?: string }> };

export type PropsDoRodape = {
  regiao: Record<string, string>;
  paleta: Paleta;
  nomeDaLoja: string;
  logoUrl?: string | null;
  endereco?: string | null;
  cnpj?: string | null;
  slogan?: string | null;
  sobre: string;
  colunas: ColunaPronta[];
  categorias: Array<{ id: string; name: string; href: string }>;
  redes: Rede[];
  whatsapp: string;
  telefone: string;
  mostrarContato: boolean;
  mostrarRedes: boolean;
  mostrarCategorias: boolean;
};

function SeloDoKtalogu({ paleta, discreto }: { paleta: Paleta; discreto?: boolean }) {
  return (
    <div className="flex items-center gap-1.5 text-xs" style={{ color: paleta.muted }}>
      <span>Tecnologia</span>
      <Link
        href="https://ktalogu.com.br"
        target="_blank"
        rel="noopener noreferrer"
        aria-label="Ktalogu"
        className={`font-bold px-2 py-0.5 rounded-full inline-flex items-center${discreto ? " opacity-60 hover:opacity-100 transition-opacity" : ""}`}
        style={{ backgroundColor: paleta.chipBg }}
      >
        <Image
          src="/brand-logo.svg"
          alt="Ktalogu"
          className="h-3.5 w-auto"
          width={56}
          height={14}
          style={{ filter: paleta.isLightText ? "brightness(0) invert(1) contrast(1.15)" : "brightness(0) contrast(1.25)" }}
        />
      </Link>
    </div>
  );
}

function TextoSobre({ texto, cor, className }: { texto: string; cor: string; className?: string }) {
  if (!texto) return null;
  return (
    <div className={className} style={{ color: cor }}>
      {texto.split(/\n+/).map((paragrafo, i) => (
        <p key={i} className={i ? "mt-2" : undefined}>
          {paragrafo}
        </p>
      ))}
    </div>
  );
}

function ColunaDeLinks({ coluna, paleta, tituloClassName }: { coluna: ColunaPronta; paleta: Paleta; tituloClassName: string }) {
  return (
    <div className="space-y-3">
      {coluna.titulo ? <h3 className={tituloClassName} style={{ color: paleta.text }}>{coluna.titulo}</h3> : null}
      <div className="space-y-2.5 text-sm" style={{ color: paleta.muted }}>
        {coluna.links.map((link) => (
          <LinkDoMenu key={link.id} destino={link.destino} className="block transition-opacity hover:opacity-100 hover:underline underline-offset-4">
            {link.rotulo}
          </LinkDoMenu>
        ))}
      </div>
    </div>
  );
}

const COLUNAS_NO_COMPUTADOR = ["lg:grid-cols-1", "lg:grid-cols-2", "lg:grid-cols-3", "lg:grid-cols-4"];

/** O rodapé próprio no tema Padrão. */
export function RodapeProprioPadrao(p: PropsDoRodape) {
  const blocos = 1 + p.colunas.length + (p.mostrarContato ? 1 : 0) + (p.mostrarRedes ? 1 : 0);
  const colunasNoComputador = COLUNAS_NO_COMPUTADOR[Math.min(4, blocos) - 1];
  return (
    <footer {...p.regiao} className="catalog-footer pt-10 pb-48 md:py-10" style={{ backgroundColor: p.paleta.bg, color: p.paleta.text }}>
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className={`grid grid-cols-1 md:grid-cols-2 ${colunasNoComputador} gap-8`}>
          <div className="space-y-3">
            <div className="flex items-center gap-2">
              <Building2 className="w-5 h-5" />
              <h3 className="text-base font-bold">Empresa</h3>
            </div>
            <div className="space-y-2 text-sm" style={{ color: p.paleta.muted }}>
              <div className="font-semibold" style={{ color: p.paleta.text }}>{p.nomeDaLoja}</div>
              {p.cnpj ? <div>CNPJ: {p.cnpj}</div> : null}
              {p.endereco ? (
                <div className="flex items-start gap-2">
                  <MapPin className="w-4 h-4 mt-0.5" style={{ color: p.paleta.muted }} />
                  <span>{p.endereco}</span>
                </div>
              ) : null}
              <TextoSobre texto={p.sobre} cor={p.paleta.muted} className="max-w-sm pt-1 leading-relaxed" />
            </div>
          </div>

          {p.colunas.map((coluna) => (
            <ColunaDeLinks key={coluna.id} coluna={coluna} paleta={p.paleta} tituloClassName="text-base font-bold" />
          ))}

          {p.mostrarContato ? (
            <div className="space-y-3">
              <div className="flex items-center gap-2">
                <Phone className="w-5 h-5" />
                <h3 className="text-base font-bold">Contatos</h3>
              </div>
              <div className="space-y-2 text-sm" style={{ color: p.paleta.muted }}>
                {p.whatsapp ? (
                  <a href={`https://wa.me/${p.whatsapp}`} target="_blank" rel="noopener noreferrer" className="flex items-center gap-2" style={{ color: p.paleta.text }}>
                    <MessageCircle className="w-4 h-4" style={{ color: p.paleta.muted }} />
                    <span>WhatsApp</span>
                  </a>
                ) : null}
                {p.telefone ? (
                  <a href={`tel:${p.telefone}`} className="flex items-center gap-2" style={{ color: p.paleta.text }}>
                    <Phone className="w-4 h-4" style={{ color: p.paleta.muted }} />
                    <span>Telefone</span>
                  </a>
                ) : null}
              </div>
            </div>
          ) : null}

          {p.mostrarRedes ? (
            <div className="space-y-3">
              <h3 className="text-base font-bold">Redes Sociais</h3>
              {p.redes.length ? (
                <div className="flex items-center gap-3">
                  {p.redes.map(({ key, href, label, Icon }) => (
                    <a
                      key={key}
                      href={href}
                      target="_blank"
                      rel="noopener noreferrer"
                      aria-label={label}
                      className="p-2 rounded-full transition-colors"
                      style={{ backgroundColor: p.paleta.subtleBg, color: p.paleta.text }}
                    >
                      <Icon className="w-5 h-5" />
                    </a>
                  ))}
                </div>
              ) : (
                <p className="text-sm" style={{ color: p.paleta.muted }}>Nenhuma rede cadastrada.</p>
              )}
            </div>
          ) : null}
        </div>

        <div className="mt-10 pt-6 flex flex-col items-center gap-2 text-center" style={{ borderTop: `1px solid ${p.paleta.divider}` }}>
          <p className="text-xs" style={{ color: p.paleta.muted }}>
            &copy; {new Date().getFullYear()} Todos os direitos reservados.
          </p>
          <SeloDoKtalogu paleta={p.paleta} />
        </div>
      </div>
    </footer>
  );
}

/** O rodapé próprio no tema Vitrine. */
export function RodapeProprioVitrine(p: PropsDoRodape) {
  return (
    <footer {...p.regiao} className="catalog-footer mt-auto pt-12 pb-24 md:py-16" style={{ backgroundColor: p.paleta.bg, color: p.paleta.text }}>
      <div className="mx-auto max-w-[1400px] px-4">
        <div className="grid gap-8 md:grid-cols-4">
          <div className="md:col-span-2 flex flex-col items-start">
            {p.logoUrl ? (
              /* eslint-disable-next-line @next/next/no-img-element */
              <img src={p.logoUrl} alt={p.nomeDaLoja} className="h-16 w-auto object-contain mb-4" />
            ) : (
              <div className="mb-3 text-lg font-semibold" style={{ color: p.paleta.text }}>
                {p.nomeDaLoja}
              </div>
            )}
            {p.endereco ? <div className="text-sm max-w-sm mb-2" style={{ color: p.paleta.muted }}>{p.endereco}</div> : null}
            {p.cnpj ? <div className="text-sm mb-4" style={{ color: p.paleta.muted }}>CNPJ: {p.cnpj}</div> : null}
            {p.sobre ? (
              <TextoSobre texto={p.sobre} cor={p.paleta.muted} className="max-w-sm text-sm leading-relaxed" />
            ) : p.slogan ? (
              <p className="max-w-sm text-sm" style={{ color: p.paleta.muted }}>{p.slogan}</p>
            ) : null}
            {p.mostrarRedes && p.redes.length ? (
              <div className="mt-6 flex flex-wrap items-center gap-3">
                {p.redes.map(({ key, href, Icon }) => (
                  <a
                    key={key}
                    href={href}
                    target="_blank"
                    rel="noopener noreferrer"
                    aria-label={`Siga-nos no ${key}`}
                    className="flex h-10 w-10 items-center justify-center rounded-full transition-all hover:scale-110"
                    style={{ backgroundColor: p.paleta.subtleBg, color: p.paleta.text }}
                  >
                    <Icon className="w-5 h-5" />
                  </a>
                ))}
              </div>
            ) : null}
          </div>

          {p.colunas.map((coluna) => (
            <ColunaDeLinks key={coluna.id} coluna={coluna} paleta={p.paleta} tituloClassName="text-sm font-bold" />
          ))}

          {p.mostrarCategorias && p.categorias.length ? (
            <div>
              <h4 className="text-sm font-bold" style={{ color: p.paleta.text }}>Categorias</h4>
              <div className="mt-4 space-y-3 text-sm" style={{ color: p.paleta.muted }}>
                {p.categorias.map((categoria) => (
                  <Link key={categoria.id} href={categoria.href} className="block hover:opacity-100 transition-opacity">
                    {categoria.name}
                  </Link>
                ))}
              </div>
            </div>
          ) : null}

          {p.mostrarContato && (p.whatsapp || p.telefone) ? (
            <div>
              <h4 className="text-sm font-bold" style={{ color: p.paleta.text }}>Atendimento</h4>
              <div className="mt-4 flex gap-3 text-sm" style={{ color: p.paleta.muted }}>
                {p.whatsapp ? (
                  <a
                    href={`https://wa.me/${p.whatsapp}`}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="flex h-10 w-10 items-center justify-center rounded-full transition-all hover:scale-110"
                    style={{ backgroundColor: p.paleta.subtleBg, color: p.paleta.text }}
                    aria-label="WhatsApp"
                  >
                    <MessageCircle className="w-5 h-5" />
                  </a>
                ) : null}
                {p.telefone ? (
                  <a
                    href={`tel:${p.telefone}`}
                    className="flex h-10 w-10 items-center justify-center rounded-full transition-all hover:scale-110"
                    style={{ backgroundColor: p.paleta.subtleBg, color: p.paleta.text }}
                    aria-label="Telefone"
                  >
                    <Phone className="w-5 h-5" />
                  </a>
                ) : null}
              </div>
            </div>
          ) : null}
        </div>
        <div className="mt-12 border-t pt-8 flex flex-col md:flex-row items-center justify-between gap-4 text-sm" style={{ borderColor: p.paleta.divider, color: p.paleta.muted }}>
          <p>© {new Date().getFullYear()} {p.nomeDaLoja}. Todos os direitos reservados.</p>
          <SeloDoKtalogu paleta={p.paleta} discreto />
        </div>
      </div>
    </footer>
  );
}