// Reusable input controls — sliders, number fields, toggles

const { useState, useEffect, useRef, useCallback, useMemo } = React;

// Slider + Number field combo
function SliderInput({ label, value, onChange, min = 0, max = 100000, step = 1000, hint, suffix = "/mo", annualMultiplier = 12, disabled = false, readOnly = false }) {
  const [localStr, setLocalStr] = useState(String(value || 0));

  useEffect(() => {
    setLocalStr(String(value || 0));
  }, [value]);

  const annual = (value || 0) * annualMultiplier;
  const pct = max > min ? ((value - min) / (max - min)) * 100 : 0;

  const fmt = window.TaxEngine.formatINR;

  return (
    <div className={`slider-input ${disabled ? "is-disabled" : ""}`}>
      <div className="slider-input__head">
        <div className="slider-input__label">
          {label}
          {readOnly && <span className="slider-input__auto">auto</span>}
        </div>
        <div className="slider-input__annual">{fmt(annual, { compact: true })}/yr</div>
      </div>
      <div className="slider-input__row">
        <div className="slider-input__slider-wrap">
          <input
            type="range"
            min={min}
            max={max}
            step={step}
            value={value || 0}
            onChange={(e) => !readOnly && !disabled && onChange(Number(e.target.value))}
            disabled={disabled || readOnly}
            style={{ "--pct": pct + "%" }}
            className="slider-input__range"
          />
        </div>
        <div className="slider-input__field">
          <span className="slider-input__rupee">₹</span>
          <input
            type="text"
            inputMode="numeric"
            value={localStr}
            disabled={disabled || readOnly}
            onChange={(e) => {
              const cleaned = e.target.value.replace(/[^\d]/g, "");
              setLocalStr(cleaned);
              const n = Number(cleaned) || 0;
              onChange(Math.min(max * 2, n));
            }}
            onBlur={() => setLocalStr(String(value || 0))}
            className="slider-input__num"
          />
          {suffix && <span className="slider-input__suffix">{suffix}</span>}
        </div>
      </div>
      {hint && <div className="slider-input__hint">{hint}</div>}
    </div>
  );
}

// Toggle switch
function Toggle({ checked, onChange, labelOn, labelOff, disabled }) {
  return (
    <button
      role="switch"
      aria-checked={checked}
      onClick={() => !disabled && onChange(!checked)}
      disabled={disabled}
      className={`toggle ${checked ? "is-on" : ""}`}
    >
      <span className="toggle__track">
        <span className="toggle__thumb"></span>
      </span>
      {(labelOn || labelOff) && (
        <span className="toggle__label">{checked ? labelOn : labelOff}</span>
      )}
    </button>
  );
}

// Regime selector pill
function RegimeSwitch({ regime, onChange, betterRegime, savings }) {
  const fmt = window.TaxEngine.formatINR;
  return (
    <div className="regime-switch">
      <button
        className={`regime-switch__opt ${regime === "new" ? "is-active" : ""}`}
        onClick={() => onChange("new")}
      >
        <span className="regime-switch__name">New Regime</span>
        <span className="regime-switch__sub">Default · Lower slabs</span>
        {betterRegime === "new" && savings > 100 && (
          <span className="regime-switch__badge">Saves {fmt(savings, { compact: true })}</span>
        )}
      </button>
      <button
        className={`regime-switch__opt ${regime === "old" ? "is-active" : ""}`}
        onClick={() => onChange("old")}
      >
        <span className="regime-switch__name">Old Regime</span>
        <span className="regime-switch__sub">All exemptions</span>
        {betterRegime === "old" && savings > 100 && (
          <span className="regime-switch__badge">Saves {fmt(savings, { compact: true })}</span>
        )}
      </button>
    </div>
  );
}

// Accordion
function AccordionSection({ id, title, subtitle, icon, children, defaultOpen = false, dim = false }) {
  const [open, setOpen] = useState(defaultOpen);
  return (
    <section className={`accordion ${open ? "is-open" : ""} ${dim ? "is-dim" : ""}`} data-section={id}>
      <button className="accordion__head" onClick={() => setOpen(!open)}>
        <div className="accordion__icon">{icon}</div>
        <div className="accordion__titles">
          <div className="accordion__title">{title}</div>
          {subtitle && <div className="accordion__subtitle">{subtitle}</div>}
        </div>
        <svg className="accordion__chev" width="20" height="20" viewBox="0 0 20 20" fill="none">
          <path d="M5 7.5L10 12.5L15 7.5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      </button>
      {open && <div className="accordion__body">{children}</div>}
    </section>
  );
}

Object.assign(window, { SliderInput, Toggle, RegimeSwitch, AccordionSection });