/* ============================================================
   Shared UI primitives — Card, Field, Slider, Stat, etc.
   Exposes a bundle on window at end of file.
   ============================================================ */
const { useState } = React;

function InfoTip({ text }) {
  return (
    <span className="info">
      <Icon name="info" className="info-ico" />
      <span className="info-pop">{text}</span>
    </span>
  );
}

function Card({ title, icon, sub, action, children, className = "", style }) {
  return (
    <section className={"card card-pad " + className} style={style}>
      {(title || action) && (
        <div className="card-head">
          {icon && <Icon name={icon} className="ch-ico" />}
          <div style={{ flex: 1 }}>
            {title && <h3>{title}</h3>}
            {sub && <div className="card-sub">{sub}</div>}
          </div>
          {action}
        </div>
      )}
      {children}
    </section>
  );
}

function MoneyInput({ label, value, onChange, prefix = "£", suffix, tip, min = 0, step = 100 }) {
  return (
    <div className="field">
      <label className="field-label">{label}{tip && <InfoTip text={tip} />}</label>
      <div className="input-wrap">
        {prefix && <span className="input-prefix">{prefix}</span>}
        <input
          className={"text-input" + (prefix ? "" : " no-prefix")}
          type="number" inputMode="decimal" value={value} min={min} step={step}
          onChange={(e) => onChange(e.target.value === "" ? 0 : Math.max(min, parseFloat(e.target.value)))}
        />
        {suffix && <span className="input-suffix">{suffix}</span>}
      </div>
    </div>
  );
}

function Slider({ label, value, onChange, min, max, step = 1, display, tip }) {
  return (
    <div className="field">
      <div className="slider-row">
        <label className="field-label" style={{ marginBottom: 0 }}>{label}{tip && <InfoTip text={tip} />}</label>
        <span className="slider-val">{display ? display(value) : value}</span>
      </div>
      <input className="rng" type="range" min={min} max={max} step={step} value={value}
        onChange={(e) => onChange(parseFloat(e.target.value))} />
    </div>
  );
}

function Stat({ label, value, sub, tip, accent }) {
  return (
    <div className="stat">
      <div className="s-label">{label}{tip && <InfoTip text={tip} />}</div>
      <div className="s-value" style={accent ? { color: "var(--accent-strong)" } : null}>{value}</div>
      {sub && <div className="s-sub">{sub}</div>}
    </div>
  );
}

function BrkRow({ k, v, tip, total }) {
  return (
    <div className={"brk-row" + (total ? " total" : "")}>
      <span className="brk-k">{k}{tip && <InfoTip text={tip} />}</span>
      <span className="brk-v">{v}</span>
    </div>
  );
}

function Pill({ kind = "neutral", children, icon }) {
  return <span className={"pill " + kind}>{icon && <Icon name={icon} style={{ width: 12, height: 12 }} />}{children}</span>;
}

function Segmented({ options, value, onChange, size }) {
  return (
    <div className="seg" role="tablist">
      {options.map((o) => (
        <button key={o.value} className={value === o.value ? "on" : ""} onClick={() => onChange(o.value)}
          role="tab" aria-selected={value === o.value}>
          {o.icon && <Icon name={o.icon} style={{ width: 15, height: 15 }} />}{o.label}
        </button>
      ))}
    </div>
  );
}

function Disclaimer({ children }) {
  return (
    <div className="disclaimer">
      <Icon name="info" />
      <div>{children}</div>
    </div>
  );
}

Object.assign(window, { InfoTip, Card, MoneyInput, Slider, Stat, BrkRow, Pill, Segmented, Disclaimer });