// rules.jsx — Admin Rules page (rule builder UI)
const { useState: useStateRu } = React;

/* toggle switch */
function Toggle({ on, onChange }) {
  return (
    <button onClick={() => onChange(!on)} role="switch" aria-checked={on}
      className="relative inline-flex items-center rounded-full transition-colors duration-200 shrink-0"
      style={{ width: 38, height: 22, background: on ? "var(--accent)" : "#d4d4d8" }}>
      <span className="absolute bg-white rounded-full shadow-sm transition-all duration-200"
        style={{ width: 16, height: 16, top: 3, left: on ? 19 : 3 }} />
    </button>
  );
}

function Stepper({ value, onChange, min = 0, max = 999, suffix }) {
  return (
    <div className="inline-flex items-center h-8 rounded-lg border border-zinc-200 bg-white overflow-hidden">
      <button onClick={() => onChange(Math.max(min, value - 1))}
        className="w-7 h-full flex items-center justify-center text-zinc-400 hover:bg-zinc-50 hover:text-zinc-700 transition-colors">−</button>
      <div className="flex items-baseline gap-1 px-2 min-w-[58px] justify-center border-x border-zinc-200 h-full">
        <input type="number" value={value} onChange={e => onChange(Math.max(min, Math.min(max, +e.target.value || 0)))}
          className="w-8 text-center bg-transparent outline-none text-[13px] font-semibold text-zinc-800 tabular-nums [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none" />
        {suffix && <span className="text-[11px] text-zinc-400">{suffix}</span>}
      </div>
      <button onClick={() => onChange(Math.min(max, value + 1))}
        className="w-7 h-full flex items-center justify-center text-zinc-400 hover:bg-zinc-50 hover:text-zinc-700 transition-colors">+</button>
    </div>
  );
}

function RuleCard({ rule, onChange, onToast }) {
  const [draft, setDraft] = useStateRu(rule);
  const [dirty, setDirty] = useStateRu(false);
  const [saving, setSaving] = useStateRu(false);

  function patch(p) { setDraft(d => ({ ...d, ...p })); setDirty(true); }
  function save() {
    setSaving(true);
    setTimeout(() => { setSaving(false); setDirty(false); onChange(draft); onToast(`Rule "${draft.name}" saved`); }, 700);
  }

  return (
    <div className={`bg-white rounded-xl border transition-all ${draft.enabled ? "border-zinc-200" : "border-zinc-200 opacity-[0.72]"}`}>
      <div className="flex items-start gap-3.5 p-4">
        <div className="flex items-center justify-center w-9 h-9 rounded-lg shrink-0 mt-0.5"
          style={{ background: draft.enabled ? "var(--accent-wash)" : "#f4f4f5", color: draft.enabled ? "var(--accent)" : "#a1a1aa" }}>
          <Icon name={rule.icon} size={17} />
        </div>

        <div className="min-w-0 flex-1">
          <div className="flex items-center gap-2 flex-wrap">
            <h3 className="text-[13.5px] font-semibold text-zinc-800">{rule.name}</h3>
            <PriorityBadge level={draft.priority} />
            {draft.enabled && draft.triggered > 0 && (
              <Tag className="!bg-amber-50 !text-amber-700">{draft.triggered} active</Tag>
            )}
          </div>
          <p className="text-[12.5px] text-zinc-500 mt-1 leading-snug">{rule.desc}</p>

          {/* config row */}
          <div className="flex items-center gap-x-5 gap-y-2.5 mt-3.5 flex-wrap">
            {rule.unit !== "RM tolerance" && rule.unit !== "units" && (
              <label className="flex items-center gap-2 text-[12.5px] text-zinc-600">
                <span className="text-zinc-400">Trigger after</span>
                <Stepper value={draft.threshold} onChange={v => patch({ threshold: v })} suffix={draft.unit} />
              </label>
            )}
            {(rule.unit === "RM tolerance" || rule.unit === "units") && (
              <label className="flex items-center gap-2 text-[12.5px] text-zinc-600">
                <span className="text-zinc-400">Tolerance</span>
                <Stepper value={draft.threshold} onChange={v => patch({ threshold: v })} suffix={draft.unit} />
              </label>
            )}
            <label className="flex items-center gap-2 text-[12.5px] text-zinc-600">
              <span className="text-zinc-400">Priority</span>
              <SelectMini icon="alert" value={draft.priority} onChange={v => patch({ priority: v })}
                options={[{ v: "high", label: "High" }, { v: "medium", label: "Medium" }, { v: "low", label: "Low" }]} />
            </label>
          </div>
        </div>

        {/* right controls */}
        <div className="flex flex-col items-end gap-3 shrink-0">
          <Toggle on={draft.enabled} onChange={v => patch({ enabled: v })} />
          {dirty && (
            <Button variant="primary" size="sm" icon={saving ? null : "check"} onClick={save} disabled={saving}>
              {saving ? "Saving…" : "Save"}
            </Button>
          )}
        </div>
      </div>
    </div>
  );
}

function RulesPage({ onToast }) {
  const [rules, setRules] = useStateRu(RULES_INIT);
  function update(r) { setRules(rs => rs.map(x => x.id === r.id ? r : x)); }
  const enabledCount = rules.filter(r => r.enabled).length;

  return (
    <div className="p-6 max-w-[920px]">
      {/* header */}
      <div className="flex items-start gap-3 mb-5 flex-wrap">
        <div>
          <h2 className="text-[15px] font-semibold text-zinc-900 tracking-tight">Exception Rules</h2>
          <p className="text-[12.5px] text-zinc-500 mt-0.5 leading-snug max-w-md">
            Rules define how OpsPilot detects and flags operational exceptions in real time. {enabledCount} of {rules.length} active.
          </p>
        </div>
        <div className="ml-auto flex items-center gap-2">
          <Button variant="default" size="md" icon="list">Rule history</Button>
          <Button variant="primary" size="md" icon="plus">New Rule</Button>
        </div>
      </div>

      {/* info banner */}
      <div className="flex items-start gap-2.5 rounded-xl px-4 py-3 mb-4 border" style={{ background: "var(--accent-wash)", borderColor: "var(--accent-border)" }}>
        <Icon name="sparkles" size={16} style={{ color: "var(--accent-ink)" }} className="mt-0.5 shrink-0" />
        <p className="text-[12.5px] leading-relaxed" style={{ color: "var(--accent-ink)" }}>
          Changes take effect immediately across the live exception queue. OpsPilot re-evaluates all open orders whenever a rule is saved.
        </p>
      </div>

      <div className="space-y-3">
        {rules.map(r => <RuleCard key={r.id} rule={r} onChange={update} onToast={onToast} />)}
      </div>

      {/* add rule placeholder */}
      <button className="mt-3 w-full flex items-center justify-center gap-2 py-3.5 rounded-xl border border-dashed border-zinc-300 text-zinc-400 hover:border-zinc-400 hover:text-zinc-600 hover:bg-zinc-50 transition-colors text-[13px] font-medium">
        <Icon name="plus" size={16} /> Add a custom rule
      </button>
    </div>
  );
}

Object.assign(window, { RulesPage, Toggle, Stepper });