import { useState } from "react";
import { adminListPersonas, adminSaveChannelConfig } from "../../lib/api";
import type { PersonaRecord } from "../../lib/types";
import { useAsyncData } from "../../lib/useAsyncData";
import { useAuditStore } from "../audit";
import { Button, Surface, Tag } from "../../components/primitives";
import { Icon } from "../../components/Icon";
import { withChannelPersona } from "./channels/channelPersona";
import { limitRequestBody } from "./channels/channelUtils";
import { PLATFORM_FIELDS, PLATFORM_GUIDE, PLATFORM_LABEL } from "./channelFields";

/** Prefill bundle computed by the module's openConfig from the backend record
 *  (masked token is echoed only as a hint, never as a raw value). */
export interface ChannelConfigInitial {
  accountId: string;
  tokenHint: string;
  baseURL: string;
  platVals: Record<string, string>;
  allowGroups: string;
  denyGroups: string;
  allowUsers: string;
  denyUsers: string;
  groupMsgPerMin: string;
  msgPerMin: string;
  maxMessages: string;
  /** The account's bound role, `''` = 未绑定（跟随默认角色）(design/22 §4.4). */
  personaId: string;
}

interface ChannelConfigFormProps {
  platform: string;
  initial: ChannelConfigInitial;
  busy: string | null;
  setBusy: (v: string | null) => void;
  onSaved: (msg: string) => void;
  onError: (msg: string) => void;
  onClose: () => void;
}

/** The channel account config form. Owns its own field state so the module stays
 *  under the 500-line bound; remounts per platform via key={platform}. */
