import { Button } from "@heroui/react"
import { useNavigate } from "react-router-dom"
import { Home, ArrowLeft } from "lucide-react"

export default function NotFound() {
  const navigate = useNavigate()

  return (
    <div className="relative flex min-h-screen flex-col items-center justify-center overflow-hidden bg-white px-6">

      <div className="relative z-10 flex w-full max-w-lg flex-col items-center gap-8 text-center">
        {/* Logo */}
        <img src="/logo.png" alt="logo" className="h-10 w-auto" />

        {/* 插图 */}
        <div className="relative w-full select-none">
          <svg viewBox="0 0 480 300" fill="none" xmlns="http://www.w3.org/2000/svg" className="w-full">
            {/* 地面 */}
            <ellipse cx="240" cy="272" rx="180" ry="16" fill="#e2e8f0" />

            {/* 服务器机柜 */}
            <rect x="160" y="120" width="80" height="148" rx="8" fill="#cbd5e1" />
            <rect x="164" y="126" width="72" height="136" rx="6" fill="#f1f5f9" />
            {[0,1,2,3,4,5].map((i) => (
              <g key={i}>
                <rect x="170" y={134 + i * 20} width="60" height="12" rx="3" fill="#e2e8f0" />
                <circle cx="222" cy={140 + i * 20} r="3" fill={i === 2 ? "#f87171" : "#86efac"} />
              </g>
            ))}

            {/* 断开的插头/电缆 */}
            <path d="M240 180 Q290 160 310 140" stroke="#94a3b8" strokeWidth="3" strokeDasharray="6 4" strokeLinecap="round" />
            <circle cx="312" cy="138" r="7" fill="#fca5a5" stroke="#f87171" strokeWidth="2" />
            <path d="M309 135 L315 141 M315 135 L309 141" stroke="#ef4444" strokeWidth="2" strokeLinecap="round" />

            {/* 云朵（断开状态） */}
            <g opacity="0.5">
              <ellipse cx="360" cy="90" rx="48" ry="30" fill="#e2e8f0" />
              <ellipse cx="336" cy="100" rx="28" ry="22" fill="#e2e8f0" />
              <ellipse cx="384" cy="100" rx="28" ry="22" fill="#e2e8f0" />
              <ellipse cx="360" cy="108" rx="44" ry="20" fill="#e2e8f0" />
            </g>

            {/* 问号 */}
            <text x="352" y="106" fontSize="28" fontWeight="bold" fill="#94a3b8" textAnchor="middle">?</text>

            {/* 404 大字 */}
            <text x="240" y="72" fontSize="72" fontWeight="900" fill="#e2e8f0" textAnchor="middle" letterSpacing="-2">404</text>
            <text x="240" y="72" fontSize="72" fontWeight="900" fill="url(#grad404)" textAnchor="middle" letterSpacing="-2" opacity="0.15">404</text>

            {/* 小机器人 */}
            <rect x="88" y="188" width="44" height="36" rx="8" fill="#94a3b8" />
            <rect x="94" y="178" width="32" height="24" rx="6" fill="#cbd5e1" />
            <circle cx="103" cy="190" r="4" fill="#7dd3fc" />
            <circle cx="117" cy="190" r="4" fill="#7dd3fc" />
            <path d="M100 198 Q110 204 120 198" stroke="#94a3b8" strokeWidth="2" strokeLinecap="round" fill="none" />
            {/* 天线 */}
            <line x1="110" y1="178" x2="110" y2="168" stroke="#94a3b8" strokeWidth="2" strokeLinecap="round" />
            <circle cx="110" cy="165" r="3" fill="#f87171" />
            {/* 手臂 */}
            <rect x="76" y="192" width="12" height="6" rx="3" fill="#94a3b8" />
            <rect x="132" y="192" width="12" height="6" rx="3" fill="#94a3b8" />
            {/* 腿 */}
            <rect x="96" y="224" width="10" height="16" rx="4" fill="#94a3b8" />
            <rect x="114" y="224" width="10" height="16" rx="4" fill="#94a3b8" />

            <defs>
              <linearGradient id="grad404" x1="0" y1="0" x2="1" y2="0">
                <stop offset="0%" stopColor="#38bdf8" />
                <stop offset="100%" stopColor="#818cf8" />
              </linearGradient>
            </defs>
          </svg>
        </div>

        {/* 文字 */}
        <div className="space-y-2">
          <h1 className="text-2xl font-bold text-slate-800">页面走丢了</h1>
          <p className="text-sm text-slate-500 leading-relaxed">
            您访问的页面可能已被移除、改名，<br />或者暂时无法访问。
          </p>
        </div>

        {/* 按钮组 */}
        <div className="flex items-center gap-3">
          <Button
            variant="outline"
            onPress={() => navigate(-1)}
            className="border-slate-200 text-slate-600 hover:bg-slate-50"
          >
            <ArrowLeft className="h-4 w-4" />
            返回上页
          </Button>
          <Button
            onPress={() => navigate("/")}
            className="bg-sky-400 text-white shadow-md shadow-sky-200 hover:bg-sky-500"
          >
            <Home className="h-4 w-4" />
            回到首页
          </Button>
        </div>
      </div>
    </div>
  )
}
