import { Theme } from "../theme.slint";

// ═══════════════════════════════════════════════════════════════
//  NeonAccordion — collapsible sections, one open at a time
// ═══════════════════════════════════════════════════════════════
export struct AccordionSection {
    title: string,
    expanded: bool,
}

export component NeonAccordion {
    in property <[AccordionSection]> sections;
    in-out property <int> expanded-index: -1;

    VerticalLayout {
        spacing: 2px;
        for section[idx] in root.sections : Rectangle {
            border-radius: Theme.radius-md;
            border-width: 1px;
            border-color: Theme.border;
            background: Theme.bg-elevated;
            VerticalLayout { spacing: 0;
                // Header (clickable)
                Rectangle {
                    min-height: 40px;
                    background: header.has-hover ? Theme.bg-hover : transparent;
                    border-radius: Theme.radius-md;
                    HorizontalLayout {
                        padding-left: Theme.sp-3;
                        padding-right: Theme.sp-3;
                        spacing: Theme.sp-2;
                        alignment: start;
                        Text {
                            text: section.title;
                            font-size: Theme.font-sm;
                            font-weight: 600;
                            color: Theme.text-primary;
                            horizontal-stretch: 1;
                            vertical-alignment: center;
                        }
                        Text {
                            text: idx == root.expanded-index ? "\u{2212}" : "+";
                            font-size: Theme.font-lg;
                            color: Theme.neon-cyan;
                            vertical-alignment: center;
                        }
                    }
                    header := TouchArea {
                        clicked => {
                            root.expanded-index = idx == root.expanded-index ? -1 : idx;
                        }
                        mouse-cursor: MouseCursor.pointer;
                    }
                }
                // Content — muestra contenido genérico cuando expandido
                // NOTA: Slint 1.9 no permite @children dentro de for+if.
                // Para contenido por sección, usar NeonCollapsible independientes.
                if (idx == root.expanded-index) : Rectangle {
                    Rectangle { height: 1px; background: Theme.border; }
                    Rectangle { min-height: 48px;
                        HorizontalLayout { padding: Theme.sp-3; alignment: center;
                            Text { text: section.title; font-size: Theme.font-sm; color: Theme.text-dim; font-weight: 600; }
                        }
                    }
                }
            }
        }
    }
}

// ═══════════════════════════════════════════════════════════════
//  NeonSteps — progress indicator for wizards
// ═══════════════════════════════════════════════════════════════
export struct StepInfo {
    label: string,
    completed: bool,
    active: bool,
    pending: bool,
}

export component NeonSteps {
    in property <[StepInfo]> steps;
    in property <int> current-step: 0;

    HorizontalLayout {
        spacing: 0;
        alignment: center;
        for step[idx] in root.steps : HorizontalLayout {
            spacing: Theme.sp-2;
            alignment: center;
            Rectangle {
                width: 28px; height: 28px;
                border-radius: 14px;
                border-width: 2px;
                border-color: idx == root.current-step ? Theme.neon-cyan : (idx < root.current-step ? Theme.neon-green : Theme.border);
                background: idx == root.current-step ? Theme.neon-cyan : transparent;
                Text {
                    text: idx < root.current-step ? "\u{2713}" : (idx + 1);
                    font-size: Theme.font-xs;
                    font-weight: 700;
                    color: idx == root.current-step ? Theme.text-inverse : (idx < root.current-step ? Theme.neon-green : Theme.text-muted);
                    horizontal-alignment: center;
                    vertical-alignment: center;
                }
            }
            Text {
                text: step.label;
                font-size: Theme.font-xs;
                color: idx == root.current-step ? Theme.neon-cyan : (idx < root.current-step ? Theme.neon-green : Theme.text-dim);
                font-weight: idx == root.current-step ? 600 : 400;
                vertical-alignment: center;
            }
            if (idx < root.steps.length - 1) : Rectangle {
                width: 40px; height: 2px;
                background: idx < root.current-step ? Theme.neon-green : Theme.border;
                y: 13px;
            }
        }
    }
}

