'use client'

import { Suspense, use, useState, useEffect, useCallback, useMemo } 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 { Textarea } from '@/components/ui/textarea'
import { Badge } from '@/components/ui/badge'
import { Checkbox } from '@/components/ui/checkbox'
import { Switch } from '@/components/ui/switch'
import { CountrySelect } from '@/components/ui/country-select'
import { Skeleton } from '@/components/ui/skeleton'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'
import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from '@/components/ui/form'
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from '@/components/ui/alert-dialog'
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table'
import { Separator } from '@/components/ui/separator'
import { FileUpload } from '@/components/shared/file-upload'
import { ProjectLogo } from '@/components/shared/project-logo'
import { LogoUpload } from '@/components/shared/logo-upload'
import {
  ArrowLeft,
  Loader2,
  AlertCircle,
  Trash2,
  X,
  Plus,
  FileText,
  Film,
  Presentation,
  FileIcon,
} from 'lucide-react'
import { formatFileSize } from '@/lib/utils'

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

const updateProjectSchema = z.object({
  title: z.string().min(1, 'Title is required').max(500),
  teamName: z.string().optional(),
  description: z.string().optional(),
  status: z.enum([
    'SUBMITTED',
    'ELIGIBLE',
    'ASSIGNED',
    'SEMIFINALIST',
    'FINALIST',
    'REJECTED',
  ]).optional(),
  tags: z.array(z.string()),
  competitionCategory: z.string().optional(),
  oceanIssue: z.string().optional(),
  institution: z.string().optional(),
  country: z.string().optional(),
  geographicZone: z.string().optional(),
  wantsMentorship: z.boolean().optional(),
  foundedAt: z.string().optional(),
})

type UpdateProjectForm = z.infer<typeof updateProjectSchema>

// File type icons
const fileTypeIcons: Record<string, React.ReactNode> = {
  EXEC_SUMMARY: <FileText className="h-4 w-4" />,
  PRESENTATION: <Presentation className="h-4 w-4" />,
  VIDEO: <Film className="h-4 w-4" />,
  OTHER: <FileIcon className="h-4 w-4" />,
}

