import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { CalendarDays, ArrowRight, Bell } from "lucide-react";
import Link from "next/link";
import { getPublicPengumumanList } from "@/app/(main)/dashboard/pengumuman/action";

export default async function PengumumanPage() {
  const announcements = await getPublicPengumumanList();

  return (
    <div className="flex-1 bg-slate-50">
      {/* Header */}
      <div className="border-b bg-white">
        <div className="container mx-auto px-4 py-12 text-center sm:px-6 lg:px-8">
          <div className="bg-primary/10 text-primary mb-6 inline-flex h-16 w-16 items-center justify-center rounded-2xl">
            <Bell className="h-8 w-8" />
          </div>
          <h1 className="text-3xl font-bold tracking-tight text-slate-900 sm:text-4xl">Pengumuman & Berita</h1>
          <p className="mx-auto mt-4 max-w-2xl text-lg text-slate-600">
            Informasi terbaru seputar kegiatan akademik, prestasi, dan agenda sekolah.
          </p>
        </div>
      </div>

      {/* List */}
      <div className="container mx-auto px-4 py-12 sm:px-6 lg:px-8">
        {announcements.length === 0 ? (
          <div className="py-20 text-center">
            <p className="text-lg text-slate-500">Belum ada pengumuman saat ini.</p>
          </div>
        ) : (
          <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
            {announcements.map((item) => (
              <Card key={item.id} className="flex h-full flex-col transition-shadow duration-200 hover:shadow-lg">
                <CardHeader>
                  <div className="mb-2 flex items-center justify-between">
                    <Badge variant={item.kategori === "Akademik" ? "default" : "secondary"}>{item.kategori}</Badge>
                    <div className="text-muted-foreground flex items-center text-xs">
                      <CalendarDays className="mr-1 h-3 w-3" />
                      {new Date(item.tanggal).toLocaleDateString("id-ID", {
                        day: "numeric",
                        month: "long",
                        year: "numeric",
                      })}
                    </div>
                  </div>
                  <CardTitle className="line-clamp-2 leading-tight">{item.judul}</CardTitle>
                </CardHeader>
                <CardContent className="flex-1">
                  <p className="line-clamp-3 text-sm text-slate-600">{item.excerpt || item.isi.substring(0, 150)}...</p>
                </CardContent>
                <CardFooter className="pt-0">
                  <Button
                    variant="ghost"
                    className="group hover:text-primary w-full justify-between px-0 hover:bg-transparent"
                  >
                    Baca Selengkapnya
                    <ArrowRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" />
                  </Button>
                </CardFooter>
              </Card>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}