MOPC-Portal/src/app/(admin)/admin/rounds/new/page.tsx

'use client'

import { Suspense, useState } from 'react'
import Link from 'next/link'
import { useRouter, useSearchParams } from 'next/navigation'
import { useForm } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import { z } from 'zod'
import { trpc } from '@/lib/trpc/client'
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'
import { Skeleton } from '@/components/ui/skeleton'
import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from '@/components/ui/form'
import { ArrowLeft, Loader2, AlertCircle } from 'lucide-react'

const createRoundSchema = z.object({
  programId: z.string().min(1, 'Please select a program'),
  name: z.string().min(1, 'Name is required').max(255),
  requiredReviews: z.number().int().min(1).max(10),
  votingStartAt: z.string().optional(),
  votingEndAt: z.string().optional(),
}).refine((data) => {
  if (data.votingStartAt && data.votingEndAt) {
    return new Date(data.votingEndAt) > new Date(data.votingStartAt)
  }
  return true
}, {
  message: 'End date must be after start date',
  path: ['votingEndAt'],
})

type CreateRoundForm = z.infer<typeof createRoundSchema>

function CreateRoundContent() {
  const router = useRouter()
  const searchParams = useSearchParams()
  const programIdParam = searchParams.get('program')

  const { data: programs, isLoading: loadingPrograms } = trpc.program.list.useQuery()

  const createRound = trpc.round.create.useMutation({
    onSuccess: (data) => {
      router.push(`/admin/rounds/${data.id}`)
    },
  })

  const form = useForm<CreateRoundForm>({
    resolver: zodResolver(createRoundSchema),
    defaultValues: {
      programId: programIdParam || '',
      name: '',
      requiredReviews: 3,
      votingStartAt: '',
      votingEndAt: '',
    },
  })

  const onSubmit = async (data: CreateRoundForm) => {
    await createRound.mutateAsync({
      programId: data.programId,
      name: data.name,
      requiredReviews: data.requiredReviews,
      votingStartAt: data.votingStartAt ? new Date(data.votingStartAt) : undefined,
      votingEndAt: data.votingEndAt ? new Date(data.votingEndAt) : undefined,
    })
  }

  if (loadingPrograms) {
    return <CreateRoundSkeleton />
  }

  if (!programs || programs.length === 0) {
    return (
      <div className="space-y-6">
        <Button variant="ghost" asChild className="-ml-4">
          <Link href="/admin/rounds">
            <ArrowLeft className="mr-2 h-4 w-4" />
            Back to Rounds
          </Link>
        </Button>

        <Card>
          <CardContent className="flex flex-col items-center justify-center py-12 text-center">
            <AlertCircle className="h-12 w-12 text-muted-foreground/50" />
            <p className="mt-2 font-medium">No Programs Found</p>
            <p className="text-sm text-muted-foreground">
              Create a program first before creating rounds
            </p>
            <Button asChild className="mt-4">
              <Link href="/admin/programs/new">Create Program</Link>
            </Button>
          </CardContent>
        </Card>
      </div>
    )
  }

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center gap-4">
        <Button variant="ghost" asChild className="-ml-4">
          <Link href="/admin/rounds">
            <ArrowLeft className="mr-2 h-4 w-4" />
            Back to Rounds
          </Link>
        </Button>
      </div>

      <div>
        <h1 className="text-2xl font-semibold tracking-tight">Create Round</h1>
        <p className="text-muted-foreground">
          Set up a new selection round for project evaluation
        </p>
      </div>

      {/* Form */}
      <Form {...form}>
        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle className="text-lg">Basic Information</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <FormField
                control={form.control}
                name="programId"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Edition</FormLabel>
                    <Select
                      onValueChange={field.onChange}
                      defaultValue={field.value}
                    >
                      <FormControl>
                        <SelectTrigger>
                          <SelectValue placeholder="Select an edition" />
                        </SelectTrigger>
                      </FormControl>
                      <SelectContent>
                        {programs.map((program) => (
                          <SelectItem key={program.id} value={program.id}>
                            {program.year} Edition
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                    <FormMessage />
                  </FormItem>
                )}
              />

              <FormField
                control={form.control}
                name="name"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Round Name</FormLabel>
                    <FormControl>
                      <Input
                        placeholder="e.g., Round 1 - Semi-Finalists"
                        {...field}
                      />
                    </FormControl>
                    <FormDescription>
                      A descriptive name for this selection round
                    </FormDescription>
                    <FormMessage />
                  </FormItem>
                )}
              />

              <FormField
                control={form.control}
                name="requiredReviews"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Required Reviews per Project</FormLabel>
                    <FormControl>
                      <Input
                        type="number"
                        min={1}
                        max={10}
                        {...field}
                        onChange={(e) => field.onChange(parseInt(e.target.value) || 1)}
                      />
                    </FormControl>
                    <FormDescription>
                      Minimum number of evaluations each project should receive
                    </FormDescription>
                    <FormMessage />
                  </FormItem>
                )}
              />
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle className="text-lg">Voting Window</CardTitle>
              <CardDescription>
                Optional: Set when jury members can submit their evaluations
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid gap-4 sm:grid-cols-2">
                <FormField
                  control={form.control}
                  name="votingStartAt"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>Start Date & Time</FormLabel>
                      <FormControl>
                        <Input type="datetime-local" {...field} />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                <FormField
                  control={form.control}
                  name="votingEndAt"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>End Date & Time</FormLabel>
                      <FormControl>
                        <Input type="datetime-local" {...field} />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
              </div>

              <p className="text-sm text-muted-foreground">
                Leave empty to set the voting window later. The round will need to be
                activated before jury members can submit evaluations.
              </p>
            </CardContent>
          </Card>

          {/* Error */}
          {createRound.error && (
            <Card className="border-destructive">
              <CardContent className="flex items-center gap-2 py-4">
                <AlertCircle className="h-5 w-5 text-destructive" />
                <p className="text-sm text-destructive">
                  {createRound.error.message}
                </p>
              </CardContent>
            </Card>
          )}

          {/* Actions */}
          <div className="flex justify-end gap-3">
            <Button type="button" variant="outline" asChild>
              <Link href="/admin/rounds">Cancel</Link>
            </Button>
            <Button type="submit" disabled={createRound.isPending}>
              {createRound.isPending && (
                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
              )}
              Create Round
            </Button>
          </div>
        </form>
      </Form>
    </div>
  )
}

function CreateRoundSkeleton() {
  return (
    <div className="space-y-6">
      <Skeleton className="h-9 w-36" />

      <div className="space-y-1">
        <Skeleton className="h-8 w-48" />
        <Skeleton className="h-4 w-64" />
      </div>

      <Card>
        <CardHeader>
          <Skeleton className="h-5 w-40" />
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="space-y-2">
            <Skeleton className="h-4 w-20" />
            <Skeleton className="h-10 w-full" />
          </div>
          <div className="space-y-2">
            <Skeleton className="h-4 w-24" />
            <Skeleton className="h-10 w-full" />
          </div>
          <div className="space-y-2">
            <Skeleton className="h-4 w-40" />
            <Skeleton className="h-10 w-32" />
          </div>
        </CardContent>
      </Card>
    </div>
  )
}

export default function CreateRoundPage() {
  return (
    <Suspense fallback={<CreateRoundSkeleton />}>
      <CreateRoundContent />
    </Suspense>
  )
}