export function ChannelConfigForm({
  platform,
  initial,
  busy,
  setBusy,
  onSaved,
  onError,
  onClose,
}: ChannelConfigFormProps): React.ReactNode {
  const log = useAuditStore((s) => s.log);
  const [cfgId, setCfgId] = useState(initial.accountId);
  const [token, setToken] = useState("");
  const [baseURL, setBaseURL] = useState(initial.baseURL);
  const [platVals, setPlatVals] = useState<Record<string, string>>(initial.platVals);
  const [allowGroups, setAllowGroups] = useState(initial.allowGroups);
  const [denyGroups, setDenyGroups] = useState(initial.denyGroups);
  const [allowUsers, setAllowUsers] = useState(initial.allowUsers);
  const [denyUsers, setDenyUsers] = useState(initial.denyUsers);
  const [groupMsgPerMin, setGroupMsgPerMin] = useState(initial.groupMsgPerMin);
  const [msgPerMin, setMsgPerMin] = useState(initial.msgPerMin);
  const [maxMessages, setMaxMessages] = useState(initial.maxMessages);
  const [extraConfig, setExtraConfig] = useState("");
  const [advOpen, setAdvOpen] = useState(false);
  const [polOpen, setPolOpen] = useState(false);
  const [tokenHint, setTokenHint] = useState(initial.tokenHint);
  // Channel-level role binding (design/22 §4.4). `dirty` tells an explicit clear
  // (owner picked「跟随默认角色」) from a value the form simply never had, so an
  // untouched unbound account does not write an empty personaId over a stored one.
  const [personaId, setPersonaId] = useState(initial.personaId);
  const [personaDirty, setPersonaDirty] = useState(false);
  const personas = useAsyncData(adminListPersonas, []);

  const save = () => {
    if (!platform) return;
    setBusy("__save__");
    const toList = (s: string) => s.split(/[\n,]/).map((x) => x.trim()).filter(Boolean);
    const specificMap: Record<string, unknown> = {};
    for (const f of PLATFORM_FIELDS[platform] ?? []) {
      const v = (platVals[f.key] ?? "").trim();
      if (v) specificMap[f.key] = v;
    }
    let configMap: Record<string, unknown> | undefined;
    if (extraConfig.trim()) {
      let extra: unknown;
      try {
        extra = JSON.parse(extraConfig);
      } catch {
        onError("额外配置 JSON 格式有误");
        setBusy(null);
        return;
      }
      if (typeof extra !== "object" || extra === null || Array.isArray(extra)) {
        onError("额外配置 JSON 需为对象（如 {\"receive_mode\":\"ws\"}）");
        setBusy(null);
        return;
      }
      configMap = { ...specificMap, ...(extra as Record<string, unknown>) };
    } else if (Object.keys(specificMap).length) {
      configMap = specificMap;
    }
    // 限流三键：留空的**不进请求体**（后端 int 契约下省略 = 0 = 未设置），非法输入整单
    // 拒绝 —— 已设限额只可能被「没回显出来」或「NaN → null」清掉，两条路都在这里封死。
    const limits = limitRequestBody({ groupMsgPerMin, msgPerMin, maxMessages });
    if (!limits.ok) {
      onError(limits.error);
      setBusy(null);
      return;
    }
    adminSaveChannelConfig(
      platform,
      withChannelPersona(
        {
          id: cfgId.trim() || undefined,
          token: token.trim() || undefined,
          baseURL: baseURL.trim() || undefined,
          config: configMap,
          allowGroups: toList(allowGroups),
          denyGroups: toList(denyGroups),
          allowUsers: toList(allowUsers),
          denyUsers: toList(denyUsers),
          ...limits.body,
        },
        { id: personaId, dirty: personaDirty },
      ),
    )
      .then((r) => {
        log("channel.save", "ok");
        onSaved(`已保存到 channels.json 并热更新 ${r.platform}（${r.path}），账号 ${r.accountId}`);
        setCfgId("");
        setToken("");
        setBaseURL("");
        setPlatVals({});
        setAllowGroups("");
        setDenyGroups("");
        setAllowUsers("");
        setDenyUsers("");
        setGroupMsgPerMin("");
        setMsgPerMin("");
        setMaxMessages("");
        setExtraConfig("");
        setPersonaId("");
        setPersonaDirty(false);
      })
      .catch((e: unknown) => {
        log("channel.save", "error");
        onError(e instanceof Error ? e.message : "保存渠道配置失败");
      })
      .finally(() => setBusy(null));
  };

  return (
    <Surface className="space-y-3">
      <h3 className="text-sm font-semibold">配置账号 → {PLATFORM_LABEL[platform] ?? platform}</h3>
      <p className="text-xs text-[var(--mu-text-lo)]">
        保存后写入 channels.json（本地、已 gitignore）并热更新 {platform} 的渠道 adapter，无需重启进程。token 只在写文件时出现，列表/响应不回显裸值。
      </p>

      {/* 核心必填：最小必备字段 + 醒目 Callout / 高亮 Tag，不平铺全量 */}
      <div className="space-y-2 rounded-[var(--mu-radius)] border border-[var(--mu-accent)]/25 bg-[var(--mu-surface-4)] p-3">
        <div className="flex items-center gap-1.5 text-sm font-semibold text-[var(--mu-accent-hi)]">
          <Icon name="check" size={16} className="text-[var(--mu-accent)]" />
          核心必填
        </div>
        <div className="rounded-[var(--mu-radius)] bg-[var(--mu-accent)]/15 px-3 py-2 text-xs leading-relaxed text-[var(--mu-accent-hi)]">
          {PLATFORM_GUIDE[platform].guide}
        </div>
        <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
          <Field label="账号 ID（留空自动生成）" value={cfgId} onChange={setCfgId} placeholder="conf0" />
          <label className="block space-y-1">
            <span className="flex items-center gap-1.5 text-xs text-[var(--mu-text-lo)]">
              Token（bot_token）
              {PLATFORM_GUIDE[platform].tokenRequired !== false ? (
                <span className="rounded-[var(--mu-radius-xs)] bg-[var(--mu-err)]/15 px-1.5 py-0.5 text-[10px] font-medium text-[var(--mu-err)]">必填</span>
              ) : null}
            </span>
            <input type="password" value={token} onChange={(e) => setToken(e.target.value)} placeholder="机器人 token" className={`${inputCls} border border-[var(--mu-accent)]/25`} />
            {tokenHint ? <span className="block text-[11px] text-[var(--mu-text-lo)]">{tokenHint}</span> : null}
          </label>
        </div>
        {PLATFORM_GUIDE[platform].hint ? (
          <p className="text-xs leading-relaxed text-[var(--mu-text-lo)]">{PLATFORM_GUIDE[platform].hint}</p>
        ) : null}
      </div>

      <ChannelPersonaField
        value={personaId}
        onChange={(id) => {
          setPersonaId(id);
          setPersonaDirty(true);
        }}
        personas={personas.data ?? []}
        loadError={personas.error}
      />

      {/* 高级选项（连接配置）：base_url / 平台特定字段 / 额外 config。业务策略单独一区。 */}
      <div className="overflow-hidden rounded-[var(--mu-radius)] border border-[var(--mu-glass-border)] bg-[var(--mu-surface-2)]">
        <button
          type="button"
          onClick={() => setAdvOpen((v) => !v)}
          className="flex w-full items-center gap-2 px-3 py-2.5 text-xs font-medium text-[var(--mu-text-mid)] transition-colors duration-200 hover:bg-[var(--mu-surface-4)]/40"
        >
          <span className={`shrink-0 transition-transform duration-200 ease-[var(--mu-spring)] ${advOpen ? "rotate-90" : ""}`}>
            <Icon name="arrow" size={13} className="text-[var(--mu-text-lo)]" />
          </span>
          高级选项（base_url / 平台特定字段 / 额外 config）
        </button>
        {advOpen ? (
          <div className="space-y-3 px-3 pb-3 pt-1">
            <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
              <Field label="baseURL（地址）" value={baseURL} onChange={setBaseURL} placeholder="https://…" />
              {(PLATFORM_FIELDS[platform] ?? []).map((f) => (
                <Field key={f.key} label={f.label} value={platVals[f.key] ?? ""} onChange={(v) => setPlatVals((prev) => ({ ...prev, [f.key]: v }))} placeholder={f.placeholder} secret={f.secret} />
              ))}
            </div>
            <label className="block space-y-1">
              <span className="text-xs text-[var(--mu-text-lo)]">额外 config（可选 JSON，覆盖平台特有字段如 webhook_url/endpointPath/secret）</span>
              <textarea value={extraConfig} onChange={(e) => setExtraConfig(e.target.value)} rows={2} placeholder='{"webhook_url":"…"}' className="w-full rounded-[var(--mu-radius)] bg-[var(--mu-surface-2)] px-3 py-2 text-sm outline-none focus:ring-1 focus:ring-[var(--mu-accent)]" />
            </label>
          </div>
        ) : null}
      </div>

      {/* 业务策略（独立于连接配置）：黑白名单 / 限流——管准入与降噪，不参与端到端连接。 */}
      <div className="overflow-hidden rounded-[var(--mu-radius)] border border-[var(--mu-glass-border)] bg-[var(--mu-surface-2)]">
        <button
          type="button"
          onClick={() => setPolOpen((v) => !v)}
          className="flex w-full items-center gap-2 px-3 py-2.5 text-xs font-medium text-[var(--mu-text-mid)] transition-colors duration-200 hover:bg-[var(--mu-surface-4)]/40"
        >
          <span className={`shrink-0 transition-transform duration-200 ease-[var(--mu-spring)] ${polOpen ? "rotate-90" : ""}`}>
            <Icon name="arrow" size={13} className="text-[var(--mu-text-lo)]" />
          </span>
          业务策略（黑白名单 / 群聊限流——不参与连接配置）
        </button>
        {polOpen ? (
          <div className="space-y-2 px-3 pb-3 pt-1">
            {/* 数值语义按 internal/services/channelbridge/flowgate.go 的 flowOrDefault：
                0 = 保护性默认（群 6 条/分、待处理上限 50），负值 = 关闭限制；msgPerMin 只认正值。 */}
            <p className="text-[11px] leading-relaxed text-[var(--mu-text-lo)]">
              留空 = 未设置（不动盘上的值）；<code>groupMsgPerMin</code>/<code>maxMessages</code> 填
              <strong className="font-medium"> 0 = 该渠道的保护性默认</strong>（群 6 条/分、待处理 50 条），
              <strong className="font-medium">负值 = 关闭该限制</strong>；<code>msgPerMin</code> 只认正值（留空/0 = 不限）。
            </p>
            <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
              <Field label="allowGroups（逗号分隔白名单）" value={allowGroups} onChange={setAllowGroups} />
              <Field label="denyGroups（黑名单）" value={denyGroups} onChange={setDenyGroups} />
              <Field label="allowUsers（白名单）" value={allowUsers} onChange={setAllowUsers} />
              <Field label="denyUsers（黑名单）" value={denyUsers} onChange={setDenyUsers} />
              <Field label="groupMsgPerMin（每群每分钟上限）" value={groupMsgPerMin} onChange={setGroupMsgPerMin} inputMode="numeric" />
              <Field label="msgPerMin（每分钟总上限）" value={msgPerMin} onChange={setMsgPerMin} inputMode="numeric" />
              <Field label="maxMessages（待处理消息上限）" value={maxMessages} onChange={setMaxMessages} inputMode="numeric" />
            </div>
          </div>
        ) : null}
      </div>

      <div className="flex items-center gap-2">
        <Button variant="primary" disabled={busy !== null} onClick={save}>保存配置</Button>
        <Button variant="ghost" disabled={busy !== null} onClick={onClose}>取消</Button>
      </div>
    </Surface>
  );
}

