'use client';

import { use } from 'react';
import { useRouter } from 'next/navigation';
import { Button } from '@/components/ui/button';
import { ArrowLeft } from 'lucide-react';
import { LiveControlPanel } from '@/components/admin/live/live-control-panel';
import type { Route } from 'next';

export default function LiveFinalsPage({
  params: paramsPromise
}: {
  params: Promise<{ competitionId: string; roundId: string }>;
}) {
  const params = use(paramsPromise);
  const router = useRouter();

  return (
    <div className="space-y-6">
      <div className="flex items-center gap-4">
        <Button
          variant="ghost"
          size="icon"
          onClick={() => router.push(`/admin/competitions/${params.competitionId}` as Route)}
        >
          <ArrowLeft className="h-4 w-4" />
        </Button>
        <div>
          <h1 className="text-3xl font-bold">Live Finals Control</h1>
          <p className="text-muted-foreground">Manage live ceremony presentation and voting</p>
        </div>
      </div>

      <LiveControlPanel roundId={params.roundId} competitionId={params.competitionId} />
    </div>
  );
}