OFApp/client/src/App.jsx

import { useState, useEffect, useRef } from 'react'
import { Routes, Route, NavLink, Navigate, useLocation } from 'react-router-dom'
import { getMe, getNewMediaCount, checkAuth, appAuthLogout } from './api'
import { useAuth } from './AuthContext'
import AppLogin from './pages/AppLogin'
import AppSetup from './pages/AppSetup'
import Login from './pages/Login'
import Dashboard from './pages/Dashboard'
import Feed from './pages/Feed'
import Users from './pages/Users'
import UserPosts from './pages/UserPosts'
import Downloads from './pages/Downloads'
import Search from './pages/Search'
import Gallery from './pages/Gallery'
import Duplicates from './pages/Duplicates'
import Scrape from './pages/Scrape'
import Videos from './pages/Videos'
import VideoDetail from './pages/VideoDetail'
import VideoUpload from './pages/VideoUpload'
import UserManagement from './pages/UserManagement'

// Route key mapping for nav items (null = always visible, undefined = no check needed)
const allNavItems = [
  { to: '/', label: 'Home', icon: HomeIcon, exact: true, routeKey: 'dashboard' },
  { to: '/feed', label: 'Feed', icon: FeedIcon, routeKey: 'feed' },
  { to: '/users', label: 'Users', icon: UsersIcon, routeKey: 'users' },
  { to: '/search', label: 'Search', icon: SearchIcon, routeKey: 'users' },
  { to: '/downloads', label: 'Downloads', icon: DownloadIcon, routeKey: 'downloads' },
  { to: '/gallery', label: 'Gallery', icon: GalleryNavIcon, routeKey: 'gallery' },
  { to: '/videos', label: 'Videos', icon: VideoNavIcon, routeKey: 'videos' },
  { to: '/scrape', label: 'Scrape', icon: ScrapeIcon, routeKey: 'scrape' },
  { to: '/settings', label: 'Settings', icon: SettingsIcon, routeKey: 'settings' },
]

const allMobileNavItems = [
  { to: '/', label: 'Home', icon: HomeIcon, exact: true, routeKey: 'dashboard' },
  { to: '/users', label: 'Users', icon: UsersIcon, routeKey: 'users' },
  { to: '/gallery', label: 'Gallery', icon: GalleryNavIcon, routeKey: 'gallery' },
  { to: '/search', label: 'Search', icon: SearchIcon, routeKey: 'users' },
  { to: '/more', label: 'More', icon: MoreIcon },
]

const allMoreNavItems = [
  { to: '/feed', label: 'Feed', icon: FeedIcon, routeKey: 'feed' },
  { to: '/downloads', label: 'Downloads', icon: DownloadIcon, routeKey: 'downloads' },
  { to: '/videos', label: 'Videos', icon: VideoNavIcon, routeKey: 'videos' },
  { to: '/scrape', label: 'Scrape', icon: ScrapeIcon, routeKey: 'scrape' },
  { to: '/settings', label: 'Settings', icon: SettingsIcon, routeKey: 'settings' },
]

function ProtectedRoute({ routeKey, children }) {
  const { hasRoute, appUser } = useAuth()
  // 'admin' is a special key — only admin role can access
  if (routeKey === 'admin') {
    if (appUser?.role !== 'admin') return <Navigate to="/" replace />
    return children
  }
  if (!hasRoute(routeKey)) {
    return <Navigate to="/" replace />
  }
  return children
}

export default function App() {
  const { appUser, setupRequired, loading: authLoading, hasRoute } = useAuth()

  // Show auth screens if needed
  if (authLoading) {
    return (
      <div className="min-h-screen bg-[#0a0a0a] flex items-center justify-center">
        <div className="animate-spin w-8 h-8 border-2 border-[#0095f6] border-t-transparent rounded-full" />
      </div>
    )
  }
  if (setupRequired) return <AppSetup />
  if (!appUser) return <AppLogin />

  // Filter nav items based on route permissions
  const navItems = allNavItems.filter((item) =>
    !item.routeKey || hasRoute(item.routeKey)
  )
  const mobileNavItems = allMobileNavItems.filter((item) =>
    !item.routeKey || hasRoute(item.routeKey)
  )
  const moreNavItems = allMoreNavItems.filter((item) =>
    !item.routeKey || hasRoute(item.routeKey)
  )

  // Add admin nav item for admins
  if (appUser.role === 'admin') {
    navItems.push({ to: '/admin/users', label: 'Admin', icon: AdminIcon })
    moreNavItems.push({ to: '/admin/users', label: 'Admin', icon: AdminIcon })
  }

  return <AppShell
    navItems={navItems}
    mobileNavItems={mobileNavItems}
    moreNavItems={moreNavItems}
    hasRoute={hasRoute}
    appUser={appUser}
  />
}

