import { Suspense } from 'react'
import Link from 'next/link'
import { api } from '@/lib/trpc/server'
import { Button } from '@/components/ui/button'
import {
  Card,
  CardContent,
} from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { Skeleton } from '@/components/ui/skeleton'
import {
  Plus,
  Pencil,
  FileText,
  ExternalLink,
  Inbox,
  Copy,
  MoreHorizontal,
} from 'lucide-react'
import { formatDate } from '@/lib/utils'

const statusColors = {
  DRAFT: 'bg-gray-100 text-gray-800',
  PUBLISHED: 'bg-green-100 text-green-800',
  CLOSED: 'bg-red-100 text-red-800',
}

async function FormsList() {
  const caller = await api()
  const { data: forms } = await caller.applicationForm.list({
    perPage: 50,
  })

  if (forms.length === 0) {
    return (
      <Card>
        <CardContent className="flex flex-col items-center justify-center py-12">
          <FileText className="h-12 w-12 text-muted-foreground mb-4" />
          <h3 className="text-lg font-medium mb-2">No forms yet</h3>
          <p className="text-muted-foreground mb-4">
            Create your first application form
          </p>
          <Link href="/admin/forms/new">
            <Button>
              <Plus className="mr-2 h-4 w-4" />
              Create Form
            </Button>
          </Link>
        </CardContent>
      </Card>
    )
  }

  return (
    <div className="grid gap-4">
      {forms.map((form) => (
        <Card key={form.id}>
          <CardContent className="flex items-center gap-4 py-4">
            <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-muted">
              <FileText className="h-5 w-5" />
            </div>
            <div className="flex-1 min-w-0">
              <div className="flex items-center gap-2">
                <h3 className="font-medium truncate">{form.name}</h3>
                <Badge className={statusColors[form.status as keyof typeof statusColors]}>
                  {form.status}
                </Badge>
              </div>
              <div className="flex items-center gap-3 text-sm text-muted-foreground mt-1">
                <span>{form._count.fields} fields</span>
                <span>-</span>
                <span>{form._count.submissions} submissions</span>
                {form.publicSlug && (
                  <>
                    <span>-</span>
                    <span className="text-primary">/apply/{form.publicSlug}</span>
                  </>
                )}
              </div>
            </div>
            <div className="flex items-center gap-2">
              {form.publicSlug && form.status === 'PUBLISHED' && (
                <a
                  href={`/apply/${form.publicSlug}`}
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  <Button variant="ghost" size="icon" title="View Public Form">
                    <ExternalLink className="h-4 w-4" />
                  </Button>
                </a>
              )}
              <Link href={`/admin/forms/${form.id}/submissions`}>
                <Button variant="ghost" size="icon" title="View Submissions">
                  <Inbox className="h-4 w-4" />
                </Button>
              </Link>
              <Link href={`/admin/forms/${form.id}`}>
                <Button variant="ghost" size="icon" title="Edit Form">
                  <Pencil className="h-4 w-4" />
                </Button>
              </Link>
            </div>
          </CardContent>
        </Card>
      ))}
    </div>
  )
}

function LoadingSkeleton() {
  return (
    <div className="grid gap-4">
      {[1, 2, 3].map((i) => (
        <Card key={i}>
          <CardContent className="flex items-center gap-4 py-4">
            <Skeleton className="h-10 w-10 rounded-lg" />
            <div className="flex-1 space-y-2">
              <Skeleton className="h-5 w-48" />
              <Skeleton className="h-4 w-32" />
            </div>
          </CardContent>
        </Card>
      ))}
    </div>
  )
}

export default function FormsPage() {
  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold">Application Forms</h1>
          <p className="text-muted-foreground">
            Create and manage custom application forms
          </p>
        </div>
        <Link href="/admin/forms/new">
          <Button>
            <Plus className="mr-2 h-4 w-4" />
            Create Form
          </Button>
        </Link>
      </div>

      <Suspense fallback={<LoadingSkeleton />}>
        <FormsList />
      </Suspense>
    </div>
  )
}
