'use client'

import Link from 'next/link'
import type { Route } from 'next'
import { trpc } from '@/lib/trpc/client'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { Skeleton } from '@/components/ui/skeleton'
import { Button } from '@/components/ui/button'
import { ArrowLeft, ArrowRight, ClipboardList, Target } from 'lucide-react'
import { toast } from 'sonner'

export default function JuryCompetitionsPage() {
  const { data: competitions, isLoading } = trpc.competition.getMyCompetitions.useQuery()

  if (isLoading) {
    return (
      <div className="space-y-6">
        <Skeleton className="h-8 w-64" />
        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
          {[1, 2, 3].map((i) => (
            <Skeleton key={i} className="h-40" />
          ))}
        </div>
      </div>
    )
  }

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold tracking-tight text-brand-blue dark:text-foreground">
            My Competitions
          </h1>
          <p className="text-muted-foreground mt-1">
            View competitions and rounds you&apos;re assigned to
          </p>
        </div>
        <Button variant="ghost" size="sm" asChild>
          <Link href={'/jury' as Route}>
            <ArrowLeft className="mr-2 h-4 w-4" />
            Back to Dashboard
          </Link>
        </Button>
      </div>

      {!competitions || competitions.length === 0 ? (
        <Card>
          <CardContent className="flex flex-col items-center justify-center py-12">
            <div className="rounded-2xl bg-brand-teal/10 p-4 mb-4">
              <ClipboardList className="h-8 w-8 text-brand-teal/60" />
            </div>
            <h2 className="text-xl font-semibold mb-2">No Competitions</h2>
            <p className="text-muted-foreground text-center max-w-md">
              You don&apos;t have any active competition assignments yet.
            </p>
          </CardContent>
        </Card>
      ) : (
        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
          {competitions.map((competition) => {
            const activeRounds = competition.rounds?.filter(r => r.status !== 'ROUND_ARCHIVED') || []
            const totalRounds = competition.rounds?.length || 0

            return (
              <Card key={competition.id} className="flex flex-col transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md">
                <CardHeader>
                  <div className="flex items-start justify-between">
                    <div>
                      <CardTitle className="text-lg">{competition.name}</CardTitle>
                    </div>
                    <Badge variant="secondary">
                      {totalRounds} round{totalRounds !== 1 ? 's' : ''}
                    </Badge>
                  </div>
                </CardHeader>
                <CardContent className="flex-1 flex flex-col space-y-4">

                  <div className="flex-1" />

                  <div className="space-y-2">
                    {activeRounds.length > 0 ? (
                      activeRounds.slice(0, 2).map((round) => (
                        <Link
                          key={round.id}
                          href={`/jury/competitions/${round.id}` as Route}
                          className="flex items-center justify-between p-3 rounded-lg border border-border/60 hover:border-brand-blue/30 hover:bg-brand-blue/5 transition-all group"
                        >
                          <div className="flex items-center gap-2 flex-1 min-w-0">
                            <Target className="h-4 w-4 text-brand-teal shrink-0" />
                            <span className="text-sm font-medium truncate">{round.name}</span>
                          </div>
                          <ArrowRight className="h-4 w-4 text-muted-foreground group-hover:text-brand-blue transition-colors shrink-0" />
                        </Link>
                      ))
                    ) : (
                      <p className="text-sm text-muted-foreground text-center py-2">
                        No active rounds
                      </p>
                    )}
                    {activeRounds.length > 2 && (
                      <p className="text-xs text-muted-foreground text-center">
                        +{activeRounds.length - 2} more round{activeRounds.length - 2 !== 1 ? 's' : ''}
                      </p>
                    )}
                  </div>
                </CardContent>
              </Card>
            )
          })}
        </div>
      )}
    </div>
  )
}