function AppShell({ navItems, mobileNavItems, moreNavItems, hasRoute, appUser }) {
  const { logout } = useAuth()
  const [currentUser, setCurrentUser] = useState(null)
  const [moreOpen, setMoreOpen] = useState(false)
  const [authWarning, setAuthWarning] = useState(null)
  const authPollRef = useRef(null)
  const location = useLocation()

  useEffect(() => {
    getMe().then((data) => {
      if (!data.error) {
        setCurrentUser(data)
      }
    })
  }, [])

  // Auth validity polling (every 5 min)
  useEffect(() => {
    const poll = () => {
      checkAuth().then((data) => {
        if (data && !data.error && !data.valid) {
          setAuthWarning(data.error || 'Auth expired')
        } else if (data?.valid) {
          setAuthWarning(null)
        }
      })
    }
    poll()
    authPollRef.current = setInterval(poll, 5 * 60 * 1000)
    return () => clearInterval(authPollRef.current)
  }, [])

  // Close "more" menu on route change
  useEffect(() => {
    setMoreOpen(false)
  }, [location.pathname])

  // New media badge
  const [newMediaCount, setNewMediaCount] = useState(0)

  useEffect(() => {
    const fetchCount = () => {
      getNewMediaCount().then((data) => {
        if (!data.error) setNewMediaCount(data.count || 0)
      })
    }
    fetchCount()
    const id = setInterval(fetchCount, 60000)
    return () => clearInterval(id)
  }, [])

  // Instantly clear badge when on gallery page
  useEffect(() => {
    if (location.pathname.startsWith('/gallery')) {
      setNewMediaCount(0)
    }
  }, [location.pathname])

  const refreshUser = () => {
    getMe().then((data) => {
      if (!data.error) {
        setCurrentUser(data)
      }
    })
  }

  const handleLogout = async () => {
    await appAuthLogout()
    logout()
  }

  const isMoreActive = moreNavItems.some((item) =>
    item.to !== '/more' && location.pathname.startsWith(item.to)
  )

  return (
    <div className="flex min-h-screen bg-[#0a0a0a] overflow-x-hidden w-full">
      {/* Desktop Sidebar */}
      <aside className="hidden md:flex fixed left-0 top-0 bottom-0 w-60 bg-[#111] border-r border-[#222] flex-col z-50">
        {/* Logo */}
        <div className="p-6 border-b border-[#222]">
          <h1 className="text-xl font-bold text-white tracking-tight">
            <span className="text-[#0095f6]">OF</span>App
          </h1>
        </div>

        {/* Navigation */}
        <nav className="flex-1 py-4 px-3">
          {navItems.map((item) => {
            const Icon = item.icon
            const isActive = item.exact
              ? location.pathname === item.to
              : location.pathname.startsWith(item.to)

            return (
              <NavLink
                key={item.to}
                to={item.to}
                className={`flex items-center gap-3 px-3 py-2.5 rounded-lg mb-1 transition-all duration-200 ${
                  isActive
                    ? 'bg-[#0095f6]/10 text-[#0095f6]'
                    : 'text-gray-400 hover:text-white hover:bg-[#1a1a1a]'
                }`}
              >
                <Icon className="w-5 h-5" />
                <span className="text-sm font-medium">{item.label}</span>
                {item.to === '/gallery' && newMediaCount > 0 && (
                  <span className="ml-auto bg-red-500 text-white text-[10px] font-bold min-w-[18px] h-[18px] flex items-center justify-center rounded-full px-1">
                    {newMediaCount > 99 ? '99+' : newMediaCount}
                  </span>
                )}
              </NavLink>
            )
          })}
        </nav>

        {/* Current User + Logout */}
        <div className="p-4 border-t border-[#222]">
          {currentUser && (
            <div className="flex items-center gap-3 mb-3">
              <img
                src={currentUser.avatar}
                alt={currentUser.name}
                className="w-9 h-9 rounded-full object-cover bg-[#1a1a1a]"
                onError={(e) => {
                  e.target.src = `data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><rect fill="%23333" width="40" height="40" rx="20"/><text x="20" y="25" text-anchor="middle" fill="white" font-size="16">${(currentUser.name || '?')[0]}</text></svg>`
                }}
              />
              <div className="min-w-0">
                <p className="text-sm font-medium text-white truncate">
                  {currentUser.name}
                </p>
                <p className="text-xs text-gray-500 truncate">
                  @{currentUser.username}
                </p>
              </div>
            </div>
          )}
          <button
            onClick={handleLogout}
            className="flex items-center gap-2 text-gray-500 hover:text-gray-300 text-sm transition-colors w-full px-1"
          >
            <LogoutIcon className="w-4 h-4" />
            <span>Sign out ({appUser.username})</span>
          </button>
        </div>
      </aside>

      {/* Main Content */}
      <main className="md:ml-60 flex-1 min-h-screen pb-20 md:pb-0 overflow-x-hidden">
        {/* Auth Warning Banner */}
        {authWarning && (
          <div className="bg-amber-500/10 border-b border-amber-500/30 px-4 py-2.5 flex items-center justify-between">
            <div className="flex items-center gap-2">
              <svg className="w-4 h-4 text-amber-400 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
              </svg>
              <span className="text-sm text-amber-300">
                Auth expired &mdash;{' '}
                <NavLink to="/settings" className="underline hover:text-amber-200">
                  Update credentials in Settings
                </NavLink>
              </span>
            </div>
            <button
              onClick={() => setAuthWarning(null)}
              className="text-amber-400 hover:text-amber-200 p-1"
            >
              <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
              </svg>
            </button>
          </div>
        )}

        <div className="max-w-5xl mx-auto p-4 md:p-6">
          <Routes>
            <Route path="/" element={<ProtectedRoute routeKey="dashboard"><Dashboard /></ProtectedRoute>} />
            <Route path="/settings" element={<ProtectedRoute routeKey="settings"><Login onAuth={refreshUser} /></ProtectedRoute>} />
            <Route path="/feed" element={<ProtectedRoute routeKey="feed"><Feed /></ProtectedRoute>} />
            <Route path="/users" element={<ProtectedRoute routeKey="users"><Users /></ProtectedRoute>} />
            <Route path="/users/:userId" element={<ProtectedRoute routeKey="users"><UserPosts /></ProtectedRoute>} />
            <Route path="/search" element={<ProtectedRoute routeKey="users"><Search /></ProtectedRoute>} />
            <Route path="/downloads" element={<ProtectedRoute routeKey="downloads"><Downloads /></ProtectedRoute>} />
            <Route path="/gallery" element={<ProtectedRoute routeKey="gallery"><Gallery /></ProtectedRoute>} />
            <Route path="/duplicates" element={<ProtectedRoute routeKey="gallery"><Duplicates /></ProtectedRoute>} />
            <Route path="/videos" element={<ProtectedRoute routeKey="videos"><Videos /></ProtectedRoute>} />
            <Route path="/videos/upload" element={<ProtectedRoute routeKey="videos"><VideoUpload /></ProtectedRoute>} />
            <Route path="/videos/:id" element={<ProtectedRoute routeKey="videos"><VideoDetail /></ProtectedRoute>} />
            <Route path="/scrape" element={<ProtectedRoute routeKey="scrape"><Scrape /></ProtectedRoute>} />
            <Route path="/admin/users" element={<ProtectedRoute routeKey="admin"><UserManagement /></ProtectedRoute>} />
            <Route path="/login" element={<Navigate to="/" replace />} />
          </Routes>
        </div>
      </main>

      {/* Mobile Bottom Nav */}
      <nav className="md:hidden fixed bottom-0 left-0 right-0 bg-[#111] border-t border-[#222] z-50 safe-bottom">
        <div className="flex items-center justify-around h-14">
          {mobileNavItems.map((item) => {
            const Icon = item.icon

            if (item.to === '/more') {
              return (
                <button
                  key="more"
                  onClick={() => setMoreOpen((v) => !v)}
                  className={`flex flex-col items-center justify-center gap-0.5 w-full h-full transition-colors ${
                    isMoreActive || moreOpen ? 'text-[#0095f6]' : 'text-gray-500'
                  }`}
                >
                  <Icon className="w-5 h-5" />
                  <span className="text-[10px]">{item.label}</span>
                </button>
              )
            }

            const isActive = item.exact
              ? location.pathname === item.to
              : location.pathname.startsWith(item.to)

            return (
              <NavLink
                key={item.to}
                to={item.to}
                className={`relative flex flex-col items-center justify-center gap-0.5 w-full h-full transition-colors ${
                  isActive ? 'text-[#0095f6]' : 'text-gray-500'
                }`}
              >
                <Icon className="w-5 h-5" />
                <span className="text-[10px]">{item.label}</span>
                {item.to === '/gallery' && newMediaCount > 0 && (
                  <span className="absolute top-1 right-1/4 bg-red-500 text-white text-[9px] font-bold min-w-[16px] h-[16px] flex items-center justify-center rounded-full px-1">
                    {newMediaCount > 99 ? '99+' : newMediaCount}
                  </span>
                )}
              </NavLink>
            )
          })}
        </div>

        {/* More menu popover */}
        {moreOpen && (
          <>
            <div className="fixed inset-0 z-40" onClick={() => setMoreOpen(false)} />
            <div className="absolute bottom-full left-0 right-0 bg-[#161616] border-t border-[#222] z-50 shadow-xl">
              {moreNavItems.map((item) => {
                const Icon = item.icon
                const isActive = location.pathname.startsWith(item.to)

                return (
                  <NavLink
                    key={item.to}
                    to={item.to}
                    className={`flex items-center gap-3 px-5 py-3.5 transition-colors ${
                      isActive ? 'text-[#0095f6] bg-[#0095f6]/5' : 'text-gray-400'
                    }`}
                  >
                    <Icon className="w-5 h-5" />
                    <span className="text-sm font-medium">{item.label}</span>
                  </NavLink>
                )
              })}
              <button
                onClick={handleLogout}
                className="flex items-center gap-3 px-5 py-3.5 transition-colors text-gray-500 hover:text-gray-300 w-full border-t border-[#222]"
              >
                <LogoutIcon className="w-5 h-5" />
                <span className="text-sm font-medium">Sign out ({appUser.username})</span>
              </button>
            </div>
          </>
        )}
      </nav>
    </div>
  )
}

