import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback, useState } from "react";
import { actions } from "@powerhousedao/vetra-cloud-package/document-models/vetra-cloud-environment/v1";
const inputStyle = {
    padding: "8px 12px",
    borderRadius: 8,
    border: "1px solid var(--v-border)",
    background: "var(--v-input)",
    color: "var(--v-fg)",
    fontSize: 14,
    fontFamily: "inherit",
};
export function PackagesList({ packages, defaultRegistry, dispatch, disabled, }) {
    const [adding, setAdding] = useState(false);
    const [pkgName, setPkgName] = useState("");
    const [pkgVersion, setPkgVersion] = useState("");
    const [pkgRegistry, setPkgRegistry] = useState("");
    const handleAdd = useCallback(() => {
        if (!pkgName.trim())
            return;
        dispatch(actions.addPackage({
            packageName: pkgName.trim(),
            version: pkgVersion.trim() || undefined,
            registry: pkgRegistry.trim() || undefined,
        }));
        setPkgName("");
        setPkgVersion("");
        setPkgRegistry("");
        setAdding(false);
    }, [dispatch, pkgName, pkgVersion, pkgRegistry]);
    const handleRemove = useCallback((name) => {
        dispatch(actions.removePackage({ packageName: name }));
    }, [dispatch]);
    return (_jsxs("div", { children: [packages.length === 0 && !adding && (_jsx("p", { style: { color: "var(--v-muted-fg)", fontSize: 14 }, children: "No modules installed. Search and install modules from the registry." })), _jsx("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: packages.map((pkg) => (_jsxs("div", { style: {
                        display: "flex",
                        alignItems: "center",
                        justifyContent: "space-between",
                        padding: "12px 14px",
                        background: "var(--v-accent)",
                        borderRadius: 8,
                        border: "1px solid var(--v-border)",
                    }, children: [_jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10 }, children: [_jsx("span", { style: {
                                        width: 28,
                                        height: 28,
                                        borderRadius: 6,
                                        background: "var(--v-primary-30)",
                                        display: "flex",
                                        alignItems: "center",
                                        justifyContent: "center",
                                        fontSize: 14,
                                        flexShrink: 0,
                                    }, children: "\uD83D\uDCE6" }), _jsxs("div", { children: [_jsx("span", { style: { fontSize: 14, fontWeight: 600, color: "var(--v-fg)" }, children: pkg.name }), _jsxs("span", { style: {
                                                marginLeft: 8,
                                                fontSize: 12,
                                                fontFamily: "monospace",
                                                color: "var(--v-primary)",
                                                background: "var(--v-primary-30)",
                                                padding: "1px 8px",
                                                borderRadius: 4,
                                                fontWeight: 600,
                                            }, children: ["v", pkg.version ?? "latest"] })] })] }), !disabled && (_jsx("button", { onClick: () => handleRemove(pkg.name), style: {
                                background: "none",
                                border: "none",
                                color: "var(--v-destructive)",
                                cursor: "pointer",
                                fontSize: 13,
                                fontWeight: 600,
                            }, children: "Remove" }))] }, pkg.name))) }), adding && (_jsxs("div", { style: { display: "flex", gap: 8, alignItems: "flex-end", marginTop: 10 }, children: [_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: [_jsx("label", { style: { fontSize: 12, fontWeight: 600, color: "var(--v-fg)" }, children: "Name" }), _jsx("input", { type: "text", value: pkgName, onChange: (e) => setPkgName(e.target.value), placeholder: "@scope/package", style: { ...inputStyle, width: 220 } })] }), _jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: [_jsx("label", { style: { fontSize: 12, fontWeight: 600, color: "var(--v-fg)" }, children: "Version" }), _jsx("input", { type: "text", value: pkgVersion, onChange: (e) => setPkgVersion(e.target.value), placeholder: "latest", style: { ...inputStyle, width: 100 } })] }), _jsx("button", { onClick: handleAdd, disabled: !pkgName.trim(), style: {
                            background: "var(--v-primary)",
                            color: "var(--v-primary-fg)",
                            border: "none",
                            borderRadius: 8,
                            padding: "8px 20px",
                            fontSize: 14,
                            fontWeight: 600,
                            cursor: "pointer",
                            opacity: pkgName.trim() ? 1 : 0.5,
                        }, children: "Add" }), _jsx("button", { onClick: () => setAdding(false), style: {
                            background: "var(--v-muted)",
                            color: "var(--v-fg)",
                            border: "none",
                            borderRadius: 8,
                            padding: "8px 20px",
                            fontSize: 14,
                            fontWeight: 600,
                            cursor: "pointer",
                        }, children: "Cancel" })] })), !adding && !disabled && (_jsx("button", { onClick: () => setAdding(true), style: {
                    marginTop: 8,
                    background: "transparent",
                    color: "var(--v-primary)",
                    border: "1px solid var(--v-primary-30)",
                    borderRadius: 8,
                    padding: "8px 16px",
                    fontSize: 13,
                    fontWeight: 600,
                    cursor: "pointer",
                }, children: "+ Add Module" }))] }));
}
