components/AiEditModal.tsx

import React from 'react';
import { MagicSparkleIcon, CloseIcon } from './icons';

interface AiEditModalProps {
  isOpen: boolean;
  onClose: () => void;
  onGenerate: () => void;
  imageUrl: string;
  prompt: string;
  onPromptChange: (newPrompt: string) => void;
  isLoading: boolean;
  error: string | null;
}

const AiEditModal: React.FC<AiEditModalProps> = ({
  isOpen,
  onClose,
  onGenerate,
  imageUrl,
  prompt,
  onPromptChange,
  isLoading,
  error,
}) => {
  if (!isOpen) return null;

  return (
    <div 
        className="fixed inset-0 bg-black bg-opacity-60 backdrop-blur-sm flex justify-center items-center z-[1000] p-4"
        aria-modal="true"
        role="dialog"
        aria-labelledby="ai-edit-modal-title"
    >
      <div className="bg-white rounded-lg shadow-2xl p-6 w-full max-w-lg transform transition-all">
        <div className="flex justify-between items-center mb-4">
          <h2 id="ai-edit-modal-title" className="text-xl font-semibold text-slate-700">Edit Image with AI</h2>
          <button
            onClick={onClose}
            className="text-slate-400 hover:text-slate-600 transition-colors"
            aria-label="Close AI edit modal"
            disabled={isLoading}
          >
            <CloseIcon className="w-6 h-6" />
          </button>
        </div>

        <div className="mb-4">
          <p className="text-sm text-slate-600 mb-1">Your uploaded image:</p>
          <img 
            src={imageUrl} 
            alt="Uploaded image preview" 
            className="max-w-full h-auto max-h-48 rounded border border-slate-300 object-contain mx-auto" 
          />
        </div>

        <div className="mb-4">
          <label htmlFor="aiPrompt" className="block text-sm font-medium text-slate-700 mb-1">
            Describe what you want to change:
          </label>
          <textarea
            id="aiPrompt"
            value={prompt}
            onChange={(e) => onPromptChange(e.target.value)}
            placeholder="e.g., 'make the cat wear a party hat', 'change background to a beach'"
            rows={3}
            className="w-full p-2 border border-slate-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-shadow text-sm"
            disabled={isLoading}
            aria-describedby={error ? "ai-edit-error" : undefined}
          />
        </div>

        {error && (
          <div id="ai-edit-error" className="mb-4 p-3 bg-red-100 border border-red-300 text-red-700 rounded-md text-sm" role="alert">
            <p className="font-semibold">Error:</p>
            <p>{error}</p>
          </div>
        )}

        <div className="flex flex-col sm:flex-row justify-end gap-3">
          <button
            onClick={onClose}
            disabled={isLoading}
            className="px-4 py-2 bg-slate-200 text-slate-700 rounded-md hover:bg-slate-300 transition-colors disabled:opacity-50 disabled:cursor-not-allowed text-sm font-medium"
          >
            Cancel
          </button>
          <button
            onClick={onGenerate}
            disabled={isLoading || !prompt.trim()}
            className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors disabled:opacity-50 disabled:cursor-not-allowed text-sm font-medium flex items-center justify-center gap-2"
          >
            {isLoading ? (
              <>
                <svg className="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                  <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                </svg>
                Generating...
              </>
            ) : (
              <>
                <MagicSparkleIcon className="w-4 h-4 mr-1" />
                Generate Image
              </>
            )}
          </button>
        </div>
      </div>
    </div>
  );
};

export default AiEditModal;