import { segmentApi } from "./api.js";
import { el, escapeHtml, setBanner } from "./dom.js";

const SEGMENT_TYPES = [
  "front_load",
  "robot",
  "front_release",
  "front_transfer",
  "kiln_infeed",
  "kiln_step",
  "kiln_outfeed",
  "tail_transfer",
  "tail_step",
  "unload",
  "return",
];

const SEGMENT_MODES = ["auto", "remote_manual", "local_manual", "disabled"];

const ACTION_KINDS = [
  "open_door",
  "close_door",
  "push_forward",
  "push_retract",
  "pull_run",
  "pull_retract",
  "transfer_move_to",
  "step_once",
  "robot_permit",
  "robot_release",
  "wait_signal",
  "pulse_cmd",
];

const ON_TIMEOUT = ["fault", "retry", "block"];

const APPLIES_TO = ["start_allow", "start_deny", "run_halt"];

const RULE_KINDS = [
  "point_eq",
  "station_vacant",
  "station_occupied",
  "equipment_origin",
  "equipment_no_fault",
  "equipment_remote",
  "safety_chain_ok",
];

const segments = new Map();
const segmentDetails = new Map(); // id -> { segment, steps, interlocks, resources }
const expanded = new Set();
let editing = null;
let creating = false;

function renderSegmentForm(initial) {
  const data = initial || {};
  return `
    <form class="config-form" data-form="segment">
      <div class="form-row">
        <label>Code<input name="code" value="${escapeHtml(data.code)}" required maxlength="100" /></label>
        <label>名称<input name="name" value="${escapeHtml(data.name)}" required maxlength="100" /></label>
      </div>
      <div class="form-row">
        <label>段类型
          <select name="segment_type" required>
            ${SEGMENT_TYPES.map(
              (t) => `<option value="${t}"${data.segment_type === t ? " selected" : ""}>${t}</option>`,
            ).join("")}
          </select>
        </label>
        <label>线路<input name="line_code" value="${escapeHtml(data.line_code)}" maxlength="50" /></label>
      </div>
      <div class="form-row">
        <label>模式
          <select name="mode" required>
            ${SEGMENT_MODES.map(
              (m) => `<option value="${m}"${(data.mode || "disabled") === m ? " selected" : ""}>${m}</option>`,
            ).join("")}
          </select>
        </label>
        <label>优先级<input type="number" name="priority" value="${data.priority ?? 0}" /></label>
      </div>
      <div class="form-row">
        <label class="form-check">
          <input type="checkbox" name="enabled" ${data.enabled === false ? "" : "checked"} />
          启用
        </label>
        <label class="form-check">
          <input type="checkbox" name="require_manual_ack_after_fault" ${data.require_manual_ack_after_fault === false ? "" : "checked"} />
          故障需手工确认
        </label>
      </div>
      <label>说明<textarea name="description" maxlength="500">${escapeHtml(data.description)}</textarea></label>
      <div class="form-actions">
        <button type="button" data-action="cancel-form" class="secondary">取消</button>
        <button type="submit">保存</button>
      </div>
    </form>
  `;
}

function renderStepRow(step) {
  return `
    <tr>
      <td>${step.step_no}</td>
      <td>${escapeHtml(step.step_code)}</td>
      <td>${escapeHtml(step.action_kind)}</td>
      <td class="mono">${escapeHtml(step.target_equipment_id || "")}</td>
      <td class="mono">${escapeHtml(step.target_station_id || "")}</td>
      <td>${escapeHtml(step.confirm_signal_role || "")}</td>
      <td>${step.timeout_ms}</td>
      <td>${step.hold_until_confirm ? "保持" : "脉冲"}</td>
      <td>${escapeHtml(step.on_timeout)}</td>
      <td><button data-action="delete-step" data-step-no="${step.step_no}" class="secondary">删除</button></td>
    </tr>
  `;
}

