components/SuggestionsModal.tsx

import React from 'react';
import { Lightbulb, X, Sparkles, Wand2 } from 'lucide-react';

interface SuggestionsModalProps {
  isOpen: boolean;
  onClose: () => void;
  suggestions: string;
  isLoading: boolean;
  onImplement: () => void;
  isImplementing: boolean;
}

const SuggestionsModal: React.FC<SuggestionsModalProps> = ({ 
  isOpen, 
  onClose, 
  suggestions, 
  isLoading, 
  onImplement, 
  isImplementing 
}) => {
  if (!isOpen) return null;

  return (
    <div className="absolute inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm p-4">
      <div className="bg-slate-900 w-full max-w-lg rounded-xl border border-slate-700 shadow-2xl flex flex-col overflow-hidden animate-in fade-in zoom-in duration-200">
        <div className="flex items-center justify-between px-6 py-4 border-b border-slate-800 bg-gradient-to-r from-slate-900 to-slate-800">
          <h2 className="text-lg font-bold text-white flex items-center gap-2">
            <Lightbulb className="text-amber-400" size={20} />
            AI Suggestions
          </h2>
          <button onClick={onClose} className="text-slate-400 hover:text-white transition-colors">
            <X size={20} />
          </button>
        </div>
        <div className="p-6 overflow-y-auto max-h-[60vh]">
          {isLoading ? (
            <div className="flex flex-col items-center justify-center space-y-4 py-8">
               <Sparkles className="text-amber-400 animate-spin" size={32} />
               <p className="text-slate-400 text-sm animate-pulse">Analyzing architecture...</p>
            </div>
          ) : isImplementing ? (
            <div className="flex flex-col items-center justify-center space-y-4 py-8">
               <Wand2 className="text-purple-400 animate-pulse" size={32} />
               <p className="text-slate-400 text-sm animate-pulse">Agents are applying fixes...</p>
            </div>
          ) : (
            <div className="text-slate-200 text-sm leading-relaxed whitespace-pre-wrap font-medium">
              {suggestions || "No suggestions available."}
            </div>
          )}
        </div>
        <div className="p-4 border-t border-slate-800 bg-slate-900/50 flex justify-between items-center">
           <div className="text-xs text-slate-500">
              Review carefully before applying.
           </div>
           <div className="flex gap-3">
             <button 
               onClick={onClose} 
               className="px-4 py-2 bg-slate-800 hover:bg-slate-700 text-slate-200 rounded text-sm transition-colors"
             >
               Close
             </button>
             {!isLoading && !isImplementing && suggestions && !suggestions.includes("Error") && (
                <button 
                  onClick={onImplement}
                  className="flex items-center gap-2 px-4 py-2 bg-purple-600 hover:bg-purple-500 text-white rounded text-sm font-medium transition-colors shadow-lg shadow-purple-900/20"
                >
                  <Wand2 size={16} />
                  Implement Fixes (Auto)
                </button>
             )}
           </div>
        </div>
      </div>
    </div>
  );
};
export default SuggestionsModal;