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

export struct RecipientTileData {
    name: string,
    initial: string,
    section-header: string,
    grid-row: int,
    grid-col: int,
    dimmed: bool,
    contact-secondary: string,
    has-avatar-image: bool,      // D-03: true when local avatar cache file exists
    avatar-image: image,          // D-03: Discord avatar from local performance cache
    purpose-color: color,         // D-03: purpose-specific ring color for avatar border
    is-unassigned: bool,          // true for unassigned recipients — use warning colors
}

export struct ProductTileData {
    name: string,
    image-hint: string,
    dimmed: bool,
    product-id: string,
    recipient-count: int,
    has-image: bool,
    image: image,
}

export component RecipientGrid inherits Rectangle {
    in property <[RecipientTileData]> tiles;
    in property <string> selected-tile-name: "";   // highlights the currently-open sidebar tile
    callback tile-clicked(string);

    background: transparent;

    // viewport-row-count is set from Rust via the total row count
    in property <int> viewport-row-count: 0;

    Flickable {
        x: 0px;
        y: 0px;
        width: parent.width;
        height: parent.height;
        viewport-height: root.viewport-row-count * 60px + 24px;

        if root.tiles.length == 0 : Text {
            width: parent.width;
            height: 60px;
            horizontal-alignment: center;
            vertical-alignment: center;
            font-size: Typography.size-md;
            color: Colors.text-dim;
            text: "No recipients match";
        }

        for tile-data[tile-index] in root.tiles : Rectangle {
            property <length> tile-w: (root.width - 72px) / 5;
            width: tile-w;
            height: 52px;
            x: tile-data.grid-col * (tile-w + 12px) + 12px;
            y: tile-data.grid-row * 60px + 12px;
            border-radius: 6px;
            opacity: tile-data.dimmed ? 0.5 : 1.0;

            if tile-data.section-header != "" : Text {
                text: tile-data.section-header;
                font-size: Typography.size-xs;
                font-weight: 700;
                color: Colors.text-muted;
                x: 4px;
                y: -30px;
                height: 18px;
                horizontal-alignment: left;
            }

            Rectangle {
                x: 0px;
                y: 0px;
                width: parent.width;
                height: 52px;
                border-radius: 6px;
                background: tile-data.name == root.selected-tile-name
                    ? Colors.surface-elevated
                    : (tile-touch.has-hover ? Colors.surface-popup : Colors.surface);
                border-width: (tile-data.name == root.selected-tile-name || tile-touch.has-hover) ? 1px : 0px;
                border-color: Colors.accent;

                // Avatar ring — 44px outer with purpose-colored border, 40px inner (D-03)
                // Mirrors card.slint avatar: unassigned uses background ring + warning initials
                Rectangle {
                    x: 6px;
                    y: (parent.height - 44px) / 2;
                    width: 44px;
                    height: 44px;
                    border-radius: 22px;
                    background: tile-data.is-unassigned ? Colors.background : tile-data.purpose-color;

                    Rectangle {
                        x: 2px;
                        y: 2px;
                        width: 40px;
                        height: 40px;
                        border-radius: 20px;
                        background: tile-data.is-unassigned ? #3a2a10 : Colors.avatar-bg;
                        clip: true;

                        if tile-data.has-avatar-image : Image {
                            width: 40px;
                            height: 40px;
                            source: tile-data.avatar-image;
                            image-fit: cover;
                        }
                        if !tile-data.has-avatar-image : Text {
                            text: tile-data.initial;
                            font-size: Typography.size-md;
                            font-weight: 700;
                            color: tile-data.is-unassigned ? Colors.warning : Colors.avatar-text;
                            horizontal-alignment: center;
                            vertical-alignment: center;
                        }
                    }
                }

                Text {
                    text: tile-data.name;
                    x: 56px;
                    y: 8px;
                    width: parent.width - 62px;
                    font-size: Typography.size-sm;
                    color: tile-data.is-unassigned ? Colors.warning : Colors.text-primary;
                    horizontal-alignment: left;
                    vertical-alignment: top;
                    overflow: elide;
                }

                if tile-data.contact-secondary != "" : Text {
                    text: tile-data.contact-secondary;
                    x: 56px;
                    y: 28px;
                    width: parent.width - 62px;
                    font-size: Typography.size-xs;
                    color: Colors.text-dim;
                    horizontal-alignment: left;
                    overflow: elide;
                }

                tile-touch := TouchArea {
                    mouse-cursor: pointer;
                    clicked => {
                        root.tile-clicked(tile-data.name);
                    }
                }
            }
        }
    }
}

