import { notFound } from 'next/navigation'
import Link from 'next/link'
import { api } from '@/lib/trpc/server'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card'
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table'
import { ArrowLeft, Pencil, Plus, Settings } from 'lucide-react'
import { formatDateOnly } from '@/lib/utils'

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

const statusColors: Record<string, 'default' | 'success' | 'secondary' | 'destructive'> = {
  DRAFT: 'secondary',
  ACTIVE: 'default',
  CLOSED: 'success',
  ARCHIVED: 'secondary',
}

export default async function ProgramDetailPage({ params }: ProgramDetailPageProps) {
  const { id } = await params
  const caller = await api()

  let program
  try {
    program = await caller.program.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/programs">
            <Button variant="ghost" size="icon">
              <ArrowLeft className="h-4 w-4" />
            </Button>
          </Link>
          <div>
            <div className="flex items-center gap-2">
              <h1 className="text-2xl font-bold">{program.name}</h1>
              <Badge variant={statusColors[program.status] || 'secondary'}>
                {program.status}
              </Badge>
            </div>
            <p className="text-muted-foreground">
              {program.year} Edition
            </p>
          </div>
        </div>
        <div className="flex gap-2">
          <Button variant="outline" asChild>
            <Link href={`/admin/programs/${id}/edit`}>
              <Pencil className="mr-2 h-4 w-4" />
              Edit
            </Link>
          </Button>
          <Button variant="outline" asChild>
            <Link href={`/admin/programs/${id}/settings`}>
              <Settings className="mr-2 h-4 w-4" />
              Settings
            </Link>
          </Button>
        </div>
      </div>

      {program.description && (
        <Card>
          <CardHeader>
            <CardTitle>Description</CardTitle>
          </CardHeader>
          <CardContent>
            <p className="text-muted-foreground">{program.description}</p>
          </CardContent>
        </Card>
      )}

      <Card>
        <CardHeader className="flex flex-row items-center justify-between">
          <div>
            <CardTitle>Rounds</CardTitle>
            <CardDescription>
              Voting rounds for this program
            </CardDescription>
          </div>
          <Button asChild>
            <Link href={`/admin/rounds/new?programId=${id}`}>
              <Plus className="mr-2 h-4 w-4" />
              New Round
            </Link>
          </Button>
        </CardHeader>
        <CardContent>
          {program.rounds.length === 0 ? (
            <div className="py-8 text-center text-muted-foreground">
              No rounds created yet. Create a round to start accepting projects.
            </div>
          ) : (
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Round</TableHead>
                  <TableHead>Status</TableHead>
                  <TableHead>Projects</TableHead>
                  <TableHead>Assignments</TableHead>
                  <TableHead>Created</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {program.rounds.map((round) => (
                  <TableRow key={round.id}>
                    <TableCell>
                      <Link
                        href={`/admin/rounds/${round.id}`}
                        className="font-medium hover:underline"
                      >
                        {round.name}
                      </Link>
                    </TableCell>
                    <TableCell>
                      <Badge variant={statusColors[round.status] || 'secondary'}>
                        {round.status}
                      </Badge>
                    </TableCell>
                    <TableCell>{round._count.projects}</TableCell>
                    <TableCell>{round._count.assignments}</TableCell>
                    <TableCell>{formatDateOnly(round.createdAt)}</TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          )}
        </CardContent>
      </Card>
    </div>
  )
}