'use client'

import { useParams, useRouter } from 'next/navigation'
import { ArrowLeft } from 'lucide-react'
import { trpc } from '@/lib/trpc/client'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { Skeleton } from '@/components/ui/skeleton'
import { JuryMembersTable } from '@/components/admin/jury/jury-members-table'
import { Badge } from '@/components/ui/badge'

export default function JuryGroupDetailPage() {
  const params = useParams()
  const router = useRouter()
  const juryGroupId = params.juryGroupId as string

  const { data: juryGroup, isLoading } = trpc.juryGroup.getById.useQuery({ id: juryGroupId })

  if (isLoading) {
    return (
    <div className="container mx-auto space-y-6 p-4 sm:p-6">
        <Skeleton className="h-10 w-full" />
        <Skeleton className="h-96 w-full" />
      </div>
    )
  }

  if (!juryGroup) {
    return (
    <div className="container mx-auto space-y-6 p-4 sm:p-6">
        <p>Jury group not found</p>
      </div>
    )
  }

  return (
    <div className="container mx-auto space-y-6 p-4 sm:p-6">
      <Button variant="ghost" onClick={() => router.back()} className="mb-4" aria-label="Back to jury groups list">
        <ArrowLeft className="mr-2 h-4 w-4" />
        Back to Juries
      </Button>

      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
        <div>
          <h1 className="text-3xl font-bold">{juryGroup.name}</h1>
          <p className="text-muted-foreground">{juryGroup.slug}</p>
        </div>
        <Badge variant="secondary" className="text-lg px-4 py-2">
          {juryGroup.defaultCapMode}
        </Badge>
      </div>

      <Tabs defaultValue="members" className="w-full">
        <TabsList className="grid w-full grid-cols-2">
          <TabsTrigger value="members">Members</TabsTrigger>
          <TabsTrigger value="settings">Settings</TabsTrigger>
        </TabsList>

        <TabsContent value="members" className="mt-6">
          <Card>
            <CardHeader>
              <CardTitle>Jury Members</CardTitle>
              <CardDescription>
                Manage the members of this jury group
              </CardDescription>
            </CardHeader>
            <CardContent>
              <JuryMembersTable
                juryGroupId={juryGroupId}
                members={juryGroup.members}
              />
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="settings" className="mt-6">
          <Card>
            <CardHeader>
              <CardTitle>Jury Group Settings</CardTitle>
              <CardDescription>
                View and edit settings for this jury group
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid gap-4 grid-cols-1 sm:grid-cols-2">
                <div>
                  <h3 className="text-sm font-medium text-muted-foreground">Name</h3>
                  <p className="text-base font-medium">{juryGroup.name}</p>
                </div>
                <div>
                  <h3 className="text-sm font-medium text-muted-foreground">Slug</h3>
                  <p className="text-base font-medium">{juryGroup.slug}</p>
                </div>
                <div>
                  <h3 className="text-sm font-medium text-muted-foreground">Default Max Assignments</h3>
                  <p className="text-base font-medium">{juryGroup.defaultMaxAssignments}</p>
                </div>
                <div>
                  <h3 className="text-sm font-medium text-muted-foreground">Default Cap Mode</h3>
                  <Badge variant="secondary">{juryGroup.defaultCapMode}</Badge>
                </div>
                <div>
                  <h3 className="text-sm font-medium text-muted-foreground">Soft Cap Buffer</h3>
                  <p className="text-base font-medium">{juryGroup.softCapBuffer}</p>
                </div>
                <div>
                  <h3 className="text-sm font-medium text-muted-foreground">Allow Juror Cap Adjustment</h3>
                  <Badge variant={juryGroup.allowJurorCapAdjustment ? 'default' : 'secondary'}>
                    {juryGroup.allowJurorCapAdjustment ? 'Yes' : 'No'}
                  </Badge>
                </div>
                <div>
                  <h3 className="text-sm font-medium text-muted-foreground">Allow Ratio Adjustment</h3>
                  <Badge variant={juryGroup.allowJurorRatioAdjustment ? 'default' : 'secondary'}>
                    {juryGroup.allowJurorRatioAdjustment ? 'Yes' : 'No'}
                  </Badge>
                </div>
                <div>
                  <h3 className="text-sm font-medium text-muted-foreground">Category Quotas Enabled</h3>
                  <Badge variant={juryGroup.categoryQuotasEnabled ? 'default' : 'secondary'}>
                    {juryGroup.categoryQuotasEnabled ? 'Yes' : 'No'}
                  </Badge>
                </div>
              </div>

              {juryGroup.description && (
                <div>
                  <h3 className="text-sm font-medium text-muted-foreground mb-2">Description</h3>
                  <p className="text-base">{juryGroup.description}</p>
                </div>
              )}
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}
