DatabaseManager.tsx

import React, { useState, useCallback, useEffect } from 'react';
import { generateGeminiContent } from '../services/geminiService';
import { ClipboardCopyIcon, CheckIcon, CommandLineIcon, SaveIcon } from './icons';
import DashboardCard from './DashboardCard';

interface DatabaseManagerProps {
  onSave: (name: string, content: string) => void;
}

const dbTypes = [
  { name: 'PostgreSQL', language: 'SQL', extension: '.sql' },
  { name: 'MongoDB', language: 'MongoDB Query Language', extension: '.js' },
  { name: 'Redis', language: 'Redis Commands', extension: '.txt' },
];

const DatabaseManager: React.FC<DatabaseManagerProps> = ({ onSave }) => {
  const [dbType, setDbType] = useState<string>(dbTypes[0].name);
  const [prompt, setPrompt] = useState<string>('Find all users who live in New York and have more than 500 followers.');
  const [generatedQuery, setGeneratedQuery] = useState<string>('');
  const [isLoading, setIsLoading] = useState<boolean>(false);
  const [error, setError] = useState<string>('');
  const [isCopied, setIsCopied] = useState<boolean>(false);
  const [filename, setFilename] = useState('');
  const [isSaved, setIsSaved] = useState(false);

  useEffect(() => {
    const selectedDb = dbTypes.find(db => db.name === dbType);
    if(selectedDb) {
      setFilename(`query${selectedDb.extension}`);
    }
  }, [dbType]);

  const handleGenerateQuery = useCallback(async () => {
    if (!prompt) {
      setError('Prompt cannot be empty.');
      return;
    }
    setIsLoading(true);
    setError('');
    setGeneratedQuery('');
    setIsCopied(false);
    setIsSaved(false);
    
    const selectedDb = dbTypes.find(db => db.name === dbType);
    const language = selectedDb ? selectedDb.language : 'SQL';

    const systemInstruction = `You are an expert database administrator specializing in ${dbType} (${language}). 
Generate a clean, correct, and efficient query based on the user's request. 
Return ONLY the query itself, inside a single markdown code block without any explanations or markdown formatting.`;

    const result = await generateGeminiContent(systemInstruction, prompt);
    
    if (result.startsWith('Error:')) {
      setError(result);
    } else {
      setGeneratedQuery(result);
    }
    setIsLoading(false);
  }, [prompt, dbType]);
  
  const handleCopy = () => {
    if(generatedQuery) {
      navigator.clipboard.writeText(generatedQuery);
      setIsCopied(true);
      setTimeout(() => setIsCopied(false), 2000);
    }
  };

  const handleSave = () => {
    if(generatedQuery && filename) {
        onSave(filename, generatedQuery);
        setIsSaved(true);
        setTimeout(() => setIsSaved(false), 2000);
    }
  };

  return (
    <div className="space-y-6">
      <DashboardCard title="Database Query Generator">
        <div className="space-y-4">
            <div>
                <label htmlFor="dbType" className="block text-sm font-medium text-text-secondary mb-2">
                Database Type
                </label>
                <select
                id="dbType"
                value={dbType}
                onChange={(e) => setDbType(e.target.value)}
                className="w-full md:w-1/3 bg-primary border border-border-color rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-2 focus:ring-accent"
                >
                {dbTypes.map((db) => (
                    <option key={db.name} value={db.name}>{db.name}</option>
                ))}
                </select>
            </div>
            <div>
                <label htmlFor="prompt" className="block text-sm font-medium text-text-secondary mb-2">
                Describe what you want to query
                </label>
                <textarea
                id="prompt"
                rows={3}
                value={prompt}
                onChange={(e) => setPrompt(e.target.value)}
                placeholder="e.g., A function to sort an array of objects by a specific key"
                className="w-full bg-primary border border-border-color rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-2 focus:ring-accent"
                />
            </div>
        </div>
        <div className="mt-6 flex justify-end">
          <button
            onClick={handleGenerateQuery}
            disabled={isLoading}
            className="flex items-center px-6 py-2.5 bg-accent text-white font-semibold rounded-md shadow-md hover:bg-accent-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-primary focus:ring-accent disabled:bg-gray-500 disabled:cursor-not-allowed transition-colors"
          >
            <CommandLineIcon className="h-5 w-5 mr-2" />
            {isLoading ? 'Generating...' : 'Generate Query'}
          </button>
        </div>
      </DashboardCard>

      {(isLoading || error || generatedQuery) && (
        <DashboardCard title="Generated Query">
            {isLoading && <p className="text-text-secondary animate-pulse">AI is thinking...</p>}
            {error && <p className="text-red-400">{error}</p>}
            {generatedQuery && (
              <div className="space-y-4">
                <div className="relative group">
                    <pre className="bg-primary text-text-primary p-4 rounded-md overflow-x-auto text-sm">
                    <code>{generatedQuery}</code>
                    </pre>
                    <button 
                    onClick={handleCopy}
                    className="absolute top-2 right-2 p-2 bg-gray-700 rounded-md text-text-secondary hover:bg-gray-600 opacity-0 group-hover:opacity-100 transition-opacity"
                    aria-label="Copy query"
                    >
                    {isCopied ? <CheckIcon className="h-5 w-5 text-green-400" /> : <ClipboardCopyIcon className="h-5 w-5" />}
                    </button>
                </div>
                 <div className="flex items-center gap-4 p-4 bg-primary rounded-md border border-border-color">
                    <input 
                        type="text"
                        value={filename}
                        onChange={(e) => setFilename(e.target.value)}
                        placeholder="Enter filename..."
                        className="flex-grow bg-secondary border border-border-color rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-2 focus:ring-accent"
                    />
                    <button 
                        onClick={handleSave}
                        disabled={!filename}
                        className="flex items-center px-4 py-2 bg-green-600 text-white font-semibold rounded-md hover:bg-green-700 disabled:bg-gray-500 disabled:cursor-not-allowed transition-colors"
                    >
                        <SaveIcon className="h-5 w-5 mr-2" />
                        {isSaved ? 'Saved!' : 'Save to Workspace'}
                    </button>
                </div>
              </div>
            )}
        </DashboardCard>
      )}
    </div>
  );
};

export default DatabaseManager;