import type { Metadata } from 'next';

// Static metadata — known at build time
export const metadata: Metadata = {
  // Basic metadata
  title: {
    default: 'My Awesome App',          // used when no page title
    template: '%s | My Awesome App',    // %s = page title, appended with site name
  },
  description: 'The best app for managing your tasks efficiently.',

  // Application info
  applicationName: 'My Awesome App',
  authors: [{ name: 'Jane Doe', url: 'https://janedoe.com' }],
  generator: 'Next.js',
  keywords: ['task management', 'productivity', 'todo app'],
  referrer: 'origin-when-cross-origin',

  // Icons
  icons: {
    icon: '/favicon.ico',
    shortcut: '/favicon-16x16.png',
    apple: '/apple-touch-icon.png',
  },

  // Manifest
  manifest: '/site.webmanifest',

  // Open Graph (social sharing)
  openGraph: {
    type: 'website',
    locale: 'en_US',
    url: 'https://myapp.com',
    siteName: 'My Awesome App',
    title: 'My Awesome App — Task Management',
    description: 'The best app for managing your tasks.',
    images: [
      {
        url: 'https://myapp.com/og-image.png',
        width: 1200,
        height: 630,
        alt: 'My Awesome App preview',
      },
    ],
  },

  // Twitter/X cards
  twitter: {
    card: 'summary_large_image',
    site: '@myawesomeapp',
    creator: '@janedoe',
    title: 'My Awesome App',
    description: 'The best task management app.',
    images: ['https://myapp.com/twitter-card.png'],
  },

  // Robots directives
  robots: {
    index: true,
    follow: true,
    nocache: false,
    googleBot: {
      index: true,
      follow: true,
      noimageindex: false,
      'max-video-preview': -1,
      'max-image-preview': 'large',
      'max-snippet': -1,
    },
  },

  // Canonical URL
  alternates: {
    canonical: 'https://myapp.com',
    languages: {
      'en-US': 'https://myapp.com/en',
      'es-ES': 'https://myapp.com/es',
    },
  },

  // Verification
  verification: {
    google: 'your-google-verification-code',
    yandex: 'your-yandex-code',
  },
};

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

import type { Metadata, ResolvingMetadata } from 'next';

interface Props {
  params: { slug: string };
  searchParams: { [key: string]: string | string[] | undefined };
}

// Fetch blog post data (shared with page component via cache())
import { cache } from 'react';
const getPost = cache(async (slug: string) => {
  const res = await fetch(`https://api.example.com/posts/${slug}`, {
    next: { revalidate: 3600 }, // revalidate every hour
  });
  if (!res.ok) return null;
  return res.json();
});

// Dynamic metadata generation
export async function generateMetadata(
  { params }: Props,
  parent: ResolvingMetadata // access parent metadata if needed
): Promise<Metadata> {
  const post = await getPost(params.slug);

  if (!post) {
    return {
      title: 'Post Not Found',
      description: 'The requested blog post could not be found.',
    };
  }

  // Access parent metadata (e.g., site name from layout)
  const previousImages = (await parent).openGraph?.images || [];

  return {
    title: post.title,                  // → "My Post Title | My Awesome App"
    description: post.excerpt,

    // Authors from post data
    authors: [{ name: post.author.name }],

    // Publication date
    other: {
      'article:published_time': post.publishedAt,
      'article:modified_time': post.updatedAt,
    },

    openGraph: {
      type: 'article',
      title: post.title,
      description: post.excerpt,
      url: `https://myapp.com/blog/${params.slug}`,
      publishedTime: post.publishedAt,
      authors: [post.author.name],
      images: [
        {
          url: post.coverImage || 'https://myapp.com/og-default.png',
          width: 1200,
          height: 630,
          alt: post.title,
        },
        ...previousImages, // include parent images as fallback
      ],
    },

    twitter: {
      card: 'summary_large_image',
      title: post.title,
      description: post.excerpt,
      images: [post.coverImage || 'https://myapp.com/twitter-default.png'],
    },

    alternates: {
      canonical: `https://myapp.com/blog/${params.slug}`,
    },
  };
}

export default async function BlogPostPage({ params }: Props) {
  const post = await getPost(params.slug); // uses cache() — no duplicate fetch
  // ...
}

import { ImageResponse } from 'next/og';

export const runtime = 'edge';
export const alt = 'Blog post cover';
export const size = { width: 1200, height: 630 };
export const contentType = 'image/png';

export default async function Image({ params }: { params: { slug: string } }) {
  const post = await fetch(`https://api.example.com/posts/${params.slug}`)
    .then((r) => r.json());

  return new ImageResponse(
    (
      <div
        style={{
          background: 'linear-gradient(135deg, #1e3a8a 0%, #312e81 100%)',
          width: '100%',
          height: '100%',
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'flex-start',
          justifyContent: 'flex-end',
          padding: '60px',
        }}
      >
        <p style={{ color: '#93c5fd', fontSize: 28, margin: '0 0 12px' }}>
          My Awesome Blog
        </p>
        <h1 style={{ color: 'white', fontSize: 64, fontWeight: 700, margin: 0 }}>
          {post.title}
        </h1>
        <p style={{ color: '#94a3b8', fontSize: 28, marginTop: 16 }}>
          {post.author.name} · {new Date(post.publishedAt).toLocaleDateString()}
        </p>
      </div>
    ),
    { ...size }
  );
}
// This generates a dynamic OG image for every blog post
// Accessible at: /blog/[slug]/opengraph-image