// ═══════════════════════════════════════════════════════════════
//  NeonTabs — standalone tab bar with content slot
// ═══════════════════════════════════════════════════════════════
export component NeonTabs {
    in property <[string]> tab-titles;
    in-out property <int> active-tab: 0;
    callback tab-changed(int);

    VerticalLayout {
        spacing: 0;
        Rectangle { min-height: 35px;
            Rectangle { background: Theme.bg-elevated; Rectangle { height: 1px; background: Theme.border; y: parent.height - 1px; } }
            HorizontalLayout { spacing: 0;
                for tab[idx] in root.tab-titles : Rectangle { min-width: 100px; min-height: 35px;
                    Rectangle { background: idx == root.active-tab ? Theme.bg-base : Theme.bg-elevated; }
                    if (idx == root.active-tab) : Rectangle { height: 2px; background: Theme.neon-cyan; width: 100%; }
                    HorizontalLayout { spacing: Theme.sp-2; padding: Theme.sp-2; alignment: center;
                        Text { text: tab; font-size: Theme.font-xs; color: idx == root.active-tab ? Theme.neon-cyan : Theme.text-muted; font-weight: idx == root.active-tab ? 600 : 400; horizontal-stretch: 1; vertical-alignment: center; }
                    }
                    TouchArea { clicked => { root.active-tab = idx; root.tab-changed(idx); } mouse-cursor: MouseCursor.pointer; }
                }
            }
        }
        Rectangle {
            vertical-stretch: 1;
            Flickable { vertical-stretch: 1; horizontal-stretch: 1;
                VerticalLayout { padding: Theme.sp-5; spacing: Theme.sp-4; @children }
            }
        }
    }
}

// ═══════════════════════════════════════════════════════════════
//  NeonEmptyState — empty view placeholder
// ═══════════════════════════════════════════════════════════════
export component NeonEmptyState {
    in property <string> icon-text: "\u{1F4ED}";
    in property <string> title: "No items found";
    in property <string> description: "";
    in property <bool> has-action: false;
    in property <string> action-label: "";
    callback action-clicked;

    VerticalLayout {
        spacing: Theme.sp-3;
        alignment: center;
        padding: Theme.sp-8;
        Text {
            text: root.icon-text;
            font-size: 48px;
            horizontal-alignment: center;
        }
        Text {
            text: root.title;
            font-size: Theme.font-xl;
            font-weight: 600;
            color: Theme.text-primary;
            horizontal-alignment: center;
        }
        if (root.description != "") : Text {
            text: root.description;
            font-size: Theme.font-sm;
            color: Theme.text-muted;
            horizontal-alignment: center;
            wrap: word-wrap;
        }
        if (root.has-action) : Rectangle {
            min-width: 120px; min-height: 36px;
            border-radius: Theme.radius-md;
            border-width: 1px;
            border-color: Theme.neon-cyan;
            background: action-touch.has-hover ? Theme.neon-cyan : transparent;
            Text {
                text: root.action-label;
                font-size: Theme.font-base;
                font-weight: 600;
                color: action-touch.has-hover ? Theme.text-inverse : Theme.neon-cyan;
                horizontal-alignment: center;
                vertical-alignment: center;
            }
            action-touch := TouchArea {
                clicked => { root.action-clicked(); }
                mouse-cursor: MouseCursor.pointer;
            }
        }
    }
}

// ═══════════════════════════════════════════════════════════════
//  NeonSkeleton — moved to skeleton.slint
// ═══════════════════════════════════════════════════════════════
//
//  The flat-rectangle stub that lived here was replaced by an
//  animated shimmer with variants (rect / line / circle) plus
//  paragraph + connected-gate helpers. Re-export from
//  skeleton.slint via index.slint.

// ═══════════════════════════════════════════════════════════════
//  NeonProgressCircular — circular progress indicator
// ═══════════════════════════════════════════════════════════════
export component NeonProgressCircular {
    in property <float> value: 0.0;
    in property <length> size: 48px;
    in property <color> color: Theme.neon-cyan;

    Rectangle {
        width: root.size; height: root.size;
        border-radius: root.size / 2;
        border-width: 4px;
        border-color: Theme.border;

        // Filled arc approximation
        Rectangle {
            width: root.size; height: root.size / 2;
            y: root.size / 2;
            background: transparent;
            Rectangle {
                width: root.size; height: root.size / 2;
                border-radius: root.size / 2;
                background: root.value >= 1.0 ? root.color : transparent;
            }
            Rectangle {
                width: root.size / 2; height: root.size;
                x: root.size / 2;
                background: root.value >= 0.5 ? root.color : transparent;
                border-radius: root.size / 2;
            }
        }
        // Center dot with percentage
        Rectangle {
            width: root.size - 10px; height: root.size - 10px;
            border-radius: (root.size - 10px) / 2;
            background: Theme.bg-base;
            x: 5px; y: 5px;
            Text {
                text: Math.round(root.value * 100.0) + "%";
                font-size: Theme.font-xs;
                color: Theme.text-primary;
                horizontal-alignment: center;
                vertical-alignment: center;
            }
        }
    }
}
