"use client"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { PlusCircle } from "lucide-react"

import { Button } from "@/shared/components/ui/button"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/shared/components/ui/dialog"

import { AnnouncementForm } from "./announcement-form"
import { AnnouncementList } from "./announcement-list"
import type { Announcement, AnnouncementStatus } from "../types"

export function AdminAnnouncementsView({
  announcements,
  grades = [],
  classes = [],
  initialStatus,
}: {
  announcements: Announcement[]
  grades?: { id: string; name: string }[]
  classes?: { id: string; name: string }[]
  initialStatus?: AnnouncementStatus
}) {
  const router = useRouter()
  const [createOpen, setCreateOpen] = useState(false)

  const handleOpenChange = (open: boolean) => {
    setCreateOpen(open)
    if (!open) router.refresh()
  }

  return (
    <div className="flex h-full flex-col space-y-8 p-8">
      <div className="flex items-center justify-between space-y-2">
        <div>
          <h2 className="text-2xl font-bold tracking-tight">Announcements</h2>
          <p className="text-muted-foreground">
            Create and manage school-wide announcements.
          </p>
        </div>
        <Button onClick={() => setCreateOpen(true)}>
          <PlusCircle className="mr-2 h-4 w-4" />
          New Announcement
        </Button>
      </div>

      <AnnouncementList
        announcements={announcements}
        canManage
        initialStatus={initialStatus}
        detailHrefBuilder={(id) => `/admin/announcements/${id}`}
      />

      <Dialog open={createOpen} onOpenChange={handleOpenChange}>
        <DialogContent className="max-h-[90vh] max-w-2xl overflow-y-auto">
          <DialogHeader>
            <DialogTitle>New Announcement</DialogTitle>
          </DialogHeader>
          <AnnouncementForm mode="create" grades={grades} classes={classes} />
        </DialogContent>
      </Dialog>
    </div>
  )
}