"use client"

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

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 { AnnouncementsServiceProvider } from "./announcements-service-context"
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 t = useTranslations("announcements")
  const router = useRouter()
  const [createOpen, setCreateOpen] = useState(false)

  // P1-8: 表单提交成功后关闭 Dialog 并刷新列表，而非整页路由跳转
  const handleFormSuccess = (): void => {
    setCreateOpen(false)
    router.refresh()
  }

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

  return (
    <AnnouncementsServiceProvider>
      <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">{t("title.adminList")}</h2>
            <p className="text-muted-foreground">
              {t("description.adminList")}
            </p>
          </div>
          <Button onClick={() => setCreateOpen(true)}>
            <PlusCircle className="mr-2 h-4 w-4" />
            {t("actions.new")}
          </Button>
        </div>

        <AnnouncementList
          announcements={announcements}
          canManage
          initialStatus={initialStatus}
          detailHrefPrefix="/admin/announcements"
        />

        <Dialog open={createOpen} onOpenChange={handleOpenChange}>
          <DialogContent className="max-h-[90vh] max-w-2xl overflow-y-auto">
            <DialogHeader>
              <DialogTitle>{t("title.create")}</DialogTitle>
            </DialogHeader>
            <AnnouncementForm
              mode="create"
              grades={grades}
              classes={classes}
              onSuccess={handleFormSuccess}
              onCancel={handleFormSuccess}
            />
          </DialogContent>
        </Dialog>
      </div>
    </AnnouncementsServiceProvider>
  )
}
