use eframe::egui;

use crate::{
    connection::{ConnectionManager, ConnectionState},
    recording::Recorder,
    style::{
        self, ACCENT_BLUE, ACCENT_GREEN, ACCENT_ORANGE, ACCENT_RED, METRICS, ONE_DARK_PRO,
        accent_text, dim_text, group_frame, layout, panel_frame, tag_button,
    },
    utils::serial_enum,
};

pub struct FloatingPanelState {
    pub visible: bool,
    default_pos: egui::Pos2,
    tag_pos: egui::Pos2,
    center_anim: f32,
    center_anim_target: bool,
    center_anim_last_time: Option<f64>,
}

pub struct ConfigPanelState {
    pub mode: SerialMode,
    pub port: String,
    pub baud_rate: u32,
    pub data_bits: u8,
    pub stop_bits: u8,
    pub parity: Parity,
    pub timeout_ms: u32,
    pub module_addr: u8,
    pub connected: bool,
    pub auto_reconnect: bool,
    pub manual_tx: String,
    pub model_path: String,
}

pub struct ConnectPanelState {
    pub mode: SerialMode,
    pub port: Vec<String>,
    pub selected_port: String,
    pub duration: u8,
    pub manual: bool,
    pub rows: u8,
    pub cols: u8,
    pub connection: bool,
}

#[derive(Clone, Copy, PartialEq, Eq)]
pub enum SerialMode {
    Finger,
    Hand,
}

#[derive(Clone, Copy, PartialEq, Eq)]
pub enum Parity {
    None,
    Odd,
    Even,
}

