'use client';

import { use } 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 { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { ArrowLeft, Plus } from 'lucide-react';
import type { Route } from 'next';

export default function AwardsPage({ params: paramsPromise }: { params: Promise<{ competitionId: string }> }) {
  const params = use(paramsPromise);
  const router = useRouter();
  const { data: competition } = trpc.competition.getById.useQuery({
    id: params.competitionId
  });

  const { data: awards, isLoading } = trpc.specialAward.list.useQuery({
    programId: competition?.programId
  }, {
    enabled: !!competition?.programId
  });

  if (isLoading) {
    return (
      <div className="space-y-6">
        <div className="flex items-center gap-4">
          <Button variant="ghost" size="icon" onClick={() => router.back()}>
            <ArrowLeft className="h-4 w-4" />
          </Button>
          <div>
            <h1 className="text-3xl font-bold">Special Awards</h1>
            <p className="text-muted-foreground">Loading...</p>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
        <div className="flex items-center gap-4">
          <Button variant="ghost" size="icon" onClick={() => router.back()}>
            <ArrowLeft className="h-4 w-4" />
          </Button>
          <div>
            <h1 className="text-3xl font-bold">Special Awards</h1>
            <p className="text-muted-foreground">
              Manage special awards and prizes for this competition
            </p>
          </div>
        </div>
        <Link href={`/admin/competitions/${params.competitionId}/awards/new` as Route}>
          <Button>
            <Plus className="mr-2 h-4 w-4" />
            Create Award
          </Button>
        </Link>
      </div>

      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
        {awards?.map((award) => (
          <Link
            key={award.id}
            href={`/admin/competitions/${params.competitionId}/awards/${award.id}` as Route}
          >
            <Card className="cursor-pointer transition-shadow hover:shadow-md">
              <CardHeader>
                <CardTitle className="flex items-start justify-between">
                  <span className="line-clamp-1">{award.name}</span>
                </CardTitle>
                <CardDescription className="line-clamp-2">
                  {award.description || 'No description'}
                </CardDescription>
              </CardHeader>
              <CardContent>
                <div className="flex flex-wrap gap-2">
                  <Badge variant="outline">{award.scoringMode}</Badge>
                  <Badge variant={award.status === 'DRAFT' ? 'secondary' : 'default'}>
                    {award.status}
                  </Badge>
                </div>
              </CardContent>
            </Card>
          </Link>
        ))}
      </div>

      {awards?.length === 0 && (
        <Card>
          <CardContent className="flex flex-col items-center justify-center py-12">
            <p className="text-muted-foreground">No awards created yet</p>
            <Link href={`/admin/competitions/${params.competitionId}/awards/new` as Route}>
              <Button variant="link">Create your first award</Button>
            </Link>
          </CardContent>
        </Card>
      )}
    </div>
  );
}
