import { notFound } from "next/navigation";
import { FaLinkedin, FaFacebook, FaXTwitter } from "react-icons/fa6";
import { BsInstagram } from "react-icons/bs";
import type { Metadata } from "next";
import Header from "../../../components/Header";
import Footer from "../../../components/Footer";
import BackButton from "./BackButton";

interface Article {
  slug: string;
  title: string;
  date: string;
  author: string;
  image?: string;
  content: {
    type: "paragraph" | "heading" | "subheading" | "image" | "image-grid";
    text?: string;
    images?: string[];
  }[];
}

const articles: Record<string, Article> = {
  "dcph-mou-signing": {
    slug: "dcph-mou-signing",
    title:
      "Philippine Data Center Leaders Sign MOU Formally Establishing the DCPH",
    date: "December 2025",
    author: "DCPH Communications Team",
    image: "/images/Article 1.jpg",
    content: [
      {
        type: "paragraph",
        text: "Major step forward! We are formally establishing a powerful new alliance to transform the national digital landscape.",
      },
      {
        type: "paragraph",
        text: "Six major data centers in the Philippines, alongside other leading operators, have officially signed a Memorandum of Understanding (MOU) to form the Data Center Operators of the Philippines (DCPH). This alliance unifies the industry's voice.",
      },
      {
        type: "heading",
        text: "Our Mandate for Growth:",
      },
      {
        type: "paragraph",
        text: "Policy Advocacy: We will engage government agencies, including the DICT, to champion supportive policies, notably data localization, to safeguard national security and citizen data.",
      },
      {
        type: "paragraph",
        text: "Infrastructure & Energy: We are committed to advancing infrastructure and working closely with the power sector to ensure competitive rates and renewable energy access.",
      },
      {
        type: "paragraph",
        text: "Talent Development: The group aims to develop local talent and sustain industry growth to support the rising demand for hyperscale and AI technologies.",
      },
      {
        type: "paragraph",
        text: "The formalization of the DCPH marks a pivotal step toward building a future-ready and globally competitive digital economy for the Philippines.",
      },
    ],
  },
  "dcph-officers-trustees": {
    slug: "dcph-officers-trustees",
    title:
      "Meet the Leaders Shaping the Future of Data Centers in the Philippines",
    date: "January 2026",
    author: "DCPH Communications Team",
    image: "/images/NEW DCPH Board.png",
    content: [
      {
        type: "paragraph",
        text: "Shaping the future of data centers in the Philippines. Meet the Officers and Board of Trustees of the Data Center Operators of the Philippines (DCPH). Their collective experience supports ongoing efforts to enhance the country's digital infrastructure and contribute to its long-term development.",
      },
      {
        type: "heading",
        text: "Officers and Board of Trustees",
      },
      {
        type: "subheading",
        text: "Victor Genuino — President",
      },
      {
        type: "subheading",
        text: "Carlo Malana — Corporate Secretary",
      },
      {
        type: "subheading",
        text: "Maricar Nepomuceno — Treasurer",
      },
      {
        type: "subheading",
        text: "Nikolas De Ynchausti — Trustee",
      },
      {
        type: "subheading",
        text: "Bernice Gretchel P. Garcia-Rama — Trustee",
      },
      {
        type: "subheading",
        text: "Patrick Avila — Trustee",
      },
    ],
  },
  "ptc-2026-global-mission": {
    slug: "ptc-2026-global-mission",
    title:
      "Philippine Data Centers Go Global as DCPH Wraps Up Strategic Mission at PTC 2026",
    date: "February 2026",
    author: "DCPH Communications Team",
    image: "/images/Article 3_1.jpg",
    content: [
      {
        type: "paragraph",
        text: "The Philippines has officially arrived on the global stage.",
      },
      {
        type: "paragraph",
        text: "The Data Center Operators of the Philippines (DCPH) successfully concluded its strategic engagement at PTC 2026 in Honolulu, uniting the country's leading operators to advance global competitiveness, infrastructure excellence, and policy & sustainability. This milestone highlights the Philippines' emergence as a leading digital hub in Southeast Asia.",
      },
      {
        type: "image-grid",
        images: ["/images/Article 3_1.jpg", "/images/Article 3_2.jpg"],
      },
      {
        type: "paragraph",
        text: "As we look ahead, DCPH remains committed to future-proofing the nation by accelerating world-class infrastructure, supporting AI and cloud growth, and advocating policies that enable sustainable, secure, and competitive digital ecosystems.",
      },
      {
        type: "image-grid",
        images: ["/images/Article 3_3.jpg", "/images/Article 3_4.jpg"],
      },
      {
        type: "paragraph",
        text: "Together, we are building the backbone of a digital nation.",
      },
      {
        type: "image",
        images: ["/images/Article 3_5.jpg"],
      },
    ],
  },
  "february-session-future-ready": {
    slug: "february-session-future-ready",
    title:
      "More Than Facilities — DCPH February Session Reinforces Vision for a Future-Ready Philippines",
    date: "February 2026",
    author: "DCPH Communications Team",
    image: "/images/Article 4_1.jpg",
    content: [
      {
        type: "paragraph",
        text: "The Data Center Operators of the Philippines (DCPH) has successfully concluded its monthly cascading session for February. These regular engagements serve as the core of the alliance, ensuring that every member remains aligned in our mission to fortify the country's digital backbone. By harmonizing our efforts in policy advocacy, energy sustainability, and talent development, we continue to pave the way for a more resilient and globally competitive landscape.",
      },
      {
        type: "image-grid",
        images: ["/images/Article 4_1.jpg", "/images/Article 4_2.jpg"],
      },
      {
        type: "paragraph",
        text: "As we look ahead, our commitment remains centered on fostering the collaboration necessary to support the rising demands of hyperscale and AI technologies. We are not merely managing facilities; we are building the foundation of a future-ready Philippines where innovation thrives and digital sovereignty is secured.",
      },
      {
        type: "image",
        images: ["/images/Article 4_3.jpg"],
      },
    ],
  },
};

