'use client'

import { useLocation } from '@/lib/nextRouterAdapter';
import { dashboardApi } from '@/api/dashboardClient';
import { useQuery } from '@tanstack/react-query';
import { motion } from 'framer-motion';
import { Mic, ArrowLeft, Home } from 'lucide-react';

export default function PageNotFound() {
  const location = useLocation();

  const { data: authData, isFetched } = useQuery({
    queryKey: ['user'],
    queryFn: async () => {
      try {
        const user = await dashboardApi.auth.me();
        return { user, isAuthenticated: true };
      } catch {
        return { user: null, isAuthenticated: false };
      }
    }
  });

  return (
    <div className="min-h-screen bg-gradient-to-br from-[#3A0F20] via-[#4A1429] to-[#5A1839] flex items-center justify-center px-4 relative overflow-hidden">
      <div className="absolute inset-0 opacity-[0.06]"
        style={{ backgroundImage: 'radial-gradient(circle, #fff 1px, transparent 1px)', backgroundSize: '28px 28px' }} />

      <motion.div
        initial={{ opacity: 0, y: 24, scale: 0.97 }}
        animate={{ opacity: 1, y: 0, scale: 1 }}
        transition={{ duration: 0.5, type: 'spring', stiffness: 120 }}
        className="relative bg-white rounded-3xl shadow-2xl w-full max-w-md overflow-hidden"
      >
        <div className="h-1.5 w-full bg-gradient-to-r from-[#D4B038] via-[#F0C84A] to-[#D4B038]" />

        <div className="px-8 py-10 text-center">
          {/* Logo */}
          <div className="flex items-center justify-center gap-2 mb-8">
            <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-[#4A1429] to-[#8B2252] flex items-center justify-center shadow-md">
              <Mic className="w-4 h-4 text-[#D4B038]" />
            </div>
            <span className="font-extrabold text-[#4A1429] text-lg">
              Cambridge <span className="text-[#D4B038]">Veritas</span>
            </span>
          </div>

          {/* 404 */}
          <div className="text-8xl font-extrabold text-[#F0EBE6] leading-none mb-2">404</div>
          <h2 className="text-xl font-extrabold text-[#4A1429] mb-3">Page Not Found</h2>
          <p className="text-gray-500 text-sm leading-relaxed mb-8">
            This page doesn't exist. You may have followed an old link or typed the address incorrectly.
          </p>

          {isFetched && authData?.isAuthenticated && authData?.user?.role === 'admin' && (
            <div className="bg-[#FAF5F0] border border-[#E5DDD5] rounded-xl p-4 text-left mb-6">
              <p className="text-xs font-bold text-[#4A1429] mb-1">Admin Note</p>
              <p className="text-xs text-gray-500 leading-relaxed">
                This page may not be implemented yet. Ask the AI to build it in the chat.
              </p>
            </div>
          )}

          <div className="space-y-3">
            <button
              onClick={() => window.location.href = '/'}
              className="w-full flex items-center justify-center gap-2 bg-[#4A1429] hover:bg-[#3A1020] text-white font-extrabold py-3.5 rounded-2xl transition-all shadow-md"
            >
              <Home className="w-4 h-4" />
              Back to Home
            </button>
            <button
              onClick={() => window.history.back()}
              className="w-full flex items-center justify-center gap-2 border-2 border-[#E5DDD5] text-[#4A1429] font-bold py-3 rounded-2xl hover:border-[#D4B038] transition-all"
            >
              <ArrowLeft className="w-4 h-4" />
              Go Back
            </button>
          </div>
        </div>
      </motion.div>
    </div>
  );
}