import React, { ReactNode } from "react";
import clsx from "clsx";
import { CloseIcon } from "../icons/ExportCommonIcons";
import RenderOverlay from "./Overlay";

export type ModalType = "info" | "warning" | "error" | "success" | "confirm" | "action";

export interface ModalButton {
    label: string;
    onClick: () => void;
    variant?: "primary" | "secondary" | "danger" | "ghost";
    disabled?: boolean;
}

export interface ModalInput {
    id: string;
    label: string;
    type?: "text" | "number" | "password" | "textarea";
    placeholder?: string;
    value: string;
    onChange: (value: string) => void;
}

interface ModalProps {
    isOpen: boolean;
    onClose: () => void;
    type?: ModalType;
    title?: string;
    description?: string | ReactNode;
    note?: string | ReactNode;
    inputs?: ModalInput[];
    buttons?: ModalButton[];
    children?: ReactNode; // optional custom content
    closeOnOverlayClick?: boolean;
}

const typeColors: Record<ModalType, string> = {
    info: "modal-title--info",
    warning: "modal-title--warning",
    error: "modal-title--error",
    success: "modal-title--success",
    confirm: "modal-title--confirm",
    action: "modal-title--action",
};

export const Modal: React.FC<ModalProps> = ({
    isOpen,
    onClose,
    type = "info",
    title,
    description,
    note,
    inputs,
    buttons,
    children,
    closeOnOverlayClick = true,
}) => {
    if (!isOpen) return null;

    return (
        <RenderOverlay>
            <div className="modal-overlay" onClick={closeOnOverlayClick ? onClose : undefined}>
                <div className="modal-container" onClick={(e) => e.stopPropagation()}>
                    {/* Header */}
                    <button onClick={onClose} className="modal-close" aria-label="Close">
                        <CloseIcon />
                    </button>

                    {title && <h2 className={clsx("modal-title", typeColors[type])}>{title}</h2>}

                    {description && <div className="modal-description">{description}</div>}

                    {/* Inputs */}
                    {inputs && inputs.length > 0 && (
                        <div className="modal-inputs">
                            {inputs.map((input) => (
                                <div key={input.id} className="modal-input-group">
                                    <label htmlFor={input.id} className="modal-input-label">
                                        {input.label}
                                    </label>
                                    {input.type === "textarea" ? (
                                        <textarea
                                            id={input.id}
                                            placeholder={input.placeholder}
                                            value={input.value}
                                            onChange={(e) => input.onChange(e.target.value)}
                                            className="modal-input modal-textarea"
                                        />
                                    ) : (
                                        <input
                                            id={input.id}
                                            type={input.type || "text"}
                                            placeholder={input.placeholder}
                                            value={input.value}
                                            onChange={(e) => input.onChange(e.target.value)}
                                            className="modal-input"
                                        />
                                    )}
                                </div>
                            ))}
                        </div>
                    )}

                    {/* Custom Children */}
                    {children && <div className="modal-children">{children}</div>}

                    {/* Note */}
                    {note && <div className="modal-note">{note}</div>}

                    {/* Buttons */}
                    {buttons && buttons.length > 0 && (
                        <div className="modal-actions">
                            {buttons.map((btn, idx) => (
                                <button
                                    key={idx}
                                    onClick={btn.onClick}
                                    disabled={btn.disabled}
                                    className={clsx(
                                        "modal-button",
                                        btn.variant && `modal-button--${btn.variant}`
                                    )}
                                >
                                    {btn.label}
                                </button>
                            ))}
                        </div>
                    )}
                </div>
            </div>
        </RenderOverlay>
    );
};
