import { Link, Outlet, useNavigate } from 'react-router-dom'
import { LogOut, Moon, Sun } from 'lucide-react'
import { logout } from '@/api/auth'
import { useTheme } from '@/components/theme-provider'
import { LogoMark } from '@/components/logo'

export function AdminLayout() {
  const navigate = useNavigate()
  const { resolved, setTheme } = useTheme()

  return (
    <div className="flex min-h-screen flex-col">
      <header className="sticky top-0 z-40 border-b border-hairline bg-ground/85 backdrop-blur">
        <div className="mx-auto flex h-14 max-w-5xl items-center justify-between px-6">
          <Link to="/" className="flex items-center gap-2.5 font-mono text-[14px] font-semibold">
            <LogoMark size={24} />
            sundynix <em className="not-italic text-accent">admin</em>
          </Link>
          <div className="flex items-center gap-3">
            <button
              type="button"
              aria-label={
                resolved === 'dark' ? '切换到浅色主题' : '切换到深色主题'
              }
              onClick={() => setTheme(resolved === 'dark' ? 'light' : 'dark')}
              className="flex size-8 items-center justify-center rounded-full border border-hairline-strong text-ink-2 transition-colors hover:border-accent hover:text-accent-ink"
            >
              {resolved === 'dark' ? (
                <Sun className="size-4" />
              ) : (
                <Moon className="size-4" />
              )}
            </button>
            <button
              type="button"
              onClick={() => {
                logout()
                navigate('/login')
              }}
              className="flex items-center gap-1.5 rounded-[7px] border border-hairline-strong px-3 py-1.5 text-[13px] text-ink-2 transition-colors hover:border-accent hover:text-accent-ink"
            >
              <LogOut className="size-3.5" /> 退出
            </button>
          </div>
        </div>
      </header>
      <main className="mx-auto w-full max-w-5xl flex-1 px-6 py-8">
        <Outlet />
      </main>
    </div>
  )
}