pub enum IconButtonIcon<'a> {
    Font(&'a str),
    Png(egui::ImageSource<'a>),
}

impl FloatingPanelState {
    pub fn new(default_pos: [f32; 2], tag_pos: [f32; 2]) -> Self {
        Self {
            visible: true,
            default_pos: egui::pos2(default_pos[0], default_pos[1]),
            tag_pos: egui::pos2(tag_pos[0], tag_pos[1]),
            center_anim: 1.0,
            center_anim_target: true,
            center_anim_last_time: None,
        }
    }
}

impl Default for ConfigPanelState {
    fn default() -> Self {
        Self {
            mode: SerialMode::Finger,
            port: "COM3".to_owned(),
            baud_rate: 115_200,
            data_bits: 8,
            stop_bits: 1,
            parity: Parity::None,
            timeout_ms: 1000,
            module_addr: 1,
            connected: false,
            auto_reconnect: true,
            manual_tx: "01 03 00 00 00 02".to_owned(),
            model_path: "model/default.eskin".to_owned(),
        }
    }
}

impl Default for ConnectPanelState {
    fn default() -> Self {
        let port = serial_enum().unwrap_or_default();
        let selected_port = port.first().cloned().unwrap_or_default();
        Self {
            mode: SerialMode::Finger,
            port,
            selected_port,
            duration: 10,
            manual: false,
            rows: 12,
            cols: 7,
            connection: false,
        }
    }
}

pub fn draw_scene_panel(ctx: &egui::Context, panel: &mut FloatingPanelState) {
    draw_floating_panel(ctx, panel, "场景", "scene_panel", |ui| {
        ui.horizontal(|ui| {
            ui.colored_label(dim_text(), "视图");
            let _ = ui.selectable_label(true, "簇");
            let _ = ui.selectable_label(false, "三角形");
        });
        ui.separator();
        group_frame().show(ui, |ui| {
            ui.label("模型 / 材质 / 灯光");
            ui.label("目标任务   64");
            ui.label("缓存命中 100.0%");
        });
    });
}

pub fn draw_connect_panel(
    ctx: &egui::Context,
    panel: &mut FloatingPanelState,
    config: &mut ConnectPanelState,
    connection: &ConnectionManager,
    recorder: &Recorder,
    export_path: &mut String,
) {
    let conn_state = connection.state();
    let is_connected = matches!(
        conn_state,
        ConnectionState::Connected | ConnectionState::Streaming
    );

    draw_center_floating_panel(
        ctx,
        panel,
        "connect_center_panel",
        layout::CENTER_PANEL_TOP,
        "连接",
        |ui| {
            ui.vertical(|ui| {
                // centered_mode_row(ui, &mut config.mode);
                ui.add_space(METRICS.row_gap);

                group_frame().show(ui, |ui| {
                    ui.horizontal(|ui| {
                        ui.add(
                            egui::Image::new(egui::include_image!("../static/cpu.png"))
                                .fit_to_exact_size(egui::vec2(64.0, 64.0)),
                        );
                        ui.add_space(METRICS.item_gap);

                        ui.vertical(|ui| {
                            draw_connect_port_row(ui, config);
                            ui.add_space(6.0);
                            draw_connect_matrix_row(ui, config);
                        });
                    });
                });

                ui.add_space(METRICS.row_gap);
                draw_connect_action_row(ui, conn_state, is_connected, config, connection);

                if is_connected {
                    draw_recording_toolbar(ui, recorder, export_path);
                }
            });
        },
    );
}

// fn centered_mode_row(ui: &mut egui::Ui, mode: &mut SerialMode) {
//     let button_width = 96.0;
//     let gap = METRICS.item_gap;
//     let total_width = button_width * 3.0 + gap * 2.0;
//     let left_space = ((ui.available_width() - total_width) * 0.5).max(0.0);

//     ui.horizontal(|ui| {
//         ui.add_space(left_space);
//         mode_button(ui, mode, SerialMode::Finger, "指尖模块");
//         ui.add_space(gap);
//         mode_button(ui, mode, SerialMode::Hand, "手掌模块");
//         // ui.add_space(gap);
//         // mode_button(ui, mode, SerialMode::Model, "模型");
//     });
// }

fn draw_connect_port_row(ui: &mut egui::Ui, config: &mut ConnectPanelState) {
    ui.horizontal(|ui| {
        ui.label(style::field_label("串口"));
        egui::ComboBox::from_id_salt("connect_ports")
            .width(150.0)
            .selected_text(if config.selected_port.is_empty() {
                "无可用串口".to_owned()
            } else {
                config.selected_port.clone()
            })
            .show_ui(ui, |ui| {
                for port in &config.port {
                    ui.selectable_value(&mut config.selected_port, port.clone(), port.as_str());
                }
            });

        if ui
            .add(style::icon_button(
                egui::RichText::new("⟳").color(ONE_DARK_PRO.text).size(16.0),
                METRICS.icon_button,
            ))
            .on_hover_text("刷新串口")
            .clicked()
        {
            if let Ok(ports) = serial_enum() {
                if !ports.contains(&config.selected_port) {
                    config.selected_port = ports.first().cloned().unwrap_or_default();
                }
                config.port = ports;
            }
        }

        ui.add_space(METRICS.item_gap);
        ui.label(style::field_label("频率"));
        ui.add_sized(
            egui::vec2(72.0, METRICS.field_height),
            egui::DragValue::new(&mut config.duration).range(1..=120),
        );
    });
}

fn draw_connect_matrix_row(ui: &mut egui::Ui, config: &mut ConnectPanelState) {
    ui.horizontal(|ui| {
        ui.checkbox(&mut config.manual, "手动矩阵");

        ui.add_enabled_ui(config.manual, |ui| {
            ui.add_space(METRICS.item_gap);
            ui.label(style::field_label("行"));
            ui.add_sized(
                egui::vec2(56.0, METRICS.field_height),
                egui::DragValue::new(&mut config.rows).range(1..=64),
            );
            ui.label(style::field_label("列"));
            ui.add_sized(
                egui::vec2(56.0, METRICS.field_height),
                egui::DragValue::new(&mut config.cols).range(1..=64),
            );
        });
    });
}

fn draw_connect_action_row(
    ui: &mut egui::Ui,
    conn_state: ConnectionState,
    is_connected: bool,
    config: &ConnectPanelState,
    connection: &ConnectionManager,
) {
    ui.horizontal(|ui| {
        let status_text = match conn_state {
            ConnectionState::Disconnected => "未连接",
            ConnectionState::Connecting => "连接中...",
            ConnectionState::Connected => "已连接",
            ConnectionState::Streaming => "采集中",
            ConnectionState::Error => "连接错误",
        };
        let status_color = match conn_state {
            ConnectionState::Disconnected => ONE_DARK_PRO.text_dim,
            ConnectionState::Connecting => style::status_color_warn(),
            ConnectionState::Connected => style::status_color_ok(),
            ConnectionState::Streaming => style::status_color_info(),
            ConnectionState::Error => style::status_color_error(),
        };

        ui.colored_label(status_color, status_text);
        ui.with_layout(egui::Layout::right_to_left(egui::Align::Center), |ui| {
            let button = if is_connected {
                style::danger_button("断开")
            } else {
                style::primary_button("连接")
            };

            if ui.add(button).clicked() {
                if is_connected {
                    connection.disconnect();
                } else if !config.selected_port.is_empty() {
                    connection.connect(
                        &config.selected_port,
                        config.rows as u32,
                        config.cols as u32,
                    );
                }
            }
        });
    });
}

pub fn draw_config_panel(
    ctx: &egui::Context,
    panel: &mut FloatingPanelState,
    config: &mut ConfigPanelState,
) -> Option<SerialMode> {
    let mut changed_mode = None;
    draw_floating_panel(ctx, panel, "配置", "config_panel", |ui| {
        ui.set_min_width(560.0);

        if let Some(mode) = draw_mode_row(ui, config) {
            changed_mode = Some(mode);
        }

        // draw_mode_row(ui, config);
        ui.separator();
        draw_connection_row(ui, config);
        ui.add_space(8.0);
        draw_serial_grid(ui, config);
        ui.add_space(8.0);
        draw_mode_body(ui, config);
    });
    changed_mode
}

fn draw_mode_row(ui: &mut egui::Ui, config: &mut ConfigPanelState) -> Option<SerialMode> {
    let mut changed_to = None;
    ui.horizontal(|ui| {
        ui.colored_label(dim_text(), "模式");
        ui.add_space(12.0);

        if mode_button(ui, &mut config.mode, SerialMode::Finger, "指尖模块") {
            changed_to = Some(SerialMode::Finger)
        }
        if mode_button(ui, &mut config.mode, SerialMode::Hand, "手掌模块") {
            changed_to = Some(SerialMode::Hand)
        }
        // mode_button(ui, &mut config.mode, SerialMode::Model, "模型");

        ui.with_layout(egui::Layout::right_to_left(egui::Align::Center), |ui| {
            ui.checkbox(&mut config.auto_reconnect, "自动");
            ui.colored_label(dim_text(), "重连");
        });
    });

    changed_to
}

fn draw_connection_row(ui: &mut egui::Ui, config: &mut ConfigPanelState) {
    ui.horizontal(|ui| {
        ui.add(
            egui::Image::new(egui::include_image!("../static/cpu.png"))
                .fit_to_exact_size(egui::vec2(72.0, 72.0)),
        );

        ui.add_space(METRICS.item_gap);

        ui.vertical(|ui| {
            ui.label(style::value_text(format!("端口    {}", config.port)));
            ui.label(style::value_text(format!("波特率  {}", config.baud_rate)));
            let status = if config.connected {
                "已连接"
            } else {
                "未连接"
            };
            let status_color = if config.connected {
                style::status_color_ok()
            } else {
                style::status_color_error()
            };
            ui.colored_label(status_color, status);
        });

        ui.add_space(22.0);

        let button_text = if config.connected { "断开" } else { "连接" };
        if ui
            .add(if config.connected {
                style::danger_button(button_text)
            } else {
                style::primary_button(button_text)
            })
            .clicked()
        {
            config.connected = !config.connected;
        }

        ui.add_space(18.0);
        ui.colored_label(
            if config.auto_reconnect {
                style::status_color_ok()
            } else {
                ONE_DARK_PRO.text_dim
            },
            if config.auto_reconnect {
                "链路保护 开"
            } else {
                "链路保护 关"
            },
        );
    });
}

fn draw_serial_grid(ui: &mut egui::Ui, config: &mut ConfigPanelState) {
    group_frame().show(ui, |ui| {
        egui::Grid::new("serial_config_grid")
            .num_columns(4)
            .spacing(egui::vec2(14.0, 7.0))
            .striped(true)
            .show(ui, |ui| {
                ui.label(style::field_label("端口"));
                ui.add_sized(
                    egui::vec2(110.0, METRICS.field_height),
                    egui::TextEdit::singleline(&mut config.port),
                );

                ui.label(style::field_label("波特率"));
                baud_combo(ui, config);
                ui.end_row();

                ui.label(style::field_label("数据位"));
                ui.add_sized(
                    egui::vec2(70.0, METRICS.field_height),
                    egui::DragValue::new(&mut config.data_bits).range(5..=8),
                );

                ui.label(style::field_label("校验"));
                parity_combo(ui, config);
                ui.end_row();

                ui.label(style::field_label("停止位"));
                ui.add_sized(
                    egui::vec2(70.0, METRICS.field_height),
                    egui::DragValue::new(&mut config.stop_bits).range(1..=2),
                );

                ui.label(style::field_label("超时"));
                ui.horizontal(|ui| {
                    ui.add_sized(
                        egui::vec2(84.0, METRICS.field_height),
                        egui::DragValue::new(&mut config.timeout_ms)
                            .range(50..=30_000)
                            .speed(50),
                    );
                    ui.colored_label(dim_text(), "毫秒");
                });
                ui.end_row();
            });
    });
}

fn draw_mode_body(ui: &mut egui::Ui, config: &mut ConfigPanelState) {
    group_frame().show(ui, |ui| match config.mode {
        SerialMode::Finger => {
            ui.horizontal(|ui| {
                ui.label(style::field_label("模块地址"));
                ui.add_sized(
                    egui::vec2(80.0, METRICS.field_height),
                    egui::DragValue::new(&mut config.module_addr).range(1..=247),
                );
                ui.add_space(16.0);
                if ui.add(tag_button("读取信息")).clicked() {}
                if ui.add(tag_button("探测")).clicked() {}
            });
            ui.separator();
            ui.horizontal(|ui| {
                ui.colored_label(dim_text(), "状态");
                ui.label("就绪");
                ui.colored_label(dim_text(), "接收");
                ui.label("0 字节");
                ui.colored_label(dim_text(), "发送");
                ui.label("0 字节");
            });
        }
        SerialMode::Hand => {
            ui.horizontal(|ui| {
                ui.label(style::field_label("发送"));
                ui.add_sized(
                    egui::vec2(300.0, METRICS.field_height),
                    egui::TextEdit::singleline(&mut config.manual_tx),
                );
                if ui.add(tag_button("发送")).clicked() {}
                if ui.add(tag_button("清空")).clicked() {
                    config.manual_tx.clear();
                }
            });
        } // SerialMode::Model => {
          //     ui.horizontal(|ui| {
          //         ui.label(style::field_label("模型"));
          //         ui.add_sized(
          //             egui::vec2(300.0, METRICS.field_height),
          //             egui::TextEdit::singleline(&mut config.model_path),
          //         );
          //         if ui.add(tag_button("加载")).clicked() {}
          //         if ui.add(tag_button("运行")).clicked() {}
          //     });
          // }
    });
}

pub fn icon_button<'a>(
    ui: &mut egui::Ui,
    icon: IconButtonIcon<'a>,
    tooltip: impl Into<egui::WidgetText>,
) -> egui::Response {
    icon_button_sized(ui, icon, tooltip, egui::vec2(28.0, 24.0))
}