const BASE_URL = "https://dcph.ph";

export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string }>;
}): Promise<Metadata> {
  const { slug } = await params;
  const article = articles[slug];

  if (!article) {
    return { title: "Article Not Found | DCPH" };
  }

  const pageUrl = `${BASE_URL}/news/${slug}`;
  const imageUrl = article.image
    ? `${BASE_URL}${article.image}`
    : `${BASE_URL}/images/og-default.jpg`;

  const description =
    article.content.find((b) => b.type === "paragraph")?.text ?? article.title;

  return {
    title: `${article.title} | DCPH`,
    description,
    openGraph: {
      title: article.title,
      description,
      url: pageUrl,
      siteName: "DCPH",
      images: [
        {
          url: imageUrl,
          width: 1200,
          height: 630,
          alt: article.title,
        },
      ],
      type: "article",
    },
    twitter: {
      card: "summary_large_image",
      title: article.title,
      description,
      images: [imageUrl],
    },
  };
}

export default async function Article({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  const article = articles[slug];

  if (!article) {
    notFound();
  }

  const shareUrl = encodeURIComponent(`${BASE_URL}/news/${slug}`);
  const shareTitle = encodeURIComponent(article.title);

  return (
    <div className="min-h-screen bg-white">
      <Header />
      <div
        className="relative h-96 sm:h-80 md:h-96 bg-cover bg-center px-4 sm:px-8 md:px-14"
        style={{ backgroundImage: `url('${article.image}')` }}
      >
        <div className="absolute inset-0 bg-linear-to-t from-black/90 to-black/30"></div>
        <div className="relative h-full flex flex-col p-5 sm:p-8">
          <div className="mt-auto space-y-3 sm:space-y-4">
            <BackButton />
            <h1 className="text-2xl sm:text-3xl md:text-4xl font-medium font-orbitron text-white max-w-3xl">
              {article.title}
            </h1>
          </div>
        </div>
      </div>

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 sm:py-12">
        <div className="grid grid-cols-1 lg:grid-cols-4 gap-8 lg:gap-12">
          <div className="lg:col-span-1">
            <div className="lg:sticky lg:top-8 flex flex-wrap justify-center lg:justify-start lg:flex-col gap-4 sm:gap-6 lg:gap-0 lg:space-y-6">
              <div className="min-w-[140px] text-center lg:text-left">
                <p className="text-[10px] sm:text-xs font-montserrat text-gray-500 mb-1.5 sm:mb-2">
                  Date
                </p>
                <p className="text-sm sm:text-lg font-bold font-montserrat text-[#333333]">
                  {article.date}
                </p>
              </div>

              <div className="min-w-[160px] text-center lg:text-left">
                <p className="text-[10px] sm:text-xs font-montserrat text-gray-500 mb-1.5 sm:mb-2">
                  Author
                </p>
                <p className="text-sm sm:text-lg font-bold font-montserrat text-[#333333]">
                  {article.author}
                </p>
              </div>

              <div className="min-w-[180px] text-center lg:text-left">
                <p className="text-[10px] sm:text-xs font-montserrat text-gray-500 mb-2 sm:mb-3">
                  Share to
                </p>
                <div className="flex gap-2 sm:gap-3 flex-wrap justify-center lg:justify-start">
                  <a
                    href={`https://www.linkedin.com/sharing/share-offsite/?url=${shareUrl}`}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="flex items-center justify-center w-9 h-9 sm:w-10 sm:h-10 bg-[#333333] rounded-lg hover:bg-[#202020] transition"
                  >
                    <FaLinkedin className="w-4.5 h-4.5 sm:w-5 sm:h-5 text-white" />
                  </a>
                </div>
              </div>
            </div>
          </div>

          <div className="lg:col-span-3">
            <div className="overflow-hidden mb-6 sm:mb-8 -mx-4 sm:-mx-6 lg:-mx-8">
              <img
                src={article.image}
                alt="Article featured image"
                className="w-full h-auto max-h-[500px] object-contain"
              />
            </div>

            <div className="prose prose-lg max-w-none">
              {article.content.map((block, index) => {
                if (block.type === "heading") {
                  return (
                    <h2
                      key={index}
                      className="text-xl sm:text-2xl font-bold font-montserrat text-[#333333] mt-8 sm:mt-10 mb-5 sm:mb-6"
                    >
                      {block.text}
                    </h2>
                  );
                }
                if (block.type === "subheading") {
                  return (
                    <h3
                      key={index}
                      className="text-lg sm:text-xl font-bold font-montserrat text-[#333333] mt-7 sm:mt-8 mb-3 sm:mb-4"
                    >
                      {block.text}
                    </h3>
                  );
                }
                if (block.type === "image" && block.images) {
                  return (
                    <div
                      key={index}
                      className="my-6 sm:my-8 -mx-4 sm:-mx-6 lg:-mx-8"
                    >
                      <img
                        src={block.images[0]}
                        alt="Article image"
                        className="w-full h-auto max-h-[600px] object-contain"
                      />
                    </div>
                  );
                }
                if (block.type === "image-grid" && block.images) {
                  return (
                    <div
                      key={index}
                      className="my-6 sm:my-8 -mx-4 sm:-mx-6 lg:-mx-8 grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4"
                    >
                      {block.images.map((img, imgIndex) => (
                        <img
                          key={imgIndex}
                          src={img}
                          alt={`Article image ${imgIndex + 1}`}
                          className="w-full h-auto max-h-[400px] object-contain"
                        />
                      ))}
                    </div>
                  );
                }
                if (index === 0 && block.type === "paragraph") {
                  return (
                    <p
                      key={index}
                      className="text-base sm:text-xl font-montserrat font-semibold text-[#333333] leading-relaxed mb-6 sm:mb-8"
                    >
                      {block.text}
                    </p>
                  );
                }
                return (
                  <p
                    key={index}
                    className="text-sm sm:text-base font-montserrat text-[#333333] leading-relaxed mb-5 sm:mb-6"
                  >
                    {block.text}
                  </p>
                );
              })}
            </div>
          </div>
        </div>
      </div>
      <Footer />
    </div>
  );
}