use eframe::egui;
use crate::ui::theme::Theme;

pub struct TopRibbon {
    pub active_tab: String,
}

impl TopRibbon {
    pub fn new() -> Self {
        Self {
            active_tab: "CONNECTIONS".to_string(),
        }
    }

    pub fn show(&mut self, ui: &mut egui::Ui) {
        let frame = egui::Frame::NONE
            .fill(Theme::BASE.linear_multiply(0.8))
            .stroke(egui::Stroke::new(1.0, Theme::BORDER))
            .inner_margin(egui::Margin::symmetric(16, 0))
            .corner_radius(egui::CornerRadius {
                nw: 0,
                ne: 0,
                sw: 8,
                se: 8,
            });

        frame.show(ui, |ui| {
            ui.set_height(72.0);
            ui.horizontal(|ui| {
                // 1. Branding Section
                ui.horizontal(|ui| {
                    ui.add_space(8.0);
                    ui.label(
                        egui::RichText::new(Theme::ICON_BRAND)
                            .size(32.0)
                            .color(Theme::TEXT_PRIMARY),
                    );
                    ui.add_space(8.0);
                    ui.vertical(|ui| {
                        ui.add_space(18.0);
                        ui.label(
                            egui::RichText::new("TACTICAL")
                                .size(12.0)
                                .color(Theme::TEXT_SECONDARY)
                                .strong(),
                        );
                        ui.label(
                            egui::RichText::new("COMMAND CENTER")
                                .size(18.0)
                                .color(Theme::TEXT_PRIMARY)
                                .strong()
                                .extra_letter_spacing(1.0),
                        );
                    });
                });

                ui.add_space(24.0);
                self.draw_divider(ui);
                ui.add_space(24.0);

                // 2. Action Group
                self.draw_action_item(ui, Theme::ICON_CONNECTIONS, "CONNECTIONS");
                self.draw_action_item(ui, Theme::ICON_BOOKMARKS, "BOOKMARKS");
                self.draw_action_item(ui, Theme::ICON_SELF, "SELF");
                self.draw_action_item(ui, Theme::ICON_PERMISSIONS, "PERMISSIONS");
                self.draw_action_item(ui, Theme::ICON_TOOLS, "TOOLS");
                self.draw_action_item(ui, Theme::ICON_INFO, "INFO & HELP");

            });
        });
    }

    fn draw_divider(&self, ui: &mut egui::Ui) {
        let rect = ui.available_rect_before_wrap();
        let center_x = rect.min.x;
        let top = rect.min.y + 16.0;
        let bottom = rect.max.y - 16.0;
        ui.painter().vline(center_x, top..=bottom, egui::Stroke::new(1.0, Theme::BORDER));
    }

    fn draw_action_item(&mut self, ui: &mut egui::Ui, icon: &str, label: &str) {
        let is_active = self.active_tab == label;
        let text_color = if is_active { Theme::SIGNAL_GREEN } else { Theme::TEXT_SECONDARY };
        
        let (rect, response) = ui.allocate_at_least(egui::vec2(80.0, 72.0), egui::Sense::click());
        
        if response.clicked() {
            self.active_tab = label.to_string();
        }

        let painter = ui.painter();
        
        if response.hovered() {
            painter.rect_filled(
                rect.expand(2.0),
                egui::CornerRadius::same(4),
                Theme::SIGNAL_GREEN.linear_multiply(0.05),
            );
        }

        // Draw Icon
        let icon_pos = rect.center() + egui::vec2(0.0, -10.0);
        painter.text(
            icon_pos,
            egui::Align2::CENTER_CENTER,
            icon,
            egui::FontId::proportional(24.0),
            text_color,
        );

        // Draw Label
        let label_pos = rect.center() + egui::vec2(0.0, 14.0);
        painter.text(
            label_pos,
            egui::Align2::CENTER_CENTER,
            label,
            egui::FontId::proportional(10.0),
            text_color,
        );

        // Draw Underline
        if is_active {
            let underline_y = rect.max.y - 2.0;
            painter.hline(
                rect.min.x + 8.0..=rect.max.x - 8.0,
                underline_y,
                egui::Stroke::new(2.0, Theme::SIGNAL_GREEN),
            );
        }

        ui.add_space(8.0);
    }
}
