'use client'

import { useState } from 'react'
import { useRouter } from 'next/navigation'
import Link from 'next/link'
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 { ArrowLeft, Loader2 } from 'lucide-react'
import { toast } from 'sonner'

export default function NewFormPage() {
  const router = useRouter()
  const [isSubmitting, setIsSubmitting] = useState(false)

  const createForm = trpc.applicationForm.create.useMutation({
    onSuccess: (data) => {
      toast.success('Form created successfully')
      router.push(`/admin/forms/${data.id}`)
    },
    onError: (error) => {
      toast.error(error.message || 'Failed to create form')
      setIsSubmitting(false)
    },
  })

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    setIsSubmitting(true)

    const formData = new FormData(e.currentTarget)
    const name = formData.get('name') as string
    const description = formData.get('description') as string
    const publicSlug = formData.get('publicSlug') as string

    createForm.mutate({
      programId: null,
      name,
      description: description || undefined,
      publicSlug: publicSlug || undefined,
    })
  }

  return (
    <div className="space-y-6">
      <div className="flex items-center gap-4">
        <Link href="/admin/forms">
          <Button variant="ghost" size="icon">
            <ArrowLeft className="h-4 w-4" />
          </Button>
        </Link>
        <div>
          <h1 className="text-2xl font-bold">Create Application Form</h1>
          <p className="text-muted-foreground">
            Set up a new application form
          </p>
        </div>
      </div>

      <Card>
        <CardHeader>
          <CardTitle>Form Details</CardTitle>
          <CardDescription>
            Basic information about your application form
          </CardDescription>
        </CardHeader>
        <CardContent>
          <form onSubmit={handleSubmit} className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="name">Form Name *</Label>
              <Input
                id="name"
                name="name"
                placeholder="e.g., 2024 Project Applications"
                required
              />
            </div>

            <div className="space-y-2">
              <Label htmlFor="description">Description</Label>
              <Textarea
                id="description"
                name="description"
                placeholder="Describe the purpose of this form..."
                rows={3}
                maxLength={2000}
              />
            </div>

            <div className="space-y-2">
              <Label htmlFor="publicSlug">Public URL Slug</Label>
              <div className="flex items-center gap-2">
                <span className="text-sm text-muted-foreground">/apply/</span>
                <Input
                  id="publicSlug"
                  name="publicSlug"
                  placeholder="e.g., 2024-applications"
                  className="flex-1"
                />
              </div>
              <p className="text-sm text-muted-foreground">
                Leave empty to generate automatically. Only lowercase letters, numbers, and hyphens.
              </p>
            </div>

            <div className="flex justify-end gap-2 pt-4">
              <Link href="/admin/forms">
                <Button type="button" variant="outline">
                  Cancel
                </Button>
              </Link>
              <Button type="submit" disabled={isSubmitting}>
                {isSubmitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
                Create Form
              </Button>
            </div>
          </form>
        </CardContent>
      </Card>
    </div>
  )
}