pub fn icon_button_sized<'a>(
    ui: &mut egui::Ui,
    icon: IconButtonIcon<'a>,
    tooltip: impl Into<egui::WidgetText>,
    size: egui::Vec2,
) -> egui::Response {
    let button = match icon {
        IconButtonIcon::Font(icon) => egui::Button::new(
            egui::RichText::new(icon)
                .color(egui::Color32::WHITE)
                .size(size.y - 8.0),
        ),
        IconButtonIcon::Png(source) => egui::Button::image(
            egui::Image::new(source).fit_to_exact_size(egui::vec2(size.y - 8.0, size.y - 8.0)),
        ),
    }
    .fill(ONE_DARK_PRO.panel_strong)
    .stroke(egui::Stroke::new(1.0, ONE_DARK_PRO.border))
    .corner_radius(egui::CornerRadius::same(ONE_DARK_PRO.radius))
    .min_size(size);

    ui.add(button).on_hover_text(tooltip)
}

fn mode_button(
    ui: &mut egui::Ui,
    mode: &mut SerialMode,
    value: SerialMode,
    label: &'static str,
) -> bool {
    let clicked = ui.add(style::mode_button(label, *mode == value)).clicked();

    if clicked && *mode != value {
        *mode = value;
        true
    } else {
        false
    }
}

