import Link from "next/link";
import { notFound, permanentRedirect } from "next/navigation";
import type { Metadata } from "next";
import {
  COMPANY_NAME,
  SITE_URL,
  WHATSAPP_URL,
  getServiceBySlug,
  getServicePillarBySlug,
  getServicePillars,
} from "@/data/services";

interface PageProps {
  params: Promise<{ pillar: string }>;
}

const LEGACY_PILLAR_REDIRECTS: Record<string, string> = {
  spda: "/servicos/instalacoes-eletricas",
  avcb: "/servicos/sistemas-contra-incendio",
};

export async function generateStaticParams() {
  return getServicePillars().map((pillar) => ({ pillar: pillar.slug }));
}

export async function generateMetadata({
  params,
}: PageProps): Promise<Metadata> {
  const { pillar } = await params;
  const pillarData = getServicePillarBySlug(pillar);
  if (!pillarData) return {};

  return {
    title: pillarData.title,
    description: pillarData.description,
    alternates: { canonical: `/servicos/${pillarData.slug}` },
    openGraph: {
      title: `${pillarData.title} | ${COMPANY_NAME}`,
      description: pillarData.description,
      url: `${SITE_URL}/servicos/${pillarData.slug}`,
    },
  };
}

export default async function ServicePillarPage({ params }: PageProps) {
  const { pillar } = await params;
  const legacyTarget = LEGACY_PILLAR_REDIRECTS[pillar];
  if (legacyTarget) {
    permanentRedirect(legacyTarget);
  }

  const pillarData = getServicePillarBySlug(pillar);

  if (!pillarData) {
    notFound();
  }

  const clusterServices = pillarData.clusterSlugs
    .map((slug) => getServiceBySlug(slug))
    .filter(Boolean);

  const otherPillars = getServicePillars().filter(
    (item) => item.slug !== pillarData.slug,
  );

  return (
    <>
      <section
        className="bg-black text-white py-12 px-4"
        aria-label={`Pilar ${pillarData.title}`}>
        <div className="max-w-5xl mx-auto">
          <nav aria-label="Breadcrumb" className="mb-4">
            <ol className="flex items-center gap-2 text-sm text-gray-300">
              <li>
                <Link href="/" className="hover:text-white">
                  Home
                </Link>
              </li>
              <li aria-hidden="true">❱</li>
              <li>
                <Link href="/servicos" className="hover:text-white">
                  Serviços
                </Link>
              </li>
              <li aria-hidden="true">❱</li>
              <li className="text-white">{pillarData.title}</li>
            </ol>
          </nav>
          <h1 className="text-3xl md:text-4xl font-bold">{pillarData.title}</h1>
          <p className="text-gray-200 max-w-3xl">{pillarData.description}</p>
        </div>
      </section>

      <section className="py-12 px-4" aria-label="Cluster de páginas do pilar">
        <div className="max-w-6xl mx-auto">
          <h2 className="text-2xl font-bold text-primary mb-6">
            Páginas do cluster ({clusterServices.length})
          </h2>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
            {clusterServices.map((service) => (
              <Link
                key={service!.slug}
                href={`/${service!.slug}`}
                className="bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow p-5 border border-gray-100">
                <h3 className="text-base font-semibold text-primary mb-2">
                  {service!.title}
                </h3>
                <p className="text-sm text-text line-clamp-3">
                  {service!.description}
                </p>
              </Link>
            ))}
          </div>
        </div>
      </section>

      <section className="py-12 px-4 bg-white" aria-label="Links comerciais">
        <div className="max-w-6xl mx-auto">
          <h2 className="text-2xl font-bold text-primary mb-3">
            Próximos passos
          </h2>
          <p className="text-text mb-6 max-w-3xl">
            Compare projetos executados, tire dúvidas frequentes e fale com
            nosso time técnico para receber uma proposta.
          </p>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <Link
              href="/cases"
              className="bg-gray-light rounded-lg p-5 border border-gray-100 hover:shadow-md transition-shadow">
              <h3 className="font-semibold text-primary mb-2">Cases</h3>
              <p className="text-sm text-text">
                Veja projetos e execuções já entregues pela Kontec Engenharia.
              </p>
            </Link>
            <a
              href={WHATSAPP_URL}
              target="_blank"
              rel="noopener noreferrer"
              className="bg-gray-light rounded-lg p-5 border border-gray-100 hover:shadow-md transition-shadow">
              <h3 className="font-semibold text-primary mb-2">Contato</h3>
              <p className="text-sm text-text">
                Solicite orçamento e fale com nossa equipe especializada.
              </p>
            </a>
            <Link
              href="/faq"
              className="bg-gray-light rounded-lg p-5 border border-gray-100 hover:shadow-md transition-shadow">
              <h3 className="font-semibold text-primary mb-2">FAQ</h3>
              <p className="text-sm text-text">
                Tire as dúvidas mais comuns sobre prazos, documentos e execução.
              </p>
            </Link>
          </div>
        </div>
      </section>

      <section className="py-12 px-4 bg-gray-light" aria-label="Outros pilares">
        <div className="max-w-6xl mx-auto">
          <h2 className="text-2xl font-bold text-primary mb-6">
            Outras páginas pilar
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            {otherPillars.map((item) => (
              <Link
                key={item.slug}
                href={`/servicos/${item.slug}`}
                className="bg-white rounded-lg p-4 shadow-sm hover:shadow-md transition-shadow border border-gray-100">
                <h3 className="font-semibold text-primary">{item.title}</h3>
                <p className="text-xs text-text mt-1">
                  {item.clusterSlugs.length} páginas
                </p>
              </Link>
            ))}
          </div>
        </div>
      </section>
    </>
  );
}