// Keypad.jsx — custom 9-grid numeric keypad with optional calculator ops

function Keypad({ value, onChange, keyHeight = 56, accent = "#2D6A4F", calc = false }) {
  const press = (k) => {
    if (k === "del") {
      onChange(value.length <= 1 ? "0" : value.slice(0, -1));
      return;
    }
    if (k === "clr") { onChange("0"); return; }
    if (calc && (k === "+" || k === "-" || k === "*" || k === "/")) {
      const last = value.slice(-1);
      if (value === "0" && k !== "-") return;
      if ("+-*/".includes(last)) { onChange(value.slice(0, -1) + k); return; }
      onChange(value + k);
      return;
    }
    if (k === ".") {
      const seg = value.split(/[+\-*/]/).pop();
      if (seg.includes(".")) return;
      onChange(value + ".");
      return;
    }
    if (value === "0") onChange(k);
    else {
      const seg = value.split(/[+\-*/]/).pop();
      const [intPart, decPart] = seg.split(".");
      if (decPart !== undefined && decPart.length >= 2) return;
      if (decPart === undefined && intPart.length >= 7) return;
      onChange(value + k);
    }
  };

  const Btn = ({ k, label, cls }) => (
    <button
      type="button"
      onClick={() => press(k)}
      className={"kp-btn" + (cls ? " " + cls : "")}
      style={{ height: keyHeight }}
    >
      <span className="kp-main">{label ?? k}</span>
    </button>
  );

  if (calc) {
    return (
      <div className="kp-grid kp-grid-calc">
        <Btn k="7" /><Btn k="8" /><Btn k="9" /><Btn k="/" label="÷" cls="kp-op" />
        <Btn k="4" /><Btn k="5" /><Btn k="6" /><Btn k="*" label="×" cls="kp-op" />
        <Btn k="1" /><Btn k="2" /><Btn k="3" /><Btn k="-" cls="kp-op" />
        <Btn k="." label="·" /><Btn k="0" /><Btn k="del" label="⌫" /><Btn k="+" cls="kp-op" />
      </div>
    );
  }

  return (
    <div className="kp-grid">
      <Btn k="1" /><Btn k="2" /><Btn k="3" />
      <Btn k="4" /><Btn k="5" /><Btn k="6" />
      <Btn k="7" /><Btn k="8" /><Btn k="9" />
      <Btn k="." label="·" />
      <Btn k="0" />
      <Btn k="del" label="⌫" />
    </div>
  );
}

window.Keypad = Keypad;