fn baud_combo(ui: &mut egui::Ui, config: &mut ConfigPanelState) {
    egui::ComboBox::from_id_salt("serial_baud_rate")
        .width(110.0)
        .selected_text(config.baud_rate.to_string())
        .show_ui(ui, |ui| {
            for baud_rate in [
                9_600, 19_200, 38_400, 57_600, 115_200, 230_400, 460_800, 921_600,
            ] {
                ui.selectable_value(&mut config.baud_rate, baud_rate, baud_rate.to_string());
            }
        });
}

fn parity_combo(ui: &mut egui::Ui, config: &mut ConfigPanelState) {
    egui::ComboBox::from_id_salt("serial_parity")
        .width(110.0)
        .selected_text(match config.parity {
            Parity::None => "无",
            Parity::Odd => "奇",
            Parity::Even => "偶",
        })
        .show_ui(ui, |ui| {
            ui.selectable_value(&mut config.parity, Parity::None, "无");
            ui.selectable_value(&mut config.parity, Parity::Odd, "奇");
            ui.selectable_value(&mut config.parity, Parity::Even, "偶");
        });
}

pub fn draw_stats_panel(ctx: &egui::Context, panel: &mut FloatingPanelState) {
    draw_floating_panel(ctx, panel, "统计", "stats_panel", |ui| {
        ui.horizontal(|ui| {
            ui.colored_label(accent_text(), "0.030");
            ui.label(style::subtle_text("81m:51s"));
        });
        ui.separator();
        group_frame().show(ui, |ui| {
            ui.label(style::field_label("帧率 / GPU 信息"));
            ui.label(style::value_text("边界   589.0us"));
            ui.label(style::value_text("簇     12.8ms"));
        });
    });
}

