// BotConfig management: card grid list + form detail view (CRUD).
// Fetches configs with populated references. Form loads dropdown data in parallel.

const { useState } = React;

// ─── Config card in grid list ────────────────────────────────────────────
const ConfigCard = ({ config, onOpen }) => {
  const src = config.source_group_id;
  const targets = config.target_groups || [];
  const workers = config.available_bots || [];
  const webhook = config.webhook_bot_id;

  return (
    <button
      onClick={onOpen}
      style={{
        background: "var(--bg-card)", border: "1px solid var(--border)",
        borderRadius: 8, padding: 16, textAlign: "left", cursor: "pointer",
        transition: "border-color .12s", width: "100%",
      }}
      onMouseEnter={(e) => (e.currentTarget.style.borderColor = "var(--border-2)")}
      onMouseLeave={(e) => (e.currentTarget.style.borderColor = "var(--border)")}
    >
      <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 12, gap: 12 }}>
        <div style={{ minWidth: 0, flex: 1 }}>
          <div style={{ fontWeight: 600, fontSize: 14, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
            {config.description || `Config (${src?.name || src})`}
          </div>
          <div className="muted mono" style={{ fontSize: 11.5, marginTop: 4 }}>
            {src?.platform_group_id || src || "—"}
          </div>
        </div>
        <StatusBadge status={config.active ? "active" : "disabled"} />
      </div>

      {/* Mini flow summary */}
      <div style={{ display: "flex", alignItems: "center", gap: 6, padding: "8px 10px", background: "var(--bg-card-2)", borderRadius: 6, border: "1px solid var(--border)", fontSize: 11.5 }}>
        <span style={{ display: "inline-flex", alignItems: "center", gap: 4, color: "var(--blue)" }}>
          <I.Radio size={12} /> 1 source
        </span>
        <I.ArrowRight size={12} className="muted-2" />
        <span style={{ display: "inline-flex", alignItems: "center", gap: 4, color: "var(--accent)" }}>
          <I.Zap size={12} /> webhook
        </span>
        <I.ArrowRight size={12} className="muted-2" />
        <span style={{ display: "inline-flex", alignItems: "center", gap: 4 }}>
          <I.Bot size={12} /> {workers.length} workers
        </span>
        <I.ArrowRight size={12} className="muted-2" />
        <span style={{ display: "inline-flex", alignItems: "center", gap: 4, color: "var(--green)" }}>
          <I.MessagesSquare size={12} /> {targets.length} targets
        </span>
      </div>
    </button>
  );
};

