MOPC-App/src/app/(admin)/admin/projects/new/page.tsx

'use client'

import { Suspense, useState } from 'react'
import Link from 'next/link'
import { useRouter, useSearchParams } from 'next/navigation'
import { trpc } from '@/lib/trpc/client'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Textarea } from '@/components/ui/textarea'
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'
import { Skeleton } from '@/components/ui/skeleton'
import { TagInput } from '@/components/shared/tag-input'
import { toast } from 'sonner'
import {
  ArrowLeft,
  Save,
  Loader2,
  AlertCircle,
  FolderPlus,
  Plus,
  X,
} from 'lucide-react'

function NewProjectPageContent() {
  const router = useRouter()
  const searchParams = useSearchParams()
  const roundIdParam = searchParams.get('round')

  const [selectedRoundId, setSelectedRoundId] = useState<string>(roundIdParam || '')

  // Form state
  const [title, setTitle] = useState('')
  const [teamName, setTeamName] = useState('')
  const [description, setDescription] = useState('')
  const [tags, setTags] = useState<string[]>([])
  const [contactEmail, setContactEmail] = useState('')
  const [contactName, setContactName] = useState('')
  const [country, setCountry] = useState('')
  const [customFields, setCustomFields] = useState<{ key: string; value: string }[]>([])

  // Fetch active programs with rounds
  const { data: programs, isLoading: loadingPrograms } = trpc.program.list.useQuery({
    status: 'ACTIVE',
    includeRounds: true,
  })

  // Create mutation
  const utils = trpc.useUtils()
  const createProject = trpc.project.create.useMutation({
    onSuccess: () => {
      toast.success('Project created successfully')
      utils.project.list.invalidate()
      utils.round.get.invalidate()
      router.push(`/admin/projects?round=${selectedRoundId}`)
    },
    onError: (error) => {
      toast.error(error.message)
    },
  })

  // Get all rounds from programs
  const rounds = programs?.flatMap((p) =>
    (p.rounds || []).map((r) => ({
      ...r,
      programId: p.id,
      programName: `${p.year} Edition`,
    }))
  ) || []

  const selectedRound = rounds.find((r) => r.id === selectedRoundId)

  const addCustomField = () => {
    setCustomFields([...customFields, { key: '', value: '' }])
  }

  const updateCustomField = (index: number, key: string, value: string) => {
    const newFields = [...customFields]
    newFields[index] = { key, value }
    setCustomFields(newFields)
  }

  const removeCustomField = (index: number) => {
    setCustomFields(customFields.filter((_, i) => i !== index))
  }

  const handleSubmit = () => {
    if (!title.trim()) {
      toast.error('Please enter a project title')
      return
    }
    if (!selectedRoundId) {
      toast.error('Please select a round')
      return
    }

    // Build metadata
    const metadataJson: Record<string, unknown> = {}
    if (contactEmail) metadataJson.contactEmail = contactEmail
    if (contactName) metadataJson.contactName = contactName
    if (country) metadataJson.country = country

    // Add custom fields
    customFields.forEach((field) => {
      if (field.key.trim() && field.value.trim()) {
        metadataJson[field.key.trim()] = field.value.trim()
      }
    })

    createProject.mutate({
      roundId: selectedRoundId,
      title: title.trim(),
      teamName: teamName.trim() || undefined,
      description: description.trim() || undefined,
      tags: tags.length > 0 ? tags : undefined,
      metadataJson: Object.keys(metadataJson).length > 0 ? metadataJson : undefined,
    })
  }

  if (loadingPrograms) {
    return <NewProjectPageSkeleton />
  }

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

      <div className="flex items-center gap-2">
        <FolderPlus className="h-6 w-6 text-primary" />
        <div>
          <h1 className="text-2xl font-semibold tracking-tight">Add Project</h1>
          <p className="text-muted-foreground">
            Manually create a new project submission
          </p>
        </div>
      </div>

      {/* Round selection */}
      {!selectedRoundId ? (
        <Card>
          <CardHeader>
            <CardTitle>Select Round</CardTitle>
            <CardDescription>
              Choose the round for this project submission
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            {rounds.length === 0 ? (
              <div className="flex flex-col items-center justify-center py-8 text-center">
                <AlertCircle className="h-12 w-12 text-muted-foreground/50" />
                <p className="mt-2 font-medium">No Active Rounds</p>
                <p className="text-sm text-muted-foreground">
                  Create a round first before adding projects
                </p>
                <Button asChild className="mt-4">
                  <Link href="/admin/rounds/new">Create Round</Link>
                </Button>
              </div>
            ) : (
              <>
                <Select value={selectedRoundId} onValueChange={setSelectedRoundId}>
                  <SelectTrigger>
                    <SelectValue placeholder="Select a round" />
                  </SelectTrigger>
                  <SelectContent>
                    {rounds.map((round) => (
                      <SelectItem key={round.id} value={round.id}>
                        {round.programName} - {round.name}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </>
            )}
          </CardContent>
        </Card>
      ) : (
        <>
          {/* Selected round info */}
          <Card>
            <CardContent className="flex items-center justify-between py-4">
              <div>
                <p className="font-medium">{selectedRound?.programName}</p>
                <p className="text-sm text-muted-foreground">{selectedRound?.name}</p>
              </div>
              <Button
                variant="outline"
                size="sm"
                onClick={() => setSelectedRoundId('')}
              >
                Change Round
              </Button>
            </CardContent>
          </Card>

          <div className="grid gap-6 lg:grid-cols-2">
            {/* Basic Info */}
            <Card>
              <CardHeader>
                <CardTitle>Project Details</CardTitle>
                <CardDescription>
                  Basic information about the project
                </CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="space-y-2">
                  <Label htmlFor="title">Project Title *</Label>
                  <Input
                    id="title"
                    value={title}
                    onChange={(e) => setTitle(e.target.value)}
                    placeholder="e.g., Ocean Cleanup Initiative"
                  />
                </div>

                <div className="space-y-2">
                  <Label htmlFor="teamName">Team/Organization Name</Label>
                  <Input
                    id="teamName"
                    value={teamName}
                    onChange={(e) => setTeamName(e.target.value)}
                    placeholder="e.g., Blue Ocean Foundation"
                  />
                </div>

                <div className="space-y-2">
                  <Label htmlFor="description">Description</Label>
                  <Textarea
                    id="description"
                    value={description}
                    onChange={(e) => setDescription(e.target.value)}
                    placeholder="Brief description of the project..."
                    rows={4}
                    maxLength={2000}
                  />
                </div>

                <div className="space-y-2">
                  <Label>Tags</Label>
                  <TagInput
                    value={tags}
                    onChange={setTags}
                    placeholder="Select project tags..."
                    maxTags={10}
                  />
                </div>
              </CardContent>
            </Card>

            {/* Contact Info */}
            <Card>
              <CardHeader>
                <CardTitle>Contact Information</CardTitle>
                <CardDescription>
                  Contact details for the project team
                </CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="space-y-2">
                  <Label htmlFor="contactName">Contact Name</Label>
                  <Input
                    id="contactName"
                    value={contactName}
                    onChange={(e) => setContactName(e.target.value)}
                    placeholder="e.g., John Smith"
                  />
                </div>

                <div className="space-y-2">
                  <Label htmlFor="contactEmail">Contact Email</Label>
                  <Input
                    id="contactEmail"
                    type="email"
                    value={contactEmail}
                    onChange={(e) => setContactEmail(e.target.value)}
                    placeholder="e.g., john@example.com"
                  />
                </div>

                <div className="space-y-2">
                  <Label htmlFor="country">Country</Label>
                  <Input
                    id="country"
                    value={country}
                    onChange={(e) => setCountry(e.target.value)}
                    placeholder="e.g., Monaco"
                  />
                </div>
              </CardContent>
            </Card>
          </div>

          {/* Custom Fields */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center justify-between">
                <span>Additional Information</span>
                <Button
                  type="button"
                  variant="outline"
                  size="sm"
                  onClick={addCustomField}
                >
                  <Plus className="mr-2 h-4 w-4" />
                  Add Field
                </Button>
              </CardTitle>
              <CardDescription>
                Add custom metadata fields for this project
              </CardDescription>
            </CardHeader>
            <CardContent>
              {customFields.length === 0 ? (
                <p className="text-sm text-muted-foreground text-center py-4">
                  No additional fields. Click &quot;Add Field&quot; to add custom information.
                </p>
              ) : (
                <div className="space-y-3">
                  {customFields.map((field, index) => (
                    <div key={index} className="flex gap-2">
                      <Input
                        placeholder="Field name"
                        value={field.key}
                        onChange={(e) =>
                          updateCustomField(index, e.target.value, field.value)
                        }
                        className="flex-1"
                      />
                      <Input
                        placeholder="Value"
                        value={field.value}
                        onChange={(e) =>
                          updateCustomField(index, field.key, e.target.value)
                        }
                        className="flex-1"
                      />
                      <Button
                        type="button"
                        variant="ghost"
                        size="icon"
                        onClick={() => removeCustomField(index)}
                      >
                        <X className="h-4 w-4" />
                      </Button>
                    </div>
                  ))}
                </div>
              )}
            </CardContent>
          </Card>

          {/* Actions */}
          <div className="flex justify-end gap-4">
            <Button variant="outline" asChild>
              <Link href="/admin/projects">Cancel</Link>
            </Button>
            <Button
              onClick={handleSubmit}
              disabled={createProject.isPending || !title.trim()}
            >
              {createProject.isPending ? (
                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
              ) : (
                <Save className="mr-2 h-4 w-4" />
              )}
              Create Project
            </Button>
          </div>
        </>
      )}
    </div>
  )
}

function NewProjectPageSkeleton() {
  return (
    <div className="space-y-6">
      <div className="flex items-center gap-4">
        <Skeleton className="h-9 w-32" />
      </div>
      <Skeleton className="h-8 w-48" />
      <Card>
        <CardHeader>
          <Skeleton className="h-6 w-32" />
          <Skeleton className="h-4 w-64" />
        </CardHeader>
        <CardContent>
          <Skeleton className="h-10 w-full" />
        </CardContent>
      </Card>
    </div>
  )
}

export default function NewProjectPage() {
  return (
    <Suspense fallback={<NewProjectPageSkeleton />}>
      <NewProjectPageContent />
    </Suspense>
  )
}