"use client";

import Link from "next/link";
import { CalendarDays, ChevronLeft, Building2, Dumbbell } from "lucide-react";
import { Suspense, useEffect, useState } from "react";
import { useSearchParams, useRouter } from "next/navigation";

interface NewsItem {
  id: string;
  title: string;
  slug: string;
  content?: string;
  image?: string | null;
  isPinned: boolean;
  createdAt: string;
}

interface Board { id: string; name: string; }
interface Sport { id: string; name: string; }

export default function NewsPageWrapper() {
  return (
    <Suspense fallback={<div className="text-center py-20"><p className="text-gray-500">در حال بارگذاری...</p></div>}>
      <NewsPage />
    </Suspense>
  );
}

function NewsPage() {
  const searchParams = useSearchParams();
  const router = useRouter();
  const boardId = searchParams.get("boardId") || "";
  const sportId = searchParams.get("sportId") || "";

  const [newsList, setNewsList] = useState<NewsItem[]>([]);
  const [boards, setBoards] = useState<Board[]>([]);
  const [sports, setSports] = useState<Sport[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    Promise.all([
      fetch("/api/news").then((r) => r.json()),
      fetch("/api/boards").then((r) => r.json()),
      fetch("/api/sports").then((r) => r.json()),
    ]).then(([news, b, s]) => {
      if (Array.isArray(news)) setNewsList(news);
      if (Array.isArray(b)) setBoards(b);
      if (Array.isArray(s)) setSports(s);
      setLoading(false);
    }).catch(() => setLoading(false));
  }, []);

  const filtered = newsList.filter((item: any) => {
    if (boardId && item.boardId !== boardId) return false;
    if (sportId && item.sportId !== sportId) return false;
    return true;
  });

  function setParam(key: string, value: string) {
    const params = new URLSearchParams(searchParams.toString());
    if (value) params.set(key, value);
    else params.delete(key);
    router.push(`/news?${params.toString()}`);
  }

  return (
    <div>
      <div className="container mx-auto px-4 py-12">
        <div className="mb-10">
          <h1 className="text-3xl font-bold text-gray-900 mb-2">اخبار و اطلاعیه‌ها</h1>
          <p className="text-gray-500">آخرین اخبار و اطلاعیه‌های سامانه مربیگری ورزشی</p>
        </div>

        <div className="space-y-3 mb-8">
          <div className="flex flex-wrap items-center gap-2">
            <span className="text-sm text-gray-500 flex items-center gap-1"><Building2 className="h-3.5 w-3.5" /> هیئت:</span>
            <button
              onClick={() => setParam("boardId", "")}
              className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${!boardId ? "bg-[#2563EB] text-white" : "bg-gray-100 text-gray-600 hover:bg-gray-200"}`}
            >
              همه
            </button>
            {boards.map((b) => (
              <button
                key={b.id}
                onClick={() => setParam("boardId", b.id)}
                className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${boardId === b.id ? "bg-[#2563EB] text-white" : "bg-gray-100 text-gray-600 hover:bg-gray-200"}`}
              >
                {b.name}
              </button>
            ))}
          </div>
          <div className="flex flex-wrap items-center gap-2">
            <span className="text-sm text-gray-500 flex items-center gap-1"><Dumbbell className="h-3.5 w-3.5" /> رشته:</span>
            <button
              onClick={() => setParam("sportId", "")}
              className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${!sportId ? "bg-[#2563EB] text-white" : "bg-gray-100 text-gray-600 hover:bg-gray-200"}`}
            >
              همه
            </button>
            {sports.map((s) => (
              <button
                key={s.id}
                onClick={() => setParam("sportId", s.id)}
                className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${sportId === s.id ? "bg-[#2563EB] text-white" : "bg-gray-100 text-gray-600 hover:bg-gray-200"}`}
              >
                {s.name}
              </button>
            ))}
          </div>
        </div>

        {loading ? (
          <div className="text-center py-20"><p className="text-gray-500">در حال بارگذاری...</p></div>
        ) : (
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {filtered.map((item) => (
              <Link
                key={item.id}
                href={`/news/${item.slug}`}
                className="group rounded-2xl border border-gray-100 bg-white overflow-hidden hover:border-[#2563EB]/30 hover:shadow-xl transition-all duration-200"
              >
                {item.image && (
                  <div className="aspect-video bg-gray-100 overflow-hidden">
                    <img
                      src={item.image}
                      alt={item.title}
                      className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                    />
                  </div>
                )}
                <div className="p-6">
                  <div className="flex items-center gap-2 text-xs text-gray-400 mb-3">
                    <CalendarDays className="h-3.5 w-3.5" />
                    {new Date(item.createdAt).toLocaleDateString("fa-IR")}
                    {item.isPinned && (
                      <span className="bg-red-50 text-red-600 px-2 py-0.5 rounded-full font-medium">
                        اطلاعیه
                      </span>
                    )}
                  </div>
                  <h3 className="font-semibold text-gray-900 group-hover:text-[#2563EB] transition-colors mb-2">
                    {item.title}
                  </h3>
                  {item.content && (
                    <p className="text-sm text-gray-600 line-clamp-2 leading-relaxed">{item.content}</p>
                  )}
                  <div className="mt-4 flex items-center text-sm text-[#2563EB] opacity-0 group-hover:opacity-100 transition-opacity gap-1">
                    ادامه مطلب <ChevronLeft className="h-3.5 w-3.5" />
                  </div>
                </div>
              </Link>
            ))}
          </div>
        )}

        {!loading && filtered.length === 0 && (
          <div className="text-center py-20">
            <div className="w-16 h-16 mx-auto mb-4 rounded-2xl bg-gray-100 flex items-center justify-center">
              <CalendarDays className="h-8 w-8 text-gray-400" />
            </div>
            <p className="text-gray-500">هیچ خبری یافت نشد</p>
          </div>
        )}
      </div>
    </div>
  );
}