import React, { useState } from 'react';

interface SaveModalProps {
    ansiOutput: string;
    onSave: (name: string) => void;
    onClose: () => void;
}

export const SaveModal: React.FC<SaveModalProps> = ({ ansiOutput, onSave, onClose }) => {
    const [name, setName] = useState('');
    const [copied, setCopied] = useState(false);

    const handleSave = () => {
        if (name.trim()) {
            onSave(name.trim());
            onClose();
        }
    };

    const handleCopy = () => {
        navigator.clipboard.writeText(ansiOutput).then(() => {
            setCopied(true);
            setTimeout(() => setCopied(false), 2000);
        });
    };

    return (
        <div style={{
            position: 'fixed',
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            backgroundColor: 'rgba(0, 0, 0, 0.5)',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            zIndex: 2000,
        }}>
            <div style={{
                backgroundColor: 'var(--background)',
                border: '3px solid var(--regular6)',
                borderRadius: '4px',
                padding: '1.5rem',
                minWidth: '300px',
                display: 'flex',
                flexDirection: 'column',
                gap: '1rem',
            }}>
                <h3>Save ANSI Art</h3>
                <input
                    type="text"
                    placeholder="Enter a name..."
                    value={name}
                    onChange={(e) => setName(e.target.value)}
                    onKeyDown={(e) => e.key === 'Enter' && handleSave()}
                    autoFocus
                    style={{
                        padding: '0.5rem',
                        border: '2px solid var(--regular3)',
                        borderRadius: '4px',
                        backgroundColor: 'var(--background)',
                        color: 'var(--foreground)',
                        fontSize: '1rem',
                    }}
                />
                <div style={{ display: 'flex', gap: '0.5rem' }}>
                    <button onClick={handleCopy} style={{ flex: 1 }}>
                        {copied ? 'Copied!' : 'Copy to Clipboard'}
                    </button>
                    <button onClick={handleSave} disabled={!name.trim()} style={{ flex: 1 }}>
                        Save
                    </button>
                </div>
                <button onClick={onClose}>Cancel</button>
            </div>
        </div>
    );
};