MOPC-App/src/app/(admin)/admin/rounds/[id]/edit/page.tsx

'use client'

import { Suspense, use, useState, useEffect } from 'react'
import Link from 'next/link'
import { useRouter } 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 { Skeleton } from '@/components/ui/skeleton'
import { Badge } from '@/components/ui/badge'
import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from '@/components/ui/form'
import {
  EvaluationFormBuilder,
  type Criterion,
} from '@/components/forms/evaluation-form-builder'
import { RoundTypeSettings } from '@/components/forms/round-type-settings'
import { ArrowLeft, Loader2, AlertCircle, AlertTriangle, Bell, GitCompare, MessageSquare, FileText, Calendar } from 'lucide-react'
import { Switch } from '@/components/ui/switch'
import { Slider } from '@/components/ui/slider'
import { Label } from '@/components/ui/label'
import { DateTimePicker } from '@/components/ui/datetime-picker'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'

// Available notification types for teams entering a round
const TEAM_NOTIFICATION_OPTIONS = [
  { value: '', label: 'No automatic notification', description: 'Teams will not receive a notification when entering this round' },
  { value: 'ADVANCED_SEMIFINAL', label: 'Advanced to Semi-Finals', description: 'Congratulates team for advancing to semi-finals' },
  { value: 'ADVANCED_FINAL', label: 'Selected as Finalist', description: 'Congratulates team for being selected as finalist' },
  { value: 'NOT_SELECTED', label: 'Not Selected', description: 'Informs team they were not selected to continue' },
  { value: 'WINNER_ANNOUNCEMENT', label: 'Winner Announcement', description: 'Announces the team as a winner' },
]

interface PageProps {
  params: Promise<{ id: string }>
}

const updateRoundSchema = z
  .object({
    name: z.string().min(1, 'Name is required').max(255),
    requiredReviews: z.number().int().min(1).max(10),
    minAssignmentsPerJuror: z.number().int().min(1).max(50),
    maxAssignmentsPerJuror: z.number().int().min(1).max(100),
    votingStartAt: z.date().nullable().optional(),
    votingEndAt: z.date().nullable().optional(),
  })
  .refine(
    (data) => {
      if (data.votingStartAt && data.votingEndAt) {
        return data.votingEndAt > data.votingStartAt
      }
      return true
    },
    {
      message: 'End date must be after start date',
      path: ['votingEndAt'],
    }
  )
  .refine(
    (data) => data.minAssignmentsPerJuror <= data.maxAssignmentsPerJuror,
    {
      message: 'Min must be less than or equal to max',
      path: ['minAssignmentsPerJuror'],
    }
  )

type UpdateRoundForm = z.infer<typeof updateRoundSchema>