function renderStepForm() {
  return `
    <form class="config-form step-form" data-form="step">
      <div class="form-row">
        <label>步序<input name="step_no" type="number" min="1" required /></label>
        <label>Code<input name="step_code" required maxlength="64" /></label>
        <label>Action
          <select name="action_kind" required>
            ${ACTION_KINDS.map((a) => `<option value="${a}">${a}</option>`).join("")}
          </select>
        </label>
      </div>
      <div class="form-row">
        <label>目标设备 ID<input name="target_equipment_id" placeholder="UUID" /></label>
        <label>目标工位 ID<input name="target_station_id" placeholder="UUID" /></label>
        <label>确认信号<input name="confirm_signal_role" placeholder="arrived / done / ..." /></label>
      </div>
      <div class="form-row">
        <label>命令角色<input name="command_role" placeholder="留空走默认" /></label>
        <label>停止角色<input name="stop_command_role" /></label>
        <label>脉冲毫秒<input name="pulse_ms" type="number" min="1" /></label>
      </div>
      <div class="form-row">
        <label>超时 ms<input name="timeout_ms" type="number" min="1" value="30000" /></label>
        <label>on_timeout
          <select name="on_timeout">${ON_TIMEOUT.map((v) => `<option value="${v}">${v}</option>`).join("")}</select>
        </label>
        <label class="form-check"><input type="checkbox" name="hold_until_confirm" />持续命令</label>
        <label class="form-check"><input type="checkbox" name="cancel_on_fault" checked />故障自动停止</label>
      </div>
      <div class="form-actions">
        <button type="submit">新增步骤</button>
      </div>
    </form>
  `;
}

function renderInterlockRow(rule) {
  return `
    <tr>
      <td>${escapeHtml(rule.applies_to)}</td>
      <td>${escapeHtml(rule.rule_kind)}</td>
      <td class="mono">${escapeHtml(rule.point_id || rule.station_id || rule.equipment_id || "")}</td>
      <td>${rule.expected_value === null || rule.expected_value === undefined ? "" : rule.expected_value ? "true" : "false"}</td>
      <td>${escapeHtml(rule.description || "")}</td>
      <td><button data-action="delete-interlock" data-id="${rule.id}" class="secondary">删除</button></td>
    </tr>
  `;
}

function renderInterlockForm() {
  return `
    <form class="config-form interlock-form" data-form="interlock">
      <div class="form-row">
        <label>applies_to
          <select name="applies_to" required>${APPLIES_TO.map((v) => `<option value="${v}">${v}</option>`).join("")}</select>
        </label>
        <label>rule_kind
          <select name="rule_kind" required>${RULE_KINDS.map((v) => `<option value="${v}">${v}</option>`).join("")}</select>
        </label>
      </div>
      <div class="form-row">
        <label>Point ID<input name="point_id" /></label>
        <label>Station ID<input name="station_id" /></label>
        <label>Equipment ID<input name="equipment_id" /></label>
      </div>
      <div class="form-row">
        <label>期望值
          <select name="expected_value">
            <option value="">(none)</option>
            <option value="true">true</option>
            <option value="false">false</option>
          </select>
        </label>
        <label>说明<input name="description" maxlength="200" /></label>
      </div>
      <div class="form-actions">
        <button type="submit">新增联锁</button>
      </div>
    </form>
  `;
}

function renderResourcesEditor(detail) {
  const keys = (detail?.resources || []).map((r) => r.resource_key);
  return `
    <form class="config-form resource-form" data-form="resources">
      <label>资源键（逗号或换行分隔）
        <textarea name="resource_keys" rows="2">${escapeHtml(keys.join(", "))}</textarea>
      </label>
      <div class="form-actions">
        <button type="submit">保存资源列表</button>
      </div>
    </form>
  `;
}

function renderDetail(detail) {
  const steps = detail?.steps || [];
  const interlocks = detail?.interlocks || [];
  return `
    <div class="row-body">
      <h3 class="row-section-title">步骤</h3>
      ${
        steps.length === 0
          ? `<div class="muted card-empty">暂无步骤</div>`
          : `<table class="config-table">
              <thead>
                <tr><th>#</th><th>Code</th><th>Action</th><th>设备</th><th>工位</th><th>确认</th><th>超时</th><th>方式</th><th>超时策略</th><th></th></tr>
              </thead>
              <tbody>${steps.map(renderStepRow).join("")}</tbody>
            </table>`
      }
      ${renderStepForm()}

      <h3 class="row-section-title">联锁</h3>
      ${
        interlocks.length === 0
          ? `<div class="muted card-empty">暂无联锁</div>`
          : `<table class="config-table">
              <thead>
                <tr><th>applies_to</th><th>rule_kind</th><th>对象 ID</th><th>期望</th><th>说明</th><th></th></tr>
              </thead>
              <tbody>${interlocks.map(renderInterlockRow).join("")}</tbody>
            </table>`
      }
      ${renderInterlockForm()}

      <h3 class="row-section-title">资源声明</h3>
      ${renderResourcesEditor(detail)}
    </div>
  `;
}

