import Link from "next/link";
import { notFound } from "next/navigation";
import {
  ArrowLeft,
  ArrowRight,
  CalendarDays,
  Eye,
  Newspaper,
  UserRound,
} from "lucide-react";
import type { Artikel, Paginated } from "@/lib/types";
import { serverGet } from "@/lib/api";
import { formatDate, stripHtml } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";

export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  const artikel = await serverGet<Artikel>(`/artikel/publik/${slug}`);
  return {
    title: artikel?.judul ?? "Berita Desa",
    description: artikel?.ringkasan ?? undefined,
  };
}

export default async function ArtikelPage({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  const artikel = await serverGet<Artikel>(`/artikel/publik/${slug}`);
  if (!artikel) notFound();

  const lain = await serverGet<Paginated<Artikel>>("/artikel/publik?limit=4");
  const terkait = (lain?.data ?? []).filter((item) => item.slug !== artikel.slug).slice(0, 3);
  const isHtml = /<[a-z][\s\S]*>/i.test(artikel.isi);

  return (
    <div className="animate-fade-in">
      <section className="border-b bg-secondary/40 py-10">
        <div className="container max-w-3xl">
          <Link
            href="/berita"
            className="inline-flex items-center gap-1.5 text-sm text-muted-foreground transition-colors hover:text-foreground"
          >
            <ArrowLeft className="h-4 w-4" />
            Semua berita
          </Link>

          <div className="mt-5 flex flex-wrap items-center gap-2">
            {artikel.kategori && <Badge>{artikel.kategori.nama}</Badge>}
            {artikel.headline && <Badge variant="warning">Headline</Badge>}
          </div>

          <h1 className="mt-3 text-3xl font-bold leading-tight tracking-tight text-balance sm:text-4xl">
            {artikel.judul}
          </h1>

          <div className="mt-4 flex flex-wrap items-center gap-4 text-xs text-muted-foreground">
            <span className="inline-flex items-center gap-1.5">
              <UserRound className="h-3.5 w-3.5" />
              {artikel.penulis?.nama ?? "Pemerintah Desa"}
            </span>
            <span className="inline-flex items-center gap-1.5">
              <CalendarDays className="h-3.5 w-3.5" />
              {formatDate(artikel.publishedAt ?? artikel.createdAt)}
            </span>
            <span className="inline-flex items-center gap-1.5">
              <Eye className="h-3.5 w-3.5" />
              {artikel.dibaca} kali dibaca
            </span>
          </div>
        </div>
      </section>

      <div className="container grid max-w-6xl gap-8 py-10 lg:grid-cols-[1fr_300px]">
        <article className="min-w-0">
          <div className="relative flex h-56 items-center justify-center overflow-hidden rounded-2xl bg-brand-deep sm:h-72">
            <div className="article-glow absolute inset-0 opacity-60" />
            <Newspaper className="relative h-14 w-14 text-white/60" />
          </div>

          {artikel.ringkasan && (
            <p className="mt-6 border-l-4 border-primary pl-4 text-base font-medium leading-relaxed text-foreground/80">
              {artikel.ringkasan}
            </p>
          )}

          {isHtml ? (
            <div
              className="prose-desa mt-6"
              dangerouslySetInnerHTML={{ __html: artikel.isi }}
            />
          ) : (
            <div className="prose-desa mt-6">
              {artikel.isi
                .split(/\n{2,}/)
                .filter(Boolean)
                .map((paragraph, index) => (
                  <p key={index}>{paragraph}</p>
                ))}
            </div>
          )}

          <div className="mt-8 flex flex-wrap items-center justify-between gap-3 border-t pt-6">
            <p className="text-sm text-muted-foreground">
              {stripHtml(artikel.ringkasan ?? artikel.isi).slice(0, 90)}…
            </p>
            <Button asChild variant="outline">
              <Link href="/berita">
                Berita lainnya
                <ArrowRight className="h-4 w-4" />
              </Link>
            </Button>
          </div>
        </article>

        <aside className="space-y-4">
          <div className="rounded-2xl border border-border bg-card p-5 shadow-sm">
            <h2 className="text-sm font-semibold uppercase tracking-wider text-muted-foreground">
              Berita Lainnya
            </h2>
            <div className="mt-4 space-y-4">
              {terkait.length ? (
                terkait.map((item) => (
                  <Link
                    key={item.id}
                    href={`/berita/${item.slug}`}
                    className="group block border-b pb-4 last:border-0 last:pb-0"
                  >
                    <div className="text-[11px] font-semibold uppercase tracking-wide text-primary">
                      {item.kategori?.nama ?? "Berita"}
                    </div>
                    <div className="mt-1 line-clamp-2 text-sm font-medium leading-snug transition-colors group-hover:text-primary">
                      {item.judul}
                    </div>
                    <div className="mt-1 text-xs text-muted-foreground">
                      {formatDate(item.publishedAt ?? item.createdAt)}
                    </div>
                  </Link>
                ))
              ) : (
                <p className="text-sm text-muted-foreground">Belum ada berita lain.</p>
              )}
            </div>
          </div>

          <div className="rounded-2xl bg-brand-deep p-5 text-white shadow-sm">
            <div className="text-sm font-semibold">Transparansi Desa</div>
            <p className="mt-2 text-xs leading-relaxed text-white/75">
              Lihat bagaimana anggaran desa dikelola dan direalisasikan untuk pembangunan.
            </p>
            <Button
              asChild
              size="sm"
              className="mt-4 bg-white text-primary hover:bg-white/90"
            >
              <Link href="/apbdes">Buka APBDes</Link>
            </Button>
          </div>
        </aside>
      </div>
    </div>
  );
}