import Link from "next/link";
import { Newspaper, Search } from "lucide-react";
import type { Artikel, KategoriArtikel, Paginated } from "@/lib/types";
import { serverGet } from "@/lib/api";
import { ArticleCard } from "@/components/public/article-card";
import { PaginationLinks } from "@/components/public/pagination-links";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { cn } from "@/lib/utils";

export const metadata = { title: "Berita Desa" };

export default async function BeritaPage({
  searchParams,
}: {
  searchParams: Promise<{ page?: string; q?: string; kategori?: string }>;
}) {
  const params = await searchParams;
  const page = Math.max(1, Number(params.page) || 1);
  const q = params.q?.trim() ?? "";
  const kategori = params.kategori ?? "";

  const query = new URLSearchParams({ page: String(page), limit: "6" });
  if (q) query.set("q", q);
  if (kategori) query.set("kategoriId", kategori);

  const [berita, kategoriList] = await Promise.all([
    serverGet<Paginated<Artikel>>(`/artikel/publik?${query.toString()}`),
    serverGet<KategoriArtikel[]>("/artikel/kategori"),
  ]);

  const daftar = berita?.data ?? [];
  const activeKategori = kategoriList?.find((item) => String(item.id) === kategori);

  return (
    <div className="animate-fade-in">
      <section className="border-b bg-secondary/40 py-12">
        <div className="container">
          <div className="text-sm font-semibold uppercase tracking-wider text-primary">
            Informasi Terkini
          </div>
          <h1 className="mt-2 text-3xl font-bold tracking-tight sm:text-4xl">
            Berita Desa
          </h1>
          <p className="mt-2 max-w-2xl text-sm leading-relaxed text-muted-foreground">
            Kabar pembangunan, kegiatan masyarakat, dan pengumuman resmi pemerintah desa.
          </p>

          <form
            action="/berita"
            method="get"
            className="mt-6 flex max-w-xl flex-col gap-2 sm:flex-row"
          >
            {kategori && <input type="hidden" name="kategori" value={kategori} />}
            <div className="relative flex-1">
              <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
              <Input
                name="q"
                defaultValue={q}
                placeholder="Cari berita desa…"
                className="bg-card pl-9"
              />
            </div>
            <Button type="submit">Cari</Button>
          </form>
        </div>
      </section>

      <div className="container py-10">
        <div className="flex flex-wrap items-center gap-2">
          <Link
            href={q ? `/berita?q=${encodeURIComponent(q)}` : "/berita"}
            className={cn(
              "rounded-full border px-3 py-1.5 text-xs font-semibold transition-colors",
              !kategori
                ? "border-primary bg-primary text-primary-foreground"
                : "border-border bg-card text-muted-foreground hover:bg-muted",
            )}
          >
            Semua kategori
          </Link>
          {(kategoriList ?? []).map((item) => {
            const search = new URLSearchParams();
            if (q) search.set("q", q);
            search.set("kategori", String(item.id));
            return (
              <Link
                key={item.id}
                href={`/berita?${search.toString()}`}
                className={cn(
                  "rounded-full border px-3 py-1.5 text-xs font-semibold transition-colors",
                  kategori === String(item.id)
                    ? "border-primary bg-primary text-primary-foreground"
                    : "border-border bg-card text-muted-foreground hover:bg-muted",
                )}
              >
                {item.nama}
              </Link>
            );
          })}
        </div>

        {(q || activeKategori) && (
          <p className="mt-4 text-sm text-muted-foreground">
            {q && (
              <>
                Hasil pencarian “<span className="font-semibold text-foreground">{q}</span>”
              </>
            )}
            {q && activeKategori && " · "}
            {activeKategori && (
              <>
                Kategori{" "}
                <span className="font-semibold text-foreground">
                  {activeKategori.nama}
                </span>
              </>
            )}
          </p>
        )}

        {daftar.length ? (
          <div className="mt-6 grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
            {daftar.map((artikel) => (
              <ArticleCard key={artikel.id} artikel={artikel} />
            ))}
          </div>
        ) : (
          <div className="mt-10 rounded-2xl border border-dashed p-16 text-center">
            <Newspaper className="mx-auto h-8 w-8 text-muted-foreground" />
            <p className="mt-3 font-semibold">Belum ada berita</p>
            <p className="mt-1 text-sm text-muted-foreground">
              Coba kata kunci lain atau kembali ke semua kategori.
            </p>
            <Button asChild variant="outline" className="mt-4">
              <Link href="/berita">Lihat semua berita</Link>
            </Button>
          </div>
        )}

        {berita && berita.meta.totalPages > 1 && (
          <PaginationLinks
            page={berita.meta.page}
            totalPages={berita.meta.totalPages}
            total={berita.meta.total}
            basePath="/berita"
            params={{ q, kategori }}
          />
        )}
      </div>
    </div>
  );
}