import * as React from 'react';
import { Metadata } from 'next';
import { Breadcrumb } from '@/components/ui/Breadcrumb';
import { ArticleCard } from '@/components/article/ArticleCard';
import { Pagination } from '@/components/ui/Pagination';
import { BlogFilters } from '@/components/blogs/BlogFilters';
import { 
  getFilteredArticles,
  getFilteredArticlesCount,
  getCategoriesWithArticles,
  getPaginationParams,
  calculateTotalPages
} from '@/lib/utils/db';

// Revalidate every 30 minutes
export const revalidate = 1800;

interface BlogsPageProps {
  searchParams: Promise<{
    page?: string;
    category?: string;
    sort?: string;
    search?: string;
  }>;
}

// Generate metadata for SEO
export async function generateMetadata(): Promise<Metadata> {
  const keywords = [
    'ten-sura-game.com', '転スラゲーム攻略', '転生したらスライムだった件', '転スラ', '記事一覧', 'ブログ', 'ストーリー攻略', 'ボス攻略', 
    '高難易度攻略', '編成・スキル解説', '初心者ガイド', 'ゲーム攻略', '攻略情報'
  ];

  return {
    title: 'すべての記事',
    description: 'ten-sura-game.comのすべての攻略記事一覧。ストーリー攻略、ボス攻略、高難易度攻略、編成・スキル解説、初心者ガイドなど、転生したらスライムだった件の攻略情報をチェック。',
    keywords,
    alternates: {
      canonical: 'https://ten-sura-game.com/blogs',
    },
    openGraph: {
      title: 'すべての記事 | ten-sura-game.com（転スラゲーム攻略）',
      description: 'ten-sura-game.comのすべての攻略記事一覧。ストーリー攻略、ボス攻略、高難易度攻略、編成・スキル解説、初心者ガイドなど、転生したらスライムだった件の攻略情報をチェック。',
      url: 'https://ten-sura-game.com/blogs',
      siteName: 'ten-sura-game.com',
      locale: 'ja_JP',
      type: 'website',
      images: [
        {
          url: '/og-image.jpg',
          width: 1200,
          height: 630,
          alt: 'すべての記事 - ten-sura-game.com',
        },
      ],
    },
    twitter: {
      card: 'summary_large_image',
      title: 'すべての記事 | ten-sura-game.com（転スラゲーム攻略）',
      description: 'ten-sura-game.comのすべての攻略記事一覧。ストーリー攻略、ボス攻略、高難易度攻略、編成・スキル解説、初心者ガイドなど、転生したらスライムだった件の攻略情報をチェック。',
      creator: '@tensura_game',
      images: ['/og-image.jpg'],
    },
  };
}

export default async function BlogsPage({ searchParams }: BlogsPageProps) {
  const resolvedSearchParams = await searchParams;
  // Get filter parameters
  const currentPage = Math.max(1, parseInt(resolvedSearchParams.page || '1', 10));
  const category = resolvedSearchParams.category || '';
  const sortOrder = (resolvedSearchParams.sort as 'asc' | 'desc') || 'desc';
  const searchQuery = resolvedSearchParams.search || '';
  const articlesPerPage = 12;
  
  // Use pagination helper
  const { offset } = getPaginationParams(currentPage, articlesPerPage);

  // Fetch categories that have articles
  const categoriesWithArticles = await getCategoriesWithArticles();

  // Fetch filtered articles
  const articles = await getFilteredArticles(articlesPerPage, offset, {
    category: category || undefined,
    sortOrder,
    searchQuery: searchQuery || undefined,
  });

  // Get total count with filters
  const totalCount = await getFilteredArticlesCount({
    category: category || undefined,
    searchQuery: searchQuery || undefined,
  });

  // Calculate total pages
  const totalPages = calculateTotalPages(totalCount, articlesPerPage);

  // Breadcrumb items
  const breadcrumbItems = [
    { label: 'ホーム', href: '/' },
    { label: 'すべての記事' },
  ];

  // Build query string for pagination
  const buildQueryString = (page: number) => {
    const params = new URLSearchParams();
    if (page > 1) params.set('page', page.toString());
    if (category) params.set('category', category);
    if (sortOrder !== 'desc') params.set('sort', sortOrder);
    if (searchQuery) params.set('search', searchQuery);
    const queryString = params.toString();
    return queryString ? `?${queryString}` : '';
  };

  return (
    <main className="min-h-screen bg-[#0F0F12]">
      <div className="container mx-auto px-4 py-8 md:py-12">
        {/* Breadcrumb */}
        <Breadcrumb items={breadcrumbItems} />

        {/* Page Title */}
        <h1 className="text-3xl md:text-4xl lg:text-5xl font-semibold mb-2 text-white">
          すべての記事
        </h1>
        <p className="text-[#B8B8C0] mb-8">
          全{totalCount}件の記事
        </p>

        {/* Filters */}
        <BlogFilters 
          categories={categoriesWithArticles}
          totalCount={totalCount}
        />

        {/* Article Grid - 2 columns on desktop */}
        {articles.length > 0 ? (
          <>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-12">
              {articles.map((article) => (
                <ArticleCard
                  key={article.slug}
                  article={{
                    slug: article.slug,
                    title: article.title,
                    excerpt: article.excerpt,
                    cardImage: article.cardImage,
                    publicationDate: article.publicationDate,
                    category: article.category,
                    readingTime: article.readingTime,
                  }}
                />
              ))}
            </div>

            {/* Pagination */}
            {totalPages > 1 && (
              <Pagination
                currentPage={currentPage}
                totalPages={totalPages}
                baseUrl="/blogs"
              />
            )}
          </>
        ) : (
          <div className="text-center py-16">
            <p className="text-[#B8B8C0] text-lg">
              {searchQuery || category 
                ? '検索条件に一致する記事が見つかりませんでした。'
                : '記事がまだありません。'}
            </p>
          </div>
        )}
      </div>
    </main>
  );
}
