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, 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-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-red-100 dark:bg-red-900">
              <AlertTriangle className="h-8 w-8 text-red-600 dark:text-red-400" />
            </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-gray-300 dark:text-gray-700">
              500
            </div>
            <p className="text-gray-600 dark:text-gray-400">
              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-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
              <div className="flex items-start gap-3 text-left">
                <Clock className="h-5 w-5 text-blue-600 dark:text-blue-400 mt-0.5" />
                <div>
                  <p className="text-sm font-medium text-blue-900 dark:text-blue-100">
                    Que faire maintenant ?
                  </p>
                  <ul className="text-sm text-blue-800 dark:text-blue-200 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-gray-700 dark:text-gray-300 mb-3">
                Besoin d'aide ?
              </p>
              <div className="space-y-2">
                <div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
                  <CheckCircle className="h-4 w-4 text-green-600" />
                  <span>L'erreur a été automatiquement signalée à notre équipe</span>
                </div>
                <div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
                  <Mail className="h-4 w-4 text-blue-600" />
                  <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-gray-700 dark:text-gray-300 cursor-pointer hover:text-gray-900 dark:hover:text-gray-100">
                Détails techniques
              </summary>
              <div className="mt-2 p-3 bg-gray-100 dark:bg-gray-800 rounded text-xs font-mono text-gray-600 dark:text-gray-400">
                <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;