import { requireOrganizer } from "@/lib/auth";
import { db } from "@/lib/db";
import { Card, Field, input, btn, PageHeader } from "@/components/ui";
import { CONFERENCE_CATEGORIES, CONFERENCE_TYPES } from "@/lib/constants";
import { createConferenceAction } from "./actions";

export const metadata = { title: "New conference" };

export default async function NewConferencePage({
  searchParams,
}: {
  searchParams: Promise<{ error?: string }>;
}) {
  const user = await requireOrganizer();
  const { error } = await searchParams;
  const orgs = await db.organization.findMany({
    where: { members: { some: { userId: user.id } } },
    orderBy: { name: "asc" },
  });

  return (
    <main className="mx-auto max-w-3xl px-4 py-8">
      <PageHeader title="Create a conference" sub="A public website, registration engine, and workspace are generated automatically." />
      {error && <div className="mb-5 rounded-lg border border-red-500/30 bg-red-500/10 px-4 py-3 text-sm text-red-600">{error}</div>}

      <form action={createConferenceAction} className="space-y-6">
        <Card className="grid gap-4 p-5 sm:grid-cols-2">
          <div className="sm:col-span-2">
            <Field name="name" title="Conference name *">
              <input id="name" name="name" required className={input} placeholder="e.g. National AI Research Summit 2026" />
            </Field>
          </div>
          <Field name="type" title="Type *">
            <select id="type" name="type" className={input} defaultValue="HYBRID">
              {CONFERENCE_TYPES.map((t) => <option key={t} value={t}>{t[0] + t.slice(1).toLowerCase()}</option>)}
            </select>
          </Field>
          <Field name="category" title="Category">
            <select id="category" name="category" className={input} defaultValue="TECH">
              {CONFERENCE_CATEGORIES.map((c) => <option key={c} value={c}>{c[0] + c.slice(1).toLowerCase()}</option>)}
            </select>
          </Field>
          <Field name="startAt" title="Start date *">
            <input id="startAt" name="startAt" type="datetime-local" required className={input} />
          </Field>
          <Field name="endAt" title="End date *">
            <input id="endAt" name="endAt" type="datetime-local" required className={input} />
          </Field>
          <div className="sm:col-span-2">
            <Field name="tagline" title="Tagline">
              <input id="tagline" name="tagline" className={input} placeholder="One line that sells the event" />
            </Field>
          </div>
          <div className="sm:col-span-2">
            <Field name="description" title="Description">
              <textarea id="description" name="description" rows={4} className={input} placeholder="What is this conference about?" />
            </Field>
          </div>
        </Card>

        <Card className="grid gap-4 p-5 sm:grid-cols-2">
          <Field name="orgChoice" title="Organizing body *">
            <select id="orgChoice" name="orgChoice" className={input} defaultValue={orgs[0]?.id ?? "__new"}>
              {orgs.map((o) => <option key={o.id} value={o.id}>{o.name}</option>)}
              <option value="__new">＋ Create new organization…</option>
            </select>
          </Field>
          <Field name="newOrgName" title="New organization name (if creating)">
            <input id="newOrgName" name="newOrgName" className={input} placeholder={user.organization ?? "e.g. IIT Delhi"} />
          </Field>
          <Field name="venueName" title="Venue (physical/hybrid)">
            <input id="venueName" name="venueName" className={input} placeholder="e.g. Bharat Mandapam" />
          </Field>
          <Field name="city" title="City">
            <input id="city" name="city" className={input} placeholder="New Delhi" />
          </Field>
          <Field name="capacity" title="Capacity">
            <input id="capacity" name="capacity" type="number" min={1} className={input} placeholder="500" />
          </Field>
          <Field name="primaryColor" title="Brand color">
            <input id="primaryColor" name="primaryColor" type="color" defaultValue="#4f46e5" className="h-10 w-full cursor-pointer rounded-lg border border-zinc-700 bg-zinc-900 px-1" />
          </Field>
        </Card>

        <div className="flex items-center justify-end gap-3">
          <span className="text-xs text-zinc-600">Created as a draft — publish when ready.</span>
          <button type="submit" className={btn.primary}>Create conference</button>
        </div>
      </form>
    </main>
  );
}