/* Wa by Elivate — Automations list */

function SummaryLine({ rule }) {
  const parts = window.RuleMeta.summarize(rule);
  return (
    <div className="summary-line">
      {parts.map((p, i) => {
        const [txt, kind] = p;
        if (kind === "arrow") return <span key={i} className="sum-arrow">→</span>;
        if (!kind) return <span key={i} className="sum-plain">{txt}</span>;
        return <span key={i} className={"sum-token sum-" + kind}>{txt}</span>;
      })}
    </div>
  );
}

function AutomationsScreen({ go, openBuilder }) {
  const { TRIGGERS, ACTIONS } = window.RuleMeta;
  const [rules, setRules] = React.useState(window.WaData.automations);
  const [filter, setFilter] = React.useState("all");
  const [q, setQ] = React.useState("");
  const [error, setError] = React.useState("");

  React.useEffect(() => {
    let alive = true;
    window.WaApi.automations()
      .then((items) => { if (alive) setRules(items); })
      .catch((err) => { if (alive) setError(err.message); });
    return () => { alive = false; };
  }, []);

  const toggle = async (id) => {
    const rule = rules.find((r) => r.id === id);
    if (!rule) return;
    const next = { enabled: !rule.enabled };
    setRules((rs) => rs.map((r) => r.id === id ? { ...r, ...next } : r));
    try {
      await window.WaApi.updateAutomation(id, next);
    } catch (err) {
      setError(err.message);
      setRules((rs) => rs.map((r) => r.id === id ? rule : r));
    }
  };

  const shown = rules.filter((r) =>
    (filter === "all" || (filter === "on" && r.enabled) || (filter === "off" && !r.enabled)) &&
    (q === "" || r.name.toLowerCase().includes(q.toLowerCase()))
  );
  const onCount = rules.filter((r) => r.enabled).length;

  return (
    <div className="page route-anim">
      <div className="list-toolbar">
        <div className="seg">
          {[["all", "All", rules.length], ["on", "Active", onCount], ["off", "Paused", rules.length - onCount]].map(([k, l, n]) => (
            <button key={k} className={"seg-btn" + (filter === k ? " active" : "")} onClick={() => setFilter(k)}>{l} <span className="seg-n">{n}</span></button>
          ))}
        </div>
        <div className="topbar-spacer"></div>
        <div className="search"><Icons.search /><input placeholder="Search automations…" value={q} onChange={(e) => setQ(e.target.value)} /></div>
        <button className="btn primary" onClick={() => openBuilder(null)}><Icons.plus size={16} /> New automation</button>
      </div>
      {error && <div className="card card-pad" style={{ marginBottom: 16, color: "var(--amber)" }}>{error}</div>}

      <div className="rule-list">
        {shown.map((r) => {
          const T = TRIGGERS[r.trigger.type], Ti = Icons[T.icon];
          const A = ACTIONS[r.action.type], Ai = Icons[A.icon];
          return (
            <div className={"card rule-card" + (r.enabled ? "" : " paused")} key={r.id}>
              <div className="rule-main" onClick={() => openBuilder(r)}>
                <div className="rule-head">
                  <span className={"rule-trig " + T.tone}><Ti size={16} /></span>
                  <div className="rule-name">{r.name}</div>
                  <span className={"tag " + A.tone + " rule-action-tag"}><Ai size={13} /> {A.short}</span>
                </div>
                <SummaryLine rule={r} />
                <div className="rule-foot">
                  <span className="rf-item"><Icons.zap size={13} /> {r.runs} runs</span>
                  <span className="rf-dot">·</span>
                  <span className="rf-item">{T.label}</span>
                  {r.scope.type === "group" && <><span className="rf-dot">·</span><span className="rf-item"><Icons.users size={13} /> {r.scope.groupName}</span></>}
                </div>
              </div>
              <div className="rule-side">
                <button className={"toggle" + (r.enabled ? " on" : "")} onClick={() => toggle(r.id)}></button>
                <div className="rule-actions">
                  <button className="btn icon sm ghost" onClick={() => openBuilder(r)}><Icons.edit size={15} /></button>
                  <button className="btn icon sm ghost"><Icons.dots size={15} /></button>
                </div>
              </div>
            </div>
          );
        })}
        {shown.length === 0 && <div className="empty-state"><Icons.bolt size={26} /><p>No automations match.</p></div>}
      </div>
    </div>
  );
}

Object.assign(window, { AutomationsScreen, SummaryLine });