veza/apps/web/src/features/error/pages/ServerErrorPage.tsx

import { useNavigate } from 'react-router-dom';
import { Button } from '@/components/ui/button';
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card';
import {
  Home,
  RefreshCw,
  AlertTriangle,
  Mail,
  Clock,
  CheckCircle,
} from 'lucide-react';
import { useState } from 'react';

/**
 * FE-PAGE-018: Improved 500 error page with helpful messages and recovery actions
 */
function ServerErrorPage() {
  const navigate = useNavigate();
  const [isRetrying, setIsRetrying] = useState(false);

  const handleRefresh = async () => {
    setIsRetrying(true);
    // Wait a bit before reloading to show feedback
    setTimeout(() => {
      window.location.reload();
    }, 500);
  };

  const handleGoHome = () => {
    navigate('/dashboard');
  };

  return (
    <div className="min-h-screen flex items-center justify-center bg-kodo-void dark:bg-kodo-ink 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-kodo-red/10 dark:bg-kodo-red/20">
              <AlertTriangle className="h-8 w-8 text-kodo-red dark:text-kodo-red" />
            </div>
            <CardTitle className="text-2xl">Erreur serveur</CardTitle>
            <CardDescription>
              Une erreur interne s'est produite. Notre équipe a été notifiée.
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-6">
            <div className="text-6xl font-bold text-kodo-text-main dark:text-kodo-text-main">
              500
            </div>
            <p className="text-kodo-content-dim dark:text-kodo-content-dim">
              Nous nous excusons pour la gêne occasionnée. Notre équipe
              technique a été automatiquement notifiée et travaille à résoudre
              le problème.
            </p>

            {/* Status Info */}
            <div className="bg-kodo-steel/10 dark:bg-kodo-steel/20 border border-kodo-steel dark:border-kodo-steel rounded-lg p-4">
              <div className="flex items-start gap-3 text-left">
                <Clock className="h-5 w-5 text-kodo-steel dark:text-kodo-steel mt-0.5" />
                <div>
                  <p className="text-sm font-medium text-kodo-steel dark:text-kodo-steel">
                    Que faire maintenant ?
                  </p>
                  <ul className="text-sm text-kodo-steel dark:text-kodo-steel mt-2 space-y-1 list-disc list-inside">
                    <li>Attendez quelques instants et réessayez</li>
                    <li>Vérifiez votre connexion internet</li>
                    <li>Si le problème persiste, contactez le support</li>
                  </ul>
                </div>
              </div>
            </div>

            {/* Actions */}
            <div className="flex flex-col sm:flex-row gap-2">
              <Button
                onClick={handleRefresh}
                disabled={isRetrying}
                className="flex-1"
              >
                <RefreshCw
                  className={`mr-2 h-4 w-4 ${isRetrying ? 'animate-spin' : ''}`}
                />
                {isRetrying ? 'Réessai...' : 'Réessayer'}
              </Button>
              <Button
                onClick={handleGoHome}
                variant="outline"
                className="flex-1"
              >
                <Home className="mr-2 h-4 w-4" />
                Retour au dashboard
              </Button>
            </div>

            {/* Help Section */}
            <div className="border-t pt-4 text-left">
              <p className="text-sm font-medium text-kodo-text-main dark:text-kodo-text-main mb-3">
                Besoin d'aide ?
              </p>
              <div className="space-y-2">
                <div className="flex items-center gap-2 text-sm text-kodo-content-dim dark:text-kodo-content-dim">
                  <CheckCircle className="h-4 w-4 text-kodo-lime" />
                  <span>
                    L'erreur a été automatiquement signalée à notre équipe
                  </span>
                </div>
                <div className="flex items-center gap-2 text-sm text-kodo-content-dim dark:text-kodo-content-dim">
                  <Mail className="h-4 w-4 text-kodo-steel" />
                  <span>
                    Contactez le support si le problème persiste après plusieurs
                    tentatives
                  </span>
                </div>
              </div>
            </div>

            {/* Technical Details (Collapsible) */}
            <details className="border-t pt-4 text-left">
              <summary className="text-sm font-medium text-kodo-text-main dark:text-kodo-text-main cursor-pointer hover:text-kodo-text-main dark:hover:text-kodo-text-main">
                Détails techniques
              </summary>
              <div className="mt-2 p-3 bg-kodo-void dark:bg-kodo-graphite rounded text-xs font-mono text-kodo-content-dim dark:text-kodo-content-dim">
                <p>Code d'erreur: 500 Internal Server Error</p>
                <p>Timestamp: {new Date().toISOString()}</p>
                <p>User Agent: {navigator.userAgent}</p>
              </div>
            </details>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}
export default ServerErrorPage;