'use client';

import { useState, useMemo, ChangeEvent } from 'react';
import { motion } from 'framer-motion';
import { ScrollReveal, StaggerReveal } from '@/components/ui/scroll-reveal';
import { Button } from '@/components/ui/button';
import { StaticLink } from '@/components/ui/static-link';
import { Badge } from '@/components/ui/badge';
import { Input } from '@/components/ui/input';
import { Search, Calendar, ArrowRight, Newspaper, ChevronLeft, ChevronRight } from 'lucide-react';
import { COMPANY_INFO } from '@/lib/constants';
import { type NewsItem } from '@/lib/constants/news';
import { SectionLabel, EASE_OUT } from '@/components/ui/page-decoration';

const categories = ['全部', '公司新闻', '研发动态'];
const ITEMS_PER_PAGE = 9;

function NewsCard({ newsItem, index }: { newsItem: NewsItem; index: number }) {
  const [imageError, setImageError] = useState(false);
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true, margin: '-80px' }}
      transition={{ duration: 0.5, delay: index * 0.08, ease: EASE_OUT }}
    >
      <StaticLink
        href={`/news/${newsItem.id}`}
        className="group relative block border border-border-primary hover:border-brand/30 bg-white transition-all duration-500 hover:-translate-y-2 overflow-hidden h-full"
      >
        <div className="absolute top-0 left-0 bottom-0 w-1 bg-brand scale-y-0 group-hover:scale-y-100 transition-transform duration-500 origin-top" />

        {newsItem.image && !imageError ? (
          <div className="aspect-video bg-bg-secondary overflow-hidden">
            <img
              src={newsItem.image}
              alt={newsItem.title}
              onError={() => setImageError(true)}
              className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
            />
          </div>
        ) : (
          <div className="aspect-video bg-gradient-to-br from-brand/[0.08] to-bg-secondary flex items-center justify-center">
            <Newspaper className="w-12 h-12 text-brand/30" />
          </div>
        )}

        <div className="p-6 sm:p-7 lg:p-8">
          <div className="flex items-center gap-3 mb-4">
            <Badge variant="outline" className="text-xs border-brand/30 text-brand">
              {newsItem.category}
            </Badge>
            <div className="flex items-center gap-1.5 text-xs text-text-muted">
              <Calendar className="w-3.5 h-3.5" />
              {newsItem.date}
            </div>
          </div>

          <h2 className="text-lg sm:text-xl font-semibold text-ink mb-3 line-clamp-2 group-hover:text-brand transition-colors duration-300 leading-snug">
            {newsItem.title}
          </h2>

          <p className="text-sm text-text-secondary line-clamp-3 mb-5 leading-relaxed">
            {newsItem.excerpt}
          </p>

          <div className="flex items-center text-brand text-sm font-medium">
            阅读全文
            <ArrowRight className="ml-2 w-4 h-4 group-hover:translate-x-1 transition-transform duration-300" />
          </div>
        </div>
      </StaticLink>
    </motion.div>
  );
}

