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'

// Shared shell for the logged-in player portal. Uses the same sidebar shell as
// Admin (icon nav, sticky content header, footer sign-out) so the two logged-in
// experiences read as one app — the portal just carries fewer nav rows.

// Small inline stroke icons (16px, currentColor) — same frame as AdminLayout.
function Icon({ children, size = 16 }) {
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden="true"
      focusable="false"
    >
      {children}
    </svg>
  )
}
const IconUser = () => <Icon><circle cx="12" cy="8" r="4" /><path d="M4 21a8 8 0 0 1 16 0" /></Icon>
const IconGear = () => <Icon><circle cx="12" cy="12" r="3" /><path d="M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M19.1 4.9L17 7M7 17l-2.1 2.1" /></Icon>
const IconShield = () => <Icon><path d="M12 3l7 3v5c0 5-3.5 8-7 10-3.5-2-7-5-7-10V6z" /><path d="M9 12l2 2 4-4" /></Icon>

const NAV = [
  { to: '/player', label: 'Characters', end: true, icon: IconUser },
  { to: '/account/appeals', label: 'Appeals', icon: IconShield },
  { to: '/account', label: 'Account', end: true, icon: IconGear },
]

// The sticky content header mirrors the active page. Character sheets live under
// /player/char/:serial and keep their own in-page back link.
const TITLES = {
  '/player': 'Characters',
  '/account': 'Account',
  '/account/appeals': 'Appeals',
}

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

export default function PlayerPortalLayout() {
  const { user, logout } = useAuth()
  const { siteTitle } = useSite()
  const navigate = useNavigate()
  const location = useLocation()
  const title =
    TITLES[location.pathname] ||
    (location.pathname.startsWith('/player/char/') ? 'Character' : 'Player Portal')

  async function signOut() {
    await logout()
    navigate('/account/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' }}>
              {siteTitle}
            </div>
            <div className="sans" style={{ color: 'var(--dim)', fontSize: '0.66rem', letterSpacing: '0.14em', textTransform: 'uppercase' }}>
              Player Portal
            </div>
          </div>
        </div>

        <nav style={{ flex: 1, padding: '14px 12px', display: 'flex', flexDirection: 'column', gap: 4, overflowY: 'auto' }}>
          {NAV.map((n) => (
            <NavLink
              key={n.to}
              to={n.to}
              end={n.end}
              className="admin-nav-link"
              style={({ isActive }) => ({
                ...navBtnBase,
                background: isActive ? 'var(--blue)' : 'transparent',
                color: isActive ? 'var(--ink)' : 'var(--muted)',
                borderLeft: `2px solid ${isActive ? 'var(--accent)' : 'transparent'}`,
              })}
            >
              <n.icon />
              <span>{n.label}</span>
            </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: 'var(--mode-live)', boxShadow: '0 0 8px var(--mode-live)' }} />
            Signed in as&nbsp;<strong style={{ color: 'var(--ink)' }}>{user?.username}</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>
          <a href="/" style={{ color: 'var(--accent)', textDecoration: 'none', fontSize: '0.84rem', fontFamily: 'var(--sans)' }}>
            ← Site
          </a>
        </header>

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