use leptos::prelude::*;
use trictrac_store::CheckerMove;

use super::die::Die;
use crate::game::trictrac::types::{SerTurnStage, ViewState};

/// Field numbers in visual display order (left-to-right for each quarter), white's perspective.
const TOP_LEFT_W: [u8; 6] = [13, 14, 15, 16, 17, 18];
const TOP_RIGHT_W: [u8; 6] = [19, 20, 21, 22, 23, 24];
const BOT_LEFT_W: [u8; 6] = [12, 11, 10, 9, 8, 7];
const BOT_RIGHT_W: [u8; 6] = [6, 5, 4, 3, 2, 1];

/// 180° rotation of white's layout: black's pieces (field 24) appear at the bottom.
const TOP_LEFT_B: [u8; 6] = [1, 2, 3, 4, 5, 6];
const TOP_RIGHT_B: [u8; 6] = [7, 8, 9, 10, 11, 12];
const BOT_LEFT_B: [u8; 6] = [24, 23, 22, 21, 20, 19];
const BOT_RIGHT_B: [u8; 6] = [18, 17, 16, 15, 14, 13];

/// The rest corner is field 12 (White) or field 13 (Black) in the store's coordinate system.
/// Returns true when `field_num` is the rest corner for this perspective.
#[allow(dead_code)]
fn is_rest_corner(field_num: u8, is_white: bool) -> bool {
    if is_white {
        field_num == 12
    } else {
        field_num == 13
    }
}

/// Zone CSS class for a field number (field coordinates are always White's 1-24).
fn field_zone_class(field_num: u8) -> &'static str {
    match field_num {
        1..=6 => "zone-petit",
        7..=12 => "zone-grand",
        13..=18 => "zone-opponent",
        19..=24 => "zone-retour",
        _ => "",
    }
}

/// Returns (d0_used, d1_used) for the bar dice display.
fn bar_matched_dice_used(staged: &[(u8, u8)], dice: (u8, u8)) -> (bool, bool) {
    let mut d0 = false;
    let mut d1 = false;
    for &(from, to) in staged {
        let dist = if to == 0 {
            if from > 18 {
                (25 as u8).saturating_sub(from)
            } else {
                from.saturating_sub(0)
            }
        } else if from < to {
            to.saturating_sub(from)
        } else {
            from.saturating_sub(to)
        };
        if !d0 && dist == dice.0 {
            d0 = true;
        } else if !d1 && dist == dice.1 {
            d1 = true;
        } else if !d0 && dist <= dice.0 && dice.0 <= dice.1 {
            d0 = true;
        } else {
            d1 = true;
        }
    }
    (d0, d1)
}

/// Returns the displayed board value for `field_num` after applying `staged_moves`.
/// Field numbers are always in white's coordinate system (1–24).
fn displayed_value(
    base_board: [i8; 24],
    staged_moves: &[(u8, u8)],
    is_white: bool,
    field_num: u8,
) -> i8 {
    let mut val = base_board[(field_num - 1) as usize];
    let delta: i8 = if is_white { 1 } else { -1 };
    for &(from, to) in staged_moves {
        if from == field_num {
            val -= delta;
        }
        if to == field_num {
            val += delta;
        }
    }
    val
}

/// Fields whose checkers may be selected as the next origin given already-staged moves.
fn valid_origins_for(seqs: &[(CheckerMove, CheckerMove)], staged: &[(u8, u8)]) -> Vec<u8> {
    let mut v: Vec<u8> = match staged.len() {
        0 => seqs
            .iter()
            .map(|(m1, _)| m1.get_from() as u8)
            .filter(|&f| f != 0)
            .collect(),
        1 => {
            let (f0, t0) = staged[0];
            seqs.iter()
                .filter(|(m1, _)| m1.get_from() as u8 == f0 && m1.get_to() as u8 == t0)
                .map(|(_, m2)| m2.get_from() as u8)
                .filter(|&f| f != 0)
                .collect()
        }
        _ => vec![],
    };
    v.sort_unstable();
    v.dedup();
    v
}