fn draw_floating_panel(
    ctx: &egui::Context,
    panel: &mut FloatingPanelState,
    title: &'static str,
    id: &'static str,
    add_contents: impl FnOnce(&mut egui::Ui),
) {
    if panel.visible {
        let mut open = true;
        let mut hide_requested = false;
        let mut window_rect = None;

        let window_response = egui::Window::new(title)
            .id(egui::Id::new(id))
            .open(&mut open)
            .default_pos(panel.default_pos)
            .title_bar(false)
            .resizable(true)
            .frame(panel_frame(ctx))
            .show(ctx, |ui| {
                ui.spacing_mut().item_spacing = egui::vec2(METRICS.item_gap, 6.0);
                ui.horizontal(|ui| {
                    if ui.add(tag_button("隐藏")).clicked() {
                        hide_requested = true;
                    }
                    ui.add_space(6.0);
                    ui.label(style::panel_title(title));
                });
                ui.separator();
                add_contents(ui);
            });

        if let Some(response) = window_response {
            window_rect = Some(response.response.rect);
        }

        if hide_requested {
            if let Some(rect) = window_rect {
                let screen = ctx.content_rect();
                let tag_size = egui::vec2(86.0, 22.0);

                let distance_to_left = rect.left();
                let distance_to_right = screen.right() - rect.right();

                let x = if distance_to_left <= distance_to_right {
                    screen.left()
                } else {
                    screen.right() - tag_size.x
                };

                let y = rect.top().clamp(screen.top(), screen.bottom() - tag_size.y);

                panel.tag_pos = egui::pos2(x, y);
            }
        }
        panel.visible = open && !hide_requested;
    }
    // else {
    //     let response = egui::Area::new(egui::Id::new(format!("{id}_tag")))
    //         .current_pos(panel.tag_pos)
    //         .movable(true)
    //         .order(egui::Order::Foreground)
    //         .show(ctx, |ui| {
    //             ui.set_min_width(86.0);
    //             if ui
    //                 .add(tag_button(format!("▸ {title}")).min_size(egui::vec2(86.0, 22.0)))
    //                 .clicked()
    //             {
    //                 panel.visible = true;
    //             }
    //         });

    //     panel.tag_pos = response.response.rect.min;
    // }
}

fn draw_center_floating_panel(
    ctx: &egui::Context,
    panel: &mut FloatingPanelState,
    id: &'static str,
    top_offset: f32,
    collapsed_label: &'static str,
    add_contents: impl FnOnce(&mut egui::Ui),
) {
    const PANEL_WIDTH: f32 = 520.0;
    const SLIDE_DISTANCE: f32 = 18.0;

    let anim = advance_center_panel_anim(ctx, panel);
    let eased = ease_in_out(anim);

    if !panel.visible || anim < 0.28 {
        let handle_y = top_offset - (1.0 - eased) * 2.0;
        egui::Area::new(egui::Id::new(format!("{id}_handle")))
            .anchor(egui::Align2::CENTER_TOP, egui::vec2(0.0, handle_y))
            .order(egui::Order::Tooltip)
            .show(ctx, |ui| {
                let handle_rect = ui
                    .allocate_exact_size(egui::vec2(112.0, 24.0), egui::Sense::hover())
                    .0;
                if integrated_handle(ui, handle_rect, collapsed_label, false, "打开连接面板")
                    .clicked()
                {
                    panel.visible = true;
                }
            });
    }

    if anim <= 0.02 {
        return;
    }

    egui::Area::new(egui::Id::new(id))
        .anchor(
            egui::Align2::CENTER_TOP,
            egui::vec2(0.0, top_offset - (1.0 - eased) * SLIDE_DISTANCE),
        )
        .order(egui::Order::Tooltip)
        .show(ctx, |ui| {
            let response = center_panel_shell(ui, PANEL_WIDTH, |ui| {
                ui.set_width(PANEL_WIDTH);
                add_contents(ui);
                ui.add_space(6.0);
                let handle_rect = allocate_center_panel_handle(ui);
                if integrated_handle(ui, handle_rect, "", true, "收起连接面板").clicked() {
                    panel.visible = false;
                }
                handle_rect
            });
            paint_integrated_center_panel(ui, response.response.rect, response.inner, true);
        });
}

fn advance_center_panel_anim(ctx: &egui::Context, panel: &mut FloatingPanelState) -> f32 {
    let target = if panel.visible { 1.0 } else { 0.0 };
    let now = ctx.input(|input| input.time);
    let delta_time = panel
        .center_anim_last_time
        .map(|last_time| (now - last_time) as f32)
        .unwrap_or(1.0 / 60.0)
        .clamp(0.0, 0.05);

    panel.center_anim_last_time = Some(now);
    panel.center_anim_target = panel.visible;

    let speed = 7.5;
    let step = speed * delta_time;
    if panel.center_anim < target {
        panel.center_anim = (panel.center_anim + step).min(target);
    } else if panel.center_anim > target {
        panel.center_anim = (panel.center_anim - step).max(target);
    }

    if (panel.center_anim - target).abs() > 0.001 {
        ctx.request_repaint();
    }

    panel.center_anim
}

fn ease_in_out(t: f32) -> f32 {
    let t = t.clamp(0.0, 1.0);
    t * t * (3.0 - 2.0 * t)
}

fn center_panel_shell<R>(
    ui: &mut egui::Ui,
    width: f32,
    add_contents: impl FnOnce(&mut egui::Ui) -> R,
) -> egui::InnerResponse<R> {
    style::center_panel_frame().show(ui, |ui| {
        ui.set_width(width);
        add_contents(ui)
    })
}

fn allocate_center_panel_handle(ui: &mut egui::Ui) -> egui::Rect {
    let handle_width = 112.0;
    let handle_height = 24.0;
    let left_space = ((ui.available_width() - handle_width) * 0.5).max(0.0);
    let mut handle_rect = egui::Rect::NOTHING;

    ui.horizontal(|ui| {
        ui.add_space(left_space);
        let (rect, _) = ui.allocate_exact_size(
            egui::vec2(handle_width, handle_height),
            egui::Sense::hover(),
        );
        handle_rect = rect;
    });

    handle_rect
}

