"use client";

import { useState } from "react";

export default function DebugApiKey() {
  const [result, setResult] = useState<any>(null);
  const [loading, setLoading] = useState(false);

  const testApiKey = async () => {
    setLoading(true);
    try {
      const response = await fetch("/api/debug-api-key");
      const data = await response.json();
      setResult(data);
    } catch (error) {
      setResult({ error: error instanceof Error ? error.message : String(error) });
    }
    setLoading(false);
  };

  return (
    <div className="min-h-screen bg-gray-50 p-8">
      <div className="max-w-4xl mx-auto">
        <div className="bg-white rounded-lg shadow-lg p-6">
          <h1 className="text-3xl font-bold text-gray-800 mb-4">
            🔑 Debug da API Key do Appwrite
          </h1>
          
          <button
            onClick={testApiKey}
            disabled={loading}
            className="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg disabled:opacity-50 mb-6"
          >
            {loading ? "Testando..." : "Testar API Key"}
          </button>

          {result && (
            <div className="bg-gray-100 rounded-lg p-4">
              <h2 className="text-xl font-bold mb-2">Resultado:</h2>
              <pre className="text-sm overflow-auto">
                {JSON.stringify(result, null, 2)}
              </pre>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}