/* ============================================================
   SHLOK — shared UI components → window.*
   ============================================================ */
const { useState, useEffect, useRef, useCallback } = React;
const Icon = window.Icon;

/* ---------- Liquid glass orb ---------- */
function Orb({ active }) {
  return (
    <div className="orb-wrap" aria-hidden="true">
      <div className="orb-ring" />
      <div className="orb-ring r2" />
      <div className="orb" />
    </div>
  );
}

/* ---------- Option card (single / multi / rank / scenario) ---------- */
function OptionCard({ opt, selected, rank, disabled, multi, long, onClick }) {
  const [pulse, setPulse] = useState(false);
  const cls = [
    "opt",
    selected ? "sel" : "",
    disabled ? "disabled" : "",
    pulse ? "pulse" : "",
    long ? "long" : "",
  ].join(" ").trim();

  function handle() {
    if (disabled) return;
    setPulse(true);
    setTimeout(() => setPulse(false), 440);
    onClick();
  }

  return (
    <button
      type="button"
      className={cls}
      onClick={handle}
      aria-pressed={selected}
      disabled={disabled}
    >
      {rank ? <span className="rank">{rank}</span> : null}
      {opt.icon ? (
        <span className="ic"><Icon name={opt.icon} /></span>
      ) : null}
      <span className="body">
        <span className="t">{opt.v}</span>
        {opt.sub ? <span className="s">{opt.sub}</span> : null}
      </span>
      <span className="tick">
        <Icon name="check" size={14} />
      </span>
    </button>
  );
}

/* ---------- Chip ---------- */
function Chip({ opt, selected, onClick }) {
  return (
    <button
      type="button"
      className={"chip" + (selected ? " sel" : "")}
      onClick={onClick}
      aria-pressed={selected}
    >
      {opt.icon ? <span className="ci"><Icon name={opt.icon} size={17} /></span> : null}
      {opt.v}
    </button>
  );
}

/* ---------- Progress header ---------- */
function ProgressHeader({ stepNum, total, onBack, canBack, onBrandHold }) {
  const holdRef = useRef(null);
  const pct = Math.round((stepNum / total) * 100);

  function startHold() {
    holdRef.current = setTimeout(() => onBrandHold && onBrandHold(), 650);
  }
  function endHold() {
    if (holdRef.current) clearTimeout(holdRef.current);
  }

  return (
    <div className="topbar">
      <button
        className="back"
        onClick={onBack}
        disabled={!canBack}
        aria-label="Go back"
      >
        <Icon name="chevronLeft" size={20} />
      </button>
      <div className="progress-wrap">
        <div className="progress-meta">
          <span className="label">Business scan</span>
          <span className="count">{stepNum} / {total}</span>
        </div>
        <div className="progress-track">
          <div className="progress-fill" style={{ width: pct + "%" }} />
        </div>
      </div>
      <div
        className="brand-dot"
        role="button"
        tabIndex={0}
        aria-label="Shlok"
        title="Shlok"
        onMouseDown={startHold}
        onMouseUp={endHold}
        onMouseLeave={endHold}
        onTouchStart={startHold}
        onTouchEnd={endHold}
      />
    </div>
  );
}

/* ---------- Action bar ---------- */
function ActionBar({ children }) {
  return <div className="actionbar">{children}</div>;
}

function PrimaryBtn({ disabled, onClick, children, label }) {
  return (
    <button type="button" className="btn primary" disabled={disabled} onClick={onClick}>
      {children || label}
      <span className="arrow"><Icon name="arrowRight" size={18} /></span>
    </button>
  );
}

function GhostBtn({ onClick, children }) {
  return (
    <button type="button" className="btn ghost" onClick={onClick}>{children}</button>
  );
}

/* ---------- Voice note placeholder ---------- */
function VoiceBox() {
  const [recording, setRecording] = useState(false);
  const [secs, setSecs] = useState(0);
  useEffect(() => {
    if (!recording) return;
    const t = setInterval(() => setSecs((s) => s + 1), 1000);
    return () => clearInterval(t);
  }, [recording]);
  const mm = String(Math.floor(secs / 60)).padStart(2, "0");
  const ss = String(secs % 60).padStart(2, "0");
  return (
    <div className="voicebox">
      <button
        type="button"
        className={"rec-btn" + (recording ? " recording" : "")}
        onClick={() => { setRecording((r) => !r); if (recording) setSecs(0); }}
        aria-label={recording ? "Stop recording" : "Start voice note"}
      >
        <Icon name={recording ? "x" : "mic"} size={22} />
      </button>
      <div className={"wave" + (recording ? " live" : "")} aria-hidden="true">
        {Array.from({ length: 22 }).map((_, i) => <i key={i} />)}
      </div>
      <div className="rec-meta">
        {recording ? `Recording ${mm}:${ss}…` : "Tap to record a voice note"}
      </div>
    </div>
  );
}

Object.assign(window, { Orb, OptionCard, Chip, ProgressHeader, ActionBar, PrimaryBtn, GhostBtn, VoiceBox });