'use client';

import React, { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';
import { Navbar } from '../../components/Navbar';
import { getCurrentUser } from '../../lib/api';

export default function ScorerLayout({ children }: { children: React.ReactNode }) {
  const router = useRouter();
  const [authorized, setAuthorized] = useState(false);

  useEffect(() => {
    const user = getCurrentUser();
    if (!user) {
      router.push('/ops/login');
      return;
    }
    if (!['SCORER', 'SUPER_ADMIN', 'ADMIN'].includes(user.role)) {
      router.push('/');
      return;
    }
    setAuthorized(true);
  }, [router]);

  if (!authorized) {
    return (
      <div className="flex min-h-[100dvh] items-center justify-center bg-[#090a0f] text-sm text-zinc-400">
        Verifying scorer credentials...
      </div>
    );
  }

  return (
    <div className="flex min-h-[100dvh] flex-col bg-[#090a0f] text-zinc-100">
      <Navbar />
      <div className="mx-auto w-full max-w-7xl flex-1 overflow-y-auto p-4 md:p-6">{children}</div>
    </div>
  );
}