import Link from 'next/link';
import { useState, useMemo } from 'react';
import { NewsItem } from '../lib/content';
import { Search, Filter, Calendar, Tag, ArrowRight, Clock } from 'lucide-react';

export default function NewsList({ news }: { news: NewsItem[] }) {
  const [searchTerm, setSearchTerm] = useState('');
  const [selectedCategory, setSelectedCategory] = useState('全部');
  const [sortBy, setSortBy] = useState('date');

  // 获取所有分类
  const categories = useMemo(() => {
    const allTags = news.flatMap(item => item.tags || []);
    const uniqueTags = Array.from(new Set(allTags));
    return ['全部', ...uniqueTags];
  }, [news]);

  // 过滤和排序新闻
  const filteredNews = useMemo(() => {
    let filtered = news.filter(item => {
      const matchesSearch = item.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
                           item.summary?.toLowerCase().includes(searchTerm.toLowerCase()) ||
                           item.tags?.some(tag => tag.toLowerCase().includes(searchTerm.toLowerCase()));
      
      const matchesCategory = selectedCategory === '全部' || item.tags?.includes(selectedCategory);
      
      return matchesSearch && matchesCategory;
    });

    // 排序
    filtered.sort((a, b) => {
      switch (sortBy) {
        case 'date':
          return new Date(b.date).getTime() - new Date(a.date).getTime();
        case 'title':
          return a.title.localeCompare(b.title);
        default:
          return 0;
      }
    });

    return filtered;
  }, [news, searchTerm, selectedCategory, sortBy]);

  return (
    <section className="px-6 py-16 bg-gray-50">
      <div className="max-w-screen-xl mx-auto">
        {/* 搜索和筛选区域 */}
        <div className="bg-white rounded-2xl p-6 shadow-sm mb-8">
          <div className="flex flex-col lg:flex-row gap-4 items-center">
            {/* 搜索框 */}
            <div className="flex-1 relative">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
              <input
                type="text"
                placeholder="搜索新闻标题、内容或标签..."
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                className="w-full pl-10 pr-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-accent focus:border-transparent outline-none"
              />
            </div>

            {/* 分类筛选 */}
            <div className="flex items-center gap-2">
              <Filter className="w-5 h-5 text-gray-400" />
              <select
                value={selectedCategory}
                onChange={(e) => setSelectedCategory(e.target.value)}
                className="px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-accent focus:border-transparent outline-none"
              >
                {categories.map(category => (
                  <option key={category} value={category}>{category}</option>
                ))}
              </select>
            </div>

            {/* 排序选择 */}
            <div className="flex items-center gap-2">
              <Calendar className="w-5 h-5 text-gray-400" />
              <select
                value={sortBy}
                onChange={(e) => setSortBy(e.target.value)}
                className="px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-accent focus:border-transparent outline-none"
              >
                <option value="date">按日期排序</option>
                <option value="title">按标题排序</option>
              </select>
            </div>
          </div>

          {/* 搜索结果统计 */}
          <div className="mt-4 pt-4 border-t border-gray-100">
            <p className="text-sm text-gray-600">
              找到 <span className="font-semibold text-accent">{filteredNews.length}</span> 条新闻
              {searchTerm && (
                <span>，关键词：<span className="font-semibold">"{searchTerm}"</span></span>
              )}
              {selectedCategory !== '全部' && (
                <span>，分类：<span className="font-semibold">{selectedCategory}</span></span>
              )}
            </p>
          </div>
        </div>

        {/* 新闻列表 */}
        {filteredNews.length === 0 ? (
          <div className="text-center py-16">
            <div className="w-24 h-24 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
              <Search className="w-12 h-12 text-gray-400" />
            </div>
            <h3 className="text-xl font-semibold text-gray-600 mb-2">未找到相关新闻</h3>
            <p className="text-gray-500 mb-6">请尝试调整搜索条件或筛选器</p>
            <button
              onClick={() => {
                setSearchTerm('');
                setSelectedCategory('全部');
              }}
              className="px-6 py-3 bg-accent text-white rounded-xl hover:bg-blue-700 transition-colors"
            >
              重置筛选
            </button>
          </div>
        ) : (
          <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6">
            {filteredNews.map((item, index) => (
              <article 
                key={item.slug} 
                className="group bg-white rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 border border-gray-100 hover:border-accent/20 overflow-hidden"
              >
                <div className="p-6">
                  {/* 新闻头部 */}
                  <div className="flex items-start justify-between mb-4">
                    <div className="flex items-center gap-2">
                      <Clock className="w-4 h-4 text-gray-400" />
                      <time className="text-sm text-gray-500">{item.date}</time>
                    </div>
                    {index < 3 && (
                      <span className="bg-gradient-to-r from-accent to-blue-600 text-white text-xs font-semibold px-3 py-1 rounded-full">
                        热门
                      </span>
                    )}
                  </div>

                  {/* 新闻标题 */}
                  <h3 className="text-xl font-semibold text-primary mb-3 group-hover:text-accent transition-colors line-clamp-2">
                    <Link href={`/news/${item.slug}`} className="hover:underline">
                      {item.title}
                    </Link>
                  </h3>

                  {/* 新闻摘要 */}
                  {item.summary && (
                    <p className="text-gray-600 text-sm line-clamp-3 mb-4 leading-relaxed">
                      {item.summary}
                    </p>
                  )}

                  {/* 标签 */}
                  {item.tags && item.tags.length > 0 && (
                    <div className="flex flex-wrap gap-2 mb-4">
                      {item.tags.map(tag => (
                        <span 
                          key={tag} 
                          className="inline-flex items-center gap-1 px-3 py-1 text-xs bg-gray-100 text-gray-600 rounded-full hover:bg-accent hover:text-white transition-colors cursor-pointer"
                          onClick={() => setSelectedCategory(tag)}
                        >
                          <Tag className="w-3 h-3" />
                          {tag}
                        </span>
                      ))}
                    </div>
                  )}

                  {/* 阅读更多按钮 */}
                  <div className="flex items-center justify-between pt-4 border-t border-gray-100">
                    <Link 
                      href={`/news/${item.slug}`}
                      className="inline-flex items-center gap-2 text-accent hover:text-blue-700 font-medium text-sm group-hover:gap-3 transition-all"
                    >
                      阅读全文
                      <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
                    </Link>
                    
                    <div className="text-xs text-gray-400">
                      {Math.ceil(Math.random() * 5) + 1} 分钟阅读
                    </div>
                  </div>
                </div>
              </article>
            ))}
          </div>
        )}

        {/* 加载更多按钮（如果新闻很多的话） */}
        {filteredNews.length > 6 && (
          <div className="text-center mt-12">
            <button className="px-8 py-3 bg-white border border-gray-200 text-primary rounded-xl hover:bg-gray-50 hover:border-accent transition-all duration-300 font-medium">
              加载更多新闻
            </button>
          </div>
        )}
      </div>
    </section>
  );
}