function EditRoundContent({ roundId }: { roundId: string }) {
  const router = useRouter()
  const [criteria, setCriteria] = useState<Criterion[]>([])
  const [criteriaInitialized, setCriteriaInitialized] = useState(false)
  const [formInitialized, setFormInitialized] = useState(false)
  const [roundType, setRoundType] = useState<'FILTERING' | 'EVALUATION' | 'LIVE_EVENT'>('EVALUATION')
  const [roundSettings, setRoundSettings] = useState<Record<string, unknown>>({})
  // entryNotificationType removed from schema

  // Fetch round data - disable refetch on focus to prevent overwriting user's edits
  const { data: round, isLoading: loadingRound } = trpc.round.get.useQuery(
    { id: roundId },
    { refetchOnWindowFocus: false }
  )

  // Fetch evaluation form
  const { data: evaluationForm, isLoading: loadingForm } =
    trpc.round.getEvaluationForm.useQuery({ roundId })

  // Check if evaluations exist
  const { data: hasEvaluations } = trpc.round.hasEvaluations.useQuery({
    roundId,
  })

  const utils = trpc.useUtils()

  // Mutations
  const updateRound = trpc.round.update.useMutation({
    onSuccess: () => {
      // Invalidate cache to ensure fresh data
      utils.round.get.invalidate({ id: roundId })
      utils.round.list.invalidate()
      router.push(`/admin/rounds/${roundId}`)
    },
  })

  const updateEvaluationForm = trpc.round.updateEvaluationForm.useMutation()

  // Initialize form with existing data
  const form = useForm<UpdateRoundForm>({
    resolver: zodResolver(updateRoundSchema),
    defaultValues: {
      name: '',
      requiredReviews: 3,
      minAssignmentsPerJuror: 5,
      maxAssignmentsPerJuror: 20,
      votingStartAt: null,
      votingEndAt: null,
    },
  })

  // Update form when round data loads - only initialize once
  useEffect(() => {
    if (round && !formInitialized) {
      form.reset({
        name: round.name,
        requiredReviews: round.requiredReviews,
        minAssignmentsPerJuror: round.minAssignmentsPerJuror,
        maxAssignmentsPerJuror: round.maxAssignmentsPerJuror,
        votingStartAt: round.votingStartAt ? new Date(round.votingStartAt) : null,
        votingEndAt: round.votingEndAt ? new Date(round.votingEndAt) : null,
      })
      // Set round type, settings, and notification type
      setRoundType((round.roundType as typeof roundType) || 'EVALUATION')
      setRoundSettings((round.settingsJson as Record<string, unknown>) || {})
      setFormInitialized(true)
    }
  }, [round, form, formInitialized])

  // Initialize criteria from evaluation form
  useEffect(() => {
    if (evaluationForm && !criteriaInitialized) {
      const existingCriteria = evaluationForm.criteriaJson as unknown as Criterion[]
      if (Array.isArray(existingCriteria)) {
        setCriteria(existingCriteria)
      }
      setCriteriaInitialized(true)
    } else if (!loadingForm && !evaluationForm && !criteriaInitialized) {
      setCriteriaInitialized(true)
    }
  }, [evaluationForm, loadingForm, criteriaInitialized])

  const onSubmit = async (data: UpdateRoundForm) => {
    // Update round with type, settings, and notification
    await updateRound.mutateAsync({
      id: roundId,
      name: data.name,
      requiredReviews: data.requiredReviews,
      minAssignmentsPerJuror: data.minAssignmentsPerJuror,
      maxAssignmentsPerJuror: data.maxAssignmentsPerJuror,
      roundType,
      settingsJson: roundSettings,
      votingStartAt: data.votingStartAt ?? null,
      votingEndAt: data.votingEndAt ?? null,
    })

    // Update evaluation form if criteria changed and no evaluations exist
    if (!hasEvaluations && criteria.length > 0) {
      await updateEvaluationForm.mutateAsync({
        roundId,
        criteria,
      })
    }
  }

  const isLoading = loadingRound || loadingForm

  if (isLoading) {
    return <EditRoundSkeleton />
  }

  if (!round) {
    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-destructive/50" />
            <p className="mt-2 font-medium">Round Not Found</p>
            <Button asChild className="mt-4">
              <Link href="/admin/rounds">Back to Rounds</Link>
            </Button>
          </CardContent>
        </Card>
      </div>
    )
  }

  const isPending = updateRound.isPending || updateEvaluationForm.isPending
  const isActive = round.status === 'ACTIVE'

  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/${roundId}`}>
            <ArrowLeft className="mr-2 h-4 w-4" />
            Back to Round
          </Link>
        </Button>
      </div>

      <div className="flex items-center gap-3">
        <h1 className="text-2xl font-semibold tracking-tight">Edit Round</h1>
        <Badge variant={isActive ? 'default' : 'secondary'}>
          {round.status}
        </Badge>
      </div>

      {/* Form */}
      <Form {...form}>
        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
          {/* Basic Information */}
          <Card>
            <CardHeader>
              <CardTitle className="text-lg">Basic Information</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <FormField
                control={form.control}
                name="name"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Round Name</FormLabel>
                    <FormControl>
                      <Input
                        placeholder="e.g., Round 1 - Semi-Finalists"
                        {...field}
                      />
                    </FormControl>
                    <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>
                )}
              />

              <div className="grid gap-4 sm:grid-cols-2">
                <FormField
                  control={form.control}
                  name="minAssignmentsPerJuror"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>Min Projects per Judge</FormLabel>
                      <FormControl>
                        <Input
                          type="number"
                          min={1}
                          max={50}
                          {...field}
                          onChange={(e) =>
                            field.onChange(parseInt(e.target.value) || 1)
                          }
                        />
                      </FormControl>
                      <FormDescription>
                        Target minimum projects each judge should receive
                      </FormDescription>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                <FormField
                  control={form.control}
                  name="maxAssignmentsPerJuror"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>Max Projects per Judge</FormLabel>
                      <FormControl>
                        <Input
                          type="number"
                          min={1}
                          max={100}
                          {...field}
                          onChange={(e) =>
                            field.onChange(parseInt(e.target.value) || 1)
                          }
                        />
                      </FormControl>
                      <FormDescription>
                        Maximum projects a judge can be assigned
                      </FormDescription>
                      <FormMessage />
                    </FormItem>
                  )}
                />
              </div>
            </CardContent>
          </Card>

          {/* Round Type & Settings */}
          <RoundTypeSettings
            roundType={roundType}
            onRoundTypeChange={setRoundType}
            settings={roundSettings}
            onSettingsChange={setRoundSettings}
          />

          {/* Voting Window */}
          <Card>
            <CardHeader>
              <CardTitle className="text-lg">Voting Window</CardTitle>
              <CardDescription>
                Set when jury members can submit their evaluations
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              {isActive && (
                <div className="flex items-center gap-2 rounded-lg bg-amber-500/10 p-3 text-amber-700">
                  <AlertTriangle className="h-4 w-4 shrink-0" />
                  <p className="text-sm">
                    This round is active. Changing the voting window may affect
                    ongoing evaluations.
                  </p>
                </div>
              )}

              <div className="grid gap-4 sm:grid-cols-2">
                <FormField
                  control={form.control}
                  name="votingStartAt"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>Start Date & Time</FormLabel>
                      <FormControl>
                        <DateTimePicker
                          value={field.value}
                          onChange={field.onChange}
                          placeholder="Select start date & time"
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                <FormField
                  control={form.control}
                  name="votingEndAt"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>End Date & Time</FormLabel>
                      <FormControl>
                        <DateTimePicker
                          value={field.value}
                          onChange={field.onChange}
                          placeholder="Select end date & time"
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
              </div>

              <p className="text-sm text-muted-foreground">
                Leave empty to disable the voting window enforcement. Past dates are allowed.
              </p>
            </CardContent>
          </Card>

          {/* Upload Deadline Policy */}
          <Card>
            <CardHeader>
              <CardTitle className="text-lg">Upload Deadline Policy</CardTitle>
              <CardDescription>
                Control how file uploads are handled after the round starts
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <Select
                value={(roundSettings.uploadDeadlinePolicy as string) || ''}
                onValueChange={(value) =>
                  setRoundSettings((prev) => ({
                    ...prev,
                    uploadDeadlinePolicy: value || undefined,
                  }))
                }
              >
                <SelectTrigger>
                  <SelectValue placeholder="Default (no restriction)" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="NONE">
                    Default - No restriction
                  </SelectItem>
                  <SelectItem value="BLOCK">
                    Block uploads after round starts
                  </SelectItem>
                  <SelectItem value="ALLOW_LATE">
                    Allow late uploads (marked as late)
                  </SelectItem>
                </SelectContent>
              </Select>
              <p className="text-sm text-muted-foreground">
                When set to &ldquo;Block&rdquo;, applicants cannot upload files after the voting start date.
                When set to &ldquo;Allow late&rdquo;, uploads are accepted but flagged as late submissions.
              </p>
            </CardContent>
          </Card>

          {/* Jury Features */}
          <Card>
            <CardHeader>
              <CardTitle className="text-lg flex items-center gap-2">
                <GitCompare className="h-5 w-5" />
                Jury Features
              </CardTitle>
              <CardDescription>
                Configure project comparison and peer review for jury members
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              {/* Comparison settings */}
              <div className="space-y-4">
                <div className="flex items-center justify-between">
                  <div className="space-y-0.5">
                    <Label className="text-sm font-medium">Enable Project Comparison</Label>
                    <p className="text-xs text-muted-foreground">
                      Allow jury members to compare projects side by side
                    </p>
                  </div>
                  <Switch
                    checked={Boolean(roundSettings.enable_comparison)}
                    onCheckedChange={(checked) =>
                      setRoundSettings((prev) => ({
                        ...prev,
                        enable_comparison: checked,
                      }))
                    }
                  />
                </div>
                {!!roundSettings.enable_comparison && (
                  <div className="space-y-2 pl-4 border-l-2 border-muted">
                    <Label className="text-sm">Max Projects to Compare</Label>
                    <Input
                      type="number"
                      min={2}
                      max={5}
                      value={Number(roundSettings.comparison_max_projects || 3)}
                      onChange={(e) =>
                        setRoundSettings((prev) => ({
                          ...prev,
                          comparison_max_projects: parseInt(e.target.value) || 3,
                        }))
                      }
                      className="max-w-[120px]"
                    />
                  </div>
                )}
              </div>

              {/* Peer review settings */}
              <div className="border-t pt-4 space-y-4">
                <div className="flex items-center justify-between">
                  <div className="space-y-0.5">
                    <Label className="text-sm font-medium flex items-center gap-1">
                      <MessageSquare className="h-4 w-4" />
                      Enable Peer Review / Discussion
                    </Label>
                    <p className="text-xs text-muted-foreground">
                      Allow jury members to discuss and see aggregated scores
                    </p>
                  </div>
                  <Switch
                    checked={Boolean(roundSettings.peer_review_enabled)}
                    onCheckedChange={(checked) =>
                      setRoundSettings((prev) => ({
                        ...prev,
                        peer_review_enabled: checked,
                      }))
                    }
                  />
                </div>
                {!!roundSettings.peer_review_enabled && (
                  <div className="space-y-4 pl-4 border-l-2 border-muted">
                    <div className="space-y-2">
                      <Label className="text-sm">Divergence Threshold</Label>
                      <p className="text-xs text-muted-foreground">
                        Score divergence level that triggers a warning (0.0 - 1.0)
                      </p>
                      <Input
                        type="number"
                        min={0}
                        max={1}
                        step={0.05}
                        value={Number(roundSettings.divergence_threshold || 0.3)}
                        onChange={(e) =>
                          setRoundSettings((prev) => ({
                            ...prev,
                            divergence_threshold: parseFloat(e.target.value) || 0.3,
                          }))
                        }
                        className="max-w-[120px]"
                      />
                    </div>
                    <div className="space-y-2">
                      <Label className="text-sm">Anonymization Level</Label>
                      <Select
                        value={String(roundSettings.anonymization_level || 'partial')}
                        onValueChange={(v) =>
                          setRoundSettings((prev) => ({
                            ...prev,
                            anonymization_level: v,
                          }))
                        }
                      >
                        <SelectTrigger className="max-w-[200px]">
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="none">No anonymization</SelectItem>
                          <SelectItem value="partial">Partial (Juror 1, 2...)</SelectItem>
                          <SelectItem value="full">Full anonymization</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>
                    <div className="space-y-2">
                      <Label className="text-sm">Discussion Window (hours)</Label>
                      <Input
                        type="number"
                        min={1}
                        max={720}
                        value={Number(roundSettings.discussion_window_hours || 48)}
                        onChange={(e) =>
                          setRoundSettings((prev) => ({
                            ...prev,
                            discussion_window_hours: parseInt(e.target.value) || 48,
                          }))
                        }
                        className="max-w-[120px]"
                      />
                    </div>
                    <div className="space-y-2">
                      <Label className="text-sm">Max Comment Length</Label>
                      <Input
                        type="number"
                        min={100}
                        max={5000}
                        value={Number(roundSettings.max_comment_length || 2000)}
                        onChange={(e) =>
                          setRoundSettings((prev) => ({
                            ...prev,
                            max_comment_length: parseInt(e.target.value) || 2000,
                          }))
                        }
                        className="max-w-[120px]"
                      />
                    </div>
                  </div>
                )}
              </div>
            </CardContent>
          </Card>

          {/* File Settings */}
          <Card>
            <CardHeader>
              <CardTitle className="text-lg flex items-center gap-2">
                <FileText className="h-5 w-5" />
                File Settings
              </CardTitle>
              <CardDescription>
                Configure allowed file types and versioning for this round
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="space-y-2">
                <Label className="text-sm">Allowed File Types</Label>
                <p className="text-xs text-muted-foreground">
                  Comma-separated MIME types or extensions
                </p>
                <Input
                  placeholder="application/pdf, video/mp4, image/jpeg"
                  value={String(roundSettings.allowed_file_types || '')}
                  onChange={(e) =>
                    setRoundSettings((prev) => ({
                      ...prev,
                      allowed_file_types: e.target.value,
                    }))
                  }
                />
              </div>
              <div className="space-y-2">
                <Label className="text-sm">Max File Size (MB)</Label>
                <Input
                  type="number"
                  min={1}
                  max={2048}
                  value={Number(roundSettings.max_file_size_mb || 500)}
                  onChange={(e) =>
                    setRoundSettings((prev) => ({
                      ...prev,
                      max_file_size_mb: parseInt(e.target.value) || 500,
                    }))
                  }
                  className="max-w-[150px]"
                />
              </div>
              <div className="flex items-center justify-between">
                <div className="space-y-0.5">
                  <Label className="text-sm font-medium">Enable File Versioning</Label>
                  <p className="text-xs text-muted-foreground">
                    Keep previous versions when files are replaced
                  </p>
                </div>
                <Switch
                  checked={Boolean(roundSettings.file_versioning)}
                  onCheckedChange={(checked) =>
                    setRoundSettings((prev) => ({
                      ...prev,
                      file_versioning: checked,
                    }))
                  }
                />
              </div>
              {!!roundSettings.file_versioning && (
                <div className="space-y-2 pl-4 border-l-2 border-muted">
                  <Label className="text-sm">Max Versions per File</Label>
                  <Input
                    type="number"
                    min={2}
                    max={20}
                    value={Number(roundSettings.max_file_versions || 5)}
                    onChange={(e) =>
                      setRoundSettings((prev) => ({
                        ...prev,
                        max_file_versions: parseInt(e.target.value) || 5,
                      }))
                    }
                    className="max-w-[120px]"
                  />
                </div>
              )}
            </CardContent>
          </Card>

          {/* Availability Settings */}
          <Card>
            <CardHeader>
              <CardTitle className="text-lg flex items-center gap-2">
                <Calendar className="h-5 w-5" />
                Jury Availability Settings
              </CardTitle>
              <CardDescription>
                Configure how jury member availability affects assignments
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="flex items-center justify-between">
                <div className="space-y-0.5">
                  <Label className="text-sm font-medium">Require Availability</Label>
                  <p className="text-xs text-muted-foreground">
                    Jury members must set availability before receiving assignments
                  </p>
                </div>
                <Switch
                  checked={Boolean(roundSettings.require_availability)}
                  onCheckedChange={(checked) =>
                    setRoundSettings((prev) => ({
                      ...prev,
                      require_availability: checked,
                    }))
                  }
                />
              </div>

              <div className="space-y-2">
                <Label className="text-sm">Availability Mode</Label>
                <Select
                  value={String(roundSettings.availability_mode || 'soft_penalty')}
                  onValueChange={(v) =>
                    setRoundSettings((prev) => ({
                      ...prev,
                      availability_mode: v,
                    }))
                  }
                >
                  <SelectTrigger className="max-w-[250px]">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="hard_block">
                      Hard Block (unavailable jurors excluded)
                    </SelectItem>
                    <SelectItem value="soft_penalty">
                      Soft Penalty (reduce assignment priority)
                    </SelectItem>
                  </SelectContent>
                </Select>
              </div>

              <div className="space-y-2">
                <Label className="text-sm">
                  Availability Weight ({Number(roundSettings.availability_weight || 50)}%)
                </Label>
                <p className="text-xs text-muted-foreground">
                  How much weight to give availability when using soft penalty mode
                </p>
                <Slider
                  value={[Number(roundSettings.availability_weight || 50)]}
                  min={0}
                  max={100}
                  step={5}
                  onValueChange={([value]) =>
                    setRoundSettings((prev) => ({
                      ...prev,
                      availability_weight: value,
                    }))
                  }
                  className="max-w-xs"
                />
              </div>
            </CardContent>
          </Card>

          {/* Evaluation Criteria */}
          <Card>
            <CardHeader>
              <CardTitle className="text-lg">Evaluation Criteria</CardTitle>
              <CardDescription>
                Define the criteria jurors will use to evaluate projects
              </CardDescription>
            </CardHeader>
            <CardContent>
              {hasEvaluations ? (
                <div className="space-y-4">
                  <div className="flex items-center gap-2 rounded-lg bg-amber-500/10 p-3 text-amber-700">
                    <AlertTriangle className="h-4 w-4 shrink-0" />
                    <p className="text-sm">
                      Criteria cannot be modified after evaluations have been
                      submitted. {criteria.length} criteria defined.
                    </p>
                  </div>

                  <EvaluationFormBuilder
                    initialCriteria={criteria}
                    onChange={() => {}}
                    disabled={true}
                  />
                </div>
              ) : (
                <EvaluationFormBuilder
                  initialCriteria={criteria}
                  onChange={setCriteria}
                />
              )}
            </CardContent>
          </Card>

          {/* Error Display */}
          {(updateRound.error || updateEvaluationForm.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">
                  {updateRound.error?.message ||
                    updateEvaluationForm.error?.message}
                </p>
              </CardContent>
            </Card>
          )}

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

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

      <div className="flex items-center gap-3">
        <Skeleton className="h-8 w-32" />
        <Skeleton className="h-6 w-16" />
      </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-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>

      <Card>
        <CardHeader>
          <Skeleton className="h-5 w-32" />
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="grid gap-4 sm:grid-cols-2">
            <Skeleton className="h-10 w-full" />
            <Skeleton className="h-10 w-full" />
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <Skeleton className="h-5 w-40" />
        </CardHeader>
        <CardContent>
          <Skeleton className="h-32 w-full" />
        </CardContent>
      </Card>
    </div>
  )
}

export default function EditRoundPage({ params }: PageProps) {
  const { id } = use(params)

  return (
    <Suspense fallback={<EditRoundSkeleton />}>
      <EditRoundContent roundId={id} />
    </Suspense>
  )
}