import { Outlet, Link, useLocation } from 'react-router-dom'
import { useAuth } from '../context/AuthContext'

export default function Layout() {
  const location = useLocation()
  const { username, logout, isAdmin } = useAuth()

  const allNavItems = [
    { path: '/scan', label: 'Scan', icon: '🗂️', adminOnly: false },
    { path: '/process', label: 'Process', icon: '⚙️', adminOnly: false },
    { path: '/search', label: 'Search', icon: '🔍', adminOnly: false },
    { path: '/identify', label: 'Identify', icon: '👤', adminOnly: false },
    { path: '/auto-match', label: 'Auto-Match', icon: '🤖', adminOnly: false },
    { path: '/modify', label: 'Modify', icon: '✏️', adminOnly: false },
    { path: '/tags', label: 'Tag', icon: '🏷️', adminOnly: false },
    { path: '/faces-maintenance', label: 'Faces Maintenance', icon: '🔧', adminOnly: false },
    { path: '/approve-identified', label: 'Approve identified', icon: '✅', adminOnly: true },
    { path: '/manage-users', label: 'Manage users', icon: '👥', adminOnly: true },
    { path: '/reported-photos', label: 'Reported photos', icon: '🚩', adminOnly: true },
    { path: '/settings', label: 'Settings', icon: '⚙️', adminOnly: false },
    { path: '/help', label: 'Help', icon: '📚', adminOnly: false },
  ]

  // Filter nav items based on admin status
  const navItems = allNavItems.filter((item) => !item.adminOnly || isAdmin)

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Top bar */}
      <div className="bg-white border-b border-gray-200 shadow-sm">
        <div className="max-w-7xl mx-auto px-2 sm:px-4 lg:px-6">
          <div className="flex justify-between items-center h-16">
            <div className="flex items-center gap-2">
              <Link to="/" className="flex items-center gap-2 hover:opacity-80 transition-opacity">
                <span className="text-2xl">🏠</span>
                <h1 className="text-xl font-bold text-gray-900">PunimTag</h1>
              </Link>
            </div>
            <div className="flex items-center gap-4">
              <span className="text-sm text-gray-600">{username}</span>
              <button
                onClick={logout}
                className="px-3 py-1 text-sm text-gray-600 hover:text-gray-900"
              >
                Logout
              </button>
            </div>
          </div>
        </div>
      </div>

      <div className="flex relative">
        {/* Left sidebar - fixed position */}
        <div className="fixed left-0 top-16 w-64 bg-white border-r border-gray-200 h-[calc(100vh-4rem)] overflow-y-auto">
          <nav className="p-4 space-y-1">
            {navItems.map((item) => {
              const isActive = location.pathname === item.path
              return (
                <Link
                  key={item.path}
                  to={item.path}
                  className={`flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors ${
                    isActive
                      ? 'bg-blue-50 text-blue-700'
                      : 'text-gray-700 hover:bg-gray-50'
                  }`}
                >
                  <span>{item.icon}</span>
                  <span>{item.label}</span>
                </Link>
              )
            })}
          </nav>
        </div>

        {/* Main content - with left margin to account for fixed sidebar */}
        <div className="flex-1 ml-64 p-6">
          <Outlet />
        </div>
      </div>
    </div>
  )
}

