"use client";
import { useState, useEffect } from "react";
import { useAuth } from "@/contexts/AuthContext";
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/Card";
import Button from "@/components/Button";
import { API_ENDPOINTS, API_BASE_URL } from "@/utils/constants";

export default function DebugTicketsPage() {
  const { user, isAuthenticated } = useAuth();
  const [response, setResponse] = useState<any>(null);
  const [loading, setLoading] = useState(false);
  const [hasToken, setHasToken] = useState(false);

  useEffect(() => {
    setHasToken(!!localStorage.getItem('auth_token'));
  }, []);

  const testAPI = async () => {
    setLoading(true);
    try {
      const token = localStorage.getItem('auth_token');

      console.log('🔍 Test de l\'API /game/my-tickets');
      console.log('📍 URL:', `${API_BASE_URL}${API_ENDPOINTS.GAME.MY_TICKETS}`);
      console.log('🔑 Token:', token ? 'Présent' : 'Absent');
      console.log('👤 User:', user);

      const res = await fetch(`${API_BASE_URL}${API_ENDPOINTS.GAME.MY_TICKETS}?page=1&limit=10`, {
        method: 'GET',
        headers: {
          'Content-Type': 'application/json',
          ...(token && { 'Authorization': `Bearer ${token}` }),
        },
      });

      console.log('📡 Status:', res.status);

      const data = await res.json();
      console.log('📦 Données reçues:', data);

      setResponse({
        status: res.status,
        statusText: res.statusText,
        data: data,
        token: token ? 'Présent ✅' : 'Absent ❌',
        user: user,
        url: `${API_BASE_URL}${API_ENDPOINTS.GAME.MY_TICKETS}`,
      });
    } catch (error: any) {
      console.error('❌ Erreur:', error);
      setResponse({
        error: error.message,
        token: localStorage.getItem('auth_token') ? 'Présent ✅' : 'Absent ❌',
        user: user,
      });
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="py-8">
      <div className="max-w-4xl mx-auto">
        <Card>
          <CardHeader>
            <CardTitle>🔧 Debug - Chargement des tickets</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              <div className="p-4 bg-gray-50 rounded">
                <h3 className="font-semibold mb-2">État actuel :</h3>
                <ul className="text-sm space-y-1">
                  <li>✅ Authentifié : {isAuthenticated ? 'Oui' : 'Non'}</li>
                  <li>👤 Utilisateur : {user?.firstName} {user?.lastName}</li>
                  <li>📧 Email : {user?.email}</li>
                  <li>🎭 Rôle : {user?.role}</li>
                  <li>🔑 Token : {hasToken ? 'Présent' : 'Absent'}</li>
                </ul>
              </div>

              <Button onClick={testAPI} disabled={loading} className="w-full">
                {loading ? 'Test en cours...' : '🧪 Tester l\'API /game/my-tickets'}
              </Button>

              {response && (
                <div className="p-4 bg-blue-50 rounded border border-blue-200">
                  <h3 className="font-semibold mb-2">Résultat du test :</h3>
                  <pre className="text-xs overflow-auto max-h-96 bg-white p-3 rounded">
                    {JSON.stringify(response, null, 2)}
                  </pre>
                </div>
              )}

              <div className="p-4 bg-yellow-50 rounded border border-yellow-200">
                <h3 className="font-semibold mb-2">💡 Instructions :</h3>
                <ol className="text-sm space-y-2 list-decimal list-inside">
                  <li>Cliquez sur le bouton "Tester l'API"</li>
                  <li>Vérifiez le statut de la réponse (devrait être 200)</li>
                  <li>Vérifiez que des tickets sont retournés</li>
                  <li>Ouvrez la console (F12) pour voir les logs détaillés</li>
                </ol>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}