import { Link, useNavigate } from 'react-router-dom';
import { Button } from '@/components/ui/button';
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card';
import { Home, ArrowLeft, Search, Music, Library, TrendingUp } from 'lucide-react';

/**
 * FE-PAGE-018: Improved 404 error page with helpful messages and recovery actions
 */
function NotFoundPage() {
  const navigate = useNavigate();

  const quickLinks = [
    { to: '/dashboard', label: 'Dashboard', icon: Home },
    { to: '/library', label: 'Ma bibliothèque', icon: Library },
    { to: '/search', label: 'Rechercher', icon: Search },
    { to: '/marketplace', label: 'Marketplace', icon: TrendingUp },
  ];

  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 p-4">
      <div className="w-full max-w-2xl">
        <Card className="text-center">
          <CardHeader>
            <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900">
              <Search className="h-8 w-8 text-blue-600 dark:text-blue-400" />
            </div>
            <CardTitle className="text-2xl">Page non trouvée</CardTitle>
            <CardDescription>
              La page que vous recherchez n'existe pas ou a été déplacée.
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-6">
            <div className="text-6xl font-bold text-gray-300 dark:text-gray-700">
              404
            </div>
            <p className="text-gray-600 dark:text-gray-400">
              Il semble que vous ayez suivi un lien cassé ou tapé une URL
              incorrecte. Voici quelques options pour continuer :
            </p>

            {/* Quick Actions */}
            <div className="flex flex-col sm:flex-row gap-2">
              <Button asChild className="flex-1">
                <Link to="/dashboard">
                  <Home className="mr-2 h-4 w-4" />
                  Retour au dashboard
                </Link>
              </Button>
              <Button
                variant="outline"
                onClick={() => window.history.back()}
                className="flex-1"
              >
                <ArrowLeft className="mr-2 h-4 w-4" />
                Page précédente
              </Button>
            </div>

            {/* Quick Links */}
            <div className="border-t pt-4">
              <p className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
                Liens rapides :
              </p>
              <div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
                {quickLinks.map((link) => {
                  const Icon = link.icon;
                  return (
                    <Button
                      key={link.to}
                      variant="outline"
                      size="sm"
                      asChild
                      className="flex flex-col h-auto py-2"
                    >
                      <Link to={link.to}>
                        <Icon className="h-4 w-4 mb-1" />
                        <span className="text-xs">{link.label}</span>
                      </Link>
                    </Button>
                  );
                })}
              </div>
            </div>

            {/* Helpful Suggestions */}
            <div className="border-t pt-4 text-left">
              <p className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                Suggestions :
              </p>
              <ul className="text-sm text-gray-600 dark:text-gray-400 space-y-1 list-disc list-inside">
                <li>Vérifiez l'orthographe de l'URL</li>
                <li>Utilisez la recherche pour trouver ce que vous cherchez</li>
                <li>Consultez votre bibliothèque ou le marketplace</li>
                <li>Contactez le support si le problème persiste</li>
              </ul>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}
export default NotFoundPage;