"use client"

import {Home, Newspaper, Sparkles} from "lucide-react"
import Link from "next/link"
import {useEffect, useState} from "react"

const funnyMessages = [
  {
    title: "文章跑路了 🏃💨",
    desc: "记者还在追赶中，请您稍安勿躁～",
    iconClass: "text-purple-400",
    bgGradient: "from-purple-400/20 to-pink-400/20",
  },
  {
    title: "文章去摸鱼了 🐟",
    desc: "估计一时半会儿也不会回来…",
    iconClass: "text-sky-400",
    bgGradient: "from-sky-400/20 to-blue-400/20",
  },
  {
    title: "文章开小差了 🙈",
    desc: "它可能在偷偷喝咖啡☕",
    iconClass: "text-amber-400",
    bgGradient: "from-amber-400/20 to-orange-400/20",
  },
  {
    title: "文章掉线了 📡",
    desc: "等信号回来再试试吧～",
    iconClass: "text-rose-400",
    bgGradient: "from-rose-400/20 to-red-400/20",
  },
  {
    title: "文章请假了 📝",
    desc: "理由：今天心情不太适合上班。",
    iconClass: "text-green-400",
    bgGradient: "from-green-400/20 to-emerald-400/20",
  },
]

const FloatingParticles = () => {
  return (
    <div className="absolute inset-0 overflow-hidden pointer-events-none">
      {[...Array(20)].map((_, i) => (
        <div
          key={i}
          className="absolute animate-float opacity-30"
          style={{
            left: `${Math.random() * 100}%`,
            top: `${Math.random() * 100}%`,
            animationDelay: `${Math.random() * 3}s`,
            animationDuration: `${3 + Math.random() * 4}s`,
          }}
        >
          <Sparkles className="w-4 h-4 text-gray-400" />
        </div>
      ))}
    </div>
  )
}

export default function ContentNotFound() {
  const [pick, setPick] = useState(funnyMessages[0])
  const [mounted, setMounted] = useState(false)

  useEffect(() => {
    setMounted(true)
    setPick(funnyMessages[Math.floor(Math.random() * funnyMessages.length)])
  }, [])

  if (!mounted) return null

  return (
    <div className="relative overflow-hidden">
      <div className={`absolute inset-0 bg-gradient-to-br ${pick.bgGradient} animate-pulse`} />
      <div className="absolute inset-0 bg-gradient-to-tr from-transparent via-white/5 to-transparent animate-shimmer" />

      <FloatingParticles />

      <div className="relative z-10 w-4/5 mx-auto flex flex-col items-center justify-center py-20 text-center">
        <div className="relative mb-8">
          <div className="absolute inset-0 animate-ping">
            <Newspaper className={`w-20 h-20 ${pick.iconClass} opacity-20`} />
          </div>
          <Newspaper className={`w-20 h-20 ${pick.iconClass} animate-bounce relative z-10 drop-shadow-lg`} />
        </div>

        <h2 className="text-4xl font-bold text-gray-800 mb-4 animate-slideInUp">
          <span className="bg-gradient-to-r from-gray-700 to-gray-900 bg-clip-text text-transparent">{pick.title}</span>
        </h2>

        <p className="text-lg text-gray-600 mb-8 animate-slideInUp animation-delay-200 max-w-md leading-relaxed">
          {pick.desc}
        </p>

        <Link
          href="/"
          className="group relative inline-flex items-center gap-3 px-8 py-4 rounded-full bg-gradient-to-r from-blue-500 to-purple-600 text-white font-semibold shadow-xl hover:shadow-2xl transform hover:scale-105 transition-all duration-300 animate-slideInUp animation-delay-400 overflow-hidden"
        >
          <div className="absolute inset-0 bg-gradient-to-r from-purple-600 to-blue-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
          <Home className="w-5 h-5 relative z-10 group-hover:rotate-12 transition-transform duration-300" />
          <span className="relative z-10">回到首页</span>
          <div className="absolute inset-0 bg-white/20 translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-700 skew-x-12" />
        </Link>

        <div className="mt-12 flex space-x-2 animate-slideInUp animation-delay-600">
          {[...Array(3)].map((_, i) => (
            <div
              key={i}
              className="w-2 h-2 rounded-full bg-gray-400 animate-pulse"
              style={{ animationDelay: `${i * 0.2}s` }}
            />
          ))}
        </div>
      </div>
    </div>
  )
}
