'use client';

import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { ArrowLeft, Calendar, Share2 } from 'lucide-react';
import Link from 'next/link';
import { motion } from 'framer-motion';
import { useInView } from 'framer-motion';
import { useRef } from 'react';
import { NEWS } from '@/lib/constants';

interface NewsItem {
  id: string;
  title: string;
  category: string;
  date: string;
  excerpt: string;
  content: string;
}

interface NewsDetailClientProps {
  news: NewsItem;
}

export function NewsDetailClient({ news }: NewsDetailClientProps) {
  const contentRef = useRef(null);
  const isContentInView = useInView(contentRef, { once: true, margin: '-100px' });

  const relatedNews = NEWS
    .filter((n) => n.id !== news.id && n.category === news.category)
    .slice(0, 3);

  return (
    <div className="min-h-screen bg-white">
      <div className="relative overflow-hidden bg-gradient-to-b from-[#FAFAFA] to-white">
        <div className="container-wide relative z-10 pt-32 pb-20">
          <Link
            href="/news"
            className="inline-flex items-center text-[#5C5C5C] hover:text-[#C41E3A] transition-colors mb-6"
          >
            <ArrowLeft className="w-4 h-4 mr-2" />
            返回新闻列表
          </Link>
          <div className="max-w-4xl">
            <div className="inline-block px-4 py-2 bg-[#C41E3A]/10 rounded-full text-[#C41E3A] text-sm mb-6">
              {news.category}
            </div>
            <h1 className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-6">
              {news.title}
            </h1>
            <div className="flex items-center gap-6 text-[#5C5C5C]">
              <div className="flex items-center gap-2">
                <Calendar className="w-5 h-5" />
                {news.date}
              </div>
              <button className="flex items-center gap-2 hover:text-[#C41E3A] transition-colors">
                <Share2 className="w-5 h-5" />
                分享
              </button>
            </div>
          </div>
        </div>
      </div>

      <div className="container-wide relative z-10 py-16" ref={contentRef}>
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={isContentInView ? { opacity: 1, y: 0 } : {}}
          transition={{ duration: 0.6 }}
          className="max-w-4xl"
        >
          <article className="prose prose-lg max-w-none">
            <div className="aspect-video bg-gradient-to-br from-[#C41E3A]/10 to-[#1C1C1C]/10 rounded-lg mb-8 flex items-center justify-center">
              <span className="text-6xl">📰</span>
            </div>
            
            <p className="text-xl text-[#5C5C5C] leading-relaxed mb-8 border-l-4 border-[#C41E3A] pl-6">
              {news.excerpt}
            </p>

            <div className="text-[#1C1C1C] leading-relaxed whitespace-pre-line">
              {news.content}
            </div>
          </article>

          {relatedNews.length > 0 && (
            <div className="mt-16 pt-16 border-t border-[#E5E5E5]">
              <h2 className="text-2xl font-bold text-[#1C1C1C] mb-8">
                相关新闻
              </h2>
              <div className="grid md:grid-cols-3 gap-6">
                {relatedNews.map((related) => (
                  <Link key={related.id} href={`/news/${related.id}`}>
                    <div className="group cursor-pointer">
                      <div className="aspect-video bg-gradient-to-br from-[#C41E3A]/10 to-[#1C1C1C]/10 rounded-lg mb-4 flex items-center justify-center group-hover:shadow-lg transition-shadow">
                        <span className="text-4xl">📰</span>
                      </div>
                      <Badge variant="secondary" className="mb-2">
                        {related.category}
                      </Badge>
                      <h3 className="text-lg font-semibold text-[#1C1C1C] mb-2 line-clamp-2 group-hover:text-[#C41E3A] transition-colors">
                        {related.title}
                      </h3>
                      <p className="text-sm text-[#5C5C5C] line-clamp-2">
                        {related.excerpt}
                      </p>
                    </div>
                  </Link>
                ))}
              </div>
            </div>
          )}

          <div className="mt-16 flex justify-center gap-4">
            <Button variant="outline" size="lg" asChild>
              <Link href="/news">
                返回新闻列表
              </Link>
            </Button>
            <Button size="lg" className="bg-[#C41E3A] hover:bg-[#A01830] text-white" asChild>
              <Link href="/#contact">
                联系我们
              </Link>
            </Button>
          </div>
        </motion.div>
      </div>
    </div>
  );
}