'use client';

import React, { useEffect, useState } from 'react';
import Link from 'next/link';
import { useRouter, usePathname } from 'next/navigation';
import { Globe, Menu } from 'lucide-react';
import Sidebar from '@/components/Sidebar';
import { useAuth } from '@/context/AuthContext';

export default function StudentLayout({ children }: { children: React.ReactNode }) {
  const { user, loading } = useAuth();
  const router = useRouter();
  const pathname = usePathname();
  const [isSidebarOpen, setIsSidebarOpen] = useState(false);

  // Close sidebar on route change
  useEffect(() => {
    setIsSidebarOpen(false);
  }, [pathname]);

  useEffect(() => {
    if (!loading && !user) {
      router.replace('/');
    }
  }, [user, loading, router]);

  if (loading || !user) {
    return (
      <div className="min-h-screen bg-[#F8FAFC] flex items-center justify-center text-gray-800 font-bold">
        Loading student dashboard...
      </div>
    );
  }

  return (
    <div className="min-h-screen flex bg-[#F8FAFC] relative overflow-hidden">
      <Sidebar role="student" isOpen={isSidebarOpen} onClose={() => setIsSidebarOpen(false)} />
      <div className="flex-1 flex flex-col min-w-0 overflow-y-auto">
        {/* Student Top Header */}
        <header className="h-16 bg-white border-b border-gray-200 px-4 sm:px-6 md:px-8 flex items-center justify-between shadow-xs shrink-0">
          <div className="flex items-center gap-3 sm:gap-4">
            <button
              onClick={() => setIsSidebarOpen(true)}
              className="lg:hidden p-2 -ml-2 rounded-lg hover:bg-gray-100 text-gray-600 transition-colors"
            >
              <Menu className="w-5 h-5" />
            </button>
            <span className="text-xs font-bold uppercase tracking-wider text-gray-500 hidden sm:inline-block">
              Student Learning Dashboard
            </span>
          </div>

          <div className="flex items-center gap-4">
            <Link
              href="/"
              className="inline-flex items-center gap-2 px-4 py-2 rounded-xl bg-[#FECE00] hover:bg-black text-black hover:text-[#FECE00] text-xs font-black uppercase tracking-wider shadow-xs transition-all transform active:scale-95"
            >
              <Globe className="w-4 h-4" />
              <span>Back to Website</span>
            </Link>

            <div className="hidden sm:flex items-center gap-2 text-xs font-semibold text-gray-700 bg-gray-100 px-3 py-1.5 rounded-lg border border-gray-200">
              <span>Student: <strong className="text-black">{user?.name}</strong></span>
            </div>
          </div>
        </header>

        <main className="p-4 sm:p-6 md:p-8 flex-1">
          {children}
        </main>
      </div>
    </div>
  );
}