'use client'

import { useState, useEffect } from 'react'
import { motion } from 'framer-motion'
import { Calendar, ArrowRight, Loader2 } from 'lucide-react'
import Link from 'next/link'

type News = {
  id: number
  title: string
  category: string
  excerpt: string
  createdAt: string
}

export function NewsSection() {
  const [news, setNews] = useState<News[]>([])
  const [isLoading, setIsLoading] = useState(true)

  useEffect(() => {
    fetch('/api/news?limit=3')
      .then(res => res.json())
      .then(data => {
        setNews(data.news)
        setIsLoading(false)
      })
      .catch(() => setIsLoading(false))
  }, [])

  return (
    <section id="news" className="py-24 bg-white scroll-mt-20">
      <div className="container mx-auto px-4 md:px-6">
        <div className="flex flex-col md:flex-row justify-between items-end mb-16 gap-6">
          <div>
            <h2 className="text-3xl md:text-5xl font-black text-[#0A1931] mb-4">最新动态</h2>
            <p className="text-gray-500 text-lg">了解白马家园的成长足迹与行业洞察</p>
          </div>
          <Link href="/news" className="text-[#FF6600] font-bold flex items-center gap-2 hover:translate-x-1 transition-transform">
            查看全部动态 <ArrowRight className="w-5 h-5" />
          </Link>
        </div>

        {isLoading ? (
          <div className="flex justify-center py-20"><Loader2 className="w-8 h-8 animate-spin text-[#FF6600]" /></div>
        ) : news.length === 0 ? (
          <div className="text-center py-20 text-gray-400 bg-gray-50 rounded-2xl">后台尚未发布任何动态</div>
        ) : (
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {news.map((item, index) => (
              <Link href={`/news?id=${item.id}`} key={item.id}>
                <motion.div
                  initial={{ opacity: 0, y: 20 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  viewport={{ once: true }}
                  transition={{ delay: index * 0.1 }}
                  className="group p-6 rounded-2xl border border-gray-100 bg-white hover:shadow-xl transition-all cursor-pointer h-full"
                >
                  <div className="flex items-center gap-2 mb-4">
                    <span className="text-[10px] font-black uppercase tracking-widest text-[#FF6600] bg-orange-50 px-2 py-0.5 rounded">
                      {item.category}
                    </span>
                    <span className="text-xs text-gray-400 flex items-center font-mono">
                      <Calendar className="w-3 h-3 mr-1" /> {new Date(item.createdAt).toLocaleDateString()}
                    </span>
                  </div>
                  <h3 className="text-xl font-bold text-[#0A1931] mb-4 group-hover:text-[#FF6600] transition-colors line-clamp-2">
                    {item.title}
                  </h3>
                  <p className="text-sm text-gray-500 leading-relaxed mb-6 line-clamp-3">
                    {item.excerpt}
                  </p>
                  <span className="text-sm font-bold text-[#0A1931] flex items-center gap-1 group-hover:gap-2 transition-all">
                    阅读更多 <ArrowRight className="w-4 h-4" />
                  </span>
                </motion.div>
              </Link>
            ))}
          </div>
        )}
      </div>
    </section>
  )
}