export default function NewsContentV3({ news }: { news?: NewsItem[] }) {
  const NEWS = news ?? [];
  const [selectedCategory, setSelectedCategory] = useState('全部');
  const [searchQuery, setSearchQuery] = useState('');
  const [currentPage, setCurrentPage] = useState(1);

  const filteredNews = useMemo(() => {
    return NEWS.filter((newsItem) => {
      const matchesCategory = selectedCategory === '全部' || newsItem.category === selectedCategory;
      const matchesSearch =
        newsItem.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
        newsItem.excerpt.toLowerCase().includes(searchQuery.toLowerCase());
      return matchesCategory && matchesSearch;
    });
  }, [selectedCategory, searchQuery]);

  const totalPages = Math.ceil(filteredNews.length / ITEMS_PER_PAGE);
  const paginatedNews = useMemo(() => {
    const startIndex = (currentPage - 1) * ITEMS_PER_PAGE;
    return filteredNews.slice(startIndex, startIndex + ITEMS_PER_PAGE);
  }, [filteredNews, currentPage]);

  const handlePageChange = (page: number) => {
    setCurrentPage(page);
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  const handleCategoryChange = (category: string) => {
    setSelectedCategory(category);
    setCurrentPage(1);
  };

  const handleSearchChange = (e: ChangeEvent<HTMLInputElement>) => {
    setSearchQuery(e.target.value);
    setCurrentPage(1);
  };

  return (
    <div className="min-h-screen bg-white text-ink overflow-x-hidden">
      {/* Hero Section */}
      <section className="relative min-h-[75vh] flex items-center overflow-hidden bg-white">
        <div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 relative z-10 w-full py-28 sm:py-36 md:py-44 lg:py-56">
          <div className="max-w-4xl">
            <ScrollReveal>
              <SectionLabel>News &amp; Insights</SectionLabel>
            </ScrollReveal>

            <ScrollReveal delay={0.1}>
              <h1 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-bold leading-[0.92] tracking-tighter mb-10 sm:mb-12 md:mb-16">
                新闻与
                <span className="block mt-4 text-brand">洞察</span>
              </h1>
            </ScrollReveal>

            <ScrollReveal delay={0.2}>
              <p className="text-lg md:text-xl text-text-secondary max-w-2xl leading-relaxed">
                {COMPANY_INFO.displayName}最新动态、产品更新与行业洞察。了解数字化趋势，把握技术脉搏。
              </p>
            </ScrollReveal>
          </div>
        </div>
      </section>

      {/* Filter + News List Section */}
      <section className="relative py-20 sm:py-28 md:py-36 lg:py-44 overflow-hidden bg-bg-secondary">
        <div className="absolute top-0 left-0 right-0 h-px bg-border-primary" />

        <div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 relative z-10">
          {/* Filters */}
          <ScrollReveal className="mb-12 sm:mb-16 space-y-6">
            <div className="flex flex-wrap gap-3">
              {categories.map((category) => (
                <Button
                  key={category}
                  variant={selectedCategory === category ? 'primary' : 'outline'}
                  onClick={() => handleCategoryChange(category)}
                >
                  {category}
                </Button>
              ))}
            </div>

            <div className="relative max-w-md">
              <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 text-text-muted w-5 h-5 pointer-events-none" />
              <Input
                type="text"
                placeholder="搜索新闻..."
                value={searchQuery}
                onChange={handleSearchChange}
                className="pl-12 h-12 bg-white border-border-primary text-ink placeholder:text-text-muted focus:border-brand/50"
              />
            </div>
          </ScrollReveal>

          {/* News Grid */}
          {paginatedNews.length === 0 ? (
            <ScrollReveal>
              <div className="text-center py-24">
                <Newspaper className="w-16 h-16 text-text-muted/20 mx-auto mb-6" />
                <p className="text-xl text-text-secondary">没有找到相关新闻</p>
                <p className="mt-2 text-text-muted">试试其他关键词或分类</p>
              </div>
            </ScrollReveal>
          ) : (
            <>
              <StaggerReveal
                className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8"
                delayChildren={0.05}
              >
                {paginatedNews.map((newsItem, index) => (
                  <NewsCard key={newsItem.id} newsItem={newsItem} index={index} />
                ))}
              </StaggerReveal>

              {/* Pagination */}
              {totalPages > 1 && (
                <ScrollReveal>
                  <div className="flex justify-center items-center gap-2 mt-16">
                    <Button
                      variant="outline"
                      size="icon"
                      onClick={() => handlePageChange(currentPage - 1)}
                      disabled={currentPage === 1}
                    >
                      <ChevronLeft className="w-4 h-4" />
                    </Button>
                    {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
                      <Button
                        key={page}
                        variant={currentPage === page ? 'primary' : 'outline'}
                        size="icon"
                        onClick={() => handlePageChange(page)}
                      >
                        {page}
                      </Button>
                    ))}
                    <Button
                      variant="outline"
                      size="icon"
                      onClick={() => handlePageChange(currentPage + 1)}
                      disabled={currentPage === totalPages}
                    >
                      <ChevronRight className="w-4 h-4" />
                    </Button>
                  </div>
                </ScrollReveal>
              )}
            </>
          )}
        </div>
      </section>

      {/* CTA Section */}
      <section className="relative py-20 sm:py-28 md:py-36 lg:py-44 overflow-hidden bg-white">
        <div className="absolute top-0 left-0 right-0 h-px bg-border-primary" />

        <div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 relative z-10">
          <ScrollReveal className="text-center max-w-3xl mx-auto">
            <SectionLabel className="justify-center">Get in Touch</SectionLabel>
            <h2 className="text-3xl sm:text-4xl md:text-5xl font-bold tracking-tight leading-tight">
              想了解更多？
            </h2>
            <p className="mt-6 text-lg text-text-secondary leading-relaxed">
              无论您有合作意向还是想探讨技术趋势，我们都欢迎与您交流。
            </p>
            <div className="mt-12 flex flex-col sm:flex-row justify-center gap-4 sm:gap-6">
              <a
                href="/contact"
                className="group inline-flex items-center justify-center gap-3 px-12 py-6 font-semibold text-base bg-brand text-white transition-all duration-300 hover:bg-brand/90"
              >
                联系我们
                <ArrowRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-1" />
              </a>
              <a
                href="/about"
                className="inline-flex items-center justify-center gap-3 px-12 py-6 font-semibold text-base text-ink border border-border-primary hover:border-border-secondary hover:bg-bg-secondary transition-all duration-300"
              >
                了解公司
              </a>
            </div>
          </ScrollReveal>
        </div>
      </section>
    </div>
  );
}