import React from 'react';
import type { Metadata } from 'next';
import Link from 'next/link';
import Image from 'next/image';
import SeoJsonLd from '@/components/SeoJsonLd';
import { websiteSchema, breadcrumbSchema } from '@/lib/schema';
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/Card';
import { Badge } from '@/components/ui/Badge';
import Breadcrumbs, { BreadcrumbItem } from '@/components/Breadcrumbs';
import { blogPostList } from '@/lib/blog-data';

function truncateAtWord(text: string, maxLength: number): string {
  if (text.length <= maxLength) return text;
  const truncated = text.slice(0, maxLength);
  const lastSpace = truncated.lastIndexOf(' ');
  return lastSpace > 0 ? truncated.slice(0, lastSpace) : truncated;
}

export async function generateMetadata(): Promise<Metadata> {
  const title = truncateAtWord('QR Insights: Latest QR Strategies', 60);
  const description = truncateAtWord(
    'Expert guides on QR code analytics, dynamic vs static codes, bulk generation, and smart marketing use cases. Learn how to maximize your QR campaign ROI.',
    160
  );

  return {
    title,
    description,
    alternates: {
      canonical: 'https://www.qrmaster.net/blog',
      languages: {
        'x-default': 'https://www.qrmaster.net/blog',
        en: 'https://www.qrmaster.net/blog',
      },
    },
    openGraph: {
      title,
      description,
      url: 'https://www.qrmaster.net/blog',
      type: 'website',
      images: [
        {
          url: 'https://www.qrmaster.net/og-image.png',
          width: 1200,
          height: 630,
          alt: 'QR Insights - QR Code Marketing & Analytics Blog',
        },
      ],
    },
    twitter: {
      title,
      description,
    },
  };
}



export default function BlogPage() {
  const breadcrumbItems: BreadcrumbItem[] = [
    { name: 'Home', url: '/' },
    { name: 'Blog', url: '/blog' },
  ];

  return (
    <>
      <SeoJsonLd data={[websiteSchema(), breadcrumbSchema(breadcrumbItems)]} />
      <div className="py-20 bg-gradient-to-b from-gray-50 to-white">
        <div className="container mx-auto px-4">
          <Breadcrumbs items={breadcrumbItems} />
          <div className="text-center mb-16">
            <h1 className="text-4xl lg:text-5xl font-bold text-gray-900 mb-6">
              QR Code Insights
            </h1>
            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
              Expert guides on dynamic QR codes, campaign tracking, UTM analytics, and smart marketing use cases.
              Discover how-to tutorials and best practices for QR code analytics.
            </p>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
            {blogPostList.map((post: any) => (
              <Link key={post.slug} href={post.link || `/blog/${post.slug}`}>
                <Card hover className="h-full overflow-hidden shadow-md hover:shadow-xl transition-all duration-300">
                  <div className="relative h-56 overflow-hidden">
                    <Image
                      src={post.image}
                      alt={`${post.title} - QR code guide showing ${post.category.toLowerCase()} strategies`}
                      width={800}
                      height={600}
                      className="w-full h-full object-cover transition-transform duration-500 hover:scale-110"
                    />
                  </div>
                  <CardHeader className="pb-3">
                    <div className="flex items-center justify-between mb-3">
                      <Badge variant="info">{post.category}</Badge>
                      <span className="text-sm text-gray-500 font-medium">{post.readTime} read</span>
                    </div>
                    <CardTitle className="text-xl leading-tight mb-3">{post.title}</CardTitle>
                  </CardHeader>
                  <CardContent className="pt-0">
                    <p className="text-gray-600 mb-4 leading-relaxed">{post.excerpt}</p>
                    <div className="flex items-center justify-between pt-4 border-t border-gray-100">
                      <p className="text-sm text-gray-500">{post.date}</p>
                      <span className="text-primary-600 text-sm font-medium">
                        {post.link ? 'Try Now →' : 'Read Article →'}
                      </span>
                    </div>
                  </CardContent>
                </Card>
              </Link>
            ))}
          </div>
        </div>
      </div>
    </>
  );
}
