import { Suspense } from 'react'
import { notFound } from 'next/navigation'
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 { ArrowLeft, Inbox, Eye, Download } from 'lucide-react'
import { formatDate } from '@/lib/utils'

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

const statusColors = {
  SUBMITTED: 'bg-blue-100 text-blue-800',
  REVIEWED: 'bg-yellow-100 text-yellow-800',
  APPROVED: 'bg-green-100 text-green-800',
  REJECTED: 'bg-red-100 text-red-800',
}

async function SubmissionsList({ formId }: { formId: string }) {
  const caller = await api()
  const { data: submissions } = await caller.applicationForm.listSubmissions({
    formId,
    perPage: 50,
  })

  if (submissions.length === 0) {
    return (
      <Card>
        <CardContent className="flex flex-col items-center justify-center py-12">
          <Inbox className="h-12 w-12 text-muted-foreground mb-4" />
          <h3 className="text-lg font-medium mb-2">No submissions yet</h3>
          <p className="text-muted-foreground">
            Submissions will appear here once people start filling out the form
          </p>
        </CardContent>
      </Card>
    )
  }

  return (
    <div className="grid gap-4">
      {submissions.map((submission) => (
        <Card key={submission.id}>
          <CardContent className="flex items-center gap-4 py-4">
            <div className="flex-1 min-w-0">
              <div className="flex items-center gap-2">
                <h3 className="font-medium">
                  {submission.name || submission.email || 'Anonymous'}
                </h3>
                <Badge className={statusColors[submission.status as keyof typeof statusColors]}>
                  {submission.status}
                </Badge>
              </div>
              <p className="text-sm text-muted-foreground mt-1">
                {submission.email && <span>{submission.email} - </span>}
                Submitted {formatDate(submission.createdAt)}
              </p>
            </div>
            <div className="flex items-center gap-2">
              <Link href={`/admin/forms/${formId}/submissions/${submission.id}`}>
                <Button variant="ghost" size="icon">
                  <Eye 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">
            <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 async function SubmissionsPage({ params }: SubmissionsPageProps) {
  const { id } = await params
  const caller = await api()

  let form
  try {
    form = await caller.applicationForm.get({ id })
  } catch {
    notFound()
  }

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-4">
          <Link href={`/admin/forms/${id}`}>
            <Button variant="ghost" size="icon">
              <ArrowLeft className="h-4 w-4" />
            </Button>
          </Link>
          <div>
            <h1 className="text-2xl font-bold">Submissions</h1>
            <p className="text-muted-foreground">
              {form.name} - {form._count.submissions} total submissions
            </p>
          </div>
        </div>
        <Button variant="outline">
          <Download className="mr-2 h-4 w-4" />
          Export CSV
        </Button>
      </div>

      <Suspense fallback={<LoadingSkeleton />}>
        <SubmissionsList formId={id} />
      </Suspense>
    </div>
  )
}
