import { Link, useNavigate } from 'react-router-dom'
import type { ReactNode } from 'react'
import { useAuthStore } from '@/store/auth'

export default function AppShell({
  title,
  children,
}: {
  title: string
  children: ReactNode
}) {
  const { user, logout } = useAuthStore()
  const navigate = useNavigate()

  return (
    <div className="min-h-screen bg-white text-zinc-900">
      <header className="border-b border-zinc-200 bg-white">
        <div className="mx-auto flex max-w-5xl items-center justify-between px-4 py-3">
          <div className="flex items-center gap-3">
            <Link to="/app" className="text-sm font-semibold hover:underline">
              账号安全演示
            </Link>
            <nav className="hidden items-center gap-3 text-sm text-zinc-600 md:flex">
              <Link to="/app" className="hover:text-zinc-900 hover:underline">
                控制台
              </Link>
              <Link to="/security" className="hover:text-zinc-900 hover:underline">
                安全中心
              </Link>
            </nav>
          </div>
          <div className="flex items-center gap-3">
            {user ? (
              <div className="hidden text-xs text-zinc-600 md:block">{user.email}</div>
            ) : null}
            <button
              type="button"
              onClick={async () => {
                await logout()
                navigate('/login')
              }}
              className="rounded-lg border border-zinc-200 bg-white px-3 py-1.5 text-sm hover:bg-zinc-50"
            >
              退出登录
            </button>
          </div>
        </div>
      </header>

      <main className="mx-auto max-w-5xl px-4 py-6">
        <div className="mb-4">
          <h1 className="text-lg font-semibold">{title}</h1>
        </div>
        {children}
      </main>
    </div>
  )
}