import { useLocation, useNavigate } from 'react-router-dom';
import { Home } from 'lucide-react';
import { Button, EmptyState, Surface } from '@/components/ds';
import { useAuth } from '@/lib/AuthContext';

/**
 * The 404 page.
 *
 * Signed-in operators get a second line naming the route table, because a
 * missing route in a console is nearly always a link that was renamed rather
 * than a page that never existed.
 */
export default function PageNotFound() {
  const location = useLocation();
  const navigate = useNavigate();
  const { isAuthenticated } = useAuth();

  const path = location.pathname;

  return (
    <main className="flex min-h-screen items-center justify-center p-6">
      <Surface radius="xl" padding="lg" className="w-full max-w-md">
        <EmptyState
          icon={Home}
          title="Page not found"
          description={`Nothing is registered at "${path}".`}
          action={
            <Button onClick={() => navigate(isAuthenticated ? '/doormile/dispatch' : '/login')}>
              {isAuthenticated ? 'Back to Dispatch' : 'Sign in'}
            </Button>
          }
        />

        {isAuthenticated && (
          <p className="mt-2 text-center text-caption text-ink-4">
            If this address used to work, check the route table in <code>src/App.jsx</code>.
          </p>
        )}
      </Surface>
    </main>
  );
}