import React from 'react';
import { useAuth } from '../context/AuthContext';
import { Link, Outlet, useLocation } from 'react-router-dom';
import { 
  LayoutDashboard, 
  BookOpen, 
  QrCode, 
  LogOut, 
  UserCircle 
} from 'lucide-react';

export const Layout: React.FC = () => {
  const { user, logout } = useAuth();
  const location = useLocation();

  if (!user) return <Outlet />;

  // Update logic to highlight active path correctly with new routing
  const isActive = (path: string) => location.pathname === path ? 'text-accent' : 'text-slate-400';

  return (
    <div className="min-h-screen bg-dark pb-20 md:pb-0 md:pl-64 transition-all duration-300">
      {/* Desktop Sidebar */}
      <aside className="fixed top-0 left-0 h-full w-64 bg-card border-r border-gray-800 hidden md:flex flex-col z-20">
        <div className="p-6 border-b border-gray-800 flex items-center gap-3">
          <div className="w-10 h-10 bg-gradient-to-br from-yellow-400 to-orange-600 rounded-full flex items-center justify-center font-bold text-black font-oswald text-xl">
            S
          </div>
          <div>
            <h1 className="font-oswald text-lg text-white leading-none">GURU SMART</h1>
            <span className="text-xs text-slate-500">SMPN 6 Pasuruan</span>
          </div>
        </div>
        
        <div className="p-6">
          <div className="flex items-center gap-3 mb-8">
            <div className="w-12 h-12 bg-slate-800 rounded-full flex items-center justify-center">
              <UserCircle size={32} className="text-slate-400" />
            </div>
            <div>
              <p className="font-bold text-sm text-white truncate max-w-[120px]">{user.nama}</p>
              <p className="text-xs text-accent uppercase">{user.role}</p>
            </div>
          </div>

          <nav className="flex flex-col gap-2">
            <Link to="/dashboard" className={`flex items-center gap-3 p-3 rounded-lg hover:bg-slate-800 ${isActive('/dashboard')}`}>
              <LayoutDashboard size={20} />
              <span className="font-medium">Dashboard</span>
            </Link>
            <Link to="/journal" className={`flex items-center gap-3 p-3 rounded-lg hover:bg-slate-800 ${isActive('/journal')}`}>
              <BookOpen size={20} />
              <span className="font-medium">Isi Jurnal</span>
            </Link>
            <Link to="/scan" className={`flex items-center gap-3 p-3 rounded-lg hover:bg-slate-800 ${isActive('/scan')}`}>
              <QrCode size={20} />
              <span className="font-medium">Scanner QR</span>
            </Link>
          </nav>
        </div>

        <div className="mt-auto p-6">
          <button 
            onClick={logout}
            className="flex items-center gap-2 text-red-500 hover:text-red-400 transition-colors w-full p-2"
          >
            <LogOut size={20} />
            <span>Logout</span>
          </button>
        </div>
      </aside>

      {/* Mobile Header */}
      <header className="md:hidden sticky top-0 z-30 bg-card border-b border-gray-800 p-4 flex justify-between items-center shadow-md">
        <div className="flex items-center gap-2">
          <div className="w-8 h-8 bg-gradient-to-br from-yellow-400 to-orange-600 rounded-full flex items-center justify-center font-bold text-black font-oswald">
            S
          </div>
          <span className="font-oswald text-white">GURU SMART</span>
        </div>
        <div className="flex items-center gap-2">
          <span className="text-xs text-right text-slate-400">
            {user.nama.split(' ')[0]}<br/>
            <span className="text-accent">{user.role}</span>
          </span>
          <button onClick={logout} className="p-2 text-red-500">
            <LogOut size={18} />
          </button>
        </div>
      </header>

      {/* Main Content */}
      <main className="p-4 md:p-8 max-w-7xl mx-auto">
        <Outlet />
      </main>

      {/* Mobile Bottom Nav */}
      <nav className="md:hidden fixed bottom-0 left-0 w-full bg-card border-t border-gray-800 flex justify-around p-3 z-30 pb-safe">
        <Link to="/dashboard" className={`flex flex-col items-center gap-1 ${isActive('/dashboard')}`}>
          <LayoutDashboard size={20} />
          <span className="text-[10px]">Home</span>
        </Link>
        <Link to="/journal" className={`flex flex-col items-center gap-1 ${isActive('/journal')}`}>
          <BookOpen size={20} />
          <span className="text-[10px]">Jurnal</span>
        </Link>
        <div className="relative -top-6">
           <Link to="/scan" className="w-14 h-14 bg-accent rounded-full flex items-center justify-center text-black shadow-lg shadow-yellow-500/20 border-4 border-dark">
            <QrCode size={24} />
          </Link>
        </div>
        <Link to="/profile" className={`flex flex-col items-center gap-1 ${isActive('/profile')}`}>
          <UserCircle size={20} />
          <span className="text-[10px]">Profil</span>
        </Link>
      </nav>
    </div>
  );
};