// ─── Config form (create/edit) ───────────────────────────────────────────
const ConfigForm = ({ config, onSaved, onBack }) => {
  const toast = useToast();
  const confirm = useConfirm();

  // Load dropdown data in parallel
  const { data: allBots } = useApi(BotApi.list, []);
  const { data: allSources } = useApi(SourceGroupApi.list, []);
  const { data: allTargets } = useApi(TargetGroupApi.list, []);

  const isNew = !config?._id;

  const [form, setForm] = useState({
    _id: config?._id,
    source_group_id: config?.source_group_id?._id || config?.source_group_id || "",
    webhook_bot_id: config?.webhook_bot_id?._id || config?.webhook_bot_id || "",
    available_bots: (config?.available_bots || []).map((b) => b._id || b),
    target_groups: (config?.target_groups || []).map((t) => t._id || t),
    description: config?.description || "",
    active: config?.active !== false,
  });
  const [saving, setSaving] = useState(false);

  const set = (k, v) => setForm((f) => ({ ...f, [k]: v }));

  const toggleArray = (key, id) => {
    setForm((f) => {
      const arr = f[key];
      return { ...f, [key]: arr.includes(id) ? arr.filter((x) => x !== id) : [...arr, id] };
    });
  };

  const handleSave = async () => {
    if (!form.source_group_id) { toast.error("Source group is required"); return; }
    if (!form.webhook_bot_id) { toast.error("Webhook bot is required"); return; }
    if (form.available_bots.length === 0) { toast.error("At least 1 worker bot is required"); return; }
    if (form.target_groups.length === 0) { toast.error("At least 1 target group is required"); return; }
    if (!form.available_bots.includes(form.webhook_bot_id)) {
      toast.error("Webhook bot must be in the available bots list");
      return;
    }
    setSaving(true);
    try {
      await BotConfigApi.save(form);
      toast.success(isNew ? "Config created" : "Config saved");
      onSaved();
    } catch (e) {
      toast.error(e.message);
    } finally {
      setSaving(false);
    }
  };

  const handleDelete = async () => {
    const ok = await confirm("Delete config", "Delete this config? This cannot be undone.");
    if (!ok) return;
    try {
      await BotConfigApi.delete(form._id);
      toast.success("Config deleted");
      onBack();
    } catch (e) {
      toast.error(e.message);
    }
  };

  const bots = allBots || [];
  const sources = allSources || [];
  const targets = allTargets || [];

  return (
    <div className="page">
      <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 12, fontSize: 12 }}>
        <button className="btn ghost sm" onClick={onBack}><I.ChevronLeft /> Configs</button>
        {!isNew && <><span className="muted">/</span><span className="mono muted">{form._id}</span></>}
      </div>

      <div className="page-head">
        <div>
          <h1 className="page-title">{isNew ? "New Config" : (form.description || "Edit Config")}</h1>
          <div className="page-sub">Configure source → webhook → workers → targets routing</div>
        </div>
        <div style={{ display: "flex", gap: 8 }}>
          {!isNew && <button className="btn danger" onClick={handleDelete}><I.Trash /> Delete</button>}
          <button className="btn primary" onClick={handleSave} disabled={saving}>
            {saving ? "Saving…" : "Save"}
          </button>
        </div>
      </div>

      <div className="split">
        {/* Left column */}
        <div className="stack">
          <Card title="Description">
            <div className="field">
              <label className="field-label">Config name / description</label>
              <input className="input" value={form.description} onChange={(e) => set("description", e.target.value)} placeholder="e.g. Trading VN → 5 targets" />
            </div>
            <div className="field">
              <label className="field-label" style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                <span>Active</span>
                <input type="checkbox" checked={form.active} onChange={(e) => set("active", e.target.checked)} />
              </label>
            </div>
          </Card>

          <Card title="Source group" subtitle="Where messages come from">
            <div className="field">
              <label className="field-label">Source group</label>
              <select className="select" value={form.source_group_id} onChange={(e) => set("source_group_id", e.target.value)}>
                <option value="">— Select source group —</option>
                {sources.map((s) => (
                  <option key={s._id} value={s._id}>{s.name} ({s.platform_group_id})</option>
                ))}
              </select>
            </div>
          </Card>

          <Card title="Webhook bot" subtitle="Receives source events and dispatches to workers">
            <div className="field">
              <label className="field-label">Webhook bot</label>
              <select className="select" value={form.webhook_bot_id} onChange={(e) => set("webhook_bot_id", e.target.value)}>
                <option value="">— Select webhook bot —</option>
                {bots.filter((b) => form.available_bots.includes(b._id)).map((b) => (
                  <option key={b._id} value={b._id}>{b.name} ({b.phone})</option>
                ))}
              </select>
              <div className="field-help">Must be one of the available bots below.</div>
            </div>
          </Card>

          <Card title="Worker bots" subtitle="Pool of sender bots (load balanced)">
            <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
              {bots.map((b) => {
                const selected = form.available_bots.includes(b._id);
                return (
                  <div
                    key={b._id}
                    onClick={() => toggleArray("available_bots", b._id)}
                    style={{
                      display: "flex", alignItems: "center", gap: 10,
                      padding: "8px 12px", border: `1px solid ${selected ? "var(--accent)" : "var(--border)"}`,
                      borderRadius: 6, background: selected ? "var(--accent-bg)" : "var(--bg-card-2)",
                      cursor: "pointer", transition: "border-color .1s, background .1s",
                    }}
                  >
                    <input type="checkbox" checked={selected} readOnly style={{ pointerEvents: "none" }} />
                    <Avatar name={b.name} size="sm" />
                    <div style={{ flex: 1 }}>
                      <div style={{ fontSize: 13, fontWeight: 500 }}>{b.name}</div>
                      <div className="mono muted" style={{ fontSize: 11 }}>{b.phone}</div>
                    </div>
                    <StatusBadge status={b.status} />
                  </div>
                );
              })}
              {bots.length === 0 && <div className="muted" style={{ fontSize: 12, padding: "8px 0" }}>No bots available. Add bots first.</div>}
            </div>
          </Card>

          <Card title="Target groups" subtitle="Where forwarded messages land">
            <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
              {targets.map((t) => {
                const selected = form.target_groups.includes(t._id);
                return (
                  <div
                    key={t._id}
                    onClick={() => toggleArray("target_groups", t._id)}
                    style={{
                      display: "flex", alignItems: "center", gap: 10,
                      padding: "8px 12px", border: `1px solid ${selected ? "var(--green)" : "var(--border)"}`,
                      borderRadius: 6, background: selected ? "var(--green-bg)" : "var(--bg-card-2)",
                      cursor: "pointer", transition: "border-color .1s, background .1s",
                    }}
                  >
                    <input type="checkbox" checked={selected} readOnly style={{ pointerEvents: "none" }} />
                    <I.MessagesSquare size={14} style={{ color: selected ? "var(--green)" : "var(--fg-4)", flexShrink: 0 }} />
                    <div style={{ flex: 1 }}>
                      <div style={{ fontSize: 13, fontWeight: 500 }}>{t.name}</div>
                      <div className="mono muted" style={{ fontSize: 11 }}>{t.platform_group_id}</div>
                    </div>
                    <PlatformChip platform={t.platform} />
                  </div>
                );
              })}
              {targets.length === 0 && <div className="muted" style={{ fontSize: 12, padding: "8px 0" }}>No target groups. Add target groups first.</div>}
            </div>
          </Card>
        </div>

        {/* Right column — summary */}
        <div className="stack">
          <Card title="Summary">
            <div style={{ display: "flex", flexDirection: "column", gap: 8, fontSize: 13 }}>
              <div style={{ display: "flex", justifyContent: "space-between" }}>
                <span className="muted">Source</span>
                <span>{sources.find((s) => s._id === form.source_group_id)?.name || "—"}</span>
              </div>
              <div style={{ display: "flex", justifyContent: "space-between" }}>
                <span className="muted">Webhook bot</span>
                <span>{bots.find((b) => b._id === form.webhook_bot_id)?.name || "—"}</span>
              </div>
              <div style={{ display: "flex", justifyContent: "space-between" }}>
                <span className="muted">Workers</span>
                <span className="tnum">{form.available_bots.length}</span>
              </div>
              <div style={{ display: "flex", justifyContent: "space-between" }}>
                <span className="muted">Targets</span>
                <span className="tnum">{form.target_groups.length}</span>
              </div>
              <div style={{ display: "flex", justifyContent: "space-between" }}>
                <span className="muted">Status</span>
                <StatusBadge status={form.active ? "active" : "disabled"} />
              </div>
            </div>
          </Card>
        </div>
      </div>
    </div>
  );
};

