import Link from "next/link";
import { notFound } from "next/navigation";
import { db } from "@/lib/db";
import { requireConfAccess } from "@/lib/rbac";
import { Badge, Card, PageHeader, StatusBadge, btn, input, Field } from "@/components/ui";
import { fmtDateTime, fmtTime } from "@/lib/utils";
import { LIVE_UPDATE_TYPES, LIVE_UPDATE_TYPE_META } from "@/lib/constants";
import { createLiveUpdate, deleteLiveUpdate, setLiveQuestionStatus, toggleLiveUpdateFeatured, updateLiveSettings } from "../actions";

export const metadata = { title: "Live Control" };

export default async function LiveControlPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  await requireConfAccess(id, "content.manage");
  const conf = await db.conference.findUnique({
    where: { id },
    select: { name: true, slug: true, status: true, streamUrl: true, hashtags: true },
  });
  if (!conf) notFound();

  const [updates, questions, sessions, speakers] = await Promise.all([
    db.liveUpdate.findMany({
      where: { conferenceId: id },
      orderBy: { createdAt: "desc" },
      take: 50,
      include: { speaker: { select: { name: true } }, session: { select: { title: true } } },
    }),
    db.liveQuestion.findMany({ where: { conferenceId: id }, orderBy: { createdAt: "desc" }, take: 50 }),
    db.session.findMany({ where: { conferenceId: id }, orderBy: { startAt: "asc" }, select: { id: true, title: true } }),
    db.speaker.findMany({ where: { conferenceId: id }, orderBy: { name: "asc" }, select: { id: true, name: true } }),
  ]);
  const pending = questions.filter((q) => q.status === "PENDING");

  return (
    <main>
      <PageHeader
        title="🎛️ Live Conference Control"
        sub="Everything published here appears on attendee live screens within seconds — no refresh needed."
        action={
          <div className="flex items-center gap-2">
            <StatusBadge status={conf.status} />
            <Link href={`/live/${conf.slug}`} target="_blank" className={btn.primary}>Open live screen ↗</Link>
          </div>
        }
      />

      {/* Stream & hashtag config */}
      <Card className="mb-6 p-5">
        <h2 className="text-sm font-semibold text-zinc-200">Stream & social configuration</h2>
        <form action={updateLiveSettings.bind(null, id)} className="mt-3 grid gap-3 sm:grid-cols-[1fr_1fr_auto]">
          <Field name="streamUrl" title="YouTube Live URL (online/hybrid)">
            <input id="streamUrl" name="streamUrl" defaultValue={conf.streamUrl ?? ""} className={input} placeholder="https://www.youtube.com/watch?v=…" />
          </Field>
          <Field name="hashtags" title="Conference hashtags (comma-separated)">
            <input id="hashtags" name="hashtags" defaultValue={conf.hashtags ?? ""} className={input} placeholder="#TechBharat2026, #AIForBharat" />
          </Field>
          <div className="flex items-end"><button className={btn.secondary}>Save</button></div>
        </form>
        <p className="mt-2 text-xs text-zinc-500">
          The stream shows when the conference status is LIVE. Statuses: PUBLISHED → “starting soon” countdown · LIVE → stream · COMPLETED → knowledge portal.
        </p>
      </Card>

      <div className="grid gap-6 xl:grid-cols-5">
        {/* Publisher */}
        <Card className="h-fit p-5 xl:col-span-2">
          <h2 className="text-sm font-semibold text-zinc-200">📡 Publish update</h2>
          <form action={createLiveUpdate.bind(null, id)} className="mt-4 space-y-3">
            <div className="grid grid-cols-2 gap-3">
              <Field name="type" title="Type *">
                <select id="type" name="type" className={input} defaultValue="KEY_POINT">
                  {LIVE_UPDATE_TYPES.map((t) => <option key={t} value={t}>{LIVE_UPDATE_TYPE_META[t].icon} {LIVE_UPDATE_TYPE_META[t].label}</option>)}
                </select>
              </Field>
              <Field name="sessionId" title="Session">
                <select id="sessionId" name="sessionId" className={input} defaultValue="">
                  <option value="">—</option>
                  {sessions.map((s) => <option key={s.id} value={s.id}>{s.title}</option>)}
                </select>
              </Field>
            </div>
            <Field name="title" title="Title *"><input id="title" name="title" required className={input} placeholder="AI & India's Digital Future" /></Field>
            <Field name="body" title="Description"><textarea id="body" name="body" rows={2} className={input} placeholder="Short description shown under the title" /></Field>
            <Field name="quote" title="Quote (for Quote type)"><input id="quote" name="quote" className={input} placeholder="Technology must reach every citizen…" /></Field>
            <div className="grid grid-cols-2 gap-3">
              <Field name="statValue" title="Stat value"><input id="statValue" name="statValue" className={input} placeholder="42%" /></Field>
              <Field name="statLabel" title="Stat label"><input id="statLabel" name="statLabel" className={input} placeholder="increase in adoption" /></Field>
              <Field name="speakerId" title="Speaker">
                <select id="speakerId" name="speakerId" className={input} defaultValue="">
                  <option value="">—</option>
                  {speakers.map((s) => <option key={s.id} value={s.id}>{s.name}</option>)}
                </select>
              </Field>
              <Field name="link" title="Link / resource URL"><input id="link" name="link" className={input} placeholder="https://…" /></Field>
            </div>
            <Field name="tags" title="Tags (comma-separated)"><input id="tags" name="tags" className={input} placeholder="AI, DPI, governance" /></Field>
            <label className="flex items-center gap-2 text-sm text-zinc-400">
              <input type="checkbox" name="featured" className="accent-indigo-500" /> ⭐ Featured / important
            </label>
            <button className={`${btn.primary} w-full`}>Publish now</button>
          </form>
        </Card>

        <div className="space-y-6 xl:col-span-3">
          {/* Q&A moderation */}
          <Card className="p-5">
            <h2 className="text-sm font-semibold text-zinc-200">
              🙋 Q&A moderation {pending.length > 0 && <Badge className="ml-2 bg-amber-500/10 text-amber-600">{pending.length} pending</Badge>}
            </h2>
            <div className="mt-3 space-y-2">
              {questions.length === 0 && <p className="text-sm text-zinc-500">Attendee questions land here for approval.</p>}
              {questions.map((q) => (
                <div key={q.id} className="flex items-start justify-between gap-3 rounded-xl border border-zinc-800/60 bg-white/40 p-3">
                  <div className="min-w-0">
                    <p className="text-sm text-zinc-200">“{q.question}”</p>
                    <div className="mt-0.5 text-xs text-zinc-500">{q.name} · {fmtDateTime(q.createdAt)} · <StatusBadge status={q.status === "PENDING" ? "PENDING" : q.status === "APPROVED" ? "CONFIRMED" : "CANCELLED"} /></div>
                  </div>
                  <div className="flex shrink-0 gap-1.5">
                    {q.status !== "APPROVED" && (
                      <form action={setLiveQuestionStatus.bind(null, id, q.id, "APPROVED")}><button className={btn.sm}>Approve</button></form>
                    )}
                    {q.status !== "DISMISSED" && (
                      <form action={setLiveQuestionStatus.bind(null, id, q.id, "DISMISSED")}><button className={btn.smSecondary}>Dismiss</button></form>
                    )}
                  </div>
                </div>
              ))}
            </div>
          </Card>

          {/* Published updates */}
          <Card className="p-5">
            <h2 className="text-sm font-semibold text-zinc-200">📜 Published updates ({updates.length})</h2>
            <div className="mt-3 space-y-2">
              {updates.length === 0 && <p className="text-sm text-zinc-500">Nothing published yet — the attendee timeline is empty.</p>}
              {updates.map((u) => {
                const meta = LIVE_UPDATE_TYPE_META[u.type] ?? LIVE_UPDATE_TYPE_META.KEY_POINT;
                return (
                  <div key={u.id} className="flex items-start justify-between gap-3 rounded-xl border border-zinc-800/60 px-3 py-2.5">
                    <div className="min-w-0">
                      <div className="flex flex-wrap items-center gap-2 text-xs">
                        <span className="tabular-nums font-semibold text-zinc-400">{fmtTime(u.createdAt)}</span>
                        <Badge className="bg-indigo-500/10 text-indigo-600">{meta.icon} {meta.label}</Badge>
                        {u.featured && <span title="Featured">⭐</span>}
                        {u.session && <span className="text-zinc-500">{u.session.title}</span>}
                        {u.speaker && <span className="text-zinc-500">🎤 {u.speaker.name}</span>}
                      </div>
                      <div className="mt-0.5 truncate text-sm font-medium text-zinc-200">{u.title}</div>
                    </div>
                    <div className="flex shrink-0 gap-1">
                      <form action={toggleLiveUpdateFeatured.bind(null, id, u.id)}>
                        <button className="rounded-md px-1.5 py-1 text-xs text-zinc-500 hover:bg-white/60" title={u.featured ? "Unfeature" : "Feature"}>⭐</button>
                      </form>
                      <form action={deleteLiveUpdate.bind(null, id, u.id)}>
                        <button className="rounded-md px-1.5 py-1 text-xs text-zinc-600 transition hover:bg-red-500/10 hover:text-red-600">✕</button>
                      </form>
                    </div>
                  </div>
                );
              })}
            </div>
          </Card>
        </div>
      </div>
    </main>
  );
}