import { Link } from '@tanstack/react-router'
import { CheckCircle2, Database, ScrollText, ShieldCheck, Users } from 'lucide-react'
import { canAccess } from '@/lib/permissions'
import { useAuthStore } from '@/stores/auth-store'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card'
import { ConfigDrawer } from '@/components/config-drawer'
import { Header } from '@/components/layout/header'
import { Main } from '@/components/layout/main'
import { ProfileDropdown } from '@/components/profile-dropdown'
import { Search } from '@/components/search'
import { ThemeSwitch } from '@/components/theme-switch'

const phaseItems = [
  {
    title: '登录鉴权',
    desc: '已接入后台登录接口、token 会话、未登录路由拦截和强制改密跳转。',
    icon: ShieldCheck,
    status: '已接入',
  },
  {
    title: '用户管理',
    desc: '支持分页查询、新建用户、启停账号、分配角色。',
    icon: Users,
    status: '已接入',
  },
  {
    title: '用户权限',
    desc: '用户管理内可查看用户信息、编辑资料并查看当前角色权限。',
    icon: ShieldCheck,
    status: '已接入',
  },
  {
    title: '操作日志',
    desc: '登录、用户管理和角色调整等关键动作已统一进入操作日志。',
    icon: ScrollText,
    status: '已接入',
  },
]

const quickLinks = [
  {
    title: '用户管理',
    to: '/system/users',
    icon: Users,
    permission: { resource: 'admin/users', action: 'read' },
  },
  {
    title: '操作日志',
    to: '/system/audit-logs',
    icon: ScrollText,
    permission: { resource: 'admin/audit-logs', action: 'read' },
  },
]

export function Dashboard() {
  const permissions = useAuthStore((state) => state.auth.user?.permissions)
  const visibleQuickLinks = quickLinks.filter((link) =>
    canAccess(permissions, link.permission)
  )

  return (
    <>
      <Header>
        <Search className='me-auto' />
        <ThemeSwitch />
        <ConfigDrawer />
        <ProfileDropdown />
      </Header>

      <Main className='flex flex-1 flex-col gap-6'>
        <div className='flex flex-wrap items-end justify-between gap-3'>
          <div>
            <h1 className='text-2xl font-bold tracking-tight'>后台首页</h1>
            <p className='text-muted-foreground'>
              阶段二前端基础后台：数据库与鉴权能力由后端提供，前端负责登录态、权限入口和安全审计页面。
            </p>
          </div>
          <Badge variant='outline' className='h-8 px-3'>
            阶段二进行中
          </Badge>
        </div>

        <div className='grid gap-4 md:grid-cols-2 xl:grid-cols-4'>
          {phaseItems.map((item) => (
            <Card key={item.title}>
              <CardHeader className='flex flex-row items-center justify-between space-y-0 pb-2'>
                <CardTitle className='text-sm font-medium'>{item.title}</CardTitle>
                <item.icon className='h-4 w-4 text-muted-foreground' />
              </CardHeader>
              <CardContent>
                <div className='mb-2 flex items-center gap-2 text-sm font-medium text-emerald-600'>
                  <CheckCircle2 className='h-4 w-4' />
                  {item.status}
                </div>
                <p className='text-sm text-muted-foreground'>{item.desc}</p>
              </CardContent>
            </Card>
          ))}
        </div>

        <div className='grid gap-4 lg:grid-cols-[1fr_360px]'>
          <Card>
            <CardHeader>
              <CardTitle>开发阶段说明</CardTitle>
              <CardDescription>
                当前前端优先完成第二阶段基础后台闭环，为后续商品、订单、工单和支付模块提供统一入口。
              </CardDescription>
            </CardHeader>
            <CardContent className='space-y-3 text-sm text-muted-foreground'>
              <div className='flex gap-3'>
                <Database className='mt-0.5 h-4 w-4 text-foreground' />
                <p>
                  后端已提供用户、角色、操作日志和统一响应包装，前端已完成对应页面接入。
                </p>
              </div>
              <div className='flex gap-3'>
                <ShieldCheck className='mt-0.5 h-4 w-4 text-foreground' />
                <p>
                  未登录用户会被拦截到登录页；默认密码账号会进入账号安全页面完成改密。
                </p>
              </div>
              <div className='flex gap-3'>
                <ScrollText className='mt-0.5 h-4 w-4 text-foreground' />
                <p>
                  后续业务操作会继续复用当前鉴权、用户角色和操作日志基础能力。
                </p>
              </div>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle>快捷入口</CardTitle>
              <CardDescription>进入阶段二已接入页面。</CardDescription>
            </CardHeader>
            <CardContent className='grid gap-2'>
              {visibleQuickLinks.length ? (
                visibleQuickLinks.map((link) => (
                  <Button
                    key={link.to}
                    variant='outline'
                    className='justify-start'
                    asChild
                  >
                    <Link to={link.to}>
                      <link.icon />
                      {link.title}
                    </Link>
                  </Button>
                ))
              ) : (
                <div className='rounded-md border bg-muted/30 px-3 py-6 text-center text-sm text-muted-foreground'>
                  当前账号暂无可用的管理快捷入口。
                </div>
              )}
            </CardContent>
          </Card>
        </div>
      </Main>
    </>
  )
}