fn integrated_handle(
    ui: &mut egui::Ui,
    rect: egui::Rect,
    label: &str,
    expanded: bool,
    tooltip: &'static str,
) -> egui::Response {
    let response = ui
        .interact(
            rect.expand2(egui::vec2(12.0, 5.0)),
            ui.id().with(("center_panel_handle", expanded)),
            egui::Sense::click(),
        )
        .on_hover_text(tooltip);

    paint_integrated_handle(ui, rect, label, expanded, response.hovered());
    response
}

fn paint_integrated_handle(
    ui: &mut egui::Ui,
    rect: egui::Rect,
    label: &str,
    expanded: bool,
    hovered: bool,
) {
    let center = rect.center();
    if !expanded {
        let fill = if hovered {
            ONE_DARK_PRO.panel_strong
        } else {
            egui::Color32::from_rgb(31, 41, 52)
        };
        let points = vec![
            egui::pos2(rect.left() - 12.0, rect.top() - 1.0),
            egui::pos2(rect.right() + 12.0, rect.top() - 1.0),
            egui::pos2(rect.right() + 3.0, rect.bottom() + 8.0),
            egui::pos2(rect.left() - 3.0, rect.bottom() + 8.0),
        ];
        ui.painter().add(egui::Shape::convex_polygon(
            points.clone(),
            fill,
            egui::Stroke::new(1.0, ONE_DARK_PRO.border),
        ));
        ui.painter().line_segment(
            [points[2], points[3]],
            egui::Stroke::new(1.0, ONE_DARK_PRO.border_soft),
        );
    }

    let arrow = if expanded { -1.0 } else { 1.0 };
    let arrow_center_x = if label.is_empty() {
        center.x
    } else {
        rect.right() - 18.0
    };
    let arrow_center = egui::pos2(arrow_center_x, center.y);
    let arrow_color = if hovered {
        ONE_DARK_PRO.accent_hot
    } else {
        ONE_DARK_PRO.text_dim
    };
    ui.painter().line_segment(
        [
            arrow_center + egui::vec2(-6.0, -2.0 * arrow),
            arrow_center + egui::vec2(0.0, 4.0 * arrow),
        ],
        egui::Stroke::new(1.7, arrow_color),
    );
    ui.painter().line_segment(
        [
            arrow_center + egui::vec2(6.0, -2.0 * arrow),
            arrow_center + egui::vec2(0.0, 4.0 * arrow),
        ],
        egui::Stroke::new(1.7, arrow_color),
    );

    if !label.is_empty() {
        let galley = ui.fonts_mut(|fonts| {
            fonts.layout_no_wrap(
                label.to_owned(),
                egui::FontId::proportional(12.0),
                ONE_DARK_PRO.text,
            )
        });
        ui.painter().galley(
            egui::pos2(rect.left() + 14.0, center.y - galley.size().y * 0.5 - 1.0),
            galley,
            ONE_DARK_PRO.text,
        );
    }
}

fn paint_integrated_center_panel(
    ui: &egui::Ui,
    rect: egui::Rect,
    handle_rect: egui::Rect,
    handle_on_bottom: bool,
) {
    let painter = ui.painter();
    let stroke = egui::Stroke::new(1.0, ONE_DARK_PRO.border);
    let accent_stroke = egui::Stroke::new(1.2, ONE_DARK_PRO.border_soft);
    let top = rect.top();
    let left = rect.left();
    let right = rect.right();
    let bottom = rect.bottom();
    let radius = ONE_DARK_PRO.radius as f32;
    let tab_left = handle_rect.left() - 18.0;
    let tab_right = handle_rect.right() + 18.0;
    let tab_recess = if handle_on_bottom {
        handle_rect.top() - 2.0
    } else {
        handle_rect.bottom() + 2.0
    };

    if handle_on_bottom {
        painter.line_segment(
            [
                egui::pos2(left + radius, top),
                egui::pos2(right - radius, top),
            ],
            stroke,
        );
    } else {
        painter.line_segment(
            [egui::pos2(left + radius, top), egui::pos2(tab_left, top)],
            stroke,
        );
        painter.line_segment(
            [egui::pos2(tab_right, top), egui::pos2(right - radius, top)],
            stroke,
        );
    }
    painter.line_segment(
        [
            egui::pos2(left, top + radius),
            egui::pos2(left, bottom - radius),
        ],
        stroke,
    );
    painter.line_segment(
        [
            egui::pos2(right, top + radius),
            egui::pos2(right, bottom - radius),
        ],
        stroke,
    );
    if handle_on_bottom {
        painter.line_segment(
            [
                egui::pos2(left + radius, bottom),
                egui::pos2(tab_left, bottom),
            ],
            stroke,
        );
        painter.line_segment(
            [
                egui::pos2(tab_right, bottom),
                egui::pos2(right - radius, bottom),
            ],
            stroke,
        );
    } else {
        painter.line_segment(
            [
                egui::pos2(left + radius, bottom),
                egui::pos2(right - radius, bottom),
            ],
            stroke,
        );
    }

    let tab_points = if handle_on_bottom {
        vec![
            egui::pos2(tab_left, bottom),
            egui::pos2(handle_rect.left() - 8.0, tab_recess),
            egui::pos2(handle_rect.right() + 8.0, tab_recess),
            egui::pos2(tab_right, bottom),
        ]
    } else {
        vec![
            egui::pos2(tab_left, top),
            egui::pos2(handle_rect.left() - 8.0, tab_recess),
            egui::pos2(handle_rect.right() + 8.0, tab_recess),
            egui::pos2(tab_right, top),
        ]
    };
    painter.add(egui::Shape::line(tab_points, accent_stroke));
}

