/* Advanced panel — internal constants + per-ton breakdown.
   Collapsed by default. */

const { useState: useAdvState } = React;

function AdvancedPanel({ result, includeFixedCosts, onToggleFixedCosts, customsDutyAmdPerTon, onChangeCustomsDuty }) {
  const [open, setOpen] = useAdvState(false);
  const C = window.SicosaEngine.CONSTANTS;
  const MIN = window.SicosaEngine.MIN_VAT_EXCISE;
  const FIXED = window.SicosaEngine.FIXED_COSTS_TOTAL;
  const f = window.fmt;

  const isGasoline = result.inputs.fuelType === "gasoline-92" || result.inputs.fuelType === "gasoline-95";

  return (
    <div className={"advanced" + (open ? " is-open" : "")}>
      <div className="advanced__head" onClick={() => setOpen(!open)}>
        <i className="advanced__chev" data-lucide="chevron-right"></i>
        <span className="advanced__h">Advanced · Constants & per-ton breakdown</span>
      </div>
      <div className="advanced__body">
        <div className="const-grid">
          <div className="const-cell">
            <div className="const-cell__label">Indexation coefficient</div>
            <div className="const-cell__val">× {C.COEFFICIENT}</div>
            <div className="const-cell__note">From 01.01.2026</div>
          </div>
          <div className="const-cell">
            <div className="const-cell__label">VAT rate</div>
            <div className="const-cell__val">{(C.VAT_RATE * 100).toFixed(0)}%</div>
            <div className="const-cell__note">On purchase + excise + customs</div>
          </div>
          <div className="const-cell">
            <div className="const-cell__label">Eco tax rate</div>
            <div className="const-cell__val">{(C.ECO_TAX_RATE * 100).toFixed(0)}%</div>
            <div className="const-cell__note">On purchase + delivery (AMD/t)</div>
          </div>
          <div className="const-cell">
            <div className="const-cell__label">Profit tax</div>
            <div className="const-cell__val">{(C.PROFIT_TAX_RATE * 100).toFixed(0)}%</div>
            <div className="const-cell__note">Applied to profit after VAT overpayment</div>
          </div>
          <div className="const-cell const-cell--editable">
            <div className="const-cell__label">Customs duty</div>
            <div className="const-cell__edit">
              <input
                type="text"
                inputMode="decimal"
                className="const-cell__input"
                value={customsDutyAmdPerTon === 0 ? "" : String(customsDutyAmdPerTon)}
                placeholder="0"
                aria-label="Customs duty AMD per ton"
                onClick={(e) => e.stopPropagation()}
                onChange={(e) => {
                  const raw = e.target.value.replace(/[, ]/g, "").trim();
                  if (raw === "") { onChangeCustomsDuty(0); return; }
                  const n = parseFloat(raw);
                  if (Number.isFinite(n) && n >= 0) onChangeCustomsDuty(n);
                }}
              />
              <span className="const-cell__unit">AMD/t</span>
            </div>
            <div className="const-cell__note">Adds to excise side of the cost build-up</div>
          </div>
          <div className="const-cell">
            <div className="const-cell__label">Min VAT+Excise (gasoline only)</div>
            <div className="const-cell__val">{f.amd(MIN)} AMD/t</div>
            <div className="const-cell__note">135 000 × {C.COEFFICIENT}</div>
          </div>
          <div className="const-cell const-cell--toggle">
            <button
              type="button"
              role="switch"
              aria-label="Toggle fixed costs"
              aria-checked={includeFixedCosts}
              className={"toggle const-cell__toggle" + (includeFixedCosts ? " is-on" : "")}
              onClick={(e) => { e.stopPropagation(); onToggleFixedCosts(); }}
            ></button>
            <div className="const-cell__label">Fixed costs (toggleable)</div>
            <div className="const-cell__val">{f.amd(FIXED)} AMD</div>
            <div className="const-cell__note">Broker 50k · T-account 50k · Sampling 160k</div>
          </div>
          <div className="const-cell">
            <div className="const-cell__label">Excise · {result.inputs.fuelType}</div>
            <div className="const-cell__val">{f.amd(result.exciseAmdPerTon)} AMD/t</div>
            <div className="const-cell__note">
              {isGasoline ? "MAX(54 064, floor) — floor binds when low-priced" : "Fixed rate"}
            </div>
          </div>
        </div>

        <div className="breakdown">
          <div className="breakdown__h">Per-ton cost build-up (AMD)</div>
          <Row k="Purchase + delivery"     sub="P_USD × FX"          v={result.purchaseAmdPerTon}  />
          <Row k={"Excise · " + result.inputs.fuelType} sub={isGasoline ? "MAX(standard, floor)" : "Constant"} v={result.exciseAmdPerTon}    />
          {result.customsAmdPerTon > 0 ? (
            <Row k="Customs duty"          sub="Per ton · adds to excise" v={result.customsAmdPerTon}   />
          ) : null}
          <Row k="VAT base"                sub="Purchase + excise + customs" v={result.vatBaseAmdPerTon}   />
          <Row k="VAT 20%"                 sub="× VAT base"          v={result.vatAmdPerTon}        />
          <Row k="Eco tax 2%"              sub="× Purchase + delivery" v={result.ecoTaxAmdPerTon} />
          <Row k="Total cost per ton"      sub="VAT base + VAT + eco tax" v={result.totalCostAmdPerTon} total />
        </div>
      </div>
    </div>
  );
}

function Row({ k, sub, v, total }) {
  return (
    <div className={"breakdown__row" + (total ? " breakdown__row--total" : "")}>
      <div>
        <div className="breakdown__k">{k}</div>
        <div className="breakdown__sub">{sub}</div>
      </div>
      <div className="breakdown__v">{window.fmt.amd(v, total ? 0 : 0)}</div>
      <div></div>
    </div>
  );
}

window.AdvancedPanel = AdvancedPanel;