const inputCls =
  "w-full rounded-[var(--mu-radius)] bg-[var(--mu-surface-2)] px-3 py-2 text-sm outline-none focus:ring-1 focus:ring-[var(--mu-accent)]";

/** Channel-level role binding (design/22 §4.4, 批次 2). The copy is deliberately
 *  explicit that this cannot reach an isolated conversation: 群聊/陌生人 always
 *  run as the default role, and a session's own binding outranks the account's. */
function ChannelPersonaField({
  value,
  onChange,
  personas,
  loadError,
}: {
  value: string;
  onChange: (personaId: string) => void;
  personas: PersonaRecord[];
  loadError: string | null;
}): React.ReactNode {
  const bound = value.trim();
  const known = personas.find((p) => p.id === bound);
  const unknown = bound !== "" && known === undefined;
  return (
    <div className="space-y-2 rounded-[var(--mu-radius)] border border-[var(--mu-glass-border)] bg-[var(--mu-surface-2)] p-3">
      <div className="flex flex-wrap items-center gap-2">
        <span className="text-sm font-semibold">角色（渠道级绑定）</span>
        {bound === "" ? (
          <Tag tone="neutral">未绑定 · 跟随默认角色</Tag>
        ) : (
          <Tag tone="accent">已绑定 · {known?.name ?? bound}</Tag>
        )}
      </div>
      <label className="block space-y-1">
        <span className="text-xs text-[var(--mu-text-lo)]">
          该渠道账号在非隔离会话（与主人的私聊等）中使用的角色
        </span>
        <select
          value={value}
          onChange={(e) => onChange(e.target.value)}
          aria-label="渠道账号绑定的角色"
          className={inputCls}
        >
          <option value="">跟随默认角色（未绑定）</option>
          {unknown ? <option value={bound}>{bound}（不在角色列表）</option> : null}
          {personas.map((p) => (
            <option key={p.id} value={p.id}>
              {p.name}
              {p.isDefault ? " · 默认" : ""}
            </option>
          ))}
        </select>
      </label>
      <p className="text-[11px] leading-relaxed text-[var(--mu-text-lo)]">
        角色解析顺序：会话绑定 &gt; 渠道绑定 &gt; 全局默认。
        渠道绑定<strong className="font-medium">只影响该账号与主人的私聊等非隔离会话</strong>；
        群聊 / 陌生人会话始终使用默认角色，此处的绑定覆盖不了它们。
      </p>
      {loadError ? (
        <p className="text-[11px] text-[var(--mu-err)]">
          角色列表读取失败（{loadError}）：不改动该下拉时保存会原样保留当前绑定；请确认后端在线后重试再改。
        </p>
      ) : null}
    </div>
  );
}

/** Compact labeled input for the config form; `secret` masks the field. */
interface FieldProps {
  label: string;
  value: string;
  onChange: (v: string) => void;
  placeholder?: string;
  secret?: boolean;
  inputMode?: "text" | "numeric";
}

function Field({ label, value, onChange, placeholder, secret, inputMode = "text" }: FieldProps): React.ReactNode {
  return (
    <label className="block space-y-1">
      <span className="text-xs text-[var(--mu-text-lo)]">{label}</span>
      <input
        type={secret ? "password" : "text"}
        value={value}
        onChange={(e) => onChange(e.target.value)}
        placeholder={placeholder}
        inputMode={inputMode}
        className={inputCls}
      />
    </label>
  );
}