'use client';

import React, { useState } from 'react';
import { usePathname, useRouter } from 'next/navigation';
import { useTranslations } from 'next-intl';
import { AnimatePresence, motion } from 'framer-motion';
import { ProtectedRoute } from '@/components/auth/ProtectedRoute';
import { useAuth } from '@/lib/hooks/useAuth';
import { FiHome, FiCalendar, FiCreditCard, FiUser, FiLogOut, FiBell, FiMenu, FiX } from 'react-icons/fi';

export default function StudentLayout({ children }: { children: React.ReactNode }) {
  const t = useTranslations();
  const router = useRouter();
  const pathname = usePathname();
  const { user, logout } = useAuth();
  const [sidebarOpen, setSidebarOpen] = useState(false);

  const localeMatch = pathname?.match(/^\/(id|en|th|ms)/);
  const locale = localeMatch ? localeMatch[1] : 'id';
  const lp = (path: string) => `/${locale}${path}`;

  const navItems = [
    { path: lp('/student/dashboard'), icon: <FiCreditCard />, label: t('parent.eWallet') },
    { path: lp('/student/attendance'), icon: <FiCalendar />, label: t('navigation.attendance') },
    { path: lp('/student/schedule'), icon: <FiCalendar />, label: t('navigation.schedules') },
    { path: lp('/student/profile'), icon: <FiUser />, label: t('navigation.profile') },
  ];

  const isActive = (path: string) => pathname === path || pathname.startsWith(path + '/');

  return (
    <ProtectedRoute allowedRoles={['student']}>
      <div className="flex h-screen bg-gray-50 overflow-hidden">
        <AnimatePresence>
          {sidebarOpen && (
            <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}
              onClick={() => setSidebarOpen(false)} className="lg:hidden fixed inset-0 bg-black/50 z-40" />
          )}
        </AnimatePresence>

        <aside className={`${sidebarOpen ? 'translate-x-0' : '-translate-x-full'} lg:translate-x-0 fixed lg:sticky top-0 left-0 h-screen w-64 bg-white border-r border-gray-200 z-40 transition-transform duration-300 flex flex-col`}>
          <div className="p-6 border-b border-gray-200">
            <div className="flex items-center gap-3">
              <div className="w-10 h-10 bg-gradient-to-br from-primary to-secondary rounded-lg flex items-center justify-center">
                <span className="text-white font-bold text-xl">E</span>
              </div>
              <div>
                <h1 className="text-base font-bold text-gray-900">{t('common.appName')}</h1>
                <p className="text-xs text-gray-500">{t('student.portalStudent')}</p>
              </div>
            </div>
          </div>

          <nav className="flex-1 p-4">
            {navItems.map((item) => (
              <button key={item.path} onClick={() => { router.push(item.path); setSidebarOpen(false); }}
                className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg mb-1 transition-all text-sm font-medium ${isActive(item.path) ? 'bg-primary text-white shadow-md' : 'text-gray-700 hover:bg-gray-100'}`}>
                <span className="text-lg">{item.icon}</span>
                {item.label}
              </button>
            ))}
          </nav>

          <div className="p-4 border-t border-gray-200">
            <button onClick={logout} className="w-full flex items-center gap-3 px-4 py-3 rounded-lg text-red-600 hover:bg-red-50 text-sm font-medium">
              <FiLogOut /> {t('auth.logout')}
            </button>
          </div>
        </aside>

        <div className="flex-1 flex flex-col overflow-hidden">
          <header className="sticky top-0 z-30 bg-white border-b border-gray-200 px-6 py-4 flex items-center justify-between">
            <button onClick={() => setSidebarOpen(!sidebarOpen)} className="lg:hidden p-2 hover:bg-gray-100 rounded-lg">
              {sidebarOpen ? <FiX /> : <FiMenu />}
            </button>
            <div className="flex items-center gap-3 ml-auto">
              <button className="p-2 hover:bg-gray-100 rounded-lg text-gray-600"><FiBell size={18} /></button>
              <div className="flex items-center gap-2">
                <div className="w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center font-semibold text-sm">
                  {user?.name?.charAt(0)?.toUpperCase() || 'S'}
                </div>
                <span className="text-sm font-medium text-gray-900 hidden md:block">{user?.name}</span>
              </div>
            </div>
          </header>
          <main className="flex-1 overflow-y-auto">{children}</main>
        </div>
      </div>
    </ProtectedRoute>
  );
}