import type { Metadata } from "next";
import Link from "next/link";
import { notFound, redirect } from "next/navigation";
import { ActionForm, SubmitButton } from "@/components/forms";
import { PageHeader } from "@/components/status";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { FieldGroup } from "@/components/ui/field";
import { api, getMe, unwrap } from "@/lib/api";
import { closeRoom, saveRoom } from "../../actions";
import { RoomFields } from "../../room-fields";

export const metadata: Metadata = { title: "Edit room" };

export default async function EditRoom({ params }: { params: Promise<{ n: string }> }) {
  const { n } = await params;
  if (!/^[0-9]{1,9}$/.test(n)) notFound();
  const me = await getMe();
  if (!me) redirect(`/signin?next=/rooms/${n}/edit`);
  const [{ rooms }, { links }] = await Promise.all([
    api["hosted-rooms"].get({ query: { mine: "1" } }).then(unwrap),
    api.account.get().then(unwrap),
  ]);
  const room = rooms.find((r) => String(r.n) === n);
  if (!room) notFound();

  return (
    <div className="space-y-6">
      <PageHeader title={`Edit ${room.name}`}>
        <Link href="/rooms" className="underline-offset-4 hover:underline">
          Back to rooms
        </Link>
      </PageHeader>

      <Card>
        <CardHeader>
          <CardDescription>
            Owned by {room.ownerName} · {room.occupancy} here now
          </CardDescription>
        </CardHeader>
        <CardContent>
          <ActionForm action={saveRoom} fields={{ n: room.n }}>
            <FieldGroup>
              <RoomFields room={room} canAdult={links.some((l) => l.adult)} />
              <div>
                <SubmitButton pendingLabel="Saving…">Save</SubmitButton>
              </div>
            </FieldGroup>
          </ActionForm>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle>Close room</CardTitle>
          <CardDescription>Everyone in it is sent out. It can&apos;t be opened again.</CardDescription>
        </CardHeader>
        <CardContent>
          <ActionForm action={closeRoom} fields={{ n: room.n }}>
            <SubmitButton variant="destructive" pendingLabel="Closing…" confirm={`Close ${room.name}?`}>
              Close room
            </SubmitButton>
          </ActionForm>
        </CardContent>
      </Card>
    </div>
  );
}