wedding-website/app/admin/guests/new/page.tsx

import Link from "next/link"
import { redirect } from "next/navigation"

import { createInvitationWithMembers } from "@/lib/db/queries/invitations"
import { supportedLanguages } from "@/lib/i18n/config"
import { createInvitationSchema } from "@/lib/validation/invitation"
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
import { Button } from "@/components/ui/button"
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import { Checkbox } from "@/components/ui/checkbox"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import { Textarea } from "@/components/ui/textarea"

export const dynamic = "force-dynamic"

function getMembersFromFormData(formData: FormData) {
  return Array.from({ length: 8 }, (_, index) =>
    formData.get(`member-${index}`)?.toString().trim(),
  ).filter((value): value is string => Boolean(value))
}

async function createInvitationAction(formData: FormData) {
  "use server"

  const parsed = createInvitationSchema.safeParse({
    displayName: formData.get("displayName"),
    language: formData.get("language"),
    contactEmail: formData.get("contactEmail"),
    contactPhone: formData.get("contactPhone"),
    maxPartySize: formData.get("maxPartySize"),
    allowMemberEdits: formData.has("allowMemberEdits"),
    notes: formData.get("notes"),
    members: getMembersFromFormData(formData),
  })

  if (!parsed.success) {
    const message = parsed.error.issues[0]?.message ?? "Invalid invitation data"
    redirect(`/admin/guests/new?error=${encodeURIComponent(message)}`)
  }

  const invitation = await createInvitationWithMembers(parsed.data)
  redirect(`/admin/guests/${invitation.id}?created=1`)
}

export default async function NewGuestPage({
  searchParams,
}: {
  searchParams: Promise<{ error?: string }>
}) {
  const { error } = await searchParams

  return (
    <div className="mx-auto max-w-3xl space-y-6">
      <div className="flex items-center justify-between gap-4">
        <div>
          <h1 className="text-3xl font-semibold tracking-tight">New invitation</h1>
          <p className="text-muted-foreground">
            Create a private invite link and define the people included in it.
          </p>
        </div>
        <Button asChild variant="outline">
          <Link href="/admin/guests">Back to list</Link>
        </Button>
      </div>

      {error ? (
        <Alert variant="destructive">
          <AlertTitle>Could not create invitation</AlertTitle>
          <AlertDescription>{error}</AlertDescription>
        </Alert>
      ) : null}

      <form action={createInvitationAction}>
        <Card>
          <CardHeader>
            <CardTitle>Invitation details</CardTitle>
            <CardDescription>
              The selected language will control the guest-facing invitation page.
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-8">
            <div className="grid gap-4 sm:grid-cols-2">
              <div className="space-y-2 sm:col-span-2">
                <Label htmlFor="displayName">Display name</Label>
                <Input
                  id="displayName"
                  name="displayName"
                  placeholder="Ana & Luis or The Garcia Family"
                  required
                />
              </div>

              <div className="space-y-2">
                <Label htmlFor="language">Language</Label>
                <Select name="language" required>
                  <SelectTrigger id="language" className="w-full">
                    <SelectValue placeholder="Select language" />
                  </SelectTrigger>
                  <SelectContent>
                    {supportedLanguages.map((language) => (
                      <SelectItem key={language.code} value={language.code}>
                        {language.label}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>

              <div className="space-y-2">
                <Label htmlFor="maxPartySize">Max party size</Label>
                <Input
                  id="maxPartySize"
                  name="maxPartySize"
                  type="number"
                  min="1"
                  defaultValue="1"
                  required
                />
              </div>

              <div className="space-y-2">
                <Label htmlFor="contactEmail">Contact email</Label>
                <Input id="contactEmail" name="contactEmail" type="email" />
              </div>

              <div className="space-y-2">
                <Label htmlFor="contactPhone">Contact phone</Label>
                <Input id="contactPhone" name="contactPhone" />
              </div>

              <div className="space-y-2 sm:col-span-2">
                <Label htmlFor="notes">Admin notes</Label>
                <Textarea
                  id="notes"
                  name="notes"
                  placeholder="Anything only admins need to remember."
                />
              </div>

              <div className="flex items-center gap-3 rounded-md border p-4 sm:col-span-2">
                <Checkbox id="allowMemberEdits" name="allowMemberEdits" />
                <div className="space-y-1">
                  <Label htmlFor="allowMemberEdits">Allow guest member edits</Label>
                  <p className="text-sm text-muted-foreground">
                    Useful for flexible +1s. Guest editing is not implemented until the RSVP milestone.
                  </p>
                </div>
              </div>
            </div>

            <div className="space-y-4">
              <div>
                <h2 className="font-medium">Initial members</h2>
                <p className="text-sm text-muted-foreground">
                  Add at least one person. The first member is marked as the primary contact.
                </p>
              </div>
              <div className="grid gap-4 sm:grid-cols-2">
                {Array.from({ length: 8 }, (_, index) => (
                  <div className="space-y-2" key={index}>
                    <Label htmlFor={`member-${index}`}>
                      Member {index + 1}
                      {index === 0 ? " (primary)" : ""}
                    </Label>
                    <Input
                      id={`member-${index}`}
                      name={`member-${index}`}
                      placeholder={index === 0 ? "Ana Garcia" : "Optional"}
                      required={index === 0}
                    />
                  </div>
                ))}
              </div>
            </div>
          </CardContent>
          <CardFooter className="justify-end gap-3">
            <Button asChild variant="outline">
              <Link href="/admin/guests">Cancel</Link>
            </Button>
            <Button type="submit">Create invitation</Button>
          </CardFooter>
        </Card>
      </form>
    </div>
  )
}