NextEdu/src/modules/announcements/components/announcement-list.tsx

"use client"

import { useMemo, useState } from "react"
import Link from "next/link"
import { useRouter } from "next/navigation"
import { Plus } from "lucide-react"

import { Button } from "@/shared/components/ui/button"
import { EmptyState } from "@/shared/components/ui/empty-state"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/shared/components/ui/select"
import { Megaphone } from "lucide-react"

import { AnnouncementCard } from "./announcement-card"
import type { Announcement, AnnouncementStatus } from "../types"

type Filter = "all" | AnnouncementStatus

const FILTER_OPTIONS: { value: Filter; label: string }[] = [
  { value: "all", label: "All" },
  { value: "published", label: "Published" },
  { value: "draft", label: "Draft" },
  { value: "archived", label: "Archived" },
]

export function AnnouncementList({
  announcements,
  canManage,
  createHref,
  detailHrefBuilder,
  initialStatus,
}: {
  announcements: Announcement[]
  canManage?: boolean
  createHref?: string
  detailHrefBuilder?: (id: string) => string
  initialStatus?: Filter
}) {
  const router = useRouter()
  const [filter, setFilter] = useState<Filter>(initialStatus ?? "all")

  const filtered = useMemo(() => {
    if (filter === "all") return announcements
    return announcements.filter((a) => a.status === filter)
  }, [announcements, filter])

  const handleFilterChange = (value: string) => {
    setFilter(value as Filter)
    const params = new URLSearchParams()
    if (value !== "all") params.set("status", value)
    const qs = params.toString()
    router.replace(qs ? `?${qs}` : "?")
  }

  return (
    <div className="space-y-6">
      <div className="flex flex-wrap items-center justify-between gap-3">
        <Select value={filter} onValueChange={handleFilterChange}>
          <SelectTrigger className="w-[180px]">
            <SelectValue placeholder="Filter by status" />
          </SelectTrigger>
          <SelectContent>
            {FILTER_OPTIONS.map((opt) => (
              <SelectItem key={opt.value} value={opt.value}>
                {opt.label}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
        {canManage && createHref ? (
          <Button asChild>
            <Link href={createHref}>
              <Plus className="mr-2 h-4 w-4" />
              New Announcement
            </Link>
          </Button>
        ) : null}
      </div>

      {filtered.length === 0 ? (
        <EmptyState
          title="No announcements"
          description={
            announcements.length === 0
              ? "There are no announcements yet."
              : "No announcements match the current filter."
          }
          icon={Megaphone}
          className="h-auto border-none shadow-none"
        />
      ) : (
        <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
          {filtered.map((a) => (
            <AnnouncementCard
              key={a.id}
              announcement={a}
              href={detailHrefBuilder ? detailHrefBuilder(a.id) : undefined}
            />
          ))}
        </div>
      )}
    </div>
  )
}