import { notFound } from "next/navigation";
import { db } from "@/lib/db";
import { requireConfAccess } from "@/lib/rbac";
import { Card, PageHeader, btn, input, Field, StatusBadge } from "@/components/ui";
import { CONFERENCE_STATUSES } from "@/lib/constants";
import { setConferenceStatus, updateConference } from "../actions";

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

function toLocal(d: Date | null): string {
  if (!d) return "";
  const pad = (n: number) => String(n).padStart(2, "0");
  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
}

export default async function SettingsPage({
  params,
  searchParams,
}: {
  params: Promise<{ id: string }>;
  searchParams: Promise<{ saved?: string }>;
}) {
  const { id } = await params;
  const { saved } = await searchParams;
  await requireConfAccess(id, "conference.manage");
  const conf = await db.conference.findUnique({ where: { id }, include: { members: { include: { user: true } } } });
  if (!conf) notFound();

  return (
    <main>
      <PageHeader title="Settings" sub={`Public site: /c/${conf.slug}`} />
      {saved && <div className="mb-4 rounded-lg border border-emerald-500/30 bg-emerald-500/10 px-4 py-3 text-sm text-emerald-600">Settings saved.</div>}

      <Card className="mb-6 flex flex-wrap items-center justify-between gap-3 p-5">
        <div className="flex items-center gap-3">
          <StatusBadge status={conf.status} />
          <span className="text-sm text-zinc-500">
            Draft → Published (public site live) → Live (event running) → Completed → Archived
          </span>
        </div>
        <div className="flex gap-1.5">
          {CONFERENCE_STATUSES.filter((s) => s !== conf.status).map((s) => (
            <form key={s} action={setConferenceStatus.bind(null, id, s)}>
              <button className={btn.smSecondary}>{s[0] + s.slice(1).toLowerCase()}</button>
            </form>
          ))}
        </div>
      </Card>

      <form action={updateConference.bind(null, id)} className="space-y-6">
        <Card className="grid gap-4 p-5 sm:grid-cols-2">
          <h2 className="text-sm font-semibold text-zinc-200 sm:col-span-2">Basics</h2>
          <Field name="name" title="Name"><input id="name" name="name" defaultValue={conf.name} className={input} /></Field>
          <Field name="type" title="Type">
            <select id="type" name="type" defaultValue={conf.type} className={input}>
              <option value="PHYSICAL">Physical</option><option value="VIRTUAL">Virtual</option><option value="HYBRID">Hybrid</option>
            </select>
          </Field>
          <div className="sm:col-span-2">
            <Field name="tagline" title="Tagline"><input id="tagline" name="tagline" defaultValue={conf.tagline ?? ""} className={input} /></Field>
          </div>
          <div className="sm:col-span-2">
            <Field name="description" title="Description"><textarea id="description" name="description" rows={4} defaultValue={conf.description ?? ""} className={input} /></Field>
          </div>
          <Field name="theme" title="Theme"><input id="theme" name="theme" defaultValue={conf.theme ?? ""} className={input} /></Field>
          <Field name="languages" title="Languages"><input id="languages" name="languages" defaultValue={conf.languages ?? ""} className={input} placeholder="English, Hindi" /></Field>
          <Field name="startAt" title="Starts"><input id="startAt" name="startAt" type="datetime-local" defaultValue={toLocal(conf.startAt)} className={input} /></Field>
          <Field name="endAt" title="Ends"><input id="endAt" name="endAt" type="datetime-local" defaultValue={toLocal(conf.endAt)} className={input} /></Field>
        </Card>

        <Card className="grid gap-4 p-5 sm:grid-cols-2">
          <h2 className="text-sm font-semibold text-zinc-200 sm:col-span-2">Venue & access</h2>
          <Field name="venueName" title="Venue"><input id="venueName" name="venueName" defaultValue={conf.venueName ?? ""} className={input} /></Field>
          <Field name="venueAddress" title="Address"><input id="venueAddress" name="venueAddress" defaultValue={conf.venueAddress ?? ""} className={input} /></Field>
          <Field name="city" title="City"><input id="city" name="city" defaultValue={conf.city ?? ""} className={input} /></Field>
          <Field name="country" title="Country"><input id="country" name="country" defaultValue={conf.country ?? ""} className={input} /></Field>
          <Field name="streamUrl" title="Stream URL (virtual/hybrid)"><input id="streamUrl" name="streamUrl" defaultValue={conf.streamUrl ?? ""} className={input} placeholder="https://zoom.us/… or RTMP/YouTube" /></Field>
          <Field name="capacity" title="Capacity"><input id="capacity" name="capacity" type="number" defaultValue={conf.capacity ?? ""} className={input} /></Field>
        </Card>

        <Card className="grid gap-4 p-5 sm:grid-cols-2">
          <h2 className="text-sm font-semibold text-zinc-200 sm:col-span-2">Registration & CFP</h2>
          <Field name="regOpensAt" title="Registration opens"><input id="regOpensAt" name="regOpensAt" type="datetime-local" defaultValue={toLocal(conf.regOpensAt)} className={input} /></Field>
          <Field name="regClosesAt" title="Registration closes"><input id="regClosesAt" name="regClosesAt" type="datetime-local" defaultValue={toLocal(conf.regClosesAt)} className={input} /></Field>
          <label className="flex items-center gap-2 text-sm text-zinc-300">
            <input type="checkbox" name="cfpOpen" defaultChecked={conf.cfpOpen} className="accent-indigo-500" /> Call for Papers open
          </label>
          <Field name="cfpDeadline" title="CFP deadline"><input id="cfpDeadline" name="cfpDeadline" type="datetime-local" defaultValue={toLocal(conf.cfpDeadline)} className={input} /></Field>
        </Card>

        <Card className="grid gap-4 p-5 sm:grid-cols-2">
          <h2 className="text-sm font-semibold text-zinc-200 sm:col-span-2">Branding & contact</h2>
          <Field name="primaryColor" title="Brand color">
            <input id="primaryColor" name="primaryColor" type="color" defaultValue={conf.primaryColor} className="h-10 w-full cursor-pointer rounded-lg border border-zinc-700 bg-zinc-900 px-1" />
          </Field>
          <Field name="contactEmail" title="Contact email"><input id="contactEmail" name="contactEmail" defaultValue={conf.contactEmail ?? ""} className={input} /></Field>
          <Field name="contactPhone" title="Contact phone"><input id="contactPhone" name="contactPhone" defaultValue={conf.contactPhone ?? ""} className={input} /></Field>
        </Card>

        <div className="flex justify-end"><button className={btn.primary}>Save settings</button></div>
      </form>

      <Card className="mt-6 p-5">
        <h2 className="text-sm font-semibold text-zinc-200">Team</h2>
        <div className="mt-3 divide-y divide-zinc-800/70">
          {conf.members.map((m) => (
            <div key={m.id} className="flex items-center justify-between py-2 text-sm">
              <div>
                <span className="font-medium text-zinc-200">{m.user.name}</span>
                <span className="ml-2 text-xs text-zinc-500">{m.user.email}</span>
              </div>
              <span className="rounded-md bg-zinc-800 px-2 py-0.5 text-xs text-zinc-400">{m.role.replace(/_/g, " ")}</span>
            </div>
          ))}
        </div>
      </Card>
    </main>
  );
}