// ─── Config list screen ──────────────────────────────────────────────────
const ConfigsList = ({ onOpen, onNew }) => {
  const { data: configs, loading, error, refetch } = useApi(BotConfigApi.list, []);

  if (error) return (
    <div className="page">
      <Empty icon={I.AlertTriangle} title="Failed to load configs" sub={error} action={<button className="btn" onClick={refetch}><I.Refresh /> Retry</button>} />
    </div>
  );

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1 className="page-title">Bot Configs</h1>
          <div className="page-sub">Routing flows: source → webhook → worker bots → target groups.</div>
        </div>
        <div style={{ display: "flex", gap: 8 }}>
          <button className="btn" onClick={refetch}><I.Refresh /> Refresh</button>
          <button className="btn primary" onClick={onNew}><I.Plus /> New config</button>
        </div>
      </div>

      {loading ? (
        <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 12 }}>
          {[1, 2, 3, 4].map((i) => (
            <div key={i} className="skeleton" style={{ height: 120, borderRadius: 8 }}></div>
          ))}
        </div>
      ) : (configs || []).length === 0 ? (
        <Empty icon={I.Workflow} title="No configs yet" sub="Create a config to start routing messages." action={<button className="btn primary" onClick={onNew}><I.Plus /> New config</button>} />
      ) : (
        <div className="config-grid">
          {(configs || []).map((c) => (
            <ConfigCard key={c._id} config={c} onOpen={() => onOpen(c._id)} />
          ))}
        </div>
      )}
    </div>
  );
};

// ─── Configs router (list ↔ detail) ─────────────────────────────────────
const ConfigsScreen = () => {
  const [view, setView] = useState("list"); // "list" | "new" | configId
  const { data: config, loading } = useApi(
    () => (view !== "list" && view !== "new" ? BotConfigApi.get(view) : Promise.resolve(null)),
    [view]
  );

  if (view === "list") {
    return <ConfigsList onOpen={(id) => setView(id)} onNew={() => setView("new")} />;
  }
  if (view === "new") {
    return <ConfigForm config={null} onSaved={() => setView("list")} onBack={() => setView("list")} />;
  }
  if (loading) return <div className="page"><div className="muted" style={{ paddingTop: 40, textAlign: "center" }}>Loading config…</div></div>;
  return <ConfigForm config={config} onSaved={() => setView("list")} onBack={() => setView("list")} />;
};

window.ConfigsScreen = ConfigsScreen;