import { useNavigate } from '@tanstack/react-router'
import { FileQuestion, Home } from 'lucide-react'
import { Button, Card } from '@/components/ui'

export default function NotFound() {
  const navigate = useNavigate()
  return (
    <div className="flex min-h-screen items-center justify-center bg-[var(--bg-primary)] p-6 text-[var(--text-primary)]">
      <Card className="w-full max-w-md p-8 text-center shadow-[var(--shadow-md)]">
        <div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-[var(--bg-tertiary)] text-[var(--text-muted)]">
          <FileQuestion size={28} strokeWidth={1.5} />
        </div>
        <div className="mb-1 text-4xl font-bold tracking-tight text-[var(--text-primary)]">404</div>
        <h1 className="mb-2 text-lg font-semibold">页面不存在</h1>
        <p className="mb-6 text-sm text-[var(--text-muted)]">你访问的路径无效，或资源已被移动/删除</p>
        <div className="flex flex-wrap justify-center gap-2">
          <Button variant="secondary" onClick={() => window.history.back()}>
            返回上页
          </Button>
          <Button onClick={() => navigate({ to: '/' })}>
            <Home size={14} />
            返回首页
          </Button>
        </div>
      </Card>
    </div>
  )
}