import { MetadataRoute } from 'next';

// Returns a programmatically generated sitemap
export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const baseUrl = 'https://myapp.com';

  // Fetch dynamic pages (blog posts, products)
  const posts = await fetch(`${baseUrl}/api/posts`).then((r) => r.json());
  const products = await fetch(`${baseUrl}/api/products`).then((r) => r.json());

  // Static routes
  const staticRoutes: MetadataRoute.Sitemap = [
    {
      url: baseUrl,
      lastModified: new Date(),
      changeFrequency: 'yearly',
      priority: 1,
    },
    {
      url: `${baseUrl}/about`,
      lastModified: new Date(),
      changeFrequency: 'monthly',
      priority: 0.8,
    },
    {
      url: `${baseUrl}/blog`,
      lastModified: new Date(),
      changeFrequency: 'weekly',
      priority: 0.9,
    },
  ];

  // Dynamic blog post routes
  const blogRoutes: MetadataRoute.Sitemap = posts.map((post: any) => ({
    url: `${baseUrl}/blog/${post.slug}`,
    lastModified: new Date(post.updatedAt),
    changeFrequency: 'monthly' as const,
    priority: 0.7,
  }));

  // Dynamic product routes
  const productRoutes: MetadataRoute.Sitemap = products.map((product: any) => ({
    url: `${baseUrl}/products/${product.id}`,
    lastModified: new Date(product.updatedAt),
    changeFrequency: 'weekly' as const,
    priority: 0.8,
  }));

  return [...staticRoutes, ...blogRoutes, ...productRoutes];
}
// Generates: https://myapp.com/sitemap.xml

import { MetadataRoute } from 'next';

export default function robots(): MetadataRoute.Robots {
  return {
    rules: [
      {
        userAgent: '*',          // applies to all crawlers
        allow: '/',              // allow everything
        disallow: [
          '/api/',               // don't crawl API routes
          '/admin/',             // don't crawl admin panel
          '/private/',           // don't crawl private pages
          '/_next/',             // Next.js internal files
        ],
      },
      {
        userAgent: 'Googlebot',  // specific rules for Googlebot
        allow: '/',
        disallow: '/admin/',
      },
    ],
    sitemap: 'https://myapp.com/sitemap.xml', // tell crawlers where sitemap is
    host: 'https://myapp.com',                // canonical host
  };
}
// Generates: https://myapp.com/robots.txt

export async function generateMetadata({ params }: { params: { id: string } }) {
  const product = await getProduct(params.id);
  return {
    // Canonical URL — even if page is accessible via multiple URLs
    alternates: {
      canonical: `https://myapp.com/products/${params.id}`,
      // For multi-language sites:
      languages: {
        'en-US': `https://myapp.com/en/products/${params.id}`,
        'fr-FR': `https://myapp.fr/fr/products/${params.id}`,
      },
    },
  };
}

interface Product {
  id: string;
  name: string;
  description: string;
  price: number;
  currency: string;
  image: string;
  rating: number;
  reviewCount: number;
  inStock: boolean;
  brand: string;
  sku: string;
}

// JSON-LD for a Product page
function ProductJsonLd({ product }: { product: Product }) {
  const jsonLd = {
    '@context': 'https://schema.org',
    '@type': 'Product',
    name: product.name,
    description: product.description,
    image: product.image,
    sku: product.sku,
    brand: {
      '@type': 'Brand',
      name: product.brand,
    },
    offers: {
      '@type': 'Offer',
      price: product.price,
      priceCurrency: product.currency,
      availability: product.inStock
        ? 'https://schema.org/InStock'
        : 'https://schema.org/OutOfStock',
      url: `https://myapp.com/products/${product.id}`,
    },
    aggregateRating: {
      '@type': 'AggregateRating',
      ratingValue: product.rating,
      reviewCount: product.reviewCount,
    },
  };

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

export default async function ProductPage({ params }: { params: { id: string } }) {
  const product = await getProduct(params.id);
  return (
    <>
      <ProductJsonLd product={product} />
      <main>
        {/* Page content */}
      </main>
    </>
  );
}

export async function generateMetadata({ params }: { params: { id: string } }): Promise<Metadata> {
  const product = await getProduct(params.id);

  // Descriptive title with key info
  const title = `${product.name} — ${product.brand} | ${product.category}`;
  // Meta description with price (eye-catching in search results)
  const description = `Buy ${product.name} for $${product.price}. ${product.shortDescription}. Free shipping on orders over $50.`;

  return {
    title,
    description,
    openGraph: {
      type: 'website', // use 'product' with og:price extensions for e-commerce
      title: product.name,
      description,
      images: product.images.slice(0, 4).map((img: string) => ({
        url: img,
        width: 800,
        height: 800,
      })),
    },
    alternates: {
      canonical: `https://mystore.com/products/${params.id}`,
    },
  };
}

// Validate your JSON-LD at: https://search.google.com/test/rich-results
// Or programmatically test structure:

export async function GET() {
  const exampleProduct = {
    '@context': 'https://schema.org',
    '@type': 'Product',
    name: 'Test Product',
    offers: {
      '@type': 'Offer',
      price: '29.99',
      priceCurrency: 'USD',
      availability: 'https://schema.org/InStock',
    },
  };

  return Response.json({ schema: exampleProduct });
}