'use client';

import { AuthGuard } from '@/components/auth-guard';
import { ClubSwitcher } from '@/components/club-switcher';
import Link from 'next/link';
import { SignOutButton } from '@/components/sign-out-button';
import { useSession } from 'next-auth/react';

export default function ProtectedLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const { data } = useSession();
  const isAdmin = data?.user?.isAdmin;

  return (
    <AuthGuard>
      <div className="flex min-h-screen bg-gray-50">
        <aside className="hidden md:flex flex-col w-64 bg-white border-r">
          <div className="p-4 border-b">
            <h1 className="text-xl font-bold">WorkClub</h1>
          </div>
          {isAdmin ? (
            <nav className="flex-1 p-4 space-y-2">
              <Link href="/admin/clubs" className="flex items-center px-4 py-2 text-sm font-medium rounded-md hover:bg-gray-100">
                Club Management
              </Link>
            </nav>
          ) : (
            <nav className="flex-1 p-4 space-y-2">
              <Link href="/dashboard" className="flex items-center px-4 py-2 text-sm font-medium rounded-md hover:bg-gray-100">
                Dashboard
              </Link>
              <Link href="/tasks" className="flex items-center px-4 py-2 text-sm font-medium rounded-md hover:bg-gray-100">
                Tasks
              </Link>
              <Link href="/shifts" className="flex items-center px-4 py-2 text-sm font-medium rounded-md hover:bg-gray-100">
                Shifts
              </Link>
              <Link href="/members" className="flex items-center px-4 py-2 text-sm font-medium rounded-md hover:bg-gray-100">
                Members
              </Link>
            </nav>
          )}
        </aside>

        <div className="flex-1 flex flex-col">
          <header className="bg-white border-b h-16 flex items-center justify-between px-6">
            <div className="flex items-center gap-4">
              {!isAdmin && <ClubSwitcher />}
            </div>
            <div className="flex items-center gap-4">
              <SignOutButton />
            </div>
          </header>

          <main className="flex-1 p-6 overflow-auto">
            {children}
          </main>
        </div>
      </div>
    </AuthGuard>
  );
}