import React from "react";
import { Link, useLocation } from "react-router-dom";
import { Button } from "@/components/ui/button";
import { Home, AlertCircle, ArrowLeft } from "lucide-react";

/**
 * NotFound — catch-all route fallback shown when no <Route> matches.
 *
 * Real bug it fixes (v12.31): in React Router v6, if no route matches, the
 * <Outlet/> renders nothing. That left the entire viewport blank when users
 * hit a stale bookmark (e.g. `/gst` instead of the real `/gst-returns`). With
 * this component wired as `<Route path="*" element={<NotFound/>}/>`, the
 * Layout still renders (sidebar, header, FABs) and the main content area
 * shows a helpful message + actions.
 */
export default function NotFound() {
    const location = useLocation();
    return (
        <div className="flex flex-col items-center justify-center min-h-[60vh] px-6 text-center" data-testid="not-found-page">
            <div className="rounded-full bg-amber-100 dark:bg-amber-900/30 p-5 mb-5">
                <AlertCircle className="w-12 h-12 text-amber-600 dark:text-amber-400" />
            </div>
            <h1 className="text-3xl font-display font-bold tracking-tight">Page not found</h1>
            <p className="mt-2 text-muted-foreground max-w-md">
                The page <code className="font-mono text-sm bg-muted px-1.5 py-0.5 rounded">{location.pathname}</code> does not
                exist or may have been moved. Try the sidebar or the search bar (<kbd className="text-xs">Ctrl+K</kbd>).
            </p>
            <div className="mt-6 flex flex-wrap gap-3 justify-center">
                <Button asChild data-testid="not-found-home">
                    <Link to="/"><Home className="w-4 h-4 mr-2" />Go to Dashboard</Link>
                </Button>
                <Button variant="outline" onClick={() => window.history.back()} data-testid="not-found-back">
                    <ArrowLeft className="w-4 h-4 mr-2" />Go Back
                </Button>
            </div>
        </div>
    );
}