'use client'

import { useParams } 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 { Skeleton } from '@/components/ui/skeleton'
import { ArrowLeft } from 'lucide-react'

export default function ProgramSettingsPage() {
  const params = useParams()
  const id = params.id as string

  const { data: program, isLoading } = trpc.program.get.useQuery({ id })

  if (isLoading) {
    return (
      <div className="space-y-6">
        <div className="flex items-center gap-4">
          <Skeleton className="h-10 w-10" />
          <div className="space-y-2">
            <Skeleton className="h-8 w-48" />
            <Skeleton className="h-4 w-32" />
          </div>
        </div>
        <Card>
          <CardContent className="space-y-4 pt-6">
            <Skeleton className="h-10 w-full" />
            <Skeleton className="h-10 w-full" />
          </CardContent>
        </Card>
      </div>
    )
  }

  return (
    <div className="space-y-6">
      <div className="flex items-center gap-4">
        <Link href={`/admin/programs/${id}`}>
          <Button variant="ghost" size="icon">
            <ArrowLeft className="h-4 w-4" />
          </Button>
        </Link>
        <div>
          <h1 className="text-2xl font-bold">Program Settings</h1>
          <p className="text-muted-foreground">
            Configure settings for {program?.name}
          </p>
        </div>
      </div>

      <Card>
        <CardHeader>
          <CardTitle>Program Configuration</CardTitle>
          <CardDescription>
            Advanced settings for this program
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="py-8 text-center text-muted-foreground">
            Program-specific settings will be available in a future update.
            <br />
            For now, manage rounds and projects through the program detail page.
          </div>
          <div className="flex justify-center">
            <Button asChild>
              <Link href={`/admin/programs/${id}`}>
                Back to Program
              </Link>
            </Button>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