function renderRow(segment) {
  const isExpanded = expanded.has(segment.id);
  const isEditing = editing === segment.id;
  const detail = segmentDetails.get(segment.id);
  return `
    <article class="config-row" data-segment-id="${segment.id}">
      <header class="row-head">
        <div class="row-title">
          <strong>${escapeHtml(segment.code)}</strong>
          <span class="muted">${escapeHtml(segment.name)}</span>
          ${segment.line_code ? `<span class="badge">${escapeHtml(segment.line_code)}</span>` : ""}
          <span class="badge">${escapeHtml(segment.segment_type)}</span>
          <span class="badge">${escapeHtml(segment.mode)}</span>
          ${segment.enabled ? "" : `<span class="badge badge-warn">已禁用</span>`}
        </div>
        <div class="row-actions">
          <button data-action="toggle">${isExpanded ? "收起" : "详情"}</button>
          <button data-action="edit">${isEditing ? "取消" : "编辑"}</button>
          <button data-action="delete" class="danger">删除</button>
        </div>
      </header>
      ${isEditing ? `<div class="row-edit">${renderSegmentForm(segment)}</div>` : ""}
      ${isExpanded ? renderDetail(detail) : ""}
    </article>
  `;
}

function renderAll() {
  const root = el("segmentConfigList");
  if (!root) return;
  const list = Array.from(segments.values()).sort((a, b) => a.code.localeCompare(b.code));
  root.innerHTML = `
    ${creating ? `<div class="config-row creating">${renderSegmentForm({})}</div>` : ""}
    ${list.length === 0 ? `<div class="muted card-empty">尚无段</div>` : list.map(renderRow).join("")}
  `;
}

function segmentFormToPayload(form) {
  const data = Object.fromEntries(new FormData(form));
  const payload = {
    code: data.code?.trim(),
    name: data.name?.trim(),
    segment_type: data.segment_type,
    mode: data.mode,
    enabled: form.elements.enabled.checked,
    require_manual_ack_after_fault: form.elements.require_manual_ack_after_fault.checked,
    priority: Number(data.priority || 0),
  };
  if (data.line_code) payload.line_code = data.line_code.trim();
  if (data.description) payload.description = data.description;
  return payload;
}

function stepFormToPayload(form) {
  const data = Object.fromEntries(new FormData(form));
  const payload = {
    step_no: Number(data.step_no),
    step_code: data.step_code,
    action_kind: data.action_kind,
    on_timeout: data.on_timeout || "fault",
    hold_until_confirm: form.elements.hold_until_confirm.checked,
    cancel_on_fault: form.elements.cancel_on_fault.checked,
  };
  for (const key of [
    "target_equipment_id",
    "target_station_id",
    "confirm_signal_role",
    "command_role",
    "stop_command_role",
  ]) {
    if (data[key]) payload[key] = data[key].trim();
  }
  if (data.pulse_ms) payload.pulse_ms = Number(data.pulse_ms);
  if (data.timeout_ms) payload.timeout_ms = Number(data.timeout_ms);
  return payload;
}

function interlockFormToPayload(form) {
  const data = Object.fromEntries(new FormData(form));
  const payload = {
    applies_to: data.applies_to,
    rule_kind: data.rule_kind,
  };
  for (const key of ["point_id", "station_id", "equipment_id"]) {
    if (data[key]) payload[key] = data[key].trim();
  }
  if (data.expected_value === "true") payload.expected_value = true;
  else if (data.expected_value === "false") payload.expected_value = false;
  if (data.description) payload.description = data.description;
  return payload;
}

async function refreshDetail(segmentId) {
  try {
    const detail = await segmentApi.detail(segmentId);
    segmentDetails.set(segmentId, detail);
  } catch (err) {
    setBanner(el("segmentConfigList"), err.message || String(err), "error");
  }
}