/// Pixel center of a board field in the SVG overlay coordinate space.
/// Geometry: field 60×180px, board padding 4px, gap 4px, bar 20px, center-bar 12px.
/// With triangular flèches, arrows target the WIDE BASE of each triangle —
/// that is where the checker stack actually sits.
fn field_center(f: usize, is_white: bool) -> Option<(f32, f32)> {
    if f == 0 || f > 24 {
        return None;
    }
    let (qi, right, top): (usize, bool, bool) = if is_white {
        match f {
            13..=18 => (f - 13, false, true),
            19..=24 => (f - 19, true, true),
            7..=12 => (12 - f, false, false),
            1..=6 => (6 - f, true, false),
            _ => return None,
        }
    } else {
        match f {
            1..=6 => (f - 1, false, true),
            7..=12 => (f - 7, true, true),
            19..=24 => (24 - f, false, false),
            13..=18 => (18 - f, true, false),
            _ => return None,
        }
    };
    // Left-quarter field i center x:  4(pad) + i*62 + 30(half field) = 34 + 62i
    // Right-quarter:  4 + 370(quarter) + 4(gap) + 68(bar) + 4(gap) + i*62 + 30 = 480 + 62i
    let x = if right {
        480.0 + qi as f32 * 62.0
    } else {
        34.0 + qi as f32 * 62.0
    };
    // Top row triangle base (wide end) ≈ y=30; bot row triangle base ≈ y=358.
    // (Top base: 4pad + 4field-pad + 20half-checker ≈ 28; Bot base: 388 − 4pad − 4field-pad − 20 ≈ 360)
    let y = if top { 30.0 } else { 358.0 };
    Some((x, y))
}

/// SVG `<g>` element drawing one arrow (shadow + gold) from `fp` to `tp`.
fn arrow_svg(fp: (f32, f32), tp: (f32, f32)) -> AnyView {
    let (x1, y1) = fp;
    let (x2, y2) = tp;
    let dx = x2 - x1;
    let dy = y2 - y1;
    let len = (dx * dx + dy * dy).sqrt();
    if len < 10.0 {
        return view! { <g /> }.into_any();
    }
    let nx = dx / len;
    let ny = dy / len;
    let px = -ny;
    let py = nx;

    // Shrink line ends so arrows don't overlap the checker stack
    let lx1 = x1 + nx * 20.0;
    let ly1 = y1 + ny * 20.0;
    let lx2 = x2 - nx * 15.0;
    let ly2 = y2 - ny * 15.0;

    // Arrowhead triangle at (x2, y2)
    let ah = 15.0_f32;
    let aw = 7.0_f32;
    let bx = x2 - nx * ah;
    let bary = y2 - ny * ah;
    let pts = format!(
        "{:.1},{:.1} {:.1},{:.1} {:.1},{:.1}",
        x2,
        y2,
        bx + px * aw,
        bary + py * aw,
        bx - px * aw,
        bary - py * aw,
    );
    let shadow_pts = format!(
        "{:.1},{:.1} {:.1},{:.1} {:.1},{:.1}",
        x2,
        y2,
        bx + px * (aw + 1.5),
        bary + py * (aw + 1.5),
        bx - px * (aw + 1.5),
        bary - py * (aw + 1.5),
    );

    view! {
        <g>
            // Drop-shadow for readability on coloured fields
            <line
                x1=format!("{lx1:.1}") y1=format!("{ly1:.1}")
                x2=format!("{lx2:.1}") y2=format!("{ly2:.1}")
                style="stroke:rgba(0,0,0,0.45);stroke-width:5;stroke-linecap:round"
            />
            <polygon points=shadow_pts style="fill:rgba(0,0,0,0.45)" />
            // Gold arrow
            <line
                x1=format!("{lx1:.1}") y1=format!("{ly1:.1}")
                x2=format!("{lx2:.1}") y2=format!("{ly2:.1}")
                style="stroke:rgba(255,215,0,0.9);stroke-width:3;stroke-linecap:round"
            />
            <polygon points=pts style="fill:rgba(255,215,0,0.9)" />
        </g>
    }
    .into_any()
}

