import React from 'react';
import { useLocation, useNavigate, Link } from 'react-router-dom';
import {
  ArrowLeft,
  Radio,
  Package,
  Bike,
  BarChart3,
  Home,
  MapPin,
  Truck
} from 'lucide-react';
import { useAuth } from '@/lib/AuthContext';

export default function PageNotFound() {
  const location = useLocation();
  const navigate = useNavigate();
  const { isAuthenticated } = useAuth();

  const path = location.pathname;

  const quickLinks = [
    {
      title: 'Live Dispatch',
      desc: 'Real-time fleet tracking & active runs',
      icon: Radio,
      path: '/doormile/dispatch',
      color: 'text-rose-600 bg-rose-50 border-rose-200/70 group-hover:bg-rose-100/70'
    },
    {
      title: 'Orders Management',
      desc: 'Pending, assigned, and bulk bookings',
      icon: Package,
      path: '/doormile/orders',
      color: 'text-blue-600 bg-blue-50 border-blue-200/70 group-hover:bg-blue-100/70'
    },
    {
      title: 'Live Deliveries',
      desc: 'Active consignments & transit logs',
      icon: Truck,
      path: '/doormile/deliveries',
      color: 'text-amber-600 bg-amber-50 border-amber-200/70 group-hover:bg-amber-100/70'
    },
    {
      title: 'Milers Fleet',
      desc: 'Rider profiles, roster & status',
      icon: Bike,
      path: '/doormile/milers',
      color: 'text-emerald-600 bg-emerald-50 border-emerald-200/70 group-hover:bg-emerald-100/70'
    },
    {
      title: 'Reports & Analytics',
      desc: 'Daily summaries & financial KPIs',
      icon: BarChart3,
      path: '/doormile/reports/orderssummary',
      color: 'text-purple-600 bg-purple-50 border-purple-200/70 group-hover:bg-purple-100/70'
    }
  ];

  return (
    <main className="relative min-h-screen w-full bg-white text-slate-900 flex flex-col items-center justify-center p-6 selection:bg-rose-500 selection:text-white">
      {/* Background subtle mesh & grid */}
      <div className="absolute inset-0 bg-[radial-gradient(ellipse_80%_60%_at_50%_-10%,rgba(216,30,6,0.06),rgba(255,255,255,0))] pointer-events-none" />
      <div className="absolute inset-0 bg-[linear-gradient(to_right,#0f172a08_1px,transparent_1px),linear-gradient(to_bottom,#0f172a08_1px,transparent_1px)] bg-[size:32px_32px] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_40%,#000_70%,transparent_100%)] pointer-events-none" />

      <div className="relative z-10 w-full max-w-2xl flex flex-col items-center text-center">
        {/* Top Brand Pill */}
        <div className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-white border border-slate-200/90 shadow-2xs mb-5">
          <span className="w-2 h-2 rounded-full bg-rose-600 animate-pulse" />
          <span className="text-xs font-semibold tracking-wider uppercase text-slate-600">
            Doormile Operations Console
          </span>
        </div>

        {/* Clean 404 Visual Graphic without any overlay icon */}
        <div className="select-none my-1">
          <span className="text-8xl sm:text-9xl font-black tracking-tight text-slate-900 bg-clip-text bg-gradient-to-b from-slate-900 via-slate-800 to-slate-400">
            404
          </span>
        </div>

        {/* Heading & Context */}
        <h1 className="text-2xl sm:text-3xl font-bold tracking-tight text-slate-900 mb-2">
          Page not found
        </h1>

        <p className="text-sm sm:text-base text-slate-600 max-w-lg mb-4">
          The requested destination is not registered in the console or has been moved to a new route.
        </p>

        {/* Target Path Badge */}
        <div className="inline-flex items-center gap-2 max-w-full px-3.5 py-1.5 rounded-lg bg-slate-100 border border-slate-200 font-mono text-xs text-rose-600 mb-7 shadow-2xs truncate">
          <MapPin className="w-3.5 h-3.5 text-slate-500 shrink-0" />
          <span className="truncate">{path}</span>
        </div>

        {/* Primary & Secondary Action CTAs */}
        <div className="flex flex-wrap items-center justify-center gap-3 w-full max-w-md mb-9">
          <button
            type="button"
            onClick={() => navigate(isAuthenticated ? '/doormile/dispatch' : '/login')}
            className="flex-1 min-w-[160px] inline-flex items-center justify-center gap-2 px-5 py-2.5 rounded-xl font-medium text-sm text-white bg-rose-600 hover:bg-rose-700 active:scale-[0.98] shadow-sm shadow-rose-600/20 transition-all cursor-pointer"
          >
            <Home className="w-4 h-4" />
            <span>{isAuthenticated ? 'Back to Dispatch' : 'Sign in to Console'}</span>
          </button>

          <button
            type="button"
            onClick={() => navigate(-1)}
            className="flex-1 min-w-[140px] inline-flex items-center justify-center gap-2 px-5 py-2.5 rounded-xl font-medium text-sm text-slate-700 bg-white hover:bg-slate-50 border border-slate-200 active:scale-[0.98] transition-all cursor-pointer shadow-2xs"
          >
            <ArrowLeft className="w-4 h-4" />
            <span>Go Back</span>
          </button>
        </div>

        {/* Quick Operations Links */}
        {isAuthenticated && (
          <div className="w-full bg-slate-50/80 border border-slate-200 rounded-2xl p-5 shadow-xs">
            <div className="flex items-center justify-between mb-3 text-left">
              <span className="text-xs font-semibold uppercase tracking-wider text-slate-600">
                Quick Navigation
              </span>
              <span className="text-[11px] text-slate-500">Operational shortcuts</span>
            </div>

            <div className="grid grid-cols-1 sm:grid-cols-2 gap-2.5 text-left">
              {quickLinks.map((item) => {
                const IconComponent = item.icon;
                return (
                  <Link
                    key={item.path}
                    to={item.path}
                    className="flex items-center gap-3 p-2.5 rounded-xl bg-white hover:bg-slate-50/90 border border-slate-200/90 hover:border-slate-300 shadow-2xs transition-all group"
                  >
                    <div className={`w-8 h-8 rounded-lg flex items-center justify-center shrink-0 border ${item.color} transition-transform group-hover:scale-105`}>
                      <IconComponent className="w-4 h-4" />
                    </div>
                    <div className="min-w-0 flex-1">
                      <div className="text-xs font-semibold text-slate-800 group-hover:text-slate-950 truncate">
                        {item.title}
                      </div>
                      <div className="text-[11px] text-slate-500 truncate">
                        {item.desc}
                      </div>
                    </div>
                  </Link>
                );
              })}
            </div>
          </div>
        )}
      </div>
    </main>
  );
}