// "Already playing" choice modal — shown when an ephemeral play action is
// triggered while a queue is already playing. Two outcomes: add the selection
// to the queue, or clear the queue and start playing it.

import { Theme } from "../foundation/semantic-colors.slint";
import { Typography } from "../foundation/typography.slint";
import { Radius } from "../foundation/radius.slint";
import { EphemeralPlayChoiceState, EphemeralPlayChoiceActions } from "../state.slint";
import { QbzIcon } from "QbzIcon.slint";

export component EphemeralPlayChoiceModal inherits Rectangle {
    visible: EphemeralPlayChoiceState.open;

    if EphemeralPlayChoiceState.open: Rectangle {
        background: #000000bf;
        TouchArea {
            mouse-cursor: default;
            clicked => {
                EphemeralPlayChoiceActions.close();
            }
        }
        Rectangle {
            width: Math.min(root.width - 80px, 420px);
            height: panel.preferred-height;
            x: Math.round((parent.width - self.width) / 2 / 1px) * 1px;
            y: Math.round((parent.height - self.height) / 2 / 1px) * 1px;
            border-radius: Radius.md;
            background: Theme.surface-card;
            border-width: 1px;
            border-color: Theme.border-subtle;
            drop-shadow-blur: 32px;
            drop-shadow-color: #00000080;
            TouchArea { }

            panel := VerticalLayout {
                padding: 20px;
                spacing: 16px;

                HorizontalLayout {
                    Text {
                        text: @tr("Something is already playing");
                        color: Theme.text-primary;
                        font-size: Typography.heading;
                        font-weight: Typography.semibold;
                        horizontal-stretch: 1;
                        vertical-alignment: center;
                    }
                    close-x := TouchArea {
                        width: 28px;
                        height: 28px;
                        mouse-cursor: pointer;
                        clicked => {
                            EphemeralPlayChoiceActions.close();
                        }
                        QbzIcon {
                            source: @image-url("../assets/icons/x.svg");
                            width: 17px;
                            height: 17px;
                            x: Math.round((parent.width - self.width) / 2 / 1px) * 1px;
                            y: Math.round((parent.height - self.height) / 2 / 1px) * 1px;
                            tint: close-x.has-hover ? Theme.text-primary : Theme.text-muted;
                        }
                    }
                }

                Text {
                    text: @tr("Add this to the current queue, or clear the queue and start playing it?");
                    color: Theme.text-secondary;
                    font-size: Typography.body;
                    wrap: word-wrap;
                }

                HorizontalLayout {
                    alignment: end;
                    spacing: 10px;

                    // Add to queue (secondary, ghost) — only when the current
                    // queue is itself all-ephemeral (no mixing).
                    if EphemeralPlayChoiceState.enqueue-allowed: Rectangle {
                        width: enqueue-label.preferred-width + 32px;
                        height: 36px;
                        border-radius: Radius.sm;
                        border-width: 1px;
                        border-color: Theme.border-subtle;
                        background: enqueue-ta.has-hover ? Theme.surface-hover : transparent;
                        enqueue-label := Text {
                            text: @tr("Add to queue");
                            color: Theme.text-primary;
                            font-size: Typography.body;
                            font-weight: Typography.semibold;
                            x: Math.round((parent.width - self.width) / 2 / 1px) * 1px;
                            y: Math.round((parent.height - self.height) / 2 / 1px) * 1px;
                        }
                        enqueue-ta := TouchArea {
                            mouse-cursor: pointer;
                            clicked => {
                                EphemeralPlayChoiceActions.enqueue();
                            }
                        }
                    }

                    // Clear queue and play (accent).
                    Rectangle {
                        width: replace-label.preferred-width + 32px;
                        height: 36px;
                        border-radius: Radius.sm;
                        background: replace-ta.has-hover ? Theme.accent-hover : Theme.accent;
                        replace-label := Text {
                            text: @tr("Clear queue and play");
                            color: Theme.accent-text;
                            font-size: Typography.body;
                            font-weight: Typography.semibold;
                            x: Math.round((parent.width - self.width) / 2 / 1px) * 1px;
                            y: Math.round((parent.height - self.height) / 2 / 1px) * 1px;
                        }
                        replace-ta := TouchArea {
                            mouse-cursor: pointer;
                            clicked => {
                                EphemeralPlayChoiceActions.replace();
                            }
                        }
                    }
                }
            }
        }
    }
}