import { NavLink, Outlet, useNavigate } from 'react-router-dom'
import { LayoutDashboard, Users, PawPrint, MessageSquare, MessagesSquare, FileText, ClipboardList, ListChecks, Dna, Sparkles, MessageCircle, Crown, LogOut } from 'lucide-react'
import { api, clearToken } from '@/lib/api'
import { cn } from '@/lib/utils'
import { Button } from '@/components/ui/button'

const nav = [
  { to: '/', label: '概览', icon: LayoutDashboard, end: true },
  { to: '/users', label: '用户管理', icon: Users },
  { to: '/pets', label: '宠物管理', icon: PawPrint },
  { to: '/posts', label: '帖子审核', icon: MessageSquare },
  { to: '/comments', label: '评论管理', icon: MessagesSquare },
  { to: '/articles', label: '文章管理', icon: FileText },
  { to: '/care-templates', label: '养护模板', icon: ClipboardList },
  { to: '/record-types', label: '记录事项', icon: ListChecks },
  { to: '/breeds', label: '品种管理', icon: Dna },
  { to: '/community-bot', label: '社区运营', icon: Sparkles },
  { to: '/feedback', label: '意见反馈', icon: MessageCircle },
  { to: '/members', label: '会员管理', icon: Crown },
]

export default function Layout() {
  const navigate = useNavigate()
  function logout() {
    // 服务端作废刷新令牌，成不成都要本地清掉
    api.logout().catch(() => {})
    clearToken()
    navigate('/login')
  }
  return (
    <div className="flex min-h-screen">
      <aside className="w-56 shrink-0 border-r bg-card p-4 flex flex-col">
        <div className="flex items-center gap-2 px-2 py-3 mb-4">
          <span className="text-2xl">🐾</span>
          <span className="font-bold">毛孩子后台</span>
        </div>
        <nav className="flex flex-col gap-1">
          {nav.map((n) => (
            <NavLink
              key={n.to}
              to={n.to}
              end={n.end}
              className={({ isActive }) =>
                cn(
                  'flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors',
                  isActive ? 'bg-primary/15 text-primary' : 'text-muted-foreground hover:bg-accent',
                )
              }
            >
              <n.icon className="h-4 w-4" />
              {n.label}
            </NavLink>
          ))}
        </nav>
        <div className="mt-auto">
          <Button variant="ghost" className="w-full justify-start text-muted-foreground" onClick={logout}>
            <LogOut className="h-4 w-4" /> 退出登录
          </Button>
        </div>
      </aside>
      <main className="flex-1 p-8 overflow-auto">
        <Outlet />
      </main>
    </div>
  )
}