import { db } from "@/lib/db";
import { requireConfAccess } from "@/lib/rbac";
import { Card, EmptyState, PageHeader, btn, input, Field, Badge } from "@/components/ui";
import { fmtDateTime } from "@/lib/utils";
import { createAnnouncement } from "../actions";

export const metadata = { title: "Announcements" };

export default async function AnnouncementsPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  await requireConfAccess(id, "content.manage");
  const announcements = await db.announcement.findMany({
    where: { conferenceId: id },
    orderBy: [{ pinned: "desc" }, { createdAt: "desc" }],
  });

  return (
    <main>
      <PageHeader title="Announcements" sub="Published on the conference homepage and pushed as in-app notifications to registered attendees." />
      <div className="grid gap-6 lg:grid-cols-3">
        <div className="space-y-3 lg:col-span-2">
          {announcements.length === 0 && <EmptyState title="No announcements yet" body="Schedule changes, venue updates, reminders — post them here." />}
          {announcements.map((a) => (
            <Card key={a.id} className="p-4">
              <div className="flex items-center gap-2">
                {a.pinned && <span title="Pinned">📌</span>}
                <span className="font-medium text-zinc-100">{a.title}</span>
                <Badge className="bg-zinc-800 text-zinc-400">{a.audience}</Badge>
                <span className="ml-auto text-xs text-zinc-600">{fmtDateTime(a.createdAt)}</span>
              </div>
              <p className="mt-1.5 text-sm text-zinc-400">{a.body}</p>
            </Card>
          ))}
        </div>
        <Card className="h-fit p-5">
          <h2 className="text-sm font-semibold text-zinc-200">New announcement</h2>
          <form action={createAnnouncement.bind(null, id)} className="mt-4 space-y-3">
            <Field name="title" title="Title *"><input id="title" name="title" required className={input} /></Field>
            <Field name="body" title="Message"><textarea id="body" name="body" rows={4} className={input} /></Field>
            <Field name="audience" title="Audience">
              <select id="audience" name="audience" className={input} defaultValue="ALL">
                {["ALL", "ATTENDEES", "SPEAKERS", "SPONSORS", "VOLUNTEERS"].map((a) => <option key={a} value={a}>{a[0] + a.slice(1).toLowerCase()}</option>)}
              </select>
            </Field>
            <label className="flex items-center gap-2 text-sm text-zinc-400">
              <input type="checkbox" name="pinned" className="accent-indigo-500" /> Pin to top
            </label>
            <button className={`${btn.primary} w-full`}>Publish</button>
          </form>
        </Card>
      </div>
    </main>
  );
}