/// Valid destinations for a selected origin given already-staged moves.
/// May include 0 (exit); callers handle that case.
fn valid_dests_for(
    seqs: &[(CheckerMove, CheckerMove)],
    staged: &[(u8, u8)],
    origin: u8,
) -> Vec<u8> {
    let mut v: Vec<u8> = match staged.len() {
        0 => seqs
            .iter()
            .filter(|(m1, _)| m1.get_from() as u8 == origin)
            .map(|(m1, _)| m1.get_to() as u8)
            .collect(),
        1 => {
            let (f0, t0) = staged[0];
            seqs.iter()
                .filter(|(m1, m2)| {
                    m1.get_from() as u8 == f0
                        && m1.get_to() as u8 == t0
                        && m2.get_from() as u8 == origin
                })
                .map(|(_, m2)| m2.get_to() as u8)
                .collect()
        }
        _ => vec![],
    };
    v.sort_unstable();
    v.dedup();
    v
}

#[component]
pub fn Board(
    view_state: ViewState,
    player_id: u16,
    /// Pending origin selection (first click of a move pair).
    selected_origin: RwSignal<Option<u8>>,
    /// Moves staged so far this turn (max 2). Each entry is (from, to), 0 = empty move.
    staged_moves: RwSignal<Vec<(u8, u8)>>,
    /// All valid two-move sequences for this turn (empty when not in move stage).
    valid_sequences: Vec<(CheckerMove, CheckerMove)>,
    /// Dice to display in the center bars; None means dice not yet rolled (cups shown upright).
    #[prop(default = None)]
    bar_dice: Option<(u8, u8)>,
    /// Whether we're in the move stage (determines used/unused die appearance).
    #[prop(default = false)]
    bar_is_move: bool,
    #[prop(default = false)] is_my_turn: bool,
    /// Whether the dice are a double (golden glow).
    #[prop(default = false)]
    bar_is_double: bool,
    /// Checker moves to animate on mount (None when board unchanged).
    #[prop(default = None)]
    last_moves: Option<(CheckerMove, CheckerMove)>,
    /// Fields where a hit (battue) was scored this turn — show ripple animation.
    #[prop(default = vec![])]
    hit_fields: Vec<u8>,
    /// Suppress dice animation (echo screen shown after a pending confirm was dismissed).
    #[prop(default = false)]
    suppress_dice_anim: bool,
) -> impl IntoView {
    let board = view_state.board;
    let white_points = view_state.scores[0].points;
    let white_can_bredouille = view_state.scores[0].can_bredouille;
    let black_points = view_state.scores[1].points;
    let black_can_bredouille = view_state.scores[1].can_bredouille;
    let is_move_stage = view_state.active_mp_player == Some(player_id)
        && matches!(
            view_state.turn_stage,
            SerTurnStage::Move | SerTurnStage::HoldOrGoChoice
        );
    // True when ANY player is in the Move/HoldOrGoChoice stage — i.e., dice are fresh for the active player.
    let active_is_move_stage = matches!(
        view_state.turn_stage,
        SerTurnStage::Move | SerTurnStage::HoldOrGoChoice
    );
    let is_white = player_id == 0;
    let hovered_moves = use_context::<RwSignal<Vec<(CheckerMove, CheckerMove)>>>();

    // Exit-eligible: all the player's checkers are in their last jan.
    // White last jan = fields 19-24 (board indices 18-23, positive values).
    // Black last jan = fields 1-6  (board indices 0-5, negative values).
    let board_snapshot = view_state.board;
    let all_in_exit: bool;
    let exit_field_test: fn(u8) -> bool;
    if is_white {
        let in_exit: i8 = board_snapshot[18..24].iter().map(|&v| v.max(0)).sum();
        let total: i8 = board_snapshot.iter().map(|&v| v.max(0)).sum();
        all_in_exit = total > 0 && in_exit == total;
        exit_field_test = |f| matches!(f, 19..=24);
    } else {
        let in_exit: i8 = board_snapshot[0..6].iter().map(|&v| (-v).max(0)).sum();
        let total: i8 = board_snapshot.iter().map(|&v| (-v).max(0)).sum();
        all_in_exit = total > 0 && in_exit == total;
        exit_field_test = |f| matches!(f, 1..=6);
    }

    // Sequences clone for the reactive exit button (show/hide + class + click).
    let seqs_exit = valid_sequences.clone();

    // `valid_sequences` is cloned per field (the Vec is small; Send-safe unlike Rc).
    let fields_from = |nums: &[u8], is_top_row: bool| -> Vec<AnyView> {
        nums.iter()
            .map(|&field_num| {
                // Each reactive closure gets its own owned clone — Vec<(CheckerMove,CheckerMove)>
                // is Send, which Leptos requires for reactive attribute functions.
                let seqs_c = valid_sequences.clone();
                let seqs_k = valid_sequences.clone();
                let corner_title = if is_rest_corner(field_num, is_white) {
                    Some("Coin de repos — must enter and leave with 2 checkers")
                } else {
                    None
                };
                // §4a — slide delta for the arriving checker at this field.
                // Computed once per field at render time; Option<(f32,f32)> is Copy.
                let slide_delta: Option<(f32, f32)> = last_moves.and_then(|(m1, m2)| {
                    [m1, m2].iter().find_map(|m| {
                        if m.get_to() != field_num as usize || m.get_from() == m.get_to() {
                            return None;
                        }
                        let (fx, fy) = field_center(m.get_from(), is_white)?;
                        let (tx, ty) = field_center(m.get_to(), is_white)?;
                        let dx = fx - tx;
                        let dy = fy - ty;
                        (dx.abs() >= 1.0 || dy.abs() >= 1.0).then_some((dx, dy))
                    })
                });
                // §6e — ripple on hit fields (battue).
                let is_hit_field = hit_fields.contains(&field_num);
                view! {
                    <div
                        id={format!("field-{field_num}")}
                        title=corner_title
                        class=move || {
                            let staged = staged_moves.get();
                            let val = displayed_value(board, &staged, is_white, field_num);
                            let is_mine = if is_white { val > 0 } else { val < 0 };
                            let can_stage = is_move_stage && staged.len() < 2;
                            let sel = selected_origin.get();

                            let mut cls = format!("field {}", field_zone_class(field_num));
                            let is_white_pt = field_num >= 1 && field_num <= white_points;
                            let is_black_pt = black_points > 0 && field_num >= 25 - black_points;
                            if is_white_pt {
                                cls.push_str(if white_can_bredouille { " point-bredouille" } else { " point-no-bredouille" });
                            } else if is_black_pt {
                                cls.push_str(if black_can_bredouille { " point-bredouille" } else { " point-no-bredouille" });
                            }
                            if is_rest_corner(field_num, is_white) {
                                cls.push_str(" corner");
                                // Pulse when the corner can be reached this turn
                                if !seqs_c.is_empty() && seqs_c.iter().any(|(m1, m2)| {
                                    m1.get_to() as u8 == field_num
                                        || m2.get_to() as u8 == field_num
                                }) {
                                    cls.push_str(" corner-available");
                                }
                            }
                            if is_rest_corner(field_num, !is_white) {
                                cls.push_str(" corner");
                            }
                            if all_in_exit && exit_field_test(field_num) {
                                cls.push_str(" exit-eligible");
                            }

                            if seqs_c.is_empty() && !is_move_stage {
                                // No restriction (dice not rolled or not move stage)
                                if can_stage && (sel.is_some() || is_mine) {
                                    cls.push_str(" clickable");
                                }
                                if sel == Some(field_num) { cls.push_str(" selected"); }
                                if can_stage && sel.is_some() && sel != Some(field_num) {
                                    cls.push_str(" dest");
                                }
                            } else if can_stage {
                                if let Some(origin) = sel {
                                    if origin == field_num {
                                        cls.push_str(" selected clickable");
                                    } else {
                                        let dests = valid_dests_for(&seqs_c, &staged, origin);
                                        // Only highlight non-exit destinations (field 0 = exit has no tile)
                                        if dests.iter().any(|&d| d == field_num && d != 0) {
                                            cls.push_str(" clickable dest");
                                        }
                                    }
                                } else {
                                    let origins = valid_origins_for(&seqs_c, &staged);
                                    if origins.iter().any(|&o| o == field_num) {
                                        cls.push_str(" clickable");
                                    }
                                }
                            }

                            // §6c: highlight fields touched by the hovered jan
                            if let Some(hm) = hovered_moves {
                                let pairs = hm.get();
                                let f = field_num as usize;
                                let highlighted = pairs.iter().any(|(m1, m2)| {
                                    (m1.get_from() != 0 && m1.get_from() == f)
                                        || (m1.get_to() != 0 && m1.get_to() == f)
                                        || (m2.get_from() != 0 && m2.get_from() == f)
                                        || (m2.get_to() != 0 && m2.get_to() == f)
                                });
                                if highlighted {
                                    cls.push_str(" jan-hovered");
                                }
                            }

                            cls
                        }
                        on:click=move |_| {
                            if !is_move_stage { return; }
                            let staged = staged_moves.get_untracked();
                            if staged.len() >= 2 { return; }

                            match selected_origin.get_untracked() {
                                Some(origin) if origin == field_num => {
                                    selected_origin.set(None);
                                }
                                Some(origin) => {
                                    let valid = if seqs_k.is_empty() {
                                        true
                                    } else {
                                        valid_dests_for(&seqs_k, &staged, origin)
                                            .iter()
                                            .any(|&d| d == field_num)
                                    };
                                    if valid {
                                        staged_moves.update(|v| v.push((origin, field_num)));
                                        selected_origin.set(None);
                                    }
                                }
                                None => {
                                    if seqs_k.is_empty() {
                                        let val = displayed_value(board, &staged, is_white, field_num);
                                        if is_white && val > 0 || !is_white && val < 0 {
                                            selected_origin.set(Some(field_num));
                                        }
                                    } else {
                                        let origins = valid_origins_for(&seqs_k, &staged);
                                        if origins.iter().any(|&o| o == field_num) {
                                            selected_origin.set(Some(field_num));
                                            // let dests = valid_dests_for(&seqs_k, &staged, field_num);
                                            // if !dests.is_empty() && dests.iter().all(|&d| d == 0) {
                                            //     // All destinations are exits: auto-stage
                                            //     staged_moves.update(|v| v.push((field_num, 0)));
                                            // } else {
                                            //     selected_origin.set(Some(field_num));
                                            // }
                                        }
                                    }
                                }
                            }
                        }
                    >
                        <span class="field-num">{field_num}</span>
                        {move || {
                            let moves = staged_moves.get();
                            let val = displayed_value(board, &moves, is_white, field_num);
                            let count = val.unsigned_abs();
                            // §6e — ripple on hit (battue) fields; must be inside the
                            // reactive closure so Leptos uses the same direct rendering
                            // path as .arriving (avoids node-move that resets animation).
                            let ripple = is_hit_field.then(|| {
                                let cls = if is_top_row { "hit-ripple hit-ripple-top" } else { "hit-ripple hit-ripple-bot" };
                                view! { <div class=cls></div> }.into_any()
                            });
                            let stack = (count > 0).then(|| {
                                let color = if val > 0 { "white" } else { "black" };
                                let display_n = (count as usize).min(4);
                                // outermost index: last for top rows, first for bottom rows.
                                let outer_idx = if is_top_row { display_n - 1 } else { 0 };
                                let chips: Vec<AnyView> = (0..display_n).map(|i| {
                                    let label = if i == outer_idx && count >= 5 {
                                        count.to_string()
                                    } else {
                                        String::new()
                                    };
                                    if i == outer_idx {
                                        if let Some((dx, dy)) = slide_delta {
                                            return view! {
                                                <div
                                                    class=format!("checker {color} arriving")
                                                    style=format!("--slide-dx:{dx:.1}px;--slide-dy:{dy:.1}px")
                                                >{label}</div>
                                            }.into_any();
                                        }
                                    }
                                    view! {
                                        <div class=format!("checker {color}")>{label}</div>
                                    }.into_any()
                                }).collect();
                                view! { <div class="checker-stack">{chips}</div> }.into_any()
                            });
                            (ripple, stack)
                        }}
                    </div>
                }
                .into_any()
            })
            .collect()
    };

    // ── Bar content: die in the center bar (die_idx 0 = top bar, 1 = bottom bar) ──
    let bar_content = move |die_idx: u8| -> AnyView {
        match bar_dice {
            None => view! { <div class="bar-die-slot"></div> }.into_any(),
            Some(dice_vals) => {
                let die_val = if die_idx == 0 {
                    dice_vals.0
                } else {
                    dice_vals.1
                };
                view! {
                    <div class="bar-die-slot">
                        {move || {
                            let staged = staged_moves.get();
                            let (u0, u1) = if bar_is_move {
                                bar_matched_dice_used(&staged, dice_vals)
                            } else if is_my_turn {
                                (true, true)
                            } else if active_is_move_stage && !suppress_dice_anim {
                                // Opponent has fresh dice in their Move stage (first view).
                                (false, false)
                            } else {
                                // Dice are old: either from the previous turn (opponent not yet
                                // rolled) or this is the echo screen after a pending confirm.
                                (true, true)
                            };
                            let used = if die_idx == 0 { u0 } else { u1 };
                            view! { <Die value=die_val used=used is_double=bar_is_double /> }
                        }}
                    </div>
                }
                .into_any()
            }
        }
    };

    let (tl, tr, bl, br) = if is_white {
        (&TOP_LEFT_W, &TOP_RIGHT_W, &BOT_LEFT_W, &BOT_RIGHT_W)
    } else {
        (&TOP_LEFT_B, &TOP_RIGHT_B, &BOT_LEFT_B, &BOT_RIGHT_B)
    };

    // Zone label pairs (top-left, top-right, bot-left, bot-right) per perspective.
    let (label_tl, label_tr, label_bl, label_br) = if is_white {
        ("", "jan de retour", "grand jan", "petit jan")
    } else {
        ("petit jan", "grand jan", "jan de retour", "")
    };

    view! {
        // board-wrapper keeps zone labels outside .board so the SVG overlay
        // inside .board stays correctly positioned (position:absolute top:0 left:0
        // is relative to .board, not the wrapper).
        <div class="board-wrapper">
            <div class="zone-labels-row">
                <div class="zone-label zone-label-quarter">{label_tl}</div>
                <div class="zone-label zone-label-bar"></div>
                <div class="zone-label zone-label-quarter">{label_tr}</div>
            </div>
            <div class="board">
                <div class="board-row top-row">
                    <div class="board-quarter">{fields_from(tl, true)}</div>
                    <div class="board-bar">{bar_content(0)}</div>
                    <div class="board-quarter">{fields_from(tr, true)}</div>
                </div>
                <div class="board-center-bar"></div>
                <div class="board-row bot-row">
                    <div class="board-quarter">{fields_from(bl, false)}</div>
                    <div class="board-bar">{bar_content(1)}</div>
                    <div class="board-quarter">{fields_from(br, false)}</div>
                </div>
                // SVG overlay: arrows for hovered jan moves
                <svg
                    width="824" height="388"
                    style="position:absolute;top:0;left:0;pointer-events:none;overflow:visible"
                >
                    {move || {
                        let Some(hm) = hovered_moves else { return vec![]; };
                        let pairs = hm.get();
                        if pairs.is_empty() { return vec![]; }
                        // Collect unique individual (from, to) moves; skip empty/exit.
                        let mut moves: Vec<(usize, usize)> = pairs.iter()
                            .flat_map(|(m1, m2)| [
                                (m1.get_from(), m1.get_to()),
                                (m2.get_from(), m2.get_to()),
                            ])
                            .filter(|&(f, t)| f != 0 && t != 0)
                            .collect();
                        moves.sort_unstable();
                        moves.dedup();
                        moves.into_iter()
                            .filter_map(|(from, to)| {
                                let p1 = field_center(from, is_white)?;
                                let p2 = field_center(to, is_white)?;
                                Some(arrow_svg(p1, p2))
                            })
                            .collect()
                    }}
                </svg>
                // Exit sign: circle+arrow outside the board, next to the last exit field.
                // White exits to the right (top-right quarter); Black exits to the left (top-left).
                {move || {
                    // Recompute on every staged_moves change: the exit button must appear
                    // even when the initial board has a checker outside the exit zone,
                    // because the first move can bring all checkers in (e.g. 15→21, 19→exit).
                    let staged = staged_moves.get();
                    let show = is_move_stage && match staged.len() {
                        0 => seqs_exit.iter().any(|(m1, m2)| m1.get_to() == 0 || m2.get_to() == 0),
                        1 => {
                            let (f0, t0) = staged[0];
                            seqs_exit.iter()
                                .filter(|(m1, _)| m1.get_from() as u8 == f0 && m1.get_to() as u8 == t0)
                                .any(|(_, m2)| m2.get_to() == 0)
                        }
                        _ => false,
                    };
                    show.then(|| {
                        let seqs_exit_cls = seqs_exit.clone();
                        let seqs_exit_click = seqs_exit.clone();
                        let (pos_style, line_x1, line_x2, head_pts): (&str, &str, &str, &str) =
                            if is_white {
                                (
                                    "position:absolute;right:-60px;top:15px;width:50px;height:50px",
                                    "10", "31", "23,17 32,25 23,33",
                                )
                            } else {
                                (
                                    "position:absolute;left:-60px;top:15px;width:50px;height:50px",
                                    "40", "19", "27,17 18,25 27,33",
                                )
                            };
                        view! {
                            <div
                                title="Exit"
                                style=pos_style
                                class=move || {
                                    let staged = staged_moves.get();
                                    let sel = selected_origin.get();
                                    let active = match sel {
                                        Some(origin) => seqs_exit_cls.is_empty()
                                            || valid_dests_for(&seqs_exit_cls, &staged, origin)
                                                .iter()
                                                .any(|&d| d == 0),
                                        None => false,
                                    };
                                    if active { "exit-btn exit-active" } else { "exit-btn" }
                                }
                                on:click=move |_| {
                                    if !is_move_stage { return; }
                                    let staged = staged_moves.get_untracked();
                                    if staged.len() >= 2 { return; }
                                    let Some(origin) = selected_origin.get_untracked() else {
                                        return;
                                    };
                                    let valid = seqs_exit_click.is_empty()
                                        || valid_dests_for(&seqs_exit_click, &staged, origin)
                                            .iter()
                                            .any(|&d| d == 0);
                                    if valid {
                                        staged_moves.update(|v| v.push((origin, 0)));
                                        selected_origin.set(None);
                                    }
                                }
                            >
                                <svg width="50" height="50" viewBox="0 0 50 50">
                                    <circle
                                        cx="25" cy="25" r="20"
                                        style="fill:rgba(10,20,10,0.75);stroke:rgba(210,170,30,0.75);stroke-width:2.5"
                                    />
                                    <line
                                        x1=line_x1 y1="25" x2=line_x2 y2="25"
                                        style="stroke:rgba(210,170,30,0.85);stroke-width:2.5;stroke-linecap:round"
                                    />
                                    <polyline
                                        points=head_pts
                                        style="fill:none;stroke:rgba(210,170,30,0.85);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round"
                                    />
                                </svg>
                            </div>
                        }
                        .into_any()
                    })
                }}
            </div>
            <div class="zone-labels-row">
                <div class="zone-label zone-label-quarter">{label_bl}</div>
                <div class="zone-label zone-label-bar"></div>
                <div class="zone-label zone-label-quarter">{label_br}</div>
            </div>
        </div>
    }
}

#[cfg(test)]
mod tests {
    use super::*;
    use wasm_bindgen_test::wasm_bindgen_test;

    #[wasm_bindgen_test]
    fn test_bar_matched_dice_used() {
        assert_eq!((true, false), bar_matched_dice_used(&[(22, 24)], (2, 3)));
        assert_eq!((false, true), bar_matched_dice_used(&[(22, 0)], (2, 3)));
        assert_eq!((false, true), bar_matched_dice_used(&[(24, 0)], (5, 1)));
        assert_eq!((true, false), bar_matched_dice_used(&[(24, 0)], (1, 5)));
    }
}