import Image from "next/image";
import Link from "next/link";
import { notFound } from "next/navigation";
import { Calendar, Tag, ArrowLeft, User } from "lucide-react";
import type { Metadata } from "next";
import FadeIn from "@/components/animations/FadeIn";
import CallToAction from "@/components/CallToAction";
import { getNewsPageArticleBySlug } from "@/services/pages/public/news";

export const revalidate = 0;

const categoryColors: Record<string, string> = {
  "Company News": "bg-blue-500/10 text-blue-600",
  Expansion: "bg-green-500/10 text-green-600",
  Training: "bg-orange-500/10 text-orange-600",
  Technology: "bg-purple-500/10 text-purple-600",
  Certification: "bg-cyan-500/10 text-cyan-600",
};

function formatDate(dateStr: string) {
  return new Date(dateStr).toLocaleDateString("en-GB", {
    day: "numeric",
    month: "long",
    year: "numeric",
  });
}

export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string }>;
}): Promise<Metadata> {
  const { slug } = await params;
  const article = await getNewsPageArticleBySlug(slug);
  if (!article) return {};
  return {
    title: article.seo_title ?? article.title,
    description: article.seo_description ?? article.excerpt,
    keywords: article.focus_keyword ?? undefined,
    alternates: article.canonical_url ? { canonical: article.canonical_url } : undefined,
    openGraph: {
      title: article.seo_title ?? article.title,
      description: article.seo_description ?? article.excerpt,
      images: article.og_image ? [{ url: article.og_image }] : undefined,
    },
  };
}

export default async function NewsDetailPage({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  const article = await getNewsPageArticleBySlug(slug);
  if (!article) notFound();

  return (
    <div className="bg-background text-foreground">
      {/* Hero */}
      <section className="relative h-[55vh] min-h-[550px] flex items-end overflow-hidden">
        {article.image_url ? (
          <Image
            src={article.image_url}
            alt={article.title}
            fill
            className="object-cover"
            priority
          />
        ) : (
          <div className="absolute inset-0 bg-primary" />
        )}
        <div className="absolute inset-0 bg-gradient-to-t from-primary via-primary/60 to-transparent" />
        <div className="relative petro-container pb-12 z-10">
          <FadeIn>
            <Link
              href="/news"
              className="inline-flex items-center gap-2 text-primary-foreground/70 hover:text-accent text-sm mb-6 transition-colors"
            >
              <ArrowLeft size={14} /> Back to News
            </Link>
            <span
              className={`inline-flex items-center gap-1.5 text-xs font-semibold px-3 py-1 rounded-full mb-4 ${categoryColors[article.category] ?? "bg-accent/10 text-accent"}`}
            >
              <Tag size={11} />
              {article.category}
            </span>
            <h1 className="text-3xl md:text-5xl font-bold text-primary-foreground max-w-4xl leading-tight">
              {article.title}
            </h1>
            <div className="flex items-center gap-6 mt-4 text-primary-foreground/60 text-sm">
              <span className="flex items-center gap-2">
                <User size={13} /> {article.author}
              </span>
              <span className="flex items-center gap-2">
                <Calendar size={13} /> {formatDate(article.published_at)}
              </span>
            </div>
          </FadeIn>
        </div>
      </section>

      {/* Content */}
      <section className="petro-section">
        <div className="petro-container">
          <div className="max-w-3xl mx-auto">
            <FadeIn>
              <p className="text-lg text-muted-foreground leading-relaxed mb-8 font-medium border-l-4 border-accent pl-6">
                {article.excerpt}
              </p>
              <div
                className="prose prose-lg max-w-none text-foreground leading-relaxed [&_p]:text-muted-foreground [&_p]:leading-relaxed [&_img]:rounded-lg [&_img[data-align='center']]:mx-auto [&_img[data-align='center']]:block [&_img[data-align='right']]:float-right [&_img[data-align='right']]:ml-6 [&_img[data-align='left']]:float-left [&_img[data-align='left']]:mr-6 [&_a]:text-accent [&_a]:underline-offset-2 [&_blockquote]:border-l-accent"
                dangerouslySetInnerHTML={{ __html: article.content }}
              />
            </FadeIn>
          </div>
        </div>
      </section>

      <CallToAction />
    </div>
  );
}