// calc-popup2.js — calculator popup with Scientific button
(function(){
  function byId(id){ return document.getElementById(id); }

  function ensureCalculator(){
    if(byId("calcPopup")) return;

    const toggle = document.createElement("button");
    toggle.id = "calcToggle";
    toggle.type = "button";
    toggle.textContent = "🧮 Calculator";
    document.body.appendChild(toggle);

    const popup = document.createElement("div");
    popup.id = "calcPopup";
    popup.innerHTML = `
      <div class="calc-head">
        <div>
          <div class="calc-title">Calculator</div>
          <div class="calc-hint">Esc to close • Enter to =</div>
        </div>
        <button id="calcClose" type="button">×</button>
      </div>

      <input id="calcInput" type="text" placeholder="Type: (3+2)*5  or  sin(0.5)" />

      <div class="calc-grid">
        <button type="button" data-insert="7">7</button>
        <button type="button" data-insert="8">8</button>
        <button type="button" data-insert="9">9</button>
        <button type="button" data-insert="/">÷</button>
        <button type="button" data-insert="(">(</button>
        <button type="button" data-insert=")">)</button>

        <button type="button" data-insert="4">4</button>
        <button type="button" data-insert="5">5</button>
        <button type="button" data-insert="6">6</button>
        <button type="button" data-insert="*">×</button>
        <button type="button" data-insert="^">^</button>
        <button type="button" data-insert="pi">π</button>

        <button type="button" data-insert="1">1</button>
        <button type="button" data-insert="2">2</button>
        <button type="button" data-insert="3">3</button>
        <button type="button" data-insert="-">−</button>
        <button type="button" data-insert="sqrt(">√</button>
        <button type="button" data-insert="abs(">abs</button>

        <button type="button" data-insert="0">0</button>
        <button type="button" data-insert=".">.</button>
        <button type="button" data-insert="%">%</button>
        <button type="button" data-insert="+">+</button>
        <button type="button" id="calcBack">⌫</button>
        <button type="button" id="calcClear">C</button>

        <button type="button" data-insert="sin(">sin</button>
        <button type="button" data-insert="cos(">cos</button>
        <button type="button" data-insert="tan(">tan</button>
        <button type="button" data-insert="ln(">ln</button>
        <button type="button" data-insert="log(">log</button>
        <button type="button" id="calcEquals">=</button>

        <button type="button" id="calcCopy" class="calc-wide">Copy result</button>
        <button type="button" id="calcSci" class="calc-scientific">Scientific</button>
      </div>
    `;
    document.body.appendChild(popup);
  }

  function insertText(txt){
    const input = byId("calcInput");
    input.focus();
    const start = input.selectionStart ?? input.value.length;
    const end = input.selectionEnd ?? input.value.length;
    input.value = input.value.slice(0,start) + txt + input.value.slice(end);
    input.selectionStart = input.selectionEnd = start + txt.length;
  }

  function evaluateExpression(){
    const input = byId("calcInput");
    let expr = input.value.trim();
    if(!expr) return NaN;

    expr = expr
      .replace(/π/g, "pi")
      .replace(/\^/g, "**")
      .replace(/\bpi\b/g, "Math.PI")
      .replace(/\bsin\(/g, "Math.sin(")
      .replace(/\bcos\(/g, "Math.cos(")
      .replace(/\btan\(/g, "Math.tan(")
      .replace(/\bsqrt\(/g, "Math.sqrt(")
      .replace(/\babs\(/g, "Math.abs(")
      .replace(/\bln\(/g, "Math.log(")
      .replace(/\blog\(/g, "Math.log10(");

    try{
      const value = Function('"use strict"; return (' + expr + ');')();
      if(Number.isFinite(value)){
        input.value = String(value);
        return value;
      }
    }catch(e){}
    input.value = "Error";
    return NaN;
  }

  function scientific(){
    const input = byId("calcInput");
    let n = Number(input.value);

    if(!Number.isFinite(n)){
      n = evaluateExpression();
    }
    if(!Number.isFinite(n)) return;

    let sci = n.toExponential(3).replace("e+","e");
    input.value = sci;

    if(navigator.clipboard){
      navigator.clipboard.writeText(sci).catch(()=>{});
    }
  }

  window.useScientificCalculatorValue = scientific;

  document.addEventListener("DOMContentLoaded", function(){
    ensureCalculator();

    const popup = byId("calcPopup");
    const input = byId("calcInput");

    byId("calcToggle").addEventListener("click", () => {
      popup.classList.toggle("open");
      if(popup.classList.contains("open")) input.focus();
    });

    byId("calcClose").addEventListener("click", () => popup.classList.remove("open"));

    document.querySelectorAll("#calcPopup [data-insert]").forEach(btn => {
      btn.addEventListener("click", () => insertText(btn.getAttribute("data-insert")));
    });

    byId("calcEquals").addEventListener("click", evaluateExpression);
    byId("calcSci").addEventListener("click", scientific);

    byId("calcCopy").addEventListener("click", () => {
      if(navigator.clipboard){
        navigator.clipboard.writeText(input.value).catch(()=>{});
      }
    });

    byId("calcClear").addEventListener("click", () => {
      input.value = "";
      input.focus();
    });

    byId("calcBack").addEventListener("click", () => {
      input.value = input.value.slice(0,-1);
      input.focus();
    });

    input.addEventListener("keydown", (e) => {
      if(e.key === "Enter"){
        e.preventDefault();
        evaluateExpression();
      }
    });

    document.addEventListener("keydown", (e) => {
      if(e.key === "Escape") popup.classList.remove("open");
    });
  });
})();