import { useEffect } from 'react'
import { NavLink, Outlet, useNavigate, useLocation } from 'react-router-dom'
import MoonDot from '../../components/MoonDot.jsx'
import { useAuth } from '../../contexts/AuthContext.jsx'
import { useSite } from '../../contexts/SiteContext.jsx'

// `roles` (when present) restricts which roles see a nav item. Items without it
// are shown to admin/editor as before. Moderators are further confined to just
// their own section + account security (see the redirect effect below).
const NAV = [
  { to: '/admin', label: 'Dashboard', end: true },
  { to: '/admin/posts', label: 'Posts' },
  { to: '/admin/wiki', label: 'Wiki' },
  { to: '/admin/hero', label: 'Hero Editor' },
  { to: '/admin/moderation', label: 'Moderation', roles: ['admin', 'moderator'] },
  { to: '/admin/settings', label: 'Settings' },
  { to: '/admin/activity', label: 'Activity' },
  { to: '/admin/bot-activity', label: 'Bot Activity' },
  { to: '/admin/discord-bot', label: 'Discord Bot' },
  { to: '/admin/auth-providers', label: 'Authentication' },
  { to: '/admin/users', label: 'Users' },
  { to: '/admin/account', label: 'Account' },
]

const TITLES = {
  '/admin': 'Dashboard',
  '/admin/posts': 'Posts',
  '/admin/wiki': 'Wiki Pages',
  '/admin/hero': 'Hero Editor',
  '/admin/moderation': 'Moderation',
  '/admin/settings': 'Site Settings',
  '/admin/activity': 'Activity Log',
  '/admin/bot-activity': 'Bot Activity',
  '/admin/discord-bot': 'Discord Bot',
  '/admin/auth-providers': 'Authentication',
  '/admin/users': 'Users',
  '/admin/account': 'Account Security',
}

const navBtnBase = {
  textAlign: 'left',
  borderRadius: 8,
  padding: '10px 14px',
  fontFamily: 'var(--sans)',
  fontSize: '0.92rem',
  textDecoration: 'none',
  display: 'block',
  transition: 'background .15s,color .15s',
}

export default function AdminLayout() {
  const { user, logout } = useAuth()
  const { mode } = useSite()
  const navigate = useNavigate()
  const location = useLocation()
  const title =
    TITLES[location.pathname] ||
    (location.pathname.startsWith('/admin/moderation') ? 'Moderation' : 'Admin')
  // The hero canvas editor needs room — let it use the full content width.
  const wide = location.pathname === '/admin/hero'
  const modeDot = mode === 'live' ? 'var(--mode-live)' : 'var(--mode-maint)'

  // Moderators only get the moderation section + their own account security.
  const isModerator = user?.role === 'moderator'
  const navItems = NAV.filter((n) => {
    if (n.roles && !n.roles.includes(user?.role)) return false
    if (isModerator) return n.to === '/admin/moderation' || n.to === '/admin/account'
    return true
  })

  // Confine a moderator who deep-links (or is redirected to the index) to a page
  // outside their remit — the API would 403 anyway, so send them to their home.
  useEffect(() => {
    if (!isModerator) return
    const p = location.pathname
    if (!p.startsWith('/admin/moderation') && p !== '/admin/account') {
      navigate('/admin/moderation', { replace: true })
    }
  }, [isModerator, location.pathname, navigate])

  // Keep the admin out of search indexes (belt-and-suspenders with robots.txt).
  useEffect(() => {
    const meta = document.createElement('meta')
    meta.name = 'robots'
    meta.content = 'noindex, nofollow'
    document.head.appendChild(meta)
    return () => document.head.removeChild(meta)
  }, [])

  async function signOut() {
    await logout()
    navigate('/admin/login', { replace: true })
  }

  return (
    <div className="admin-grid">
      {/* Sidebar */}
      <aside
        style={{
          borderRight: '1px solid var(--line)',
          background: 'var(--bg)',
          display: 'flex',
          flexDirection: 'column',
          position: 'sticky',
          top: 0,
          height: '100vh',
        }}
      >
        <div style={{ padding: '22px 22px 18px', borderBottom: '1px solid var(--line-soft)', display: 'flex', alignItems: 'center', gap: 10 }}>
          <MoonDot />
          <div>
            <div className="display" style={{ fontSize: '1.02rem', color: 'var(--head)', letterSpacing: '0.03em' }}>
              UOMysticmoon
            </div>
            <div className="sans" style={{ color: 'var(--dim)', fontSize: '0.66rem', letterSpacing: '0.14em', textTransform: 'uppercase' }}>
              Admin
            </div>
          </div>
        </div>

        <nav style={{ flex: 1, padding: '14px 12px', display: 'flex', flexDirection: 'column', gap: 4 }}>
          {navItems.map((n) => (
            <NavLink
              key={n.to}
              to={n.to}
              end={n.end}
              style={({ isActive }) => ({
                ...navBtnBase,
                background: isActive ? 'var(--blue)' : 'transparent',
                color: isActive ? 'var(--ink)' : 'var(--muted)',
                borderLeft: `2px solid ${isActive ? 'var(--accent)' : 'transparent'}`,
              })}
            >
              {n.label}
            </NavLink>
          ))}
        </nav>

        <div style={{ padding: '14px 16px', borderTop: '1px solid var(--line-soft)' }}>
          <div className="sans" style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12, fontSize: '0.78rem', color: 'var(--muted)' }}>
            <span style={{ width: 9, height: 9, borderRadius: '50%', background: modeDot, boxShadow: `0 0 8px ${modeDot}` }} />
            Site is&nbsp;<strong style={{ color: 'var(--ink)', textTransform: 'capitalize' }}>{mode}</strong>
          </div>
          <button
            onClick={signOut}
            className="sans"
            style={{ display: 'block', width: '100%', textAlign: 'center', border: '1px solid var(--line)', borderRadius: 8, padding: 9, color: 'var(--muted)', background: 'transparent', fontSize: '0.84rem', cursor: 'pointer' }}
          >
            Sign out
          </button>
        </div>
      </aside>

      {/* Main */}
      <main style={{ display: 'flex', flexDirection: 'column', minWidth: 0 }}>
        <header
          style={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-between',
            gap: 16,
            padding: '20px 32px',
            borderBottom: '1px solid var(--line-soft)',
            background: 'var(--bg)',
            position: 'sticky',
            top: 0,
            zIndex: 10,
          }}
        >
          <h1 className="display" style={{ margin: 0, fontSize: '1.5rem', color: 'var(--head)' }}>
            {title}
          </h1>
          <div className="sans" style={{ display: 'flex', alignItems: 'center', gap: 14, fontSize: '0.84rem', color: 'var(--muted)' }}>
            <a href="/" target="_blank" rel="noreferrer" style={{ color: 'var(--accent)', textDecoration: 'none' }}>
              View site →
            </a>
            <span
              style={{ width: 30, height: 30, borderRadius: '50%', background: 'linear-gradient(180deg,#2a3a52,#1a2536)', border: '1px solid var(--line)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#d8e2ef', fontSize: '0.8rem', textTransform: 'uppercase' }}
            >
              {(user?.username || 'A').charAt(0)}
            </span>
          </div>
        </header>

        <div style={{ flex: 1, padding: '30px 32px 60px', maxWidth: wide ? 'none' : 1000, width: '100%' }}>
          <Outlet />
        </div>
      </main>
    </div>
  )
}