// AGENTS.md §21 multi-server card.
//
// Phase 2 C3 is a visual + structural shell: one placeholder row so the
// Settings page has the right rhythm. The Settings `Connection` section
// hosts a `Repeater` over these once `AppConfig.servers` lands in Phase 5.

export component ServerCard inherits Rectangle {
    in property <string> server-name: "(unnamed server)";
    in property <string> server-url: "";
    in property <bool> enabled: true;
    in property <bool> is-current: false;

    callback toggled();
    callback edit-clicked();
    callback remove-clicked();

    in property <color> bg-color: #28292d;
    in property <color> card-border: #3a3b40;
    in property <color> text-primary-color: #e6e6e6;
    in property <color> text-secondary-color: #a0a0a0;
    in property <color> accent-color: #4ea1ff;
    in property <color> success-color: #4caf50;
    in property <color> toggle-on: #4ea1ff;
    in property <color> toggle-off: #6a6a6a;
    in property <color> button-bg: #2f3035;

    width: 100%;
    height: 64px;
    border-radius: 8px;
    background: bg-color;
    border-color: card-border;
    border-width: 1px;

    HorizontalLayout {
        padding-top: 12px;
        padding-bottom: 12px;
        padding-left: 16px;
        padding-right: 16px;
        spacing: 12px;
        alignment: center;

        // On/off pill toggle (visual only in C3 — Phase 5 makes it mutate state).
        Rectangle {
            width: 36px;
            height: 20px;
            border-radius: 10px;
            background: enabled ? toggle-on : toggle-off;
            y: parent.height / 2 - self.height / 2;

            Rectangle {
                width: 16px;
                height: 16px;
                border-radius: 8px;
                background: #ffffff;
                x: enabled ? parent.width - self.width - 2px : 2px;
                y: (parent.height - self.height) / 2;
            }
            TouchArea {
                clicked => {
                    root.toggled();
                }
            }
        }

        VerticalLayout {
            horizontal-stretch: 1;
            spacing: 2px;

            HorizontalLayout {
                spacing: 8px;
                Text {
                    text: server-name;
                    color: text-primary-color;
                    font-size: 13px;
                    font-weight: 600;
                }
                if is-current: Text {
                    text: "• current";
                    color: accent-color;
                    font-size: 11px;
                }
            }
            Text {
                text: server-url;
                color: text-secondary-color;
                font-size: 11px;
                overflow: elide;
            }
        }

        // Action buttons.
        Rectangle {
            width: 56px;
            height: 28px;
            background: button-bg;
            border-radius: 6px;
            Text {
                x: (parent.width - self.width) / 2;
                y: (parent.height - self.height) / 2;
                text: "Edit";
                color: text-primary-color;
                font-size: 11px;
            }
            TouchArea {
                clicked => {
                    root.edit-clicked();
                }
            }
        }
        Rectangle {
            width: 56px;
            height: 28px;
            background: button-bg;
            border-radius: 6px;
            Text {
                x: (parent.width - self.width) / 2;
                y: (parent.height - self.height) / 2;
                text: "Remove";
                color: text-secondary-color;
                font-size: 11px;
            }
            TouchArea {
                clicked => {
                    root.remove-clicked();
                }
            }
        }
    }
}