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 SERVICE_TYPES = [
    "CONNECT",
    "SWITCHBOARD",
    "FUSION",
];
const SERVICE_LABELS = {
    CONNECT: "Powerhouse Connect",
    SWITCHBOARD: "Powerhouse Switchboard",
    FUSION: "Fusion",
};
const DEFAULT_PREFIXES = {
    CONNECT: "connect",
    SWITCHBOARD: "switchboard",
    FUSION: "fusion",
};
const SERVICE_STATUS_COLORS = {
    ACTIVE: { dot: "var(--v-primary)", label: "Active" },
    PROVISIONING: { dot: "var(--v-progress)", label: "Provisioning" },
    SUSPENDED: { dot: "var(--v-todo)", label: "Suspended" },
    BILLING_ISSUE: { dot: "var(--v-destructive)", label: "Billing Issue" },
};
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 ServicesList({ services, genericDomain, dispatch, disabled, }) {
    const [addingService, setAddingService] = useState(false);
    const [selectedType, setSelectedType] = useState("CONNECT");
    const [prefix, setPrefix] = useState("");
    const enabledTypes = new Set(services.map((s) => s.type));
    const availableTypes = SERVICE_TYPES.filter((t) => !enabledTypes.has(t));
    const handleAdd = useCallback(() => {
        if (!selectedType || !prefix.trim())
            return;
        dispatch(actions.enableService({ type: selectedType, prefix: prefix.trim() }));
        setAddingService(false);
        setPrefix("");
    }, [dispatch, selectedType, prefix]);
    const handleToggle = useCallback((type) => {
        dispatch(actions.toggleService({ type }));
    }, [dispatch]);
    return (_jsxs("div", { children: [services.length === 0 && !addingService && (_jsx("p", { style: { color: "var(--v-muted-fg)", fontSize: 14 }, children: "No services configured" })), _jsx("div", { style: { display: "flex", flexDirection: "column", gap: 10 }, children: services.map((service) => {
                    const serviceUrl = service.url ||
                        (genericDomain
                            ? `https://${service.prefix}.${genericDomain}`
                            : null);
                    const statusInfo = SERVICE_STATUS_COLORS[service.status];
                    return (_jsxs("div", { style: {
                            padding: "14px 16px",
                            background: service.enabled ? "var(--v-card)" : "var(--v-accent)",
                            borderRadius: 10,
                            border: "1px solid var(--v-border)",
                            opacity: service.enabled ? 1 : 0.6,
                        }, children: [_jsxs("div", { style: {
                                    display: "flex",
                                    alignItems: "center",
                                    justifyContent: "space-between",
                                }, children: [_jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10 }, children: [_jsx("span", { style: { fontSize: 15, fontWeight: 600, color: "var(--v-fg)" }, children: SERVICE_LABELS[service.type] }), _jsxs("span", { style: {
                                                    display: "inline-flex",
                                                    alignItems: "center",
                                                    gap: 5,
                                                    fontSize: 11,
                                                    fontWeight: 600,
                                                    color: statusInfo.dot,
                                                    background: "var(--v-accent)",
                                                    padding: "2px 8px",
                                                    borderRadius: 10,
                                                }, children: [_jsx("span", { style: {
                                                            width: 6,
                                                            height: 6,
                                                            borderRadius: "50%",
                                                            background: statusInfo.dot,
                                                        } }), statusInfo.label] })] }), _jsx("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: !disabled && (_jsx("button", { onClick: () => handleToggle(service.type), style: {
                                                width: 44,
                                                height: 24,
                                                borderRadius: 12,
                                                border: "none",
                                                background: service.enabled
                                                    ? "var(--v-primary)"
                                                    : "var(--v-border)",
                                                cursor: "pointer",
                                                position: "relative",
                                                transition: "background 0.2s",
                                            }, children: _jsx("span", { style: {
                                                    position: "absolute",
                                                    top: 3,
                                                    left: service.enabled ? 23 : 3,
                                                    width: 18,
                                                    height: 18,
                                                    borderRadius: "50%",
                                                    background: "white",
                                                    transition: "left 0.2s",
                                                    boxShadow: "0 1px 3px rgba(0,0,0,0.2)",
                                                } }) })) })] }), serviceUrl && (_jsx("a", { href: serviceUrl, target: "_blank", rel: "noopener noreferrer", style: {
                                    display: "block",
                                    marginTop: 6,
                                    fontSize: 13,
                                    fontFamily: "monospace",
                                    color: "var(--v-primary)",
                                    textDecoration: "none",
                                }, children: serviceUrl }))] }, service.type));
                }) }), addingService && availableTypes.length > 0 && (_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: "Type" }), _jsx("select", { value: selectedType, onChange: (e) => {
                                    const type = e.target.value;
                                    setSelectedType(type);
                                    setPrefix(DEFAULT_PREFIXES[type]);
                                }, style: inputStyle, children: availableTypes.map((type) => (_jsx("option", { value: type, children: SERVICE_LABELS[type] }, type))) })] }), _jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: [_jsx("label", { style: { fontSize: 12, fontWeight: 600, color: "var(--v-fg)" }, children: "Prefix" }), _jsx("input", { type: "text", value: prefix, onChange: (e) => setPrefix(e.target.value), placeholder: "e.g. connect", style: { ...inputStyle, width: 160 } }), _jsx("span", { style: { fontSize: 11, color: "var(--v-muted-fg)" }, children: "Prefix can be configured by the user" })] }), _jsx("button", { onClick: handleAdd, disabled: !prefix.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: prefix.trim() ? 1 : 0.5,
                        }, children: "Add" }), _jsx("button", { onClick: () => setAddingService(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" })] })), !addingService && !disabled && availableTypes.length > 0 && (_jsx("button", { onClick: () => {
                    setSelectedType(availableTypes[0]);
                    setPrefix(DEFAULT_PREFIXES[availableTypes[0]]);
                    setAddingService(true);
                }, style: {
                    marginTop: 10,
                    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 Service" }))] }));
}
