'use client';
import { ReactNode, useEffect } from 'react';
import { useAuth } from '../../lib/authContext';
import { useRouter } from 'next/navigation';
import Link from 'next/link';

interface EmployeeLayoutProps {
  children: ReactNode;
  title: string;
}

export default function EmployeeLayout({ children, title }: EmployeeLayoutProps) {
  const { user, logout } = useAuth();
  const router = useRouter();

  useEffect(() => {
    if (!user) {
      router.push('/login');
    }
  }, [user, router]);

  if (!user) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-purple-600"></div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Header */}
      <header className="bg-gradient-to-r from-purple-600 to-pink-600 text-white shadow-lg">
        <div className="container mx-auto px-6 py-4">
          <div className="flex justify-between items-center">
            <div>
              <h1 className="text-xl font-bold">Uwezo Fund HRMS</h1>
              <p className="text-purple-100 text-sm">Employee Portal</p>
            </div>
            <div className="flex items-center gap-4">
              <span className="text-sm">{user.name || user.email}</span>
              <button
                onClick={async () => {
                  await logout();
                  router.push('/login');
                }}
                className="bg-white/20 hover:bg-white/30 px-4 py-2 rounded-lg text-sm transition"
              >
                Logout
              </button>
            </div>
          </div>
        </div>
      </header>

      {/* Navigation */}
      <nav className="bg-white shadow-md border-b">
        <div className="container mx-auto px-6">
          <div className="flex space-x-8">
            <Link href="/employee" className="py-3 text-gray-600 hover:text-purple-600 border-b-2 border-transparent hover:border-purple-600 transition">
              Dashboard
            </Link>
            <Link href="/employee/leave" className="py-3 text-gray-600 hover:text-purple-600 border-b-2 border-transparent hover:border-purple-600 transition">
              Leave
            </Link>
            <Link href="/employee/training" className="py-3 text-gray-600 hover:text-purple-600 border-b-2 border-transparent hover:border-purple-600 transition">
              Training
            </Link>
            <Link href="/employee/performance" className="py-3 text-gray-600 hover:text-purple-600 border-b-2 border-transparent hover:border-purple-600 transition">
              Performance
            </Link>
          </div>
        </div>
      </nav>

      {/* Main Content */}
      <main className="container mx-auto px-6 py-8">
        <div className="mb-6">
          <h2 className="text-2xl font-bold text-gray-800">{title}</h2>
        </div>
        {children}
      </main>
    </div>
  );
}