import React, { useState } from 'react';
import './GeminiTest.css';
import GeminiService from '../services/GeminiService';

const GeminiTest = () => {
  const [prompt, setPrompt] = useState('Write a short recipe for spaghetti bolognese.');
  const [response, setResponse] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(null);

  // Initialize Gemini service with the API key
  const geminiService = new GeminiService('AIzaSyAIxqZ9V0Ozj1u5-WCGdSu6_MNSKyCuRJU');

  const handleTest = async () => {
    if (!prompt.trim()) return;

    setIsLoading(true);
    setError(null);
    setResponse('');

    try {
      // Call Gemini API
      const result = await geminiService.generateText(prompt, {
        temperature: 0.7,
        maxOutputTokens: 2048
      });

      setResponse(result.text);
    } catch (err) {
      console.error('Error testing Gemini API:', err);
      setError(err.message || 'Failed to get response from Gemini API');
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div className="gemini-test">
      <h2>Gemini API Test</h2>
      
      <div className="test-form">
        <div className="form-group">
          <label htmlFor="prompt">Test Prompt:</label>
          <textarea
            id="prompt"
            value={prompt}
            onChange={(e) => setPrompt(e.target.value)}
            rows={4}
            placeholder="Enter a prompt to test the Gemini API"
          />
        </div>
        
        <button 
          className="test-button"
          onClick={handleTest}
          disabled={isLoading}
        >
          {isLoading ? 'Testing...' : 'Test API'}
        </button>
      </div>
      
      {error && (
        <div className="error-message">
          <p>{error}</p>
        </div>
      )}
      
      {response && (
        <div className="response-container">
          <h3>API Response:</h3>
          <div className="response-content">
            <pre>{response}</pre>
          </div>
        </div>
      )}
    </div>
  );
};

export default GeminiTest;