use crate::logic::{calculate_result, handle_operator, input_digit};
use dioxus::prelude::*;

/// The main calculator component.
/// We use `allow(non_snake_case)` because Dioxus components are typically CamelCase.
#[allow(non_snake_case)]
#[component]
pub fn Calculator() -> Element {
    // --- State Management ---
    // `first_num`: Stores the first number entered.
    // `second_num`: Stores the second number entered.
    // `operator`: Stores the current operator (+, -, *, /).
    let mut first_num = use_signal(String::new);
    let mut second_num = use_signal(String::new);
    let mut operator = use_signal(String::new);

    rsx! {
        // Main container for the calculator
        div { class: "app-container",
            div { class: "calculator-wrap",
                // Display Screen
                div { class: "display-area",
                    div { class: "display-text",
                        // Logic: If first number is empty, show "0"
                        if first_num().is_empty() {
                            "0"
                        } else {
                            "{first_num}"
                        }
                        " "
                        span { class: "operator-symbol", "{operator}" }
                        " "
                        "{second_num}"
                    }
                }

                // Button Grid
                div { class: "keypad-grid",
                    // --- Row 1 ---
                    button {
                        class: "calc-btn btn-number",
                        onclick: move |_| input_digit(first_num, second_num, operator, "7"),
                        "7"
                    }
                    button {
                        class: "calc-btn btn-number",
                        onclick: move |_| input_digit(first_num, second_num, operator, "8"),
                        "8"
                    }
                    button {
                        class: "calc-btn btn-number",
                        onclick: move |_| input_digit(first_num, second_num, operator, "9"),
                        "9"
                    }
                    button {
                        class: "calc-btn btn-operator",
                        onclick: move |_| handle_operator(first_num, second_num, operator, "/"),
                        "/"
                    }

                    // --- Row 2 ---
                    button {
                        class: "calc-btn btn-number",
                        onclick: move |_| input_digit(first_num, second_num, operator, "4"),
                        "4"
                    }
                    button {
                        class: "calc-btn btn-number",
                        onclick: move |_| input_digit(first_num, second_num, operator, "5"),
                        "5"
                    }
                    button {
                        class: "calc-btn btn-number",
                        onclick: move |_| input_digit(first_num, second_num, operator, "6"),
                        "6"
                    }
                    button {
                        class: "calc-btn btn-operator",
                        onclick: move |_| handle_operator(first_num, second_num, operator, "*"),
                        "*"
                    }

                    // --- Row 3 ---
                    button {
                        class: "calc-btn btn-number",
                        onclick: move |_| input_digit(first_num, second_num, operator, "1"),
                        "1"
                    }
                    button {
                        class: "calc-btn btn-number",
                        onclick: move |_| input_digit(first_num, second_num, operator, "2"),
                        "2"
                    }
                    button {
                        class: "calc-btn btn-number",
                        onclick: move |_| input_digit(first_num, second_num, operator, "3"),
                        "3"
                    }
                    button {
                        class: "calc-btn btn-operator",
                        onclick: move |_| handle_operator(first_num, second_num, operator, "-"),
                        "-"
                    }

                    // --- Row 4 ---
                    button {
                        class: "calc-btn btn-number btn-zero",
                        onclick: move |_| input_digit(first_num, second_num, operator, "0"),
                        "0"
                    }
                    button {
                        class: "calc-btn btn-clear",
                        onclick: move |_| {
                            first_num.set(String::new());
                            second_num.set(String::new());
                            operator.set(String::new());
                        },
                        "C"
                    }
                    button {
                        class: "calc-btn btn-operator",
                        onclick: move |_| handle_operator(first_num, second_num, operator, "+"),
                        "+"
                    }

                    // --- Row 5 (Equals) ---
                    button {
                        class: "calc-btn btn-equals",
                        onclick: move |_| calculate_result(first_num, second_num, operator),
                        "="
                    }
                }
            }
        }
    }
}