// app/blog/[slug]/page.tsx
import type { Metadata } from "next";
import { getArticleBySlug } from "@/data/articles";

export async function generateMetadata({ params }: { params: { slug: string } }): Promise<Metadata> {
  const article = await getArticleBySlug(params.slug);

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

  return {
    title: article.title,
    description: article.excerpt,
    alternates: {
      canonical: `https://vyuhantrix.com/blog/${article.slug}`,
    },
    openGraph: {
      title: article.title,
      description: article.excerpt,
      url: `https://vyuhantrix.com/blog/${article.slug}`,
      siteName: "Vyuhantrix",
      type: "article",
      publishedTime: article.date,
      authors: [article.author.name],
      images: [
        {
          url: article.ogImage || "/logo.png",
          width: 1200,
          height: 630,
          alt: article.title,
        },
      ],
    },
    twitter: {
      card: "summary_large_image",
      title: article.title,
      description: article.excerpt,
    },
  };
}

// app/sitemap.ts
import { MetadataRoute } from "next";
import { ARTICLES } from "@/data/articles";

export default function sitemap(): MetadataRoute.Sitemap {
  const baseUrl = "https://vyuhantrix.com";

  // Static core routes
  const staticRoutes = ["", "/about", "/contact", "/blog"].map((route) => ({
    url: `${baseUrl}${route}`,
    lastModified: new Date(),
    changeFrequency: "weekly" as const,
    priority: route === "" ? 1.0 : 0.8,
  }));

  // Dynamic article routes
  const articleRoutes = ARTICLES.map((article) => ({
    url: `${baseUrl}/blog/${article.slug}`,
    lastModified: new Date(article.lastUpdated || article.date),
    changeFrequency: "monthly" as const,
    priority: 0.7,
  }));

  return [...staticRoutes, ...articleRoutes];
}

export default function ArticlePage({ article }) {
  const jsonLd = {
    "@context": "https://schema.org",
    "@type": "BlogPosting",
    headline: article.title,
    description: article.excerpt,
    url: `https://vyuhantrix.com/blog/${article.slug}`,
    datePublished: new Date(article.date).toISOString(),
    author: {
      "@type": "Organization",
      name: "Vyuhantrix Team",
      url: "https://vyuhantrix.com/about",
    },
  };

  return (
    <article>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      />
      <h1>{article.title}</h1>
      <div>{article.content}</div>
    </article>
  );
}

// app/blog/[slug]/opengraph-image.tsx
import { ImageResponse } from "next/og";
import { getArticleBySlug } from "@/data/articles";

export const runtime = "edge";
export const alt = "Vyuhantrix Technical Guide";
export const size = { width: 1200, height: 630 };
export const contentType = "image/png";

export default async function Image({ params }: { params: { slug: string } }) {
  const article = await getArticleBySlug(params.slug);

  return new ImageResponse(
    (
      <div
        style={{
          background: "#030712",
          width: "100%",
          height: "100%",
          display: "flex",
          flexDirection: "column",
          justifyContent: "space-between",
          padding: "60px",
          border: "8px solid #00f2fe",
        }}
      >
        <div style={{ display: "flex", alignItems: "center", gap: "16px" }}>
          <div style={{ color: "#f59e0b", fontSize: "24px", fontWeight: "bold" }}>
            VYUHANTRIX LEARNING
          </div>
        </div>

        <div style={{ color: "#ffffff", fontSize: "52px", fontWeight: "bold", lineHeight: 1.2 }}>
          {article?.title || "Technical Guide"}
        </div>

        <div style={{ display: "flex", justifyContent: "space-between", color: "#a1a1aa", fontSize: "22px" }}>
          <span>{article?.category || "Technology"}</span>
          <span>vyuhantrix.com</span>
        </div>
      </div>
    ),
    { ...size }
  );
}