import React, { useState, useCallback } from 'react';
import { generateProResponse } from '../services/geminiService';
import { Spinner } from '../components/Spinner';
import { MarkdownRenderer } from '../components/MarkdownRenderer';

const BlockchainAIModule: React.FC = () => {
  const [blockchain, setBlockchain] = useState<'XRPL' | 'Solana'>('XRPL');
  const [query, setQuery] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [insight, setInsight] = useState<string | null>(null);

  const handleQuery = useCallback(async () => {
    if (!query.trim()) {
      setError('Please enter a query.');
      return;
    }
    setIsLoading(true);
    setError(null);
    setInsight(null);

    const prompt = `As an AI specialist within the Sentient Constellation Codex focusing on decentralized technologies, provide a detailed analysis on the following query related to the ${blockchain} blockchain: "${query}". Discuss the technical implications, potential use cases, and the broader ecosystem context. Your response should be accurate, insightful, and well-structured.`;

    try {
      const result = await generateProResponse(prompt);
      setInsight(result.text);
    } catch (e: any) {
      setError(e.message || 'An unknown error occurred while generating insights.');
    } finally {
      setIsLoading(false);
    }
  }, [query, blockchain]);

  return (
    <div className="flex flex-col h-full w-full max-w-5xl mx-auto">
      <h2 className="text-2xl font-bold text-cyan-300 mb-4 text-center">Blockchain AI Insights</h2>
      <p className="text-gray-400 mb-6 text-center">Explore the synergies between Artificial Intelligence and leading blockchain platforms.</p>
      
      <div className="flex flex-col sm:flex-row gap-2 mb-4">
        <select 
            value={blockchain} 
            onChange={e => setBlockchain(e.target.value as 'XRPL' | 'Solana')}
            disabled={isLoading}
            className="bg-gray-700 border border-gray-600 rounded-md p-3 focus:outline-none focus:ring-2 focus:ring-cyan-500 text-white"
        >
            <option value="XRPL">XRPL (Ripple)</option>
            <option value="Solana">Solana</option>
        </select>
        <input
          type="text"
          value={query}
          onChange={(e) => setQuery(e.target.value)}
          placeholder="e.g., How can AI enhance DeFi on this platform?"
          className="flex-grow bg-gray-700 border border-gray-600 rounded-md p-3 focus:outline-none focus:ring-2 focus:ring-cyan-500 text-white"
          disabled={isLoading}
          onKeyPress={(e) => e.key === 'Enter' && !isLoading && handleQuery()}
        />
        <button
          onClick={handleQuery}
          disabled={isLoading}
          className="bg-cyan-600 hover:bg-cyan-500 text-white font-bold py-3 px-6 rounded-md disabled:bg-gray-500 transition-colors"
        >
          {isLoading ? 'Analyzing...' : 'Get Insights'}
        </button>
      </div>
      
      <div className="flex-grow overflow-y-auto p-4 bg-gray-800/50 rounded-lg border border-cyan-500/10 min-h-[50vh] mt-4">
        {isLoading && <Spinner text="Analyzing on-chain data..." />}
        {error && <p className="text-red-400 text-center">{error}</p>}
        {insight && <MarkdownRenderer content={insight} />}
        {!isLoading && !insight && !error && <p className="text-gray-500 text-center">Blockchain insights will materialize here.</p>}
      </div>
    </div>
  );
};

export default BlockchainAIModule;