'use client';

import { useState } from 'react';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Alert, AlertDescription } from '@/components/ui/alert';
import { Loader2, CheckCircle, AlertCircle, Trash2, RefreshCw } from 'lucide-react';

export default function ClearAuthPage() {
  const [loading, setLoading] = useState(false);
  const [success, setSuccess] = useState(false);
  const [error, setError] = useState('');
  const [localStorageCleared, setLocalStorageCleared] = useState(false);

  const clearServerAuth = async () => {
    setLoading(true);
    setError('');
    setSuccess(false);

    try {
      const response = await fetch('/api/clear-auth', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
      });

      const result = await response.json();

      if (result.success) {
        setSuccess(true);
      } else {
        setError(result.error || 'Erreur lors du nettoyage serveur');
      }
    } catch (error: any) {
      setError(error.message || 'Erreur lors du nettoyage serveur');
    } finally {
      setLoading(false);
    }
  };

  const clearLocalStorage = () => {
    try {
      // Supprimer toutes les clés liées à Supabase
      const keysToRemove = [];
      for (let i = 0; i < localStorage.length; i++) {
        const key = localStorage.key(i);
        if (key && (key.includes('supabase') || key.includes('sb-'))) {
          keysToRemove.push(key);
        }
      }

      keysToRemove.forEach(key => {
        localStorage.removeItem(key);
      });

      setLocalStorageCleared(true);
      console.log('🧹 localStorage nettoyé:', keysToRemove);
    } catch (error) {
      console.error('❌ Erreur lors du nettoyage localStorage:', error);
      setError('Erreur lors du nettoyage localStorage');
    }
  };

  const reloadPage = () => {
    window.location.reload();
  };

  return (
    <div className="min-h-screen bg-slate-50 dark:bg-slate-900 py-8">
      <div className="container mx-auto px-4 max-w-2xl">
        <div className="text-center mb-8">
          <h1 className="text-3xl font-bold text-slate-900 dark:text-slate-100 mb-2">
            🧹 Nettoyage d'Authentification
          </h1>
          <p className="text-slate-600 dark:text-slate-400">
            Résoudre les problèmes de session Supabase
          </p>
        </div>

        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Trash2 className="h-5 w-5" />
              Nettoyer l'état d'authentification
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-6">
            <Alert>
              <AlertCircle className="h-4 w-4" />
              <AlertDescription>
                <strong>Problème détecté :</strong> AuthSessionMissingError
                <br />
                Cette erreur indique que Supabase ne peut pas récupérer votre session d'authentification.
                <br />
                <strong>Solution :</strong> Nettoyez l'état d'authentification et reconnectez-vous.
              </AlertDescription>
            </Alert>

            <div className="space-y-4">
              <div className="flex gap-4">
                <Button
                  onClick={clearServerAuth}
                  disabled={loading}
                  variant="outline"
                  className="flex-1"
                >
                  {loading && <Loader2 className="h-4 w-4 animate-spin mr-2" />}
                  Nettoyer côté serveur
                </Button>

                <Button
                  onClick={clearLocalStorage}
                  disabled={localStorageCleared}
                  variant="outline"
                  className="flex-1"
                >
                  <Trash2 className="h-4 w-4 mr-2" />
                  Nettoyer localStorage
                </Button>
              </div>

              <Button
                onClick={reloadPage}
                className="w-full"
                variant="default"
              >
                <RefreshCw className="h-4 w-4 mr-2" />
                Recharger la page
              </Button>
            </div>

            {error && (
              <Alert variant="destructive">
                <AlertCircle className="h-4 w-4" />
                <AlertDescription>{error}</AlertDescription>
              </Alert>
            )}

            {success && (
              <Alert>
                <CheckCircle className="h-4 w-4" />
                <AlertDescription>
                  Nettoyage serveur réussi ! Maintenant nettoyez le localStorage et rechargez la page.
                </AlertDescription>
              </Alert>
            )}

            {localStorageCleared && (
              <Alert>
                <CheckCircle className="h-4 w-4" />
                <AlertDescription>
                  localStorage nettoyé ! Rechargez maintenant la page pour finaliser.
                </AlertDescription>
              </Alert>
            )}

            <div className="bg-slate-100 dark:bg-slate-800 p-4 rounded-lg">
              <h3 className="font-semibold mb-2">📋 Instructions détaillées :</h3>
              <ol className="list-decimal list-inside space-y-1 text-sm">
                <li>Cliquez sur "Nettoyer côté serveur"</li>
                <li>Cliquez sur "Nettoyer localStorage"</li>
                <li>Cliquez sur "Recharger la page"</li>
                <li>Allez sur <code>/debug-auth</code> pour vous reconnecter</li>
                <li>Ou allez directement sur <code>/admin</code></li>
              </ol>
            </div>

            <div className="bg-blue-50 dark:bg-blue-900/20 p-4 rounded-lg">
              <h3 className="font-semibold mb-2 text-blue-800 dark:text-blue-200">
                💡 Après le nettoyage :
              </h3>
              <ul className="list-disc list-inside space-y-1 text-sm text-blue-700 dark:text-blue-300">
                <li>Votre session sera complètement réinitialisée</li>
                <li>Vous devrez vous reconnecter avec vos identifiants admin</li>
                <li>Utilisez la page <code>/debug-auth</code> pour une connexion rapide</li>
                <li>Ou connectez-vous normalement sur <code>/admin</code></li>
              </ul>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}