//! Settings panel: overlay drawer for theme selection and basic config.
//!
//! Slides in from the left when the sidebar settings button is clicked.

use gpui::*;

use crate::state::AppState;
use crate::theme;

// ── Section Header ──────────────────────────────────────────────────

fn section_header(label: &str) -> Div {
    div()
        .w_full()
        .py(px(8.0))
        .text_size(px(11.0))
        .text_color(theme::OVERLAY1)
        .border_b_1()
        .border_color(theme::SURFACE0)
        .child(label.to_string())
}

// ── Setting Row ─────────────────────────────────────────────────────

fn setting_row(label: &str, value: &str) -> Div {
    div()
        .w_full()
        .flex()
        .flex_row()
        .items_center()
        .justify_between()
        .py(px(6.0))
        .child(
            div()
                .text_size(px(12.0))
                .text_color(theme::TEXT)
                .child(label.to_string()),
        )
        .child(
            div()
                .px(px(8.0))
                .py(px(3.0))
                .rounded(px(4.0))
                .bg(theme::SURFACE0)
                .text_size(px(11.0))
                .text_color(theme::SUBTEXT0)
                .child(value.to_string()),
        )
}

// ── Theme Option ────────────────────────────────────────────────────

fn theme_option(name: &str, selected: bool) -> Stateful<Div> {
    let bg = if selected {
        theme::blue_wash()
    } else {
        theme::SURFACE0
    };
    let fg = if selected { theme::BLUE } else { theme::TEXT };

    div()
        .id(SharedString::from(format!("theme-{name}")))
        .w_full()
        .px(px(10.0))
        .py(px(6.0))
        .rounded(px(4.0))
        .bg(bg)
        .text_size(px(12.0))
        .text_color(fg)
        .cursor_pointer()
        .hover(|s| s.bg(theme::hover_bg()))
        .child(name.to_string())
}

// ── Settings Panel View ─────────────────────────────────────────────

pub struct SettingsPanel {
    app_state: Entity<AppState>,
}

impl SettingsPanel {
    pub fn new(app_state: Entity<AppState>) -> Self {
        Self { app_state }
    }
}

impl Render for SettingsPanel {
    fn render(&mut self, _window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
        let state = self.app_state.read(cx);
        let settings = &state.settings;

        div()
            .id("settings-panel")
            .w(px(280.0))
            .h_full()
            .flex()
            .flex_col()
            .bg(theme::MANTLE)
            .border_r_1()
            .border_color(theme::SURFACE0)
            // Header
            .child(
                div()
                    .w_full()
                    .h(px(40.0))
                    .flex()
                    .flex_row()
                    .items_center()
                    .px(px(14.0))
                    .border_b_1()
                    .border_color(theme::SURFACE0)
                    .child(
                        div()
                            .text_size(px(13.0))
                            .text_color(theme::TEXT)
                            .child("Settings"),
                    )
                    .child(div().flex_1())
                    .child(
                        div()
                            .id("close-settings")
                            .w(px(24.0))
                            .h(px(24.0))
                            .flex()
                            .items_center()
                            .justify_center()
                            .rounded(px(4.0))
                            .text_size(px(14.0))
                            .text_color(theme::SUBTEXT0)
                            .cursor_pointer()
                            .hover(|s| s.bg(theme::SURFACE0))
                            .child("\u{2715}") // X
                            .on_click({
                                let app_state = self.app_state.clone();
                                move |_ev: &ClickEvent, _win: &mut Window, cx: &mut App| {
                                    app_state.update(cx, |s, cx| {
                                        s.settings_open = false;
                                        cx.notify();
                                    });
                                }
                            }),
                    ),
            )
            // Scrollable content
            .child(
                div()
                    .id("settings-scroll")
                    .flex_1()
                    .w_full()
                    .flex()
                    .flex_col()
                    .gap(px(4.0))
                    .p(px(14.0))
                    .overflow_y_scroll()
                    // ── Appearance ───────────────────────────────
                    .child(section_header("APPEARANCE"))
                    .child(
                        div()
                            .flex()
                            .flex_col()
                            .gap(px(4.0))
                            .child(theme_option("Catppuccin Mocha", settings.theme == "Catppuccin Mocha"))
                            .child(theme_option("Catppuccin Macchiato", settings.theme == "Catppuccin Macchiato"))
                            .child(theme_option("Catppuccin Frappe", settings.theme == "Catppuccin Frappe"))
                            .child(theme_option("Tokyo Night", settings.theme == "Tokyo Night"))
                            .child(theme_option("Dracula", settings.theme == "Dracula"))
                            .child(theme_option("Nord", settings.theme == "Nord")),
                    )
                    // ── Typography ───────────────────────────────
                    .child(section_header("TYPOGRAPHY"))
                    .child(setting_row("UI Font", &settings.ui_font_family))
                    .child(setting_row(
                        "UI Font Size",
                        &format!("{:.0}px", settings.ui_font_size),
                    ))
                    .child(setting_row("Terminal Font", &settings.term_font_family))
                    .child(setting_row(
                        "Terminal Font Size",
                        &format!("{:.0}px", settings.term_font_size),
                    ))
                    // ── Defaults ─────────────────────────────────
                    .child(section_header("DEFAULTS"))
                    .child(setting_row("Shell", &settings.default_shell))
                    .child(setting_row("Working Directory", &settings.default_cwd)),
            )
    }
}
