import { Suspense } from "react";
import { Search } from "lucide-react";
import NewsCard from "@/components/NewsCard";
import NewsFilterBar from "@/components/NewsFilterBar";
import NewsPagination from "@/components/NewsPagination";
import { newsService } from "@/lib/api/public/news";

interface BeritaPageProps {
  searchParams: Promise<{
    search?: string;
    category?: string;
    start_date?: string;
    end_date?: string;
    page?: string;
  }>;
}

export const metadata = {
  title: "Berita | PTBMMKI",
  description: "Kumpulan berita dan informasi terbaru dari PTBMMKI.",
};

export default async function BeritaPage({ searchParams }: BeritaPageProps) {
  const params = await searchParams;
  const page = Number(params.page ?? "1");

  const [newsResult, categoriesResult] = await Promise.allSettled([
    newsService.getAll({
      page,
      per_page: 9,
      search: params.search,
      category: params.category,
      start_date: params.start_date,
      end_date: params.end_date,
    }),
    newsService.getCategories(),
  ]);

  const pagination =
    newsResult.status === "fulfilled" ? newsResult.value.data : null;

  const newsItems = pagination?.data ?? [];        
  const categories =
    categoriesResult.status === "fulfilled"
      ? categoriesResult.value.data
      : [];

  return (
    <div className="min-h-screen bg-gray-50">
      <div className="py-12 px-4 sm:px-6 md:px-36">
        <div className="max-w-10xl mx-auto mt-24">
          <Suspense
            fallback={
              <div className="mb-12 bg-white rounded-2xl shadow-lg p-6 h-40 animate-pulse" />
            }
          >
            <NewsFilterBar
              categories={categories}
              total={pagination?.total ?? 0}
            />
          </Suspense>

          {newsItems.length > 0 ? (
            <>
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">
                {newsItems.map((item) => (
                  <NewsCard key={item.id} item={item} />
                ))}
              </div>

              {pagination && pagination.last_page > 1 && (
                <Suspense fallback={null}>
                  <NewsPagination
                    currentPage={pagination.current_page}
                    totalPages={pagination.last_page}
                    from={pagination.from}
                    to={pagination.to}
                    total={pagination.total}
                  />
                </Suspense>
              )}
            </>
          ) : (
            <EmptyState
              search={params.search}
              category={params.category}
              startDate={params.start_date}
              endDate={params.end_date}
              fetchFailed={newsResult.status === "rejected"}
            />
          )}
        </div>
      </div>
    </div>
  );
}

function EmptyState({
  search,
  category,
  startDate,
  endDate,
  fetchFailed,
}: {
  search?: string;
  category?: string;
  startDate?: string;
  endDate?: string;
  fetchFailed?: boolean;
}) {
  return (
    <div className="text-center py-16 bg-white rounded-2xl shadow-lg">
      <div className="text-gray-400 mb-4">
        <Search className="w-16 h-16 mx-auto" />
      </div>
      <h3 className="text-2xl font-bold text-gray-700 mb-4">
        {fetchFailed ? "Gagal memuat berita" : "Berita tidak ditemukan"}
      </h3>
      <p className="text-gray-500 mb-8 max-w-md mx-auto">
        {fetchFailed
          ? "Terjadi kesalahan saat mengambil data. Silakan coba lagi."
          : "Tidak ada berita yang sesuai dengan filter yang diterapkan."}
        {search && ` Pencarian: "${search}"`}
        {category && category !== "Semua" && ` Kategori: "${category}"`}
        {startDate &&
          endDate &&
          ` Tanggal: ${new Date(startDate).toLocaleDateString("id-ID")} - ${new Date(endDate).toLocaleDateString("id-ID")}`}
      </p>
      <a
        href="/berita"
        className="px-6 py-3 bg-brand text-white rounded-full font-medium hover:bg-[#E67817] transition-colors duration-300"
      >
        Tampilkan Semua Berita
      </a>
    </div>
  );
}