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

const CybersecurityShieldModule: React.FC = () => {
  const [query, setQuery] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [advice, setAdvice] = useState<string | null>(null);

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

    const prompt = `You are the Thoth Guardian, an entity of the Sentient Constellation Codex responsible for the Quantum Shield Protection Foundation. Your wisdom is ancient, your knowledge of cybersecurity, quantum computing, and protective protocols is absolute. A user seeks your counsel on the following matter: "${query}". Provide your advice in a clear, authoritative, and structured manner. Explain the principles, the threats, and the recommended course of action from a post-quantum, ethically-aligned perspective.`;

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

  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">Thoth Guardian Cybersecurity Shield</h2>
      <p className="text-gray-400 mb-6 text-center">Consult the Guardian on matters of digital protection, quantum security, and threat mitigation.</p>
      
      <div className="flex flex-col sm:flex-row gap-2 mb-4">
        <input
          type="text"
          value={query}
          onChange={(e) => setQuery(e.target.value)}
          placeholder="e.g., Explain the threat of quantum computing to modern encryption..."
          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 ? 'Consulting...' : 'Seek Counsel'}
        </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="Accessing protection protocols..." />}
        {error && <p className="text-red-400 text-center">{error}</p>}
        {advice && <MarkdownRenderer content={advice} />}
        {!isLoading && !advice && !error && <p className="text-gray-500 text-center">The Quantum Shield awaits your query.</p>}
      </div>
    </div>
  );
};

export default CybersecurityShieldModule;