// ── Signal Chart (sparkline) ───────────────────────────────────────────

/// Draw a mini sparkline chart with current/min/max labels.
pub fn draw_signal_chart(ui: &mut egui::Ui, values: &[f32], label: &str, color: egui::Color32) {
    let chart_height = 48.0;
    let chart_width = ui.available_width().min(200.0);

    group_frame().show(ui, |ui| {
        ui.horizontal(|ui| {
            ui.colored_label(color, label);
            if let (Some(&last), Some(&min), Some(&max)) = (
                values.last(),
                values
                    .iter()
                    .min_by(|a, b| a.partial_cmp(b).unwrap_or(std::cmp::Ordering::Equal)),
                values
                    .iter()
                    .max_by(|a, b| a.partial_cmp(b).unwrap_or(std::cmp::Ordering::Equal)),
            ) {
                ui.colored_label(ONE_DARK_PRO.text, format!("{:.0}", last));
                ui.colored_label(ONE_DARK_PRO.text_dim, format!("↓{:.0} ↑{:.0}", min, max));
            }
        });

        let (rect, _response) =
            ui.allocate_exact_size(egui::vec2(chart_width, chart_height), egui::Sense::hover());

        if values.len() < 2 {
            return;
        }

        let painter = ui.painter_at(rect);
        painter.rect_filled(rect, egui::CornerRadius::same(2), ONE_DARK_PRO.panel_deep);

        let min_val = values
            .iter()
            .min_by(|a, b| a.partial_cmp(b).unwrap_or(std::cmp::Ordering::Equal))
            .copied()
            .unwrap_or(0.0);
        let max_val = values
            .iter()
            .max_by(|a, b| a.partial_cmp(b).unwrap_or(std::cmp::Ordering::Equal))
            .copied()
            .unwrap_or(1.0);
        let range = (max_val - min_val).max(1.0);

        let points: Vec<egui::Pos2> = values
            .iter()
            .enumerate()
            .map(|(i, &v)| {
                let x = rect.left() + (i as f32 / (values.len() - 1) as f32) * rect.width();
                let y = rect.bottom() - ((v - min_val) / range) * rect.height();
                egui::pos2(x, y)
            })
            .collect();

        painter.add(egui::Shape::line(points, egui::Stroke::new(1.5, color)));
    });
}

// ── Recording Toolbar ──────────────────────────────────────────────────

/// Draw recording controls inside the connect panel.
pub fn draw_recording_toolbar(ui: &mut egui::Ui, recorder: &Recorder, export_path: &mut String) {
    let is_recording = recorder.is_recording();
    let frame_count = recorder.frame_count();
    let duration_ms = recorder.duration_ms();

    ui.separator();
    ui.horizontal(|ui| {
        ui.colored_label(ACCENT_RED, "● REC");
        ui.colored_label(
            ONE_DARK_PRO.text,
            format!("{} 帧 | {:.1}s", frame_count, duration_ms as f64 / 1000.0),
        );
    });

    ui.horizontal(|ui| {
        // Full recording
        let rec_btn = if is_recording {
            tag_button("⏹ 停止")
        } else {
            style::accent_button(
                egui::RichText::new("● 全量录制").color(egui::Color32::WHITE),
                ACCENT_RED,
            )
        };
        if ui.add(rec_btn).clicked() {
            if is_recording {
                let _ = recorder.stop_recording();
            } else {
                let _ = recorder.start_full_recording();
            }
        }

        ui.add_space(4.0);

        // Snapshot recording
        let snap_btn = if is_recording {
            tag_button("⏹ 快照停止")
        } else {
            style::accent_button(
                egui::RichText::new("✂ 快照录制").color(egui::Color32::WHITE),
                ACCENT_ORANGE,
            )
        };
        if ui.add(snap_btn).clicked() {
            if is_recording {
                let _ = recorder.stop_recording();
            } else {
                let _ = recorder.start_snapshot_recording();
            }
        }

        ui.add_space(4.0);

        // Pause/Resume
        if is_recording {
            if ui.add(tag_button("⏸ 暂停")).clicked() {
                let _ = recorder.pause_recording();
            }
        }

        ui.add_space(8.0);

        // Export
        if ui
            .add(style::accent_button(
                egui::RichText::new("📤 导出CSV").color(egui::Color32::WHITE),
                ACCENT_BLUE,
            ))
            .clicked()
        {
            let path = if export_path.is_empty() {
                let ts = std::time::SystemTime::now()
                    .duration_since(std::time::UNIX_EPOCH)
                    .unwrap_or_default()
                    .as_secs();
                format!("eskin_export_{}.csv", ts)
            } else {
                export_path.clone()
            };
            if let Err(e) = recorder.export_csv(&path) {
                eprintln!("[export] error: {e}");
            }
        }

        // Import
        if ui
            .add(style::accent_button(
                egui::RichText::new("📥 导入CSV").color(egui::Color32::WHITE),
                ACCENT_GREEN,
            ))
            .clicked()
        {
            let import_path = export_path.clone();
            if let Err(e) = recorder.import_csv(&import_path) {
                eprintln!("[import] error: {e}");
            }
        }
    });

    // Export path
    ui.horizontal(|ui| {
        ui.colored_label(dim_text(), "导出路径");
        ui.add_sized(
            egui::vec2(
                (ui.available_width() - 80.0).max(160.0),
                METRICS.field_height,
            ),
            egui::TextEdit::singleline(export_path).hint_text("eskin_export_*.csv"),
        );
    });
}

