// Rules configurator section

const FIELDS = [
  { value: "price", label: "price" },
  { value: "vendor", label: "vendor" },
  { value: "quantity", label: "quantity" },
  { value: "category", label: "category" },
  { value: "product_name", label: "product name" },
];

const OPERATORS = [
  { value: "gt", label: "greater than" },
  { value: "lt", label: "less than" },
  { value: "eq", label: "equals" },
  { value: "contains", label: "contains" },
  { value: "not_in", label: "not in" },
];

const ACTIONS = [
  { value: "approve", label: "Approve" },
  { value: "deny", label: "Deny" },
  { value: "escalate", label: "Escalate" },
];

function RulesSection({ rules, setRules }) {
  const update = (id, patch) =>
    setRules((rs) => rs.map((r) => (r.id === id ? { ...r, ...patch } : r)));
  const remove = (id) => setRules((rs) => rs.filter((r) => r.id !== id));
  const add = () =>
    setRules((rs) => [
      ...rs,
      { id: "r" + Date.now(), field: "price", op: "gt", value: "", action: "escalate" },
    ]);

  return (
    <section className="section" data-accent="2" data-screen-label="02 Rules">
      <div className="section-head">
        <div className="titles">
          <div className="eyebrow"><span className="dotnum"></span>Step 02 · Logic</div>
          <h2>Rules</h2>
          <div className="desc">Procura evaluates each extracted spec sheet against these rules. The first matching rule decides the recommendation.</div>
        </div>
        <div className="actions">
          <span className="pill pill-muted"><span className="pdot"></span>{rules.length} active</span>
        </div>
      </div>

      <div className="table-wrap" style={{ borderTop: "none" }}>
        <table className="t">
          <thead>
            <tr>
              <th style={{ width: 36, paddingLeft: 24 }}>#</th>
              <th style={{ width: "18%" }}>Field</th>
              <th style={{ width: "18%" }}>Operator</th>
              <th>Value</th>
              <th style={{ width: "22%" }}>Action</th>
              <th style={{ width: 48 }}></th>
            </tr>
          </thead>
          <tbody>
            {rules.map((r, i) => (
              <tr key={r.id} className="cell-tight">
                <td style={{ paddingLeft: 24, color: "var(--text-3)" }} className="mono">{String(i + 1).padStart(2, "0")}</td>
                <td>
                  <select className="select" value={r.field} onChange={(e) => update(r.id, { field: e.target.value })}>
                    {FIELDS.map((f) => (
                      <option key={f.value} value={f.value}>{f.label}</option>
                    ))}
                  </select>
                </td>
                <td>
                  <select className="select" value={r.op} onChange={(e) => update(r.id, { op: e.target.value })}>
                    {OPERATORS.map((o) => (
                      <option key={o.value} value={o.value}>{o.label}</option>
                    ))}
                  </select>
                </td>
                <td>
                  <input
                    className="input mono"
                    value={r.value}
                    placeholder={r.field === "price" ? "$50,000" : r.field === "vendor" ? "Acme Logistics" : r.field === "category" ? "approved-list, preferred" : ""}
                    onChange={(e) => update(r.id, { value: e.target.value })}
                    style={{ fontSize: 12.5 }}
                  />
                </td>
                <td>
                  <select className="select" value={r.action} onChange={(e) => update(r.id, { action: e.target.value })}>
                    {ACTIONS.map((a) => (
                      <option key={a.value} value={a.value}>{a.label}</option>
                    ))}
                  </select>
                </td>
                <td style={{ textAlign: "right", paddingRight: 16 }}>
                  <button className="btn btn-ghost btn-icon" title="Delete rule" onClick={() => remove(r.id)}>
                    <Icon.trash size={14} />
                  </button>
                </td>
              </tr>
            ))}
            {rules.length === 0 && (
              <tr>
                <td colSpan={6} className="log-empty">No rules. All requests will route to "Needs review — looks approvable".</td>
              </tr>
            )}
          </tbody>
        </table>
      </div>
      <div className="rules-add">
        <button className="btn btn-sm" onClick={add}>
          <Icon.plus size={13} /> Add rule
        </button>
        <span style={{ fontSize: 12, color: "var(--text-3)" }}>
          Rules are evaluated top-to-bottom · Drag to reorder
        </span>
      </div>
    </section>
  );
}

Object.assign(window, { RulesSection, FIELDS, OPERATORS, ACTIONS });