// Composant temporaire pour déboguer l'API salarié
// À utiliser uniquement en développement

"use client";

import { useState } from "react";
import { api } from "@/lib/fetcher";

export default function DebugSalarieAPI() {
  const [matricule, setMatricule] = useState("");
  const [result, setResult] = useState<any>(null);
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(false);

  const testAPI = async () => {
    if (!matricule.trim()) {
      setError("Veuillez entrer un matricule");
      return;
    }

    setLoading(true);
    setError("");
    setResult(null);

    try {
      // Test avec debug=1 pour voir les infos de session
      console.log("🔍 Testing API with debug mode...");
      const debugResult = await api(`/salaries/${matricule}?debug=1`);
      console.log("Debug result:", debugResult);

      // Test normal
      console.log("🔍 Testing normal API call...");
      const normalResult = await api(`/salaries/${matricule}`);
      console.log("Normal result:", normalResult);

      setResult({
        debug: debugResult,
        normal: normalResult,
        rawResponse: normalResult
      });

    } catch (err: any) {
      console.error("❌ API Error:", err);
      setError(err.message || "Erreur inconnue");
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="p-6 max-w-4xl mx-auto">
      <h1 className="text-2xl font-bold mb-6">Debug API Salarié</h1>
      
      <div className="space-y-4">
        <div className="flex gap-2">
          <input
            type="text"
            value={matricule}
            onChange={(e) => setMatricule(e.target.value)}
            placeholder="Matricule du salarié (ex: SAL001)"
            className="flex-1 px-3 py-2 border rounded-lg"
          />
          <button
            onClick={testAPI}
            disabled={loading}
            className="px-4 py-2 bg-blue-600 text-white rounded-lg disabled:opacity-50"
          >
            {loading ? "Test en cours..." : "Tester API"}
          </button>
        </div>

        {error && (
          <div className="p-4 bg-red-100 border border-red-300 rounded-lg">
            <h3 className="font-semibold text-red-800">Erreur:</h3>
            <pre className="text-sm text-red-700 mt-2 whitespace-pre-wrap">{error}</pre>
          </div>
        )}

        {result && (
          <div className="space-y-4">
            <div className="p-4 bg-blue-100 border border-blue-300 rounded-lg">
              <h3 className="font-semibold text-blue-800">Debug Info:</h3>
              <pre className="text-sm text-blue-700 mt-2 whitespace-pre-wrap overflow-auto">
                {JSON.stringify(result.debug, null, 2)}
              </pre>
            </div>

            <div className="p-4 bg-green-100 border border-green-300 rounded-lg">
              <h3 className="font-semibold text-green-800">Données retournées:</h3>
              <pre className="text-sm text-green-700 mt-2 whitespace-pre-wrap overflow-auto">
                {JSON.stringify(result.normal, null, 2)}
              </pre>
            </div>

            <div className="p-4 bg-gray-100 border border-gray-300 rounded-lg">
              <h3 className="font-semibold text-gray-800">Structure des données:</h3>
              <ul className="text-sm text-gray-700 mt-2">
                {result.normal && Object.keys(result.normal).map((key: string) => (
                  <li key={key}>
                    <strong>{key}:</strong> {typeof result.normal[key]} 
                    {result.normal[key] && ` = ${JSON.stringify(result.normal[key]).substring(0, 100)}${JSON.stringify(result.normal[key]).length > 100 ? '...' : ''}`}
                  </li>
                ))}
              </ul>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}