import { notFound } from 'next/navigation';
import { COMPANY_INFO, NEWS } from '@/lib/constants';
import { Badge } from '@/components/ui/badge';
import { Card, CardContent } from '@/components/ui/card';
import { Calendar, ArrowLeft } from 'lucide-react';
import Link from 'next/link';
import { Button } from '@/components/ui/button';

interface NewsDetailPageProps {
  params: Promise<{
    slug: string;
  }>;
}

// 定义新闻项类型
type NewsItem = {
  id: string;
  title: string;
  excerpt: string;
  date: string;
  category: string;
  image: string;
  content?: string;
};

export function generateStaticParams() {
  return NEWS.map((news) => ({
    slug: news.id,
  }));
}

export async function generateMetadata({ params }: NewsDetailPageProps) {
  const { slug } = await params;
  const news = (NEWS as unknown as NewsItem[]).find((n) => n.id === slug);
  
  if (!news) {
    return {
      title: `新闻未找到 - ${COMPANY_INFO.name}`,
    };
  }
  
  return {
    title: `${news.title} - ${COMPANY_INFO.name}`,
    description: news.excerpt,
  };
}

export default async function NewsDetailPage({ params }: NewsDetailPageProps) {
  const { slug } = await params;
  const news = (NEWS as unknown as NewsItem[]).find((n) => n.id === slug);
  
  if (!news) {
    notFound();
  }

  return (
    <div className="pt-32 pb-20">
      <div className="container-custom">
        <div className="max-w-4xl mx-auto">
          <Button variant="ghost" asChild className="mb-8">
            <Link href="/news">
              <ArrowLeft className="mr-2 w-4 h-4" />
              返回新闻列表
            </Link>
          </Button>

          <article>
            <div className="flex items-center gap-3 mb-6">
              <Badge>{news.category}</Badge>
              <span className="text-sm text-gray-500 flex items-center gap-1">
                <Calendar className="w-4 h-4" />
                {news.date}
              </span>
            </div>

            <h1 className="text-3xl sm:text-4xl font-bold text-black mb-8">
              {news.title}
            </h1>

            <Card>
              <CardContent className="p-8">
                <div className="prose prose-lg max-w-none">
                  {news.content ? (
                    news.content.split('\n\n').map((paragraph, idx) => (
                      <p key={idx} className="text-gray-600 leading-relaxed mb-6">
                        {paragraph}
                      </p>
                    ))
                  ) : (
                    <>
                      <p className="text-gray-600 leading-relaxed">
                        {news.excerpt}
                      </p>
                      <p className="text-gray-600 leading-relaxed mt-6">
                        四川睿新致远科技有限公司始终致力于为客户提供最优质的技术服务和解决方案，
                        不断创新，追求卓越。我们相信，通过技术的力量，可以帮助更多企业实现数字化转型，
                        提升竞争力。
                      </p>
                    </>
                  )}
                </div>
              </CardContent>
            </Card>
          </article>
        </div>
      </div>
    </div>
  );
}