async function handleClick(event) {
  const button = event.target.closest("button[data-action]");
  if (!button) return;
  const action = button.dataset.action;
  const row = event.target.closest(".config-row");
  const segmentId = row?.dataset?.segmentId;

  switch (action) {
    case "cancel-form":
      creating = false;
      editing = null;
      return renderAll();
    case "toggle":
      if (!segmentId) return;
      if (expanded.has(segmentId)) {
        expanded.delete(segmentId);
      } else {
        expanded.add(segmentId);
        await refreshDetail(segmentId);
      }
      return renderAll();
    case "edit":
      editing = editing === segmentId ? null : segmentId;
      return renderAll();
    case "delete":
      if (!segmentId) return;
      if (!window.confirm("确认删除该段及其步骤 / 联锁 / 资源声明？")) return;
      try {
        await segmentApi.remove(segmentId);
        segments.delete(segmentId);
        segmentDetails.delete(segmentId);
        expanded.delete(segmentId);
        if (editing === segmentId) editing = null;
        renderAll();
        setBanner(el("segmentConfigList"), "段已删除", "info");
      } catch (err) {
        setBanner(el("segmentConfigList"), err.message || String(err), "error");
      }
      return;
    case "delete-step": {
      if (!segmentId) return;
      const stepNo = button.dataset.stepNo;
      try {
        await segmentApi.deleteStep(segmentId, stepNo);
        await refreshDetail(segmentId);
        renderAll();
        setBanner(el("segmentConfigList"), `已删除步骤 ${stepNo}`, "info");
      } catch (err) {
        setBanner(el("segmentConfigList"), err.message || String(err), "error");
      }
      return;
    }
    case "delete-interlock": {
      if (!segmentId) return;
      const interlockId = button.dataset.id;
      try {
        await segmentApi.deleteInterlock(segmentId, interlockId);
        await refreshDetail(segmentId);
        renderAll();
        setBanner(el("segmentConfigList"), "已删除联锁", "info");
      } catch (err) {
        setBanner(el("segmentConfigList"), err.message || String(err), "error");
      }
      return;
    }
    default:
      return;
  }
}

async function handleSubmit(event) {
  const form = event.target.closest("form[data-form]");
  if (!form) return;
  event.preventDefault();
  const row = form.closest(".config-row");
  const segmentId = row?.dataset?.segmentId;
  const kind = form.dataset.form;

  if (kind === "segment") {
    const payload = segmentFormToPayload(form);
    try {
      if (segmentId && editing === segmentId) {
        await segmentApi.update(segmentId, payload);
        setBanner(el("segmentConfigList"), "段已更新", "info");
      } else {
        await segmentApi.create(payload);
        setBanner(el("segmentConfigList"), "段已创建", "info");
      }
      creating = false;
      editing = null;
      await loadSegmentsConfig();
    } catch (err) {
      setBanner(el("segmentConfigList"), err.message || String(err), "error");
    }
    return;
  }

  if (!segmentId) return;

  if (kind === "step") {
    const payload = stepFormToPayload(form);
    try {
      await segmentApi.createStep(segmentId, payload);
      await refreshDetail(segmentId);
      renderAll();
      setBanner(el("segmentConfigList"), "步骤已新增", "info");
    } catch (err) {
      setBanner(el("segmentConfigList"), err.message || String(err), "error");
    }
    return;
  }

  if (kind === "interlock") {
    const payload = interlockFormToPayload(form);
    try {
      await segmentApi.createInterlock(segmentId, payload);
      await refreshDetail(segmentId);
      renderAll();
      setBanner(el("segmentConfigList"), "联锁已新增", "info");
    } catch (err) {
      setBanner(el("segmentConfigList"), err.message || String(err), "error");
    }
    return;
  }

  if (kind === "resources") {
    const raw = form.elements.resource_keys.value || "";
    const keys = raw
      .split(/[,\n]/)
      .map((k) => k.trim())
      .filter((k) => k.length > 0);
    try {
      await segmentApi.replaceResources(segmentId, keys);
      await refreshDetail(segmentId);
      renderAll();
      setBanner(el("segmentConfigList"), "资源声明已保存", "info");
    } catch (err) {
      setBanner(el("segmentConfigList"), err.message || String(err), "error");
    }
  }
}

export async function loadSegmentsConfig() {
  try {
    const rows = await segmentApi.list();
    segments.clear();
    rows.forEach((s) => segments.set(s.id, s));
    renderAll();
  } catch (err) {
    setBanner(el("segmentConfigList"), err.message || String(err), "error");
  }
}

export function bindSegmentConfigEvents() {
  const root = el("segmentConfigList");
  if (root) {
    root.addEventListener("click", handleClick);
    root.addEventListener("submit", handleSubmit);
  }
  const addBtn = el("addSegmentBtn");
  if (addBtn) {
    addBtn.addEventListener("click", () => {
      creating = !creating;
      editing = null;
      renderAll();
    });
  }
  const refreshBtn = el("refreshSegmentConfigBtn");
  if (refreshBtn) refreshBtn.addEventListener("click", () => loadSegmentsConfig());
}