import React from "react";
import { XIcon } from "lucide-react";

interface GenerationErrorModalProps {
    isOpen: boolean;
    onClose: () => void;
    message?: string | null;
}

export default function GenerationErrorModal({ isOpen, onClose, message }: GenerationErrorModalProps) {
    if (!isOpen) return null;

    return (
        <>
            <div
                style={{
                    position: 'fixed',
                    top: 0,
                    left: 0,
                    right: 0,
                    bottom: 0,
                    backgroundColor: 'rgba(0, 0, 0, 0.5)',
                    zIndex: 9998,
                }}
                onClick={onClose}
            />

            <div
                style={{
                    position: 'fixed',
                    top: '50%',
                    left: '50%',
                    transform: 'translate(-50%, -50%)',
                    backgroundColor: 'white',
                    borderRadius: '12px',
                    padding: '32px',
                    maxWidth: '440px',
                    width: '90%',
                    zIndex: 9999,
                    boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
                }}
            >
                <button
                    onClick={onClose}
                    style={{
                        position: 'absolute',
                        top: '16px',
                        right: '16px',
                        background: 'transparent',
                        border: 'none',
                        cursor: 'pointer',
                        padding: '4px',
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                        color: '#6b7280',
                    }}
                    aria-label="Close modal"
                >
                    <XIcon size={20} />
                </button>

                <div
                    style={{
                        width: '64px',
                        height: '64px',
                        borderRadius: '50%',
                        backgroundColor: '#fee2e2',
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                        margin: '0 auto 24px',
                    }}
                >
                    <svg
                        width="32"
                        height="32"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="#dc2626"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                    >
                        <circle cx="12" cy="12" r="10" />
                        <line x1="15" y1="9" x2="9" y2="15" />
                        <line x1="9" y1="9" x2="15" y2="15" />
                    </svg>
                </div>

                <h2
                    style={{
                        fontSize: '24px',
                        fontWeight: '600',
                        color: '#111827',
                        textAlign: 'center',
                        marginBottom: '12px',
                    }}
                >
                    Image Generation Failed
                </h2>

                <p
                    style={{
                        fontSize: '14px',
                        color: '#6b7280',
                        textAlign: 'center',
                        lineHeight: '1.5',
                        marginBottom: '8px',
                    }}
                >
                    {message || "We couldn't generate your creative right now. Please try again."}
                </p>

                <button
                    onClick={onClose}
                    style={{
                        width: '100%',
                        padding: '12px 24px',
                        backgroundColor: '#d946ef',
                        color: 'white',
                        border: 'none',
                        borderRadius: '8px',
                        fontSize: '16px',
                        fontWeight: '600',
                        cursor: 'pointer',
                        transition: 'background-color 0.2s',
                    }}
                    onMouseEnter={(e) => {
                        e.currentTarget.style.backgroundColor = '#c026d3';
                    }}
                    onMouseLeave={(e) => {
                        e.currentTarget.style.backgroundColor = '#d946ef';
                    }}
                >
                    OK
                </button>
            </div>
        </>
    );
}