import { motion } from 'framer-motion';
import { Link } from 'react-router-dom';
import { Home, ArrowLeft } from 'lucide-react';
import { AdminLayout } from '@/components/pc/admin';
import { useAdminAuth } from '@/hooks/pc/admin';

/**
 * 관리자 404 페이지
 */
function AdminNotFound() {
  const { user } = useAdminAuth();

  return (
    <AdminLayout user={user}>
      <div className="flex-1 flex items-center justify-center min-h-[calc(100vh-200px)]">
        <div className="text-center px-6">
          {/* 404 숫자 */}
          <motion.div
            initial={{ opacity: 0, scale: 0.5 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ duration: 0.5, type: 'spring', stiffness: 100 }}
            className="mb-8"
          >
            <h1 className="text-[150px] font-bold leading-none bg-gradient-to-br from-primary to-primary-dark bg-clip-text text-transparent select-none">
              404
            </h1>
          </motion.div>

          {/* 메시지 */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.2, duration: 0.5 }}
            className="mb-8"
          >
            <h2 className="text-2xl font-bold text-gray-800 mb-3">
              페이지를 찾을 수 없습니다
            </h2>
            <p className="text-gray-500 leading-relaxed">
              요청하신 관리자 페이지가 존재하지 않거나 이동되었을 수 있습니다.
            </p>
          </motion.div>

          {/* 장식 요소 */}
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ delay: 0.4, duration: 0.5 }}
            className="flex justify-center gap-2 mb-10"
          >
            {[...Array(5)].map((_, i) => (
              <motion.div
                key={i}
                className="w-2 h-2 rounded-full bg-primary"
                animate={{
                  y: [0, -8, 0],
                  opacity: [0.3, 1, 0.3],
                }}
                transition={{
                  duration: 1.2,
                  repeat: Infinity,
                  delay: i * 0.15,
                  ease: 'easeInOut',
                }}
              />
            ))}
          </motion.div>

          {/* 버튼들 */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.5, duration: 0.5 }}
            className="flex justify-center gap-4"
          >
            <button
              onClick={() => window.history.back()}
              className="flex items-center gap-2 px-6 py-3 border-2 border-primary text-primary rounded-xl font-medium hover:bg-primary hover:text-white transition-colors duration-200"
            >
              <ArrowLeft size={18} />
              이전 페이지
            </button>
            <Link
              to="/admin/dashboard"
              className="flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-primary to-primary-dark text-white rounded-xl font-medium hover:shadow-lg hover:shadow-primary/30 transition-all duration-200"
            >
              <Home size={18} />
              대시보드로 가기
            </Link>
          </motion.div>
        </div>
      </div>
    </AdminLayout>
  );
}

export default AdminNotFound;