function EditProjectContent({ projectId }: { projectId: string }) {
  const router = useRouter()
  const [tagInput, setTagInput] = useState('')
  const [statusNotificationConfirmed, setStatusNotificationConfirmed] = useState(false)

  // Fetch project data
  const { data: project, isLoading } = trpc.project.get.useQuery({
    id: projectId,
  })

  // Fetch files
  const { data: files, refetch: refetchFiles } = trpc.file.listByProject.useQuery({
    projectId,
  })

  // Fetch logo URL
  const { data: logoUrl, refetch: refetchLogo } = trpc.logo.getUrl.useQuery({
    projectId,
  })

  // Fetch existing tags for suggestions
  const { data: existingTags } = trpc.project.getTags.useQuery({})

  // Fetch submission round config to show required documents
  const programId = project?.programId
  const { data: submissionRound } = trpc.round.getSubmissionRoundForProgram.useQuery(
    { programId: programId! },
    { enabled: !!programId }
  )

  const submissionRoundConfig = useMemo(() => {
    if (!submissionRound?.configJson) return null
    const config = submissionRound.configJson as Record<string, unknown>
    const docs = config.requiredDocuments as
      | Array<{ name: string; required?: boolean; description?: string }>
      | null
      | undefined
    if (!docs || docs.length === 0) return null
    return {
      roundName: submissionRound.name,
      requiredDocuments: docs,
    }
  }, [submissionRound])

  // Mutations
  const utils = trpc.useUtils()
  const updateProject = trpc.project.update.useMutation({
    onSuccess: () => {
      utils.project.get.invalidate({ id: projectId })
      utils.project.list.invalidate()
      router.push(`/admin/projects/${projectId}`)
    },
  })

  const deleteProject = trpc.project.delete.useMutation({
    onSuccess: () => {
      utils.project.list.invalidate()
      utils.program.get.invalidate()
      router.push('/admin/projects')
    },
  })

  const deleteFile = trpc.file.delete.useMutation({
    onSuccess: () => {
      refetchFiles()
    },
  })

  // Initialize form
  const form = useForm<UpdateProjectForm>({
    resolver: zodResolver(updateProjectSchema),
    defaultValues: {
      title: '',
      teamName: '',
      description: '',
      status: 'SUBMITTED' as const,
      tags: [],
      competitionCategory: '',
      oceanIssue: '',
      institution: '',
      country: '',
      geographicZone: '',
      wantsMentorship: false,
      foundedAt: '',
    },
  })

  // Update form when project loads
  useEffect(() => {
    if (project) {
      form.reset({
        title: project.title,
        teamName: project.teamName || '',
        description: project.description || '',
        status: (project.status || 'SUBMITTED') as UpdateProjectForm['status'],
        tags: project.tags || [],
        competitionCategory: project.competitionCategory || '',
        oceanIssue: project.oceanIssue || '',
        institution: project.institution || '',
        country: project.country || '',
        geographicZone: project.geographicZone || '',
        wantsMentorship: project.wantsMentorship ?? false,
        foundedAt: project.foundedAt ? new Date(project.foundedAt).toISOString().split('T')[0] : '',
      })
    }
  }, [project, form])

  const tags = form.watch('tags')
  const selectedStatus = form.watch('status')
  const previousStatus = (project?.status ?? 'SUBMITTED') as UpdateProjectForm['status']
  const statusTriggersNotifications = !!selectedStatus && ['SEMIFINALIST', 'FINALIST', 'REJECTED'].includes(selectedStatus)
  const requiresStatusNotificationConfirmation = Boolean(
    project && selectedStatus !== previousStatus && statusTriggersNotifications
  )
  const notificationRecipientEmails = Array.from(
    new Set(
      (project?.teamMembers ?? [])
        .map((member) => member.user?.email?.toLowerCase().trim() ?? '')
        .filter((email) => email.length > 0)
    )
  )

  useEffect(() => {
    setStatusNotificationConfirmed(false)
    form.clearErrors('status')
  }, [selectedStatus, form])

  // Add tag
  const addTag = useCallback(() => {
    const tag = tagInput.trim()
    if (tag && !tags.includes(tag)) {
      form.setValue('tags', [...tags, tag])
      setTagInput('')
    }
  }, [tagInput, tags, form])

  // Remove tag
  const removeTag = useCallback(
    (tag: string) => {
      form.setValue(
        'tags',
        tags.filter((t) => t !== tag)
      )
    },
    [tags, form]
  )

  const onSubmit = async (data: UpdateProjectForm) => {
    if (requiresStatusNotificationConfirmation && !statusNotificationConfirmed) {
      form.setError('status', {
        type: 'manual',
        message: 'Confirm participant notifications before saving this status change.',
      })
      return
    }

    const statusChanged = data.status !== previousStatus
    await updateProject.mutateAsync({
      id: projectId,
      title: data.title,
      teamName: data.teamName || null,
      description: data.description || null,
      ...(statusChanged && { status: data.status }),
      tags: data.tags,
      competitionCategory: (data.competitionCategory || null) as 'STARTUP' | 'BUSINESS_CONCEPT' | null,
      oceanIssue: (data.oceanIssue || null) as 'POLLUTION_REDUCTION' | 'CLIMATE_MITIGATION' | 'TECHNOLOGY_INNOVATION' | 'SUSTAINABLE_SHIPPING' | 'BLUE_CARBON' | 'HABITAT_RESTORATION' | 'COMMUNITY_CAPACITY' | 'SUSTAINABLE_FISHING' | 'CONSUMER_AWARENESS' | 'OCEAN_ACIDIFICATION' | 'OTHER' | null,
      institution: data.institution || null,
      country: data.country || null,
      geographicZone: data.geographicZone || null,
      wantsMentorship: data.wantsMentorship,
      foundedAt: data.foundedAt ? new Date(data.foundedAt).toISOString() : null,
    })
  }

  const handleDelete = async () => {
    await deleteProject.mutateAsync({ id: projectId })
  }

  const handleDeleteFile = async (fileId: string) => {
    await deleteFile.mutateAsync({ id: fileId })
  }

  if (isLoading) {
    return <EditProjectSkeleton />
  }

  if (!project) {
    return (
      <div className="space-y-6">
        <Button variant="ghost" className="-ml-4" onClick={() => router.back()}>
          <ArrowLeft className="mr-2 h-4 w-4" />
          Back
        </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">Project Not Found</p>
            <Button className="mt-4" onClick={() => router.back()}>
              Back
            </Button>
          </CardContent>
        </Card>
      </div>
    )
  }

  const isPending = updateProject.isPending || deleteProject.isPending

  // Filter tag suggestions (exclude already selected)
  const tagSuggestions =
    existingTags?.filter((t) => !tags.includes(t)).slice(0, 5) || []

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center gap-4">
        <Button variant="ghost" className="-ml-4" onClick={() => router.back()}>
          <ArrowLeft className="mr-2 h-4 w-4" />
          Back
        </Button>
      </div>

      <div>
        <h1 className="text-2xl font-semibold tracking-tight">Edit Project</h1>
        <p className="text-muted-foreground">
          Update project information and manage files
        </p>
      </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">
              {/* Project Logo */}
              <div className="flex items-start gap-4 pb-4 border-b">
                <ProjectLogo
                  project={project}
                  logoUrl={logoUrl}
                  size="lg"
                />
                <div className="flex-1 space-y-1">
                  <FormLabel>Project Logo</FormLabel>
                  <FormDescription>
                    Upload a logo for this project. It will be displayed in project lists and cards.
                  </FormDescription>
                  <div className="pt-2">
                    <LogoUpload
                      project={project}
                      currentLogoUrl={logoUrl}
                      onUploadComplete={() => refetchLogo()}
                    />
                  </div>
                </div>
              </div>

              <FormField
                control={form.control}
                name="title"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Title</FormLabel>
                    <FormControl>
                      <Input placeholder="Project title" {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

              <FormField
                control={form.control}
                name="teamName"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Team Name</FormLabel>
                    <FormControl>
                      <Input
                        placeholder="Team or organization name"
                        {...field}
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

              <FormField
                control={form.control}
                name="description"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Description</FormLabel>
                    <FormControl>
                      <Textarea
                        placeholder="Project description..."
                        rows={4}
                        maxLength={2000}
                        {...field}
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

              <FormField
                control={form.control}
                name="status"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Status</FormLabel>
                    <Select
                      onValueChange={field.onChange}
                      defaultValue={field.value}
                      value={field.value}
                    >
                      <FormControl>
                        <SelectTrigger>
                          <SelectValue placeholder="Select status..." />
                        </SelectTrigger>
                      </FormControl>
                      <SelectContent>
                        <SelectItem value="SUBMITTED">Submitted</SelectItem>
                        <SelectItem value="ELIGIBLE">Eligible</SelectItem>
                        <SelectItem value="ASSIGNED">Assigned</SelectItem>
                        <SelectItem value="SEMIFINALIST">Semifinalist</SelectItem>
                        <SelectItem value="FINALIST">Finalist</SelectItem>
                        <SelectItem value="REJECTED">Rejected</SelectItem>
                      </SelectContent>
                    </Select>
                    {requiresStatusNotificationConfirmation && (
                      <div className="space-y-2 rounded-md border bg-muted/20 p-3">
                        <p className="text-xs font-medium">
                          Participant Notification Check
                        </p>
                        <p className="text-xs text-muted-foreground">
                          Saving this status will send automated notifications.
                        </p>
                        <p className="text-xs text-muted-foreground">
                          Recipients ({notificationRecipientEmails.length}):{' '}
                          {notificationRecipientEmails.length > 0
                            ? notificationRecipientEmails.slice(0, 8).join(', ')
                            : 'No linked participant accounts found'}
                          {notificationRecipientEmails.length > 8 ? ', ...' : ''}
                        </p>
                        <div className="flex items-start gap-2">
                          <Checkbox
                            id="confirm-status-notifications"
                            checked={statusNotificationConfirmed}
                            onCheckedChange={(checked) => {
                              const confirmed = checked === true
                              setStatusNotificationConfirmed(confirmed)
                              if (confirmed) {
                                form.clearErrors('status')
                              }
                            }}
                          />
                          <FormLabel htmlFor="confirm-status-notifications" className="text-sm font-normal leading-5">
                            I verified participant recipients and approve sending automated notifications.
                          </FormLabel>
                        </div>
                      </div>
                    )}
                    <FormMessage />
                  </FormItem>
                )}
              />
            </CardContent>
          </Card>

          {/* Project Details */}
          <Card>
            <CardHeader>
              <CardTitle className="text-lg">Project Details</CardTitle>
              <CardDescription>
                Additional categorization and metadata for this project
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
                <FormField
                  control={form.control}
                  name="competitionCategory"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>Competition Category</FormLabel>
                      <Select
                        onValueChange={field.onChange}
                        value={field.value || ''}
                      >
                        <FormControl>
                          <SelectTrigger>
                            <SelectValue placeholder="Select category..." />
                          </SelectTrigger>
                        </FormControl>
                        <SelectContent>
                          <SelectItem value="STARTUP">Startup</SelectItem>
                          <SelectItem value="BUSINESS_CONCEPT">Business Concept</SelectItem>
                        </SelectContent>
                      </Select>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                <FormField
                  control={form.control}
                  name="oceanIssue"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>Ocean Issue</FormLabel>
                      <Select
                        onValueChange={field.onChange}
                        value={field.value || ''}
                      >
                        <FormControl>
                          <SelectTrigger>
                            <SelectValue placeholder="Select ocean issue..." />
                          </SelectTrigger>
                        </FormControl>
                        <SelectContent>
                          <SelectItem value="POLLUTION_REDUCTION">Pollution Reduction</SelectItem>
                          <SelectItem value="CLIMATE_MITIGATION">Climate Mitigation</SelectItem>
                          <SelectItem value="TECHNOLOGY_INNOVATION">Technology Innovation</SelectItem>
                          <SelectItem value="SUSTAINABLE_SHIPPING">Sustainable Shipping</SelectItem>
                          <SelectItem value="BLUE_CARBON">Blue Carbon</SelectItem>
                          <SelectItem value="HABITAT_RESTORATION">Habitat Restoration</SelectItem>
                          <SelectItem value="COMMUNITY_CAPACITY">Community Capacity</SelectItem>
                          <SelectItem value="SUSTAINABLE_FISHING">Sustainable Fishing</SelectItem>
                          <SelectItem value="CONSUMER_AWARENESS">Consumer Awareness</SelectItem>
                          <SelectItem value="OCEAN_ACIDIFICATION">Ocean Acidification</SelectItem>
                          <SelectItem value="OTHER">Other</SelectItem>
                        </SelectContent>
                      </Select>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                <FormField
                  control={form.control}
                  name="institution"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>Institution</FormLabel>
                      <FormControl>
                        <Input placeholder="Institution or organization" {...field} />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                <FormField
                  control={form.control}
                  name="country"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>Country</FormLabel>
                      <FormControl>
                        <CountrySelect
                          value={field.value || ''}
                          onChange={field.onChange}
                          placeholder="Select country..."
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                <FormField
                  control={form.control}
                  name="geographicZone"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>Geographic Zone</FormLabel>
                      <FormControl>
                        <Input placeholder="e.g. Europe, France" {...field} />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                <FormField
                  control={form.control}
                  name="foundedAt"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>Founded Date</FormLabel>
                      <FormControl>
                        <Input type="date" {...field} />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
              </div>

              <FormField
                control={form.control}
                name="wantsMentorship"
                render={({ field }) => (
                  <FormItem className="flex flex-row items-center justify-between rounded-lg border p-3">
                    <div className="space-y-0.5">
                      <FormLabel>Wants Mentorship</FormLabel>
                      <FormDescription>
                        Whether this project team is interested in mentorship
                      </FormDescription>
                    </div>
                    <FormControl>
                      <Switch
                        checked={field.value ?? false}
                        onCheckedChange={field.onChange}
                      />
                    </FormControl>
                  </FormItem>
                )}
              />
            </CardContent>
          </Card>

          {/* Tags */}
          <Card>
            <CardHeader>
              <CardTitle className="text-lg">Tags</CardTitle>
              <CardDescription>
                Add tags to categorize this project
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="flex gap-2">
                <Input
                  value={tagInput}
                  onChange={(e) => setTagInput(e.target.value)}
                  placeholder="Add a tag..."
                  onKeyDown={(e) => {
                    if (e.key === 'Enter') {
                      e.preventDefault()
                      addTag()
                    }
                  }}
                />
                <Button type="button" variant="outline" onClick={addTag}>
                  <Plus className="h-4 w-4" />
                </Button>
              </div>

              {tagSuggestions.length > 0 && tagInput && (
                <div className="flex flex-wrap gap-2">
                  <span className="text-xs text-muted-foreground">
                    Suggestions:
                  </span>
                  {tagSuggestions
                    .filter((t) =>
                      t.toLowerCase().includes(tagInput.toLowerCase())
                    )
                    .map((tag) => (
                      <Badge
                        key={tag}
                        variant="outline"
                        className="cursor-pointer hover:bg-muted"
                        onClick={() => {
                          if (!tags.includes(tag)) {
                            form.setValue('tags', [...tags, tag])
                          }
                          setTagInput('')
                        }}
                      >
                        {tag}
                      </Badge>
                    ))}
                </div>
              )}

              {tags.length > 0 && (
                <div className="flex flex-wrap gap-2">
                  {tags.map((tag) => (
                    <Badge key={tag} variant="secondary" className="gap-1">
                      {tag}
                      <button
                        type="button"
                        onClick={() => removeTag(tag)}
                        className="ml-1 hover:text-destructive"
                      >
                        <X className="h-3 w-3" />
                      </button>
                    </Badge>
                  ))}
                </div>
              )}
            </CardContent>
          </Card>

          {/* Files */}
          <Card>
            <CardHeader>
              <CardTitle className="text-lg">Files</CardTitle>
              <CardDescription>
                Manage project documents and materials
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              {submissionRoundConfig && (
              <div className="mb-4 space-y-3">
                <div>
                  <p className="text-sm font-medium">Required Documents</p>
                  <p className="text-xs text-muted-foreground">
                    From {submissionRoundConfig.roundName}
                  </p>
                </div>
                <div className="space-y-2">
                  {submissionRoundConfig.requiredDocuments.map((doc, i) => (
                    <div key={i} className="flex items-center justify-between rounded-md border border-dashed p-3">
                      <div>
                        <p className="text-sm font-medium">{doc.name}</p>
                        {doc.description && (
                          <p className="text-xs text-muted-foreground">{doc.description}</p>
                        )}
                        {doc.required && (
                          <Badge variant="outline" className="mt-1 text-xs">Required</Badge>
                        )}
                      </div>
                    </div>
                  ))}
                </div>
                <Separator />
              </div>
            )}

            {files && files.length > 0 ? (
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>File</TableHead>
                      <TableHead>Type</TableHead>
                      <TableHead>Size</TableHead>
                      <TableHead className="w-[50px]"></TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {files.map((file) => (
                      <TableRow key={file.id}>
                        <TableCell>
                          <div className="flex items-center gap-2">
                            {fileTypeIcons[file.fileType] || (
                              <FileIcon className="h-4 w-4" />
                            )}
                            <span className="text-sm truncate max-w-[200px]">
                              {file.fileName}
                            </span>
                          </div>
                        </TableCell>
                        <TableCell>
                          <Badge variant="outline" className="text-xs">
                            {file.fileType.replace('_', ' ')}
                          </Badge>
                        </TableCell>
                        <TableCell className="text-sm text-muted-foreground">
                          {formatFileSize(file.size)}
                        </TableCell>
                        <TableCell>
                          <AlertDialog>
                            <AlertDialogTrigger asChild>
                              <Button
                                variant="ghost"
                                size="icon"
                                className="h-8 w-8 text-destructive hover:text-destructive"
                              >
                                <Trash2 className="h-4 w-4" />
                              </Button>
                            </AlertDialogTrigger>
                            <AlertDialogContent>
                              <AlertDialogHeader>
                                <AlertDialogTitle>Delete file?</AlertDialogTitle>
                                <AlertDialogDescription>
                                  Are you sure you want to delete &quot;{file.fileName}&quot;?
                                  This action cannot be undone.
                                </AlertDialogDescription>
                              </AlertDialogHeader>
                              <AlertDialogFooter>
                                <AlertDialogCancel>Cancel</AlertDialogCancel>
                                <AlertDialogAction
                                  onClick={() => handleDeleteFile(file.id)}
                                  className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
                                >
                                  Delete
                                </AlertDialogAction>
                              </AlertDialogFooter>
                            </AlertDialogContent>
                          </AlertDialog>
                        </TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              ) : (
                <p className="text-sm text-muted-foreground">
                  No files uploaded yet
                </p>
              )}

              <div className="pt-4 border-t">
                <p className="text-sm font-medium mb-3">Upload New Files</p>
                <FileUpload
                  projectId={projectId}
                  onUploadComplete={() => refetchFiles()}
                />
              </div>
            </CardContent>
          </Card>

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

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

      {/* Danger Zone */}
      <Card className="border-destructive/50">
        <CardHeader>
          <CardTitle className="text-lg text-destructive">Danger Zone</CardTitle>
          <CardDescription>
            Irreversible actions that will permanently affect this project
          </CardDescription>
        </CardHeader>
        <CardContent>
          <AlertDialog>
            <AlertDialogTrigger asChild>
              <Button variant="destructive" disabled={deleteProject.isPending}>
                {deleteProject.isPending ? (
                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                ) : (
                  <Trash2 className="mr-2 h-4 w-4" />
                )}
                Delete Project
              </Button>
            </AlertDialogTrigger>
            <AlertDialogContent>
              <AlertDialogHeader>
                <AlertDialogTitle>Delete project?</AlertDialogTitle>
                <AlertDialogDescription>
                  This will permanently delete &quot;{project.title}&quot; and all
                  associated files, assignments, and evaluations. This action
                  cannot be undone.
                </AlertDialogDescription>
              </AlertDialogHeader>
              <AlertDialogFooter>
                <AlertDialogCancel>Cancel</AlertDialogCancel>
                <AlertDialogAction
                  onClick={handleDelete}
                  className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
                >
                  Delete Project
                </AlertDialogAction>
              </AlertDialogFooter>
            </AlertDialogContent>
          </AlertDialog>

          {deleteProject.error && (
            <p className="mt-2 text-sm text-destructive">
              {deleteProject.error.message}
            </p>
          )}
        </CardContent>
      </Card>
    </div>
  )
}

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

      <div className="space-y-1">
        <Skeleton className="h-8 w-32" />
        <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-28" />
            <Skeleton className="h-24 w-full" />
          </div>
        </CardContent>
      </Card>

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

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

  return (
    <Suspense fallback={<EditProjectSkeleton />}>
      <EditProjectContent projectId={id} />
    </Suspense>
  )
}