// ── Export Panel (floating) ────────────────────────────────────────────

/// Draw the export/recording floating panel.
pub fn draw_export_panel(
    ctx: &egui::Context,
    panel: &mut FloatingPanelState,
    recorder: &Recorder,
    export_path: &mut String,
) {
    draw_floating_panel(ctx, panel, "录制导出", "export_panel", |ui| {
        ui.set_min_width(300.0);
        draw_recording_toolbar(ui, recorder, export_path);
    });
}

// ── Matrix Config Panel ────────────────────────────────────────────────

pub struct MatrixConfigState {
    pub rows: u32,
    pub cols: u32,
    pub color_min: f32,
    pub color_max: f32,
}

impl Default for MatrixConfigState {
    fn default() -> Self {
        Self {
            rows: 12,
            cols: 7,
            color_min: 0.0,
            color_max: 7000.0,
        }
    }
}

/// Draw matrix configuration floating panel.
pub fn draw_matrix_config_panel(
    ctx: &egui::Context,
    panel: &mut FloatingPanelState,
    config: &mut MatrixConfigState,
) {
    draw_floating_panel(ctx, panel, "矩阵配置", "matrix_config_panel", |ui| {
        ui.set_min_width(280.0);

        ui.horizontal(|ui| {
            ui.label(style::field_label("矩阵尺寸"));
            ui.add_space(METRICS.item_gap);
            ui.label(style::value_text("行"));
            ui.add_sized(
                egui::vec2(56.0, METRICS.field_height),
                egui::DragValue::new(&mut config.rows).range(1..=128),
            );
            ui.label(style::value_text("列"));
            ui.add_sized(
                egui::vec2(56.0, METRICS.field_height),
                egui::DragValue::new(&mut config.cols).range(1..=128),
            );
        });

        ui.add_space(METRICS.item_gap);

        ui.horizontal(|ui| {
            ui.label(style::field_label("预设"));
            for (r, c, name) in &[
                (12, 7, "12×7"),
                (24, 12, "24×12"),
                (32, 16, "32×16"),
                (48, 24, "48×24"),
                (64, 32, "64×32"),
            ] {
                if ui.add(tag_button(*name)).clicked() {
                    config.rows = *r;
                    config.cols = *c;
                }
            }
        });

        ui.add_space(METRICS.item_gap);

        ui.horizontal(|ui| {
            ui.label(style::field_label("色域范围"));
            ui.add_space(METRICS.item_gap);
            ui.label(style::value_text("最小"));
            ui.add_sized(
                egui::vec2(72.0, METRICS.field_height),
                egui::DragValue::new(&mut config.color_min)
                    .range(0.0..=10000.0)
                    .speed(100.0),
            );
            ui.label(style::value_text("最大"));
            ui.add_sized(
                egui::vec2(72.0, METRICS.field_height),
                egui::DragValue::new(&mut config.color_max)
                    .range(1.0..=10000.0)
                    .speed(100.0),
            );
        });

        ui.add_space(METRICS.row_gap);

        if ui.add(tag_button("重置默认")).clicked() {
            *config = MatrixConfigState::default();
        }
    });
}

pub fn panel_restore_item(ui: &mut egui::Ui, title: &'static str, panel: &mut FloatingPanelState) {
    if panel.visible {
        ui.add_enabled(false, egui::Button::new(format!("{title} 已显示")));
    } else if ui.button(format!("显示 {title}")).clicked() {
        panel.visible = true;
        ui.close();
    }
}