import type { ErrorComponentProps } from '@tanstack/react-router'
import { useNavigate } from '@tanstack/react-router'
import { AlertTriangle, Home, RefreshCw } from 'lucide-react'
import { Button, Card } from '@/components/ui'

export function ErrorPage({ error, reset }: ErrorComponentProps) {
  const navigate = useNavigate()
  const message =
    error instanceof Error
      ? error.message
      : typeof error === 'string'
        ? error
        : '发生未知错误'

  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-[color-mix(in_srgb,var(--danger)_14%,transparent)] text-[var(--danger)]">
          <AlertTriangle size={28} strokeWidth={1.5} />
        </div>
        <h1 className="mb-2 text-xl font-semibold tracking-tight">页面出错了</h1>
        <p className="mb-1 text-sm text-[var(--text-muted)]">渲染或加载过程中发生异常</p>
        <div className="mb-6 rounded-md border border-[var(--border)] bg-[var(--bg-primary)] px-3 py-2 text-left font-mono text-xs break-all text-[var(--danger)]">
          {message}
        </div>
        <div className="flex flex-wrap justify-center gap-2">
          <Button variant="secondary" onClick={() => reset()}>
            <RefreshCw size={14} />
            重试
          </Button>
          <Button onClick={() => navigate({ to: '/' })}>
            <Home size={14} />
            返回首页
          </Button>
        </div>
      </Card>
    </div>
  )
}

export default ErrorPage
