import type { Metadata } from 'next';
import { API_BASE, SITE_URL } from '@/lib/config';
import { articleJsonLd, breadcrumbJsonLd, absoluteUrl } from '@/lib/seo';
import SkillDetailClient from './client';

async function getSkill(id: string) {
  try {
    const res = await fetch(`${API_BASE}/skills/${id}`, { next: { revalidate: 3600 } });
    if (!res.ok) return null;
    return res.json();
  } catch {
    return null;
  }
}

export function generateStaticParams() {
  const skillIds = ['general-chat', 'coding', 'writing', 'study', 'english', 'prompt-engineering', 'data-analysis', 'career'];
  return skillIds.map((id) => ({ id }));
}

export async function generateMetadata({ params }: { params: { id: string } }): Promise<Metadata> {
  const skill = await getSkill(params.id);
  if (!skill) return { title: '技能未找到' };
  const title = skill.name;
  const description = skill.description || `${skill.name} - 宇之然 AI 技能，免费学习与实践`;
  const url = absoluteUrl(`/skills/${skill.id}`);
  return {
    title,
    description,
    alternates: { canonical: `/skills/${skill.id}` },
    openGraph: { type: 'article', title, description, url },
  };
}

export default async function SkillDetailPage({ params }: { params: { id: string } }) {
  const skill = await getSkill(params.id);
  const url = absoluteUrl(`/skills/${params.id}`);
  const jsonLd = skill
    ? [
        articleJsonLd({ headline: skill.name, description: skill.description || undefined, url }),
        breadcrumbJsonLd([
          { name: '首页', url: SITE_URL },
          { name: '技能库', url: absoluteUrl('/skills') },
          { name: skill.name, url },
        ]),
      ]
    : null;

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