/* Icon Components */

function AdminIcon({ className }) {
  return (
    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
      <path strokeLinecap="round" strokeLinejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z" />
    </svg>
  )
}

function LogoutIcon({ className }) {
  return (
    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
      <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15m3 0l3-3m0 0l-3-3m3 3H9" />
    </svg>
  )
}

function FeedIcon({ className }) {
  return (
    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
      <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z" />
    </svg>
  )
}

function UsersIcon({ className }) {
  return (
    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
      <path strokeLinecap="round" strokeLinejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" />
    </svg>
  )
}

function DownloadIcon({ className }) {
  return (
    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
      <path strokeLinecap="round" strokeLinejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3" />
    </svg>
  )
}

function SearchIcon({ className }) {
  return (
    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
      <path strokeLinecap="round" strokeLinejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
    </svg>
  )
}

function GalleryNavIcon({ className }) {
  return (
    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
      <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M18 3.75H6A2.25 2.25 0 003.75 6v12A2.25 2.25 0 006 20.25h12A2.25 2.25 0 0020.25 18V6A2.25 2.25 0 0018 3.75z" />
    </svg>
  )
}

function ScrapeIcon({ className }) {
  return (
    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
      <path strokeLinecap="round" strokeLinejoin="round" d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418" />
    </svg>
  )
}

function SettingsIcon({ className }) {
  return (
    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
      <path strokeLinecap="round" strokeLinejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z" />
      <path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
    </svg>
  )
}

function MoreIcon({ className }) {
  return (
    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
      <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
    </svg>
  )
}

function HomeIcon({ className }) {
  return (
    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
      <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
    </svg>
  )
}

function VideoNavIcon({ className }) {
  return (
    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
      <path strokeLinecap="round" strokeLinejoin="round" d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.348a1.125 1.125 0 010 1.971l-11.54 6.347a1.125 1.125 0 01-1.667-.985V5.653z" />
    </svg>
  )
}