import * as React from 'react';
import { Metadata } from 'next';
import { notFound } from 'next/navigation';
import { Breadcrumb } from '@/components/ui/Breadcrumb';
import { ArticleGrid } from '@/components/category/ArticleGrid';
import { Pagination } from '@/components/ui/Pagination';
import { BlogFilters } from '@/components/blogs/BlogFilters';
import { 
  getCategoryArticles, 
  getCategoryArticleCount,
  calculateTotalPages,
  getPaginationParams,
  getCategoryBySlug
} from '@/lib/utils/db';

// Revalidate every 30 minutes (1800 seconds)
export const revalidate = 1800;

interface CategoryPageProps {
  params: Promise<{
    slug: string;
  }>;
  searchParams: Promise<{
    page?: string;
    sort?: string;
    search?: string;
  }>;
}

// Category-specific keywords for SEO
const CATEGORY_KEYWORDS: Record<string, string[]> = {
  '攻略情報': ['転スラ', '転生したらスライムだった件', '攻略', 'クエスト', 'ストーリー', 'イベント攻略', 'ボス攻略', '高難易度', '攻略手順', 'クリア方法', 'ガチャRPG', 'モバイルゲーム'],
  'キャラクター評価': ['転スラ', 'キャラクター', '評価', 'ランキング', '最強キャラ', 'おすすめキャラ', 'キャラ性能', 'スキル', 'ステータス', 'キャラ解説', 'ティアリスト', 'キャラ比較'],
  'リセマラ・ガチャ情報': ['転スラ', 'リセマラ', 'ガチャ', 'リセマラランキング', 'ガチャ確率', '当たりキャラ', 'ガチャ情報', 'リセマラ方法', 'おすすめガチャ', 'ガチャ更新', 'ピックアップ', '排出率'],
  'イベント・アップデート': ['転スラ', 'イベント', 'アップデート', '新イベント', 'イベント情報', '更新情報', 'メンテナンス', '新キャラ', '新機能', 'イベント攻略', 'イベント報酬', 'アプデ情報'],
  '初心者・育成ガイド': ['転スラ', '初心者', '育成', 'ガイド', '始め方', '育成方法', '初心者向け', 'ビギナー', '育成優先度', 'おすすめ育成', '序盤攻略', '育成素材', '強化方法'],
};

// Generate metadata for SEO
export async function generateMetadata({ 
  params 
}: CategoryPageProps): Promise<Metadata> {
  const { slug } = await params;
  const decodedSlug = decodeURIComponent(slug);
  const category = await getCategoryBySlug(decodedSlug);
  
  if (!category) {
    return {
      title: 'カテゴリーが見つかりません | ten-sura-game.com',
    };
  }

  const categoryName = category.japanese;

  // Get category-specific keywords
  const categoryKeywords = CATEGORY_KEYWORDS[categoryName] || [];
  const keywords = ['ten-sura-game.com', '転スラ', '転生したらスライムだった件', 'ガチャRPG', 'モバイルゲーム', '攻略', ...categoryKeywords];

  return {
    title: `${categoryName}の記事一覧 | ten-sura-game.com（転スラ攻略ポータル）`,
    description: `${categoryName}に関する最新攻略記事をお届けします。転スラモバイルガチャRPGの攻略情報メディアten-sura-game.com（転スラ攻略ポータル）`,
    keywords,
    alternates: {
      canonical: `https://ten-sura-game.com/category/${encodeURIComponent(categoryName)}`,
    },
    openGraph: {
      title: `${categoryName}の記事一覧 | ten-sura-game.com（転スラ攻略ポータル）`,
      description: `${categoryName}に関する最新攻略記事をお届けします。転スラモバイルガチャRPGの攻略情報メディアten-sura-game.com（転スラ攻略ポータル）`,
      url: `https://ten-sura-game.com/category/${encodeURIComponent(categoryName)}`,
      siteName: 'ten-sura-game.com',
      locale: 'ja_JP',
      type: 'website',
      images: [
        {
          url: '/og-image.jpg',
          width: 1200,
          height: 630,
          alt: `${categoryName} - ten-sura-game.com`,
        },
      ],
    },
    twitter: {
      card: 'summary_large_image',
      title: `${categoryName}の記事一覧 | ten-sura-game.com（転スラ攻略ポータル）`,
      description: `${categoryName}に関する最新攻略記事をお届けします。転スラモバイルガチャRPGの攻略情報メディアten-sura-game.com（転スラ攻略ポータル）`,
      creator: '@tensura_game',
      images: ['/og-image.jpg'],
    },
  };
}

export default async function CategoryPage({ 
  params, 
  searchParams 
}: CategoryPageProps) {
  const { slug } = await params;
  const resolvedSearchParams = await searchParams;
  // Decode the category slug
  const decodedSlug = decodeURIComponent(slug);
  const category = await getCategoryBySlug(decodedSlug);
  
  // Validate category - return 404 if invalid
  if (!category) {
    notFound();
  }

  const categoryName = category.japanese;

  // Get filter parameters
  const currentPage = parseInt(resolvedSearchParams.page || '1', 10);
  const sortOrder = (resolvedSearchParams.sort as 'asc' | 'desc') || 'desc';
  const searchQuery = resolvedSearchParams.search || '';
  
  // Get pagination parameters (10 articles per page)
  const { page, limit, offset } = getPaginationParams(currentPage, 10);

  // Fetch total article count for this category with search filter
  const totalCount = await getCategoryArticleCount(categoryName, searchQuery || undefined);

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

  // Fetch articles by category with pagination, search, and sort
  const articles = await getCategoryArticles(categoryName, limit, offset, {
    sortOrder,
    searchQuery: searchQuery || undefined,
  });

  // Breadcrumb items
  const breadcrumbItems = [
    { label: 'ホーム', href: '/' },
    { label: categoryName },
  ];

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

        {/* Category title (H1) with red accent bar */}
        <div className="flex items-center gap-3 mb-2">
          <div className="w-1 h-8 bg-[#E60023] rounded-full" />
          <h1 className="text-3xl md:text-4xl font-semibold text-white">
            {categoryName}
          </h1>
        </div>

        {/* Article count */}
        <p className="text-sm text-[#B8B8C0] mb-8 ml-7">
          {totalCount}件の記事
        </p>

        {/* Filters - Search and Sort */}
        <BlogFilters 
          totalCount={totalCount}
          baseUrl={`/category/${encodeURIComponent(categoryName)}`}
          hideCategoryFilter={true}
        />

        {/* Article Grid */}
        {articles.length > 0 ? (
          <>
            <ArticleGrid articles={articles} />
            
            {/* Pagination */}
            <Pagination
              currentPage={page}
              totalPages={totalPages}
              baseUrl={`/category/${encodeURIComponent(categoryName)}`}
            />
          </>
        ) : (
          <div className="text-center py-16">
            <p className="text-lg text-[#B8B8C0]">
              {searchQuery 
                ? '検索条件に一致する記事が見つかりませんでした。'
                : 'このカテゴリーにはまだ記事がありません。'}
            </p>
          </div>
        )}
      </div>
    </main>
  );
}
