import { db } from "@/lib/db";
import { requireConfAccess } from "@/lib/rbac";
import { Card, EmptyState, PageHeader, btn, input, Field, Badge } from "@/components/ui";
import { createHall, createVenue, deleteHall, deleteVenue, updateVenue } from "../actions";

export const metadata = { title: "Venue & Halls" };

export default async function VenuePage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  await requireConfAccess(id, "agenda.manage");
  const [venues, orphanHalls] = await Promise.all([
    db.venue.findMany({
      where: { conferenceId: id },
      orderBy: { name: "asc" },
      include: { rooms: { orderBy: { name: "asc" }, include: { _count: { select: { sessions: true } } } } },
    }),
    db.room.findMany({
      where: { conferenceId: id, venueId: null },
      orderBy: { name: "asc" },
      include: { _count: { select: { sessions: true } } },
    }),
  ]);
  const totalCapacity = venues.flatMap((v) => v.rooms).concat(orphanHalls).reduce((s, r) => s + (r.capacity ?? 0), 0);

  return (
    <main>
      <PageHeader
        title="Venue & halls"
        sub={`${venues.length} venue${venues.length === 1 ? "" : "s"} · ${venues.reduce((s, v) => s + v.rooms.length, 0) + orphanHalls.length} halls · ${totalCapacity} total seats`}
      />

      <div className="grid gap-6 lg:grid-cols-3">
        <div className="space-y-4 lg:col-span-2">
          {venues.length === 0 && orphanHalls.length === 0 && (
            <EmptyState title="No venues yet" body="Add a venue, then add its conference halls with seating capacity. Halls become schedulable lanes in the agenda builder." />
          )}

          {venues.map((v) => (
            <Card key={v.id} className="p-5">
              <details>
                <summary className="flex cursor-pointer list-none items-start justify-between gap-3 [&::-webkit-details-marker]:hidden">
                  <div>
                    <div className="flex items-center gap-2">
                      <span className="text-base font-bold text-zinc-100">🏛️ {v.name}</span>
                      <Badge className="bg-indigo-500/10 text-indigo-600">{v.rooms.length} halls</Badge>
                      <Badge className="bg-emerald-500/10 text-emerald-600">{v.rooms.reduce((s, r) => s + (r.capacity ?? 0), 0)} seats</Badge>
                    </div>
                    <div className="mt-0.5 text-sm text-zinc-500">
                      {[v.address, v.city].filter(Boolean).join(", ") || "No address set"}
                      {v.mapUrl && <> · <a href={v.mapUrl} target="_blank" rel="noreferrer" className="text-indigo-600 hover:underline">Map ↗</a></>}
                    </div>
                  </div>
                  <span className="rounded-lg border border-white/70 bg-white/60 px-2.5 py-1 text-xs text-zinc-400">Edit ▾</span>
                </summary>
                <form action={updateVenue.bind(null, id, v.id)} className="mt-4 grid gap-3 rounded-xl border border-zinc-800/60 p-4 sm:grid-cols-2">
                  <Field name={`vn-${v.id}`} title="Venue name"><input id={`vn-${v.id}`} name="name" defaultValue={v.name} className={input} /></Field>
                  <Field name={`va-${v.id}`} title="Address"><input id={`va-${v.id}`} name="address" defaultValue={v.address ?? ""} className={input} /></Field>
                  <Field name={`vc-${v.id}`} title="City"><input id={`vc-${v.id}`} name="city" defaultValue={v.city ?? ""} className={input} /></Field>
                  <Field name={`vm-${v.id}`} title="Map URL"><input id={`vm-${v.id}`} name="mapUrl" defaultValue={v.mapUrl ?? ""} className={input} placeholder="https://maps.google.com/…" /></Field>
                  <div className="flex items-end gap-2">
                    <button className={btn.sm}>Save venue</button>
                  </div>
                </form>
              </details>

              <div className="mt-4 space-y-2">
                {v.rooms.map((r) => (
                  <div key={r.id} className="flex items-center justify-between rounded-xl border border-zinc-800/60 bg-white/40 px-4 py-2.5">
                    <div className="text-sm">
                      <span className="font-semibold text-zinc-200">🚪 {r.name}</span>
                      <span className="ml-3 text-xs text-zinc-500">
                        {r.capacity ? `${r.capacity} seats` : "capacity not set"}
                        {r.floor ? ` · floor ${r.floor}` : ""} · {r._count.sessions} session{r._count.sessions === 1 ? "" : "s"} scheduled
                      </span>
                    </div>
                    <form action={deleteHall.bind(null, id, r.id)}>
                      <button className="rounded-md px-2 py-1 text-xs text-zinc-600 transition hover:bg-red-500/10 hover:text-red-600" title="Delete hall (its sessions stay, unassigned)">✕</button>
                    </form>
                  </div>
                ))}
                <form action={createHall.bind(null, id)} className="flex flex-wrap gap-2">
                  <input type="hidden" name="venueId" value={v.id} />
                  <input name="name" placeholder="New hall name" required className={`${input} !w-48`} />
                  <input name="capacity" type="number" min={1} placeholder="Seats" className={`${input} !w-24`} />
                  <input name="floor" placeholder="Floor" className={`${input} !w-24`} />
                  <button className={btn.smSecondary}>+ Add hall</button>
                </form>
              </div>

              <div className="mt-4 border-t border-zinc-800/60 pt-3 text-right">
                <form action={deleteVenue.bind(null, id, v.id)}>
                  <button className="text-xs text-zinc-600 transition hover:text-red-600">Delete venue (halls are kept, unassigned)</button>
                </form>
              </div>
            </Card>
          ))}

          {orphanHalls.length > 0 && (
            <Card className="p-5">
              <h2 className="text-sm font-semibold text-zinc-300">Halls without a venue</h2>
              <p className="mt-0.5 text-xs text-zinc-500">Created before venues existed, or their venue was deleted. Re-add them under a venue above if needed.</p>
              <div className="mt-3 space-y-2">
                {orphanHalls.map((r) => (
                  <div key={r.id} className="flex items-center justify-between rounded-xl border border-dashed border-zinc-800/80 px-4 py-2.5">
                    <div className="text-sm">
                      <span className="font-semibold text-zinc-200">🚪 {r.name}</span>
                      <span className="ml-3 text-xs text-zinc-500">{r.capacity ? `${r.capacity} seats` : "capacity not set"} · {r._count.sessions} sessions</span>
                    </div>
                    <form action={deleteHall.bind(null, id, r.id)}>
                      <button className="rounded-md px-2 py-1 text-xs text-zinc-600 transition hover:bg-red-500/10 hover:text-red-600">✕</button>
                    </form>
                  </div>
                ))}
              </div>
            </Card>
          )}
        </div>

        <Card className="h-fit p-5">
          <h2 className="text-sm font-semibold text-zinc-200">Add venue</h2>
          <p className="mt-1 text-xs text-zinc-500">A venue is a physical location — each of its halls becomes a schedulable lane in the agenda.</p>
          <form action={createVenue.bind(null, id)} className="mt-4 space-y-3">
            <Field name="name" title="Venue name *"><input id="name" name="name" required className={input} placeholder="e.g. Bharat Mandapam" /></Field>
            <Field name="address" title="Address"><input id="address" name="address" className={input} placeholder="Pragati Maidan, Mathura Road" /></Field>
            <Field name="city" title="City"><input id="city" name="city" className={input} placeholder="New Delhi" /></Field>
            <Field name="mapUrl" title="Map link"><input id="mapUrl" name="mapUrl" className={input} placeholder="https://maps.google.com/…" /></Field>
            <Field name="description" title="Notes"><textarea id="description" name="description" rows={2} className={input} placeholder="Parking, accessibility, entry gates…" /></Field>
            <button className={`${btn.primary} w-full`}>Add venue</button>
          </form>
        </Card>
      </div>
    </main>
  );
}