export component ProductGrid inherits Rectangle {
    in property <[ProductTileData]> tiles;
    callback tile-clicked(string);
    callback add-product-clicked();

    background: transparent;

    VerticalLayout {
        spacing: 0px;

        Flickable {
            x: 0px;
            width: parent.width;
            viewport-height: ((tiles.length + 3) / 4) * (80px + 12px) + 12px;

            if root.tiles.length == 0 : VerticalLayout {
                width: parent.width;
                height: 80px;
                alignment: center;
                padding-top: 24px;

                Text {
                    horizontal-alignment: center;
                    font-size: Typography.size-md;
                    color: Colors.text-secondary;
                    text: "No products yet";
                }
                Text {
                    horizontal-alignment: center;
                    font-size: Typography.size-xs;
                    color: Colors.text-dim;
                    text: "Add your first product to start tracking inventory.";
                }
            }

            for tile-data[tile-index] in root.tiles : Rectangle {
                width: (root.width - 60px) / 4;
                height: 80px;
                x: mod(tile-index, 4) * (self.width + 12px) + 12px;
                y: floor(tile-index / 4) * (self.height + 12px) + 12px;
                border-radius: 6px;
                opacity: tile-data.dimmed ? 0.5 : 1.0;
                background: product-touch.has-hover ? Colors.surface-popup : Colors.surface;
                border-width: product-touch.has-hover ? 1px : 0px;
                border-color: Colors.accent;

                HorizontalLayout {
                    padding: 8px;
                    spacing: 8px;

                    // Product image: real image, placeholder, or initials
                    if tile-data.has-image : Rectangle {
                        width: 48px;
                        height: 48px;
                        border-radius: 4px;
                        clip: true;
                        Image {
                            source: tile-data.image;
                            width: 48px;
                            height: 48px;
                            image-fit: contain;
                        }
                    }
                    if !tile-data.has-image && tile-data.image-hint != "" : Rectangle {
                        width: 48px;
                        height: 48px;
                        border-radius: 4px;
                        background: Colors.border-default;
                    }
                    if !tile-data.has-image && tile-data.image-hint == "" : Rectangle {
                        width: 48px;
                        height: 48px;
                        border-radius: 4px;
                        background: Colors.border-default;
                        Text {
                            text: "?";
                            font-size: Typography.size-sm;
                            color: Colors.text-muted;
                            horizontal-alignment: center;
                            vertical-alignment: center;
                        }
                    }

                    VerticalLayout {
                        spacing: 2px;
                        alignment: start;

                        Text {
                            text: tile-data.name;
                            font-size: 15px;
                            font-weight: 700;
                            color: Colors.text-primary;
                            wrap: word-wrap;
                            overflow: elide;
                        }
                        Text {
                            text: tile-data.recipient-count == 1 ? "1 recipient" : "\{tile-data.recipient-count} recipients";
                            font-size: Typography.size-xs;
                            color: Colors.text-muted;
                        }
                    }
                }

                // Main tile click area
                product-touch := TouchArea {
                    mouse-cursor: pointer;
                    clicked => {
                        root.tile-clicked(tile-data.name);
                    }
                }
            }
        }

        // "Add Product" button below the grid
        Rectangle {
            height: 44px;

            Rectangle {
                x: 12px;
                y: 6px;
                height: 32px;
                width: 100px;
                border-radius: 4px;
                background: Colors.accent;

                Text {
                    text: "Add Product";
                    font-size: Typography.size-sm;
                    color: white;
                    horizontal-alignment: center;
                    vertical-alignment: center;
                }

                TouchArea {
                    mouse-cursor: pointer;
                    clicked => {
                        root.add-product-clicked();
                    }
                }
            }
        }
    }
}