import React, { useState } from 'react';
import { FaTimes } from 'react-icons/fa';
import styles from './DashboardPromptSetModal.module.css';

interface DashboardPromptSetModalProps {
    isOpen: boolean;
    onClose: () => void;
    onSubmit: (promptData: { name: string; content: string }) => Promise<void>;
    isLoading?: boolean;
}

function DashboardPromptSetModal({ isOpen, onClose, onSubmit, isLoading = false }: DashboardPromptSetModalProps) {
    const [name, setName] = useState('');
    const [content, setContent] = useState('');
    const [error, setError] = useState<string | null>(null);

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault();
        
        if (!name.trim()) {
            setError('Name ist erforderlich');
            return;
        }
        
        if (!content.trim()) {
            setError('Inhalt ist erforderlich');
            return;
        }

        setError(null);
        
        try {
            await onSubmit({ name: name.trim(), content: content.trim() });
            // Reset form on success
            setName('');
            setContent('');
            onClose();
        } catch (err: any) {
            setError(err.message || 'Fehler beim Erstellen des Prompts');
        }
    };

    const handleClose = () => {
        setName('');
        setContent('');
        setError(null);
        onClose();
    };

    if (!isOpen) return null;

    return (
        <div className={styles.overlay}>
            <div className={styles.modal}>
                <div className={styles.header}>
                    <h2 className={styles.title}>Neuen Prompt erstellen</h2>
                    <button 
                        onClick={handleClose}
                        className={styles.closeButton}
                        disabled={isLoading}
                    >
                        <FaTimes />
                    </button>
                </div>

                <form onSubmit={handleSubmit} className={styles.form}>
                    <div className={styles.formGroup}>
                        <label htmlFor="promptName" className={styles.label}>
                            Name *
                        </label>
                        <input
                            id="promptName"
                            type="text"
                            value={name}
                            onChange={(e) => setName(e.target.value)}
                            className={styles.input}
                            placeholder="Geben Sie einen Namen für den Prompt ein"
                            disabled={isLoading}
                            maxLength={100}
                        />
                    </div>

                    <div className={styles.formGroup}>
                        <label htmlFor="promptContent" className={styles.label}>
                            Inhalt *
                        </label>
                        <textarea
                            id="promptContent"
                            value={content}
                            onChange={(e) => setContent(e.target.value)}
                            className={styles.textarea}
                            placeholder="Geben Sie den Inhalt des Prompts ein"
                            disabled={isLoading}
                            rows={8}
                        />
                    </div>

                    {error && (
                        <div className={styles.error}>
                            {error}
                        </div>
                    )}

                    <div className={styles.buttons}>
                        <button
                            type="button"
                            onClick={handleClose}
                            className={styles.cancelButton}
                            disabled={isLoading}
                        >
                            Abbrechen
                        </button>
                        <button
                            type="submit"
                            className={styles.submitButton}
                            disabled={isLoading}
                        >
                            {isLoading ? 'Erstellen...' : 'Prompt erstellen'}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    );
}

export default DashboardPromptSetModal;