import { Colors, Typography } from "tokens.slint";

export component TabStrip inherits Rectangle {
    in property <int> active-index: 0;
    in property <bool> flash-active: false;

    callback tab-clicked(int);

    width: 48px;
    background: Colors.background;
    border-radius: 0px;

    // Tab 0: By Status Updated
    Rectangle {
        x: 0px;
        y: 4px;
        width: 48px;
        height: 40px;
        background: root.active-index == 0 ? (root.flash-active ? #3a5a9f : #252a3a) : transparent;
        animate background { duration: 300ms; easing: ease-out; }

        if root.active-index == 0 : Rectangle {
            x: 0px;
            y: 0px;
            width: 3px;
            height: parent.height;
            background: Colors.accent;
        }

        HorizontalLayout {
            alignment: center;
            Text {
                text: "\u{25CF}";
                font-size: Typography.size-md;
                font-weight: 700;
                color: root.active-index == 0 ? #ffffff : Colors.text-muted;
                vertical-alignment: center;
            }
        }

        tab0-touch := TouchArea {
            mouse-cursor: pointer;
            clicked => { root.tab-clicked(0); }
        }
    }

    // Tab 1: By Ship Date
    Rectangle {
        x: 0px;
        y: 48px;
        width: 48px;
        height: 40px;
        background: root.active-index == 1 ? (root.flash-active ? #3a5a9f : #252a3a) : transparent;
        animate background { duration: 300ms; easing: ease-out; }

        if root.active-index == 1 : Rectangle {
            x: 0px;
            y: 0px;
            width: 3px;
            height: parent.height;
            background: Colors.accent;
        }

        HorizontalLayout {
            alignment: center;
            Text {
                text: "\u{25B6}";
                font-size: Typography.size-md;
                font-weight: 700;
                color: root.active-index == 1 ? #ffffff : Colors.text-muted;
                vertical-alignment: center;
            }
        }

        tab1-touch := TouchArea {
            mouse-cursor: pointer;
            clicked => { root.tab-clicked(1); }
        }
    }

    // Tab 2: By Recipient
    Rectangle {
        x: 0px;
        y: 92px;
        width: 48px;
        height: 40px;
        background: root.active-index == 2 ? (root.flash-active ? #3a5a9f : #252a3a) : transparent;
        animate background { duration: 300ms; easing: ease-out; }

        if root.active-index == 2 : Rectangle {
            x: 0px;
            y: 0px;
            width: 3px;
            height: parent.height;
            background: Colors.accent;
        }

        HorizontalLayout {
            alignment: center;
            Text {
                text: "\u{1F464}";
                font-size: Typography.size-md;
                font-weight: 700;
                color: root.active-index == 2 ? #ffffff : Colors.text-muted;
                vertical-alignment: center;
            }
        }

        tab2-touch := TouchArea {
            mouse-cursor: pointer;
            clicked => { root.tab-clicked(2); }
        }
    }

    // Tab 3: By Product Shipped
    Rectangle {
        x: 0px;
        y: 136px;
        width: 48px;
        height: 40px;
        background: root.active-index == 3 ? (root.flash-active ? #3a5a9f : #252a3a) : transparent;
        animate background { duration: 300ms; easing: ease-out; }

        if root.active-index == 3 : Rectangle {
            x: 0px;
            y: 0px;
            width: 3px;
            height: parent.height;
            background: Colors.accent;
        }

        HorizontalLayout {
            alignment: center;
            Text {
                text: "\u{1F4E6}";
                font-size: Typography.size-md;
                font-weight: 700;
                color: root.active-index == 3 ? #ffffff : Colors.text-muted;
                vertical-alignment: center;
            }
        }

        tab3-touch := TouchArea {
            mouse-cursor: pointer;
            clicked => { root.tab-clicked(3); }
        }
    }

    // Tooltips rendered AFTER all tabs for z-order
    // TabStrip declared after card grid in dashboard.slint for z-order over cards

    if tab0-touch.has-hover : Rectangle {
        x: 52px;
        y: 14px;
        width: 110px;
        height: 24px;
        background: Colors.surface-popup;
        border-radius: 4px;
        border-width: 1px;
        border-color: Colors.accent;
        Text {
            text: "Status Updated";
            font-size: Typography.size-xs;
            color: Colors.text-primary;
            width: parent.width;
            height: parent.height;
            horizontal-alignment: center;
            vertical-alignment: center;
        }
    }

    if tab1-touch.has-hover : Rectangle {
        x: 52px;
        y: 58px;
        width: 90px;
        height: 24px;
        background: Colors.surface-popup;
        border-radius: 4px;
        border-width: 1px;
        border-color: Colors.accent;
        Text {
            text: "Ship Date";
            font-size: Typography.size-xs;
            color: Colors.text-primary;
            width: parent.width;
            height: parent.height;
            horizontal-alignment: center;
            vertical-alignment: center;
        }
    }

    if tab2-touch.has-hover : Rectangle {
        x: 52px;
        y: 102px;
        width: 90px;
        height: 24px;
        background: Colors.surface-popup;
        border-radius: 4px;
        border-width: 1px;
        border-color: Colors.accent;
        Text {
            text: "Recipient";
            font-size: Typography.size-xs;
            color: Colors.text-primary;
            width: parent.width;
            height: parent.height;
            horizontal-alignment: center;
            vertical-alignment: center;
        }
    }

    if tab3-touch.has-hover : Rectangle {
        x: 52px;
        y: 146px;
        width: 120px;
        height: 24px;
        background: Colors.surface-popup;
        border-radius: 4px;
        border-width: 1px;
        border-color: Colors.accent;
        Text {
            text: "Product Shipped";
            font-size: Typography.size-xs;
            color: Colors.text-primary;
            width: parent.width;
            height: parent.height;
            horizontal-alignment: center;
            vertical-alignment: center;
        }
    }
}