use iced_wgpu::core::{Alignment, Background, Border, Color, Element, Length, Padding, Theme};
use iced_widget::{
    button::{self, Status as ButtonStatus},
    column, container, text, Space,
};

use super::app::{App, Message};
use super::theme::palette;

/// renders the top-level mode-selection screen.
pub fn view(_app: &App) -> Element<'_, Message, Theme, iced_wgpu::Renderer> {
    let title = text("YrXtls").size(56).color(palette::text());
    let subtitle = text("Choose a mode").size(16).color(palette::text_dim());

    let local = mode_button(
        "Local mode",
        "Play files from your device.",
        Message::OpenLocalMode,
    );
    let capture = mode_button(
        "Playback capture mode",
        "Visualize whatever audio your system is playing.",
        Message::OpenCaptureMode,
    );

    let body = column![
        title,
        subtitle,
        Space::new().height(Length::Fixed(28.0)),
        local,
        capture,
    ]
    .spacing(16)
    .align_x(Alignment::Center);

    container(body)
        .center_x(Length::Fill)
        .center_y(Length::Fill)
        .width(Length::Fill)
        .height(Length::Fill)
        .style(background_style)
        .into()
}

/// builds one of the main-menu mode buttons with a title line and a one-line description below.
fn mode_button<'a>(
    title: &'a str,
    subtitle: &'a str,
    msg: Message,
) -> Element<'a, Message, Theme, iced_wgpu::Renderer> {
    let content = column![
        text(title).size(22).color(palette::text()),
        text(subtitle).size(13).color(palette::text_dim()),
    ]
    .spacing(6);

    iced_widget::button(content)
        .padding(Padding::from([20, 28]))
        .width(Length::Fixed(420.0))
        .on_press(msg)
        .style(mode_button_style)
        .into()
}

/// dark card style for the main-menu mode buttons with a brighter background on hover.
fn mode_button_style(_t: &Theme, status: ButtonStatus) -> button::Style {
    let hovered = matches!(status, ButtonStatus::Hovered | ButtonStatus::Pressed);
    let bg = if hovered {
        Color { r: 0.10, g: 0.10, b: 0.12, a: 1.0 }
    } else {
        Color { r: 0.05, g: 0.05, b: 0.07, a: 1.0 }
    };
    button::Style {
        background: Some(Background::Color(bg)),
        text_color: palette::text(),
        border: Border {
            color: palette::border(),
            width: 1.0,
            radius: 12.0.into(),
        },
        ..Default::default()
    }
}

/// pure-black full-screen background for the menu container.
fn background_style(_t: &Theme) -> container::Style {
    container::Style {
        background: Some(Background::Color(palette::bg())),
        ..Default::default()
    }
}