(() => {
  "use strict";

  const catalog = [
    { code: "5001", title: "1열판 · 기본", detail: "종목 현재가 / 등락", category: "plate", market: "kospi" },
    { code: "5006", title: "1열판 · 시가", detail: "시가 정보", category: "plate", market: "kosdaq" },
    { code: "5016", title: "3열판 · 주요 지수", detail: "국내외 지수 3열 구성", category: "plate", market: "index" },
    { code: "5023", title: "매매동향 · 지수별", detail: "코스피 / 코스닥", category: "market", market: "index" },
    { code: "5024", title: "매매동향 · 막대그래프", detail: "주체별 매매 동향", category: "chart", market: "kospi" },
    { code: "5026", title: "비교분석 · 캔들형", detail: "두 종목 비교", category: "chart", market: "compare" },
    { code: "5074", title: "5단표", detail: "상승률 / 하락률 / 거래량", category: "plate", market: "kosdaq" },
    { code: "5083", title: "선그래프 · 주체별", detail: "개인 / 외국인 / 기관", category: "chart", market: "kospi" },
    { code: "5086", title: "수익률 그래프", detail: "기간별 수익률", category: "chart", market: "compare" },
    { code: "6001", title: "해외증시", detail: "미국 / 유럽 / 아시아", category: "market", market: "overseas" },
    { code: "8035", title: "캔들 그래프 · 5분", detail: "지수 / 종목 5분봉", category: "chart", market: "index" },
    { code: "8086", title: "유가 · 금값", detail: "WTI / 브렌트 / 국제금", category: "market", market: "exchange" },
    { code: "THEME", title: "테마 종목", detail: "테마별 5·6·12 종목", category: "plate", market: "theme" },
    { code: "EXPERT", title: "전문가 추천", detail: "추천 종목 그래픽", category: "plate", market: "expert" },
    { code: "HALT", title: "거래 정지", detail: "정지 종목 검색", category: "market", market: "halted" }
  ];

  const marketTitles = {
    dashboard: "마이그레이션 대시보드", overseas: "해외 그래픽", exchange: "환율 그래픽",
    index: "지수 그래픽", kospi: "코스피 그래픽", kosdaq: "코스닥 그래픽",
    compare: "종목 비교", theme: "테마 관리", expert: "전문가 추천", halted: "거래 정지"
  };
  const liveDataViews = new Set(["kospi", "kosdaq", "index", "overseas"]);
  const sourceLabels = { oracle: "Oracle", mariaDb: "MariaDB" };

  const storageKey = "mbn-stock-webview.playlist.v1";
  const state = {
    activeMarket: "dashboard",
    activeCategory: "all",
    search: "",
    playlist: [],
    selectedRows: new Set(),
    currentIndex: -1,
    dragIndex: -1,
    playout: {
      mode: "unknown",
      engineState: "IDLE",
      processDetected: false,
      connected: false,
      liveTakeInAllowed: false,
      message: "송출 어댑터 상태를 확인하고 있습니다.",
      preparedCode: null,
      onAirCode: null,
      preparedCue: null,
      changedAt: null,
      changedAtMs: 0,
      latestStatusRequestId: null,
      pending: null,
      error: null,
      lastSignature: ""
    },
    database: { sources: [], loading: true, lastSignature: "" },
    liveData: {
      requestId: null,
      view: null,
      status: "idle",
      tables: [],
      retrievedAt: null,
      error: "",
      timeoutId: null
    }
  };

  const elements = {
    bridgeState: document.querySelector("#bridgeState"), databaseState: document.querySelector("#databaseState"),
    databaseStateDot: document.querySelector("#databaseStateDot"),
    databaseSummary: document.querySelector("#databaseSummary"),
    databaseSummaryIcon: document.querySelector("#databaseSummaryIcon"),
    databaseSummaryDetail: document.querySelector("#databaseSummaryDetail"),
    databaseSummaryBadge: document.querySelector("#databaseSummaryBadge"),
    runtimeLabel: document.querySelector("#runtimeLabel"), packageLabel: document.querySelector("#packageLabel"),
    workspaceTitle: document.querySelector("#workspaceTitle"), clock: document.querySelector("#clock"),
    catalogSearch: document.querySelector("#catalogSearch"), catalogTabs: document.querySelector("#catalogTabs"),
    catalogList: document.querySelector("#catalogList"), catalogModeBadge: document.querySelector("#catalogModeBadge"),
    liveDataPanel: document.querySelector("#liveDataPanel"), liveDataTitle: document.querySelector("#liveDataTitle"),
    liveDataState: document.querySelector("#liveDataState"), liveDataTables: document.querySelector("#liveDataTables"),
    databaseSources: document.querySelector("#databaseSources"),
    playlistBody: document.querySelector("#playlistBody"),
    playlistCount: document.querySelector("#playlistCount"), playlistEmpty: document.querySelector("#playlistEmpty"),
    previewTitle: document.querySelector("#previewTitle"), previewSubtitle: document.querySelector("#previewSubtitle"),
    playoutState: document.querySelector("#playoutState"),
    playoutSummary: document.querySelector("#playoutSummary"),
    playoutSummaryIcon: document.querySelector("#playoutSummaryIcon"),
    playoutSummaryDetail: document.querySelector("#playoutSummaryDetail"),
    playoutSummaryBadge: document.querySelector("#playoutSummaryBadge"),
    tornadoProcessDot: document.querySelector("#tornadoProcessDot"),
    tornadoProcessState: document.querySelector("#tornadoProcessState"),
    playoutConnectionDot: document.querySelector("#playoutConnectionDot"),
    playoutConnectionState: document.querySelector("#playoutConnectionState"),
    playoutSafetyMode: document.querySelector("#playoutSafetyMode"),
    playoutStatusMessage: document.querySelector("#playoutStatusMessage"),
    playoutError: document.querySelector("#playoutError"),
    playoutErrorMessage: document.querySelector("#playoutErrorMessage"),
    prepareButton: document.querySelector("#prepareButton"), takeInButton: document.querySelector("#takeInButton"),
    nextButton: document.querySelector("#nextButton"), takeOutButton: document.querySelector("#takeOutButton"),
    eventLog: document.querySelector("#eventLog"),
    toast: document.querySelector("#toast")
  };

  const nativeBridge = window.chrome?.webview;

  function createId() {
    return `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
  }

  function updateClock() {
    elements.clock.textContent = new Intl.DateTimeFormat("ko-KR", {
      hour: "2-digit", minute: "2-digit", second: "2-digit", hour12: false
    }).format(new Date());
  }

  function filteredCatalog() {
    const term = state.search.trim().toLocaleLowerCase("ko-KR");
    return catalog.filter(item => {
      const marketMatches = state.activeMarket === "dashboard" || item.market === state.activeMarket;
      const categoryMatches = state.activeCategory === "all" || item.category === state.activeCategory;
      const searchMatches = !term || `${item.code} ${item.title} ${item.detail}`.toLocaleLowerCase("ko-KR").includes(term);
      return marketMatches && categoryMatches && searchMatches;
    });
  }

  function renderCatalog() {
    elements.catalogList.replaceChildren();
    const items = filteredCatalog();

    if (!items.length) {
      const empty = document.createElement("div");
      empty.className = "catalog-empty";
      empty.textContent = "조건에 맞는 그래픽 항목이 없습니다.";
      elements.catalogList.append(empty);
      return;
    }

    for (const item of items) {
      const row = document.createElement("article");
      row.className = "catalog-item";

      const code = document.createElement("span");
      code.className = "cut-code";
      code.textContent = item.code;

      const copy = document.createElement("div");
      const title = document.createElement("strong");
      const detail = document.createElement("small");
      title.textContent = item.title;
      detail.textContent = item.detail;
      copy.append(title, detail);

      const add = document.createElement("button");
      add.className = "add-cut";
      add.type = "button";
      add.title = "플레이리스트에 추가";
      add.textContent = "+";
      add.addEventListener("click", () => addToPlaylist(item));

      row.append(code, copy, add);
      elements.catalogList.append(row);
    }
  }

  function addToPlaylist(item) {
    const entry = { ...item, id: createId() };
    state.playlist.push(entry);
    state.currentIndex = state.playlist.length - 1;
    renderPlaylist();
    updatePreview();
    addLog(`${item.code} ${item.title} 항목 추가`);
    showToast("플레이리스트에 추가했습니다.");
  }

  function renderPlaylist() {
    elements.playlistBody.replaceChildren();
    elements.playlistCount.textContent = `${state.playlist.length} CUTS`;
    elements.playlistEmpty.classList.toggle("show", state.playlist.length === 0);

    state.playlist.forEach((item, index) => {
      const row = document.createElement("tr");
      row.draggable = true;
      row.dataset.index = String(index);
      row.classList.toggle("active", index === state.currentIndex);

      const checkCell = document.createElement("td");
      checkCell.className = "check-cell";
      const checkbox = document.createElement("input");
      checkbox.type = "checkbox";
      checkbox.checked = state.selectedRows.has(item.id);
      checkbox.setAttribute("aria-label", `${item.title} 선택`);
      checkbox.addEventListener("click", event => event.stopPropagation());
      checkbox.addEventListener("change", () => {
        checkbox.checked ? state.selectedRows.add(item.id) : state.selectedRows.delete(item.id);
      });
      checkCell.append(checkbox);

      const number = document.createElement("td");
      number.className = "number-cell";
      number.textContent = String(index + 1).padStart(2, "0");

      const titleCell = document.createElement("td");
      const title = document.createElement("strong");
      const detail = document.createElement("small");
      title.textContent = item.title;
      detail.textContent = `${item.code} · ${item.detail}`;
      titleCell.append(title, detail);

      const typeCell = document.createElement("td");
      const type = document.createElement("span");
      type.className = "row-type";
      type.textContent = item.category.toUpperCase();
      typeCell.append(type);

      const drag = document.createElement("td");
      drag.className = "drag-cell";
      drag.textContent = "⠿";

      row.append(checkCell, number, titleCell, typeCell, drag);
      row.addEventListener("click", () => selectPlaylistRow(index));
      row.addEventListener("dragstart", onDragStart);
      row.addEventListener("dragover", onDragOver);
      row.addEventListener("dragleave", () => row.classList.remove("drag-over"));
      row.addEventListener("drop", onDrop);
      row.addEventListener("dragend", onDragEnd);
      elements.playlistBody.append(row);
    });
  }

  function selectPlaylistRow(index) {
    state.currentIndex = index;
    renderPlaylist();
    updatePreview();
  }

  function updatePreview() {
    const item = state.playlist[state.currentIndex];
    if (!item) {
      elements.previewTitle.textContent = "선택된 그래픽 없음";
      elements.previewSubtitle.textContent = "플레이리스트 항목을 선택하세요.";
      renderPlayout();
      return;
    }
    elements.previewTitle.textContent = item.title;
    elements.previewSubtitle.textContent = `${item.code} · ${item.detail}`;
    renderPlayout();
  }

  function onDragStart(event) {
    state.dragIndex = Number(event.currentTarget.dataset.index);
    event.currentTarget.classList.add("dragging");
    event.dataTransfer.effectAllowed = "move";
    event.dataTransfer.setData("text/plain", String(state.dragIndex));
  }

  function onDragOver(event) {
    event.preventDefault();
    event.dataTransfer.dropEffect = "move";
    event.currentTarget.classList.add("drag-over");
  }

  function onDrop(event) {
    event.preventDefault();
    const targetIndex = Number(event.currentTarget.dataset.index);
    if (state.dragIndex < 0 || state.dragIndex === targetIndex) return;
    const [moved] = state.playlist.splice(state.dragIndex, 1);
    state.playlist.splice(targetIndex, 0, moved);
    state.currentIndex = targetIndex;
    state.dragIndex = -1;
    renderPlaylist();
    updatePreview();
    addLog("플레이리스트 순서 변경");
  }

  function onDragEnd() {
    state.dragIndex = -1;
    document.querySelectorAll("tr.dragging, tr.drag-over").forEach(row => row.classList.remove("dragging", "drag-over"));
  }

  function toggleSelectAll() {
    const allSelected = state.playlist.length > 0 && state.playlist.every(item => state.selectedRows.has(item.id));
    state.selectedRows.clear();
    if (!allSelected) state.playlist.forEach(item => state.selectedRows.add(item.id));
    renderPlaylist();
  }

  function moveSelected(direction) {
    const index = state.playlist.findIndex(item => state.selectedRows.has(item.id));
    if (index < 0) return showToast("이동할 항목을 선택하세요.");
    const target = Math.max(0, Math.min(state.playlist.length - 1, index + direction));
    if (index === target) return;
    [state.playlist[index], state.playlist[target]] = [state.playlist[target], state.playlist[index]];
    state.currentIndex = target;
    renderPlaylist();
    updatePreview();
  }

  function deleteSelected() {
    if (!state.selectedRows.size) return showToast("삭제할 항목을 선택하세요.");
    const deleted = state.selectedRows.size;
    state.playlist = state.playlist.filter(item => !state.selectedRows.has(item.id));
    state.selectedRows.clear();
    state.currentIndex = Math.min(state.currentIndex, state.playlist.length - 1);
    renderPlaylist();
    updatePreview();
    addLog(`${deleted}개 항목 삭제`);
  }

  function savePlaylist() {
    localStorage.setItem(storageKey, JSON.stringify(state.playlist));
    addLog(`플레이리스트 ${state.playlist.length}개 로컬 저장`);
    showToast("플레이리스트를 저장했습니다.");
  }

  function loadPlaylist() {
    try {
      const stored = JSON.parse(localStorage.getItem(storageKey) || "[]");
      state.playlist = Array.isArray(stored) ? stored : [];
      state.selectedRows.clear();
      state.currentIndex = state.playlist.length ? 0 : -1;
      renderPlaylist();
      updatePreview();
      addLog(`플레이리스트 ${state.playlist.length}개 불러오기`);
      showToast("저장된 플레이리스트를 불러왔습니다.");
    } catch {
      showToast("저장 데이터를 읽을 수 없습니다.");
    }
  }

  function normalizePlayoutState(value) {
    const normalized = String(value || "").trim().toLocaleLowerCase("en-US").replace(/[\s_-]+/g, "");
    if (["prepared", "ready", "cued"].includes(normalized)) return "PREPARED";
    if (["program", "onair", "takein", "live"].includes(normalized)) return "PROGRAM";
    if (["dryrun", "preview", "simulation", "simulated"].includes(normalized)) return "DRY RUN";
    return "IDLE";
  }

  function normalizePlayoutMode(value) {
    return String(value || "unknown").trim().toLocaleLowerCase("en-US").replace(/[\s_]+/g, "-");
  }

  function isDryRunMode(mode = state.playout.mode) {
    return /dry-?run|preview|simulat/.test(normalizePlayoutMode(mode));
  }

  function isLiveMode(mode = state.playout.mode) {
    return /live|program/.test(normalizePlayoutMode(mode));
  }

  function isTestMode(mode = state.playout.mode) {
    return /test/.test(normalizePlayoutMode(mode));
  }

  function playoutDisplayState() {
    return isDryRunMode() ? "DRY RUN" : state.playout.engineState;
  }

  function setStatusDot(element, status) {
    element.classList.remove("pending", "healthy", "error", "warn", "ok", "unconfigured");
    element.classList.add(status);
  }

  function cueFromItem(item) {
    if (!item) return null;
    return { code: String(item.code), title: String(item.title), detail: String(item.detail) };
  }

  function findCueByCode(code) {
    if (!code) return null;
    const current = state.playlist[state.currentIndex];
    if (String(current?.code) === String(code)) return cueFromItem(current);
    return cueFromItem(state.playlist.find(item => String(item.code) === String(code)));
  }

  function renderPlayout() {
    const displayState = playoutDisplayState();
    const pending = state.playout.pending;
    const dryRun = isDryRunMode();
    const liveMode = isLiveMode();
    const testMode = isTestMode();
    const bridgeReady = Boolean(nativeBridge);
    const outcomeUnknown = state.playout.error?.outcomeUnknown === true;
    const commandReady = bridgeReady && !pending && !outcomeUnknown && (state.playout.connected || dryRun);
    const currentCue = cueFromItem(state.playlist[state.currentIndex]);
    const prepared = state.playout.engineState === "PREPARED" || Boolean(state.playout.preparedCode);
    const takeInSafe = dryRun || ((testMode || liveMode) && state.playout.liveTakeInAllowed);

    elements.playoutState.textContent = displayState;
    elements.playoutState.classList.remove("neutral", "live", "dry-run", "error");
    if (displayState === "IDLE") elements.playoutState.classList.add("neutral");
    if (displayState === "PROGRAM") elements.playoutState.classList.add("live");
    if (displayState === "DRY RUN") elements.playoutState.classList.add("dry-run");

    elements.tornadoProcessState.textContent = state.playout.processDetected ? "감지됨" : "미감지";
    setStatusDot(elements.tornadoProcessDot, state.playout.processDetected ? "healthy" : (bridgeReady ? "error" : "unconfigured"));
    elements.playoutConnectionState.textContent = state.playout.connected ? "연결됨" : "미연결";
    setStatusDot(elements.playoutConnectionDot, state.playout.connected ? "healthy" : (bridgeReady ? "error" : "unconfigured"));

    const safetyContainer = elements.playoutSafetyMode.closest(".playout-health-item");
    safetyContainer.classList.remove("live-allowed", "live-locked");
    if (dryRun) {
      elements.playoutSafetyMode.textContent = "DRY RUN · PROGRAM 차단";
    } else if (testMode && state.playout.liveTakeInAllowed) {
      elements.playoutSafetyMode.textContent = "TEST · 전용 출력 허용";
      safetyContainer.classList.add("live-allowed");
    } else if (testMode) {
      elements.playoutSafetyMode.textContent = "TEST TAKE IN 잠금";
      safetyContainer.classList.add("live-locked");
    } else if (liveMode && state.playout.liveTakeInAllowed) {
      elements.playoutSafetyMode.textContent = "LIVE 허용";
      safetyContainer.classList.add("live-allowed");
    } else if (liveMode) {
      elements.playoutSafetyMode.textContent = "LIVE TAKE IN 잠금";
      safetyContainer.classList.add("live-locked");
    } else {
      elements.playoutSafetyMode.textContent = bridgeReady ? "모드 확인 중" : "미리보기 전용";
    }

    const changedLabel = state.playout.changedAtMs
      ? ` · ${new Date(state.playout.changedAtMs).toLocaleTimeString("ko-KR", { hour12: false })}`
      : "";
    elements.playoutStatusMessage.textContent = pending
      ? `${pending.command.toUpperCase()} 요청 처리 중 · ${pending.cue?.code || "송출 엔진"}`
      : `${state.playout.message || "송출 상태를 확인할 수 없습니다."}${changedLabel}`;
    elements.playoutStatusMessage.classList.toggle("pending", Boolean(pending));
    elements.playoutStatusMessage.classList.toggle("error", Boolean(state.playout.error));

    elements.playoutSummary.classList.remove("ready", "dry-run", "error");
    if (dryRun) {
      elements.playoutSummary.classList.add("dry-run");
      elements.playoutSummaryBadge.textContent = "DRY RUN";
      elements.playoutSummaryDetail.textContent = bridgeReady ? "안전 모드 · PROGRAM 출력 차단" : "브라우저 미리보기 전용";
    } else if (state.playout.connected) {
      elements.playoutSummary.classList.add("ready");
      elements.playoutSummaryBadge.textContent = testMode
        ? (state.playout.liveTakeInAllowed ? "TEST READY" : "TEST LOCKED")
        : (state.playout.liveTakeInAllowed ? "LIVE READY" : "CONNECTED");
      elements.playoutSummaryDetail.textContent = testMode
        ? "테스트 전용 출력 · 안전 게이트 적용"
        : (state.playout.processDetected ? "Tornado2 프로세스 · 엔진 연결됨" : "엔진 연결됨 · 프로세스 미감지");
    } else {
      elements.playoutSummary.classList.add("error");
      elements.playoutSummaryBadge.textContent = bridgeReady ? "OFFLINE" : "PREVIEW";
      elements.playoutSummaryDetail.textContent = bridgeReady ? "Tornado 어댑터 연결 필요" : "Native Bridge 없음";
    }

    elements.prepareButton.disabled = !commandReady || !currentCue;
    elements.takeInButton.disabled = !commandReady || !prepared || !takeInSafe;
    elements.nextButton.disabled = !commandReady || state.playlist.length === 0;
    elements.takeOutButton.disabled = !commandReady || (state.playout.engineState === "IDLE" && !state.playout.preparedCode && !state.playout.onAirCode);
    for (const button of [elements.prepareButton, elements.takeInButton, elements.nextButton, elements.takeOutButton]) {
      button.setAttribute("aria-busy", String(Boolean(pending)));
    }

    elements.playoutError.hidden = !state.playout.error;
    elements.playoutErrorMessage.textContent = state.playout.error?.message || "";
    document.querySelector("#clearPlayoutErrorButton").textContent = outcomeUnknown ? "확인 후 잠금 해제" : "닫기";
  }

  function clearPlayoutError(render = true) {
    state.playout.error = null;
    if (render) renderPlayout();
  }

  function showPlayoutError({ code = "PLAYOUT_ERROR", message, retryable = false, outcomeUnknown = false }) {
    const details = [message || "송출 명령을 완료하지 못했습니다."];
    if (code) details.push(`[${code}]`);
    if (outcomeUnknown) details.push("실제 송출 결과를 확인하세요.");
    else if (retryable) details.push("상태 확인 후 재시도할 수 있습니다.");
    state.playout.error = { code, message: details.join(" "), retryable, outcomeUnknown };
    renderPlayout();
    showToast(state.playout.error.message);
  }

  function resolveCommand(command) {
    const current = state.playlist[state.currentIndex];
    if (command === "prepare") {
      return current ? { cue: cueFromItem(current), targetIndex: state.currentIndex } : null;
    }
    if (command === "take-in") {
      const cue = state.playout.preparedCue || findCueByCode(state.playout.preparedCode);
      return cue ? { cue, targetIndex: state.currentIndex } : null;
    }
    if (command === "next") {
      if (!state.playlist.length) return null;
      const targetIndex = state.currentIndex < 0 ? 0 : (state.currentIndex + 1) % state.playlist.length;
      return { cue: cueFromItem(state.playlist[targetIndex]), targetIndex };
    }
    if (command === "take-out") return { cue: null, targetIndex: state.currentIndex };
    return null;
  }

  function requestPlayoutCommand(command) {
    if (!nativeBridge) {
      showToast("브라우저 미리보기에서는 송출 명령을 실행하지 않습니다.");
      return;
    }
    if (state.playout.pending) return;

    const resolved = resolveCommand(command);
    if (!resolved) {
      const message = command === "take-in" ? "먼저 PREPARE를 완료하세요." : "먼저 그래픽 항목을 선택하세요.";
      showToast(message);
      return;
    }

    const requestId = createId();
    const pending = {
      requestId,
      command,
      cue: resolved.cue,
      targetIndex: resolved.targetIndex,
      timeoutId: null
    };
    state.playout.pending = pending;
    clearPlayoutError(false);
    renderPlayout();
    addLog(`${resolved.cue?.code || "ENGINE"} ${command.toUpperCase()} 요청`);

    const payload = { requestId, command };
    if (resolved.cue) payload.cue = resolved.cue;
    postNative("playout-command", payload);

    pending.timeoutId = setTimeout(() => {
      if (state.playout.pending?.requestId !== requestId) return;
      state.playout.pending = null;
      showPlayoutError({
        code: "WEB_TIMEOUT",
        message: "송출 엔진 응답 시간이 초과되었습니다.",
        retryable: true,
        outcomeUnknown: true
      });
      addLog(`${command.toUpperCase()} 응답 시간 초과 · 결과 미확인`);
      requestPlayoutStatus();
    }, 15000);
  }

  function requestPlayoutStatus() {
    if (!nativeBridge) return;
    const requestId = createId();
    state.playout.latestStatusRequestId = requestId;
    postNative("request-playout-status", { requestId });
  }

  function parseChangedAt(value) {
    const parsed = typeof value === "string" || typeof value === "number" ? Date.parse(value) : NaN;
    return Number.isFinite(parsed) ? parsed : 0;
  }

  function handlePlayoutStatus(payload) {
    if (!payload || typeof payload !== "object") return;
    if (payload.requestId && payload.requestId !== state.playout.latestStatusRequestId) return;

    const changedAtMs = parseChangedAt(payload.changedAt);
    if (changedAtMs && state.playout.changedAtMs && changedAtMs < state.playout.changedAtMs) return;

    state.playout.mode = normalizePlayoutMode(payload.mode);
    state.playout.engineState = normalizePlayoutState(payload.state);
    state.playout.processDetected = payload.processDetected === true;
    state.playout.connected = payload.connected === true;
    state.playout.liveTakeInAllowed = payload.liveTakeInAllowed === true;
    state.playout.message = typeof payload.message === "string" && payload.message.trim()
      ? payload.message.trim()
      : "Tornado 송출 상태를 수신했습니다.";
    state.playout.preparedCode = payload.preparedCode ? String(payload.preparedCode) : null;
    state.playout.onAirCode = payload.onAirCode ? String(payload.onAirCode) : null;
    state.playout.preparedCue = findCueByCode(state.playout.preparedCode);
    state.playout.changedAt = payload.changedAt || null;
    state.playout.changedAtMs = changedAtMs || state.playout.changedAtMs;
    if (payload.requestId === state.playout.latestStatusRequestId) state.playout.latestStatusRequestId = null;

    renderPlayout();
    const signature = [state.playout.mode, state.playout.engineState, state.playout.processDetected, state.playout.connected, state.playout.liveTakeInAllowed].join("|");
    if (signature !== state.playout.lastSignature) {
      addLog(`Tornado 상태 · ${playoutDisplayState()} · ${state.playout.connected ? "연결" : "미연결"}`);
      state.playout.lastSignature = signature;
    }
  }

  function finishPendingCommand(payload) {
    const pending = state.playout.pending;
    if (!pending || payload?.requestId !== pending.requestId || payload?.command !== pending.command) return null;
    clearTimeout(pending.timeoutId);
    state.playout.pending = null;
    return pending;
  }

  function handlePlayoutCommandResult(payload) {
    const pending = finishPendingCommand(payload);
    if (!pending) return;
    if (payload.succeeded !== true) {
      showPlayoutError({ message: payload.message || "송출 명령이 거부되었습니다.", retryable: true });
      addLog(`${pending.command.toUpperCase()} 실패 · ${payload.message || "명령 거부"}`);
      requestPlayoutStatus();
      return;
    }

    clearPlayoutError(false);
    if (payload.dryRun === true) state.playout.mode = "dry-run";
    state.playout.engineState = normalizePlayoutState(payload.state);
    state.playout.message = typeof payload.message === "string" && payload.message.trim()
      ? payload.message.trim()
      : `${pending.command.toUpperCase()} 완료`;
    state.playout.preparedCode = payload.preparedCode ? String(payload.preparedCode) : null;
    state.playout.onAirCode = payload.onAirCode ? String(payload.onAirCode) : null;

    if (pending.command === "prepare" || pending.command === "next") {
      state.playout.preparedCue = pending.cue;
    } else if (!state.playout.preparedCode) {
      state.playout.preparedCue = null;
    }
    if (pending.command === "next") {
      state.currentIndex = pending.targetIndex;
      renderPlaylist();
      updatePreview();
    }

    renderPlayout();
    const safetyLabel = payload.dryRun === true ? "DRY RUN · " : "";
    addLog(`${pending.cue?.code || "ENGINE"} ${safetyLabel}${pending.command.toUpperCase()} 완료`);
    showToast(state.playout.message);
    requestPlayoutStatus();
  }

  function handlePlayoutCommandError(payload) {
    const pending = finishPendingCommand(payload);
    if (!pending) return;
    showPlayoutError({
      code: payload.code,
      message: payload.message,
      retryable: payload.retryable === true,
      outcomeUnknown: payload.outcomeUnknown === true
    });
    addLog(`${pending.command.toUpperCase()} 오류 · ${payload.code || "PLAYOUT_ERROR"} · ${payload.message || "명령 실패"}`);
    requestPlayoutStatus();
  }

  function addLog(message) {
    const item = document.createElement("li");
    const time = document.createElement("time");
    time.textContent = new Date().toLocaleTimeString("ko-KR", { hour12: false });
    item.append(time, document.createTextNode(message));
    elements.eventLog.prepend(item);
    while (elements.eventLog.children.length > 30) elements.eventLog.lastElementChild?.remove();
  }

  let toastTimer;
  function showToast(message) {
    elements.toast.textContent = message;
    elements.toast.classList.add("show");
    clearTimeout(toastTimer);
    toastTimer = setTimeout(() => elements.toast.classList.remove("show"), 2600);
  }

  function postNative(type, payload = {}) {
    nativeBridge?.postMessage({ type, payload });
  }

  function normalizeSourceName(source) {
    const value = String(source || "").toLocaleLowerCase("en-US");
    if (value === "oracle") return "oracle";
    if (value === "mariadb" || value === "maria_db" || value === "maria-db") return "mariaDb";
    return String(source || "unknown");
  }

  function normalizedDatabaseSources(sources) {
    const received = new Map((Array.isArray(sources) ? sources : []).map(source => [normalizeSourceName(source?.source), source]));
    return ["oracle", "mariaDb"].map(name => {
      const source = received.get(name);
      return {
        source: name,
        configured: Boolean(source?.configured),
        healthy: Boolean(source?.healthy),
        message: typeof source?.message === "string" ? source.message : "",
        checkedAt: source?.checkedAt || null,
        latencyMs: source?.latencyMs !== null && source?.latencyMs !== undefined && Number.isFinite(Number(source.latencyMs))
          ? Number(source.latencyMs)
          : null
      };
    });
  }

  function sourceHealthClass(source) {
    if (state.database.loading && !state.database.sources.length) return "pending";
    if (!source.configured) return "unconfigured";
    return source.healthy ? "healthy" : "error";
  }

  function sourceHealthText(source) {
    if (state.database.loading && !state.database.sources.length) return "확인 중";
    if (!source.configured) return "미설정";
    if (!source.healthy) return "연결 오류";
    return source.latencyMs === null ? "정상" : `정상 · ${Math.round(source.latencyMs)}ms`;
  }

  function renderDatabaseSources() {
    elements.databaseSources.replaceChildren();
    const sources = state.database.sources.length
      ? state.database.sources
      : normalizedDatabaseSources([]);

    for (const source of sources) {
      const chip = document.createElement("div");
      const healthClass = sourceHealthClass(source);
      chip.className = `database-source ${healthClass}`;
      if (source.message) chip.title = source.message;

      const dot = document.createElement("span");
      dot.className = "source-dot";
      const label = document.createElement("strong");
      label.textContent = sourceLabels[source.source] || source.source;
      const status = document.createElement("small");
      status.textContent = sourceHealthText(source);
      chip.append(dot, label, status);
      elements.databaseSources.append(chip);
    }
  }

  function renderDatabaseStatus() {
    const sources = state.database.sources;
    const configured = sources.filter(source => source.configured);
    const healthy = configured.filter(source => source.healthy);
    let stateClass = "pending";
    let stateText = "확인 중";
    let detail = "연결 상태 확인 중";
    let badge = "CHECKING";

    if (!state.database.loading || sources.length) {
      if (!configured.length) {
        stateClass = "unconfigured";
        stateText = "미설정";
        detail = "Oracle 미설정 · MariaDB 미설정";
        badge = "SETUP";
      } else if (healthy.length === sources.length && sources.length === 2) {
        stateClass = "healthy";
        stateText = "정상 (2/2)";
        detail = sources.map(source => `${sourceLabels[source.source]} ${sourceHealthText(source)}`).join(" · ");
        badge = "CONNECTED";
      } else if (configured.some(source => !source.healthy)) {
        stateClass = "error";
        stateText = `오류 (${healthy.length}/${configured.length})`;
        detail = sources.map(source => `${sourceLabels[source.source]} ${sourceHealthText(source)}`).join(" · ");
        badge = "ERROR";
      } else {
        stateClass = "partial";
        stateText = `일부 연결 (${healthy.length}/2)`;
        detail = sources.map(source => `${sourceLabels[source.source]} ${sourceHealthText(source)}`).join(" · ");
        badge = "PARTIAL";
      }
    }

    elements.databaseState.textContent = stateText;
    elements.databaseStateDot.className = `status-dot ${stateClass}`;
    elements.databaseSummary.className = `database-summary ${stateClass}`;
    elements.databaseSummaryIcon.className = `metric-icon database-icon ${stateClass}`;
    elements.databaseSummaryDetail.textContent = detail;
    elements.databaseSummaryBadge.textContent = badge;
    renderDatabaseSources();
  }

  function requestDatabaseStatus() {
    if (!nativeBridge) return;
    state.database.loading = true;
    renderDatabaseStatus();
    postNative("request-database-status", { requestId: createId() });
  }

  function handleDatabaseStatus(payload) {
    state.database.sources = normalizedDatabaseSources(payload?.sources);
    state.database.loading = false;
    renderDatabaseStatus();

    const signature = state.database.sources.map(source => `${source.source}:${source.configured}:${source.healthy}`).join("|");
    if (signature !== state.database.lastSignature) {
      const message = state.database.sources
        .map(source => `${sourceLabels[source.source]} ${sourceHealthText(source)}`)
        .join(" · ");
      addLog(`DB 상태 · ${message}`);
      state.database.lastSignature = signature;
    }
  }

  function clearLiveDataTimeout() {
    if (state.liveData.timeoutId !== null) clearTimeout(state.liveData.timeoutId);
    state.liveData.timeoutId = null;
  }

  function formatDateTime(value) {
    if (!value) return "";
    const date = new Date(value);
    if (Number.isNaN(date.getTime())) return String(value);
    return new Intl.DateTimeFormat("ko-KR", {
      month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit", second: "2-digit", hour12: false
    }).format(date);
  }

  function normalizeColumns(table) {
    let columns = Array.isArray(table?.columns) ? table.columns : [];
    const firstRow = Array.isArray(table?.rows) ? table.rows[0] : null;
    if (!columns.length && firstRow && !Array.isArray(firstRow) && typeof firstRow === "object") {
      columns = Object.keys(firstRow);
    }
    if (!columns.length && Array.isArray(firstRow)) {
      columns = firstRow.map((_, index) => `열 ${index + 1}`);
    }
    return columns.map((column, index) => {
      if (typeof column === "string") return { key: column, label: column };
      const key = column?.key ?? column?.name ?? column?.field ?? column?.dataPropertyName ?? `column-${index}`;
      const label = column?.label ?? column?.displayName ?? column?.title ?? column?.name ?? key;
      return { key: String(key), label: String(label) };
    });
  }

  function cellValue(row, column, index) {
    if (Array.isArray(row)) return row[index];
    if (row && typeof row === "object") return row[column.key];
    return index === 0 ? row : null;
  }

  function formatCellValue(value) {
    if (value === null || value === undefined || value === "") return "—";
    if (typeof value === "number") return value.toLocaleString("ko-KR");
    if (typeof value === "boolean") return value ? "예" : "아니요";
    if (typeof value === "object") {
      try { return JSON.stringify(value); } catch { return String(value); }
    }
    return String(value);
  }

  function renderLiveTables() {
    elements.liveDataTables.replaceChildren();
    for (const table of state.liveData.tables) {
      const section = document.createElement("section");
      section.className = "live-table-card";

      const header = document.createElement("header");
      const heading = document.createElement("div");
      const name = document.createElement("h4");
      name.textContent = table?.name || "시장 데이터";
      const meta = document.createElement("small");
      const rows = Array.isArray(table?.rows) ? table.rows : [];
      const total = Number.isFinite(Number(table?.totalRowCount)) ? Number(table.totalRowCount) : rows.length;
      meta.textContent = `전체 ${total.toLocaleString("ko-KR")}건 · 표시 ${rows.length.toLocaleString("ko-KR")}건`;
      heading.append(name, meta);

      const source = document.createElement("span");
      source.className = "live-source-badge";
      const sourceName = normalizeSourceName(table?.source);
      source.textContent = sourceLabels[sourceName] || table?.source || "DB";
      header.append(heading, source);
      section.append(header);

      if (!rows.length) {
        const empty = document.createElement("p");
        empty.className = "live-table-empty";
        empty.textContent = "조회된 행이 없습니다.";
        section.append(empty);
        elements.liveDataTables.append(section);
        continue;
      }

      const columns = normalizeColumns(table);
      const scroll = document.createElement("div");
      scroll.className = "live-table-scroll";
      const grid = document.createElement("table");
      grid.className = "live-table";
      const head = document.createElement("thead");
      const headRow = document.createElement("tr");
      for (const column of columns) {
        const th = document.createElement("th");
        th.textContent = column.label;
        headRow.append(th);
      }
      head.append(headRow);

      const body = document.createElement("tbody");
      for (const row of rows) {
        const tr = document.createElement("tr");
        columns.forEach((column, index) => {
          const td = document.createElement("td");
          td.textContent = formatCellValue(cellValue(row, column, index));
          tr.append(td);
        });
        body.append(tr);
      }
      grid.append(head, body);
      scroll.append(grid);
      section.append(scroll);
      elements.liveDataTables.append(section);
    }
  }

  function renderLiveData() {
    const visible = liveDataViews.has(state.activeMarket);
    elements.liveDataPanel.hidden = !visible;
    elements.catalogModeBadge.textContent = visible ? "DB LIVE" : "Web UI";
    elements.catalogModeBadge.classList.toggle("live", visible);
    if (!visible) return;

    elements.liveDataTitle.textContent = `${marketTitles[state.activeMarket]} · DB 조회`;
    elements.liveDataState.replaceChildren();
    elements.liveDataState.className = `live-data-state ${state.liveData.status}`;

    if (state.liveData.status === "loading") {
      const spinner = document.createElement("span");
      spinner.className = "live-spinner";
      const copy = document.createElement("div");
      const strong = document.createElement("strong");
      const small = document.createElement("small");
      strong.textContent = "데이터베이스에서 조회 중입니다.";
      small.textContent = "연결 상태와 시장 데이터를 확인하고 있습니다.";
      copy.append(strong, small);
      elements.liveDataState.append(spinner, copy);
    } else if (state.liveData.status === "error") {
      const icon = document.createElement("span");
      icon.className = "live-error-icon";
      icon.textContent = "!";
      const copy = document.createElement("div");
      const strong = document.createElement("strong");
      const small = document.createElement("small");
      strong.textContent = "시장 데이터를 조회하지 못했습니다.";
      small.textContent = state.liveData.error || "데이터베이스 연결을 확인한 뒤 다시 조회하세요.";
      copy.append(strong, small);
      elements.liveDataState.append(icon, copy);
    } else if (state.liveData.status === "ready") {
      const totalRows = state.liveData.tables.reduce((sum, table) => {
        const count = Number(table?.totalRowCount);
        return sum + (Number.isFinite(count) ? count : (Array.isArray(table?.rows) ? table.rows.length : 0));
      }, 0);
      const strong = document.createElement("strong");
      const small = document.createElement("small");
      strong.textContent = state.liveData.tables.length
        ? `${state.liveData.tables.length}개 데이터셋 · 전체 ${totalRows.toLocaleString("ko-KR")}건`
        : "조회 결과가 없습니다.";
      small.textContent = state.liveData.retrievedAt ? `조회 시각 ${formatDateTime(state.liveData.retrievedAt)}` : "조회 완료";
      elements.liveDataState.append(strong, small);
    }

    renderDatabaseSources();
    renderLiveTables();
  }

  function requestMarketData(view = state.activeMarket) {
    clearLiveDataTimeout();
    if (!liveDataViews.has(view)) {
      state.liveData.requestId = null;
      state.liveData.view = null;
      state.liveData.status = "idle";
      state.liveData.tables = [];
      renderLiveData();
      return;
    }

    const requestId = createId();
    state.liveData.requestId = requestId;
    state.liveData.view = view;
    state.liveData.status = "loading";
    state.liveData.tables = [];
    state.liveData.retrievedAt = null;
    state.liveData.error = "";
    renderLiveData();

    if (!nativeBridge) {
      state.liveData.status = "error";
      state.liveData.error = "브라우저 미리보기에서는 실제 DB 데이터를 조회할 수 없습니다.";
      renderLiveData();
      return;
    }

    postNative("request-market-data", { requestId, view, maximumRowsPerTable: 250 });
    state.liveData.timeoutId = setTimeout(() => {
      if (state.liveData.requestId !== requestId || state.liveData.status !== "loading") return;
      state.liveData.status = "error";
      state.liveData.error = "DB 응답 시간이 초과되었습니다. 연결 상태를 확인하고 다시 조회하세요.";
      renderLiveData();
      addLog(`${marketTitles[view]} DB 조회 시간 초과`);
    }, 30000);
  }

  function handleMarketData(payload) {
    if (!payload || payload.requestId !== state.liveData.requestId || payload.view !== state.liveData.view) return;
    clearLiveDataTimeout();
    state.liveData.status = "ready";
    state.liveData.tables = Array.isArray(payload.tables) ? payload.tables : [];
    state.liveData.retrievedAt = payload.retrievedAt || new Date().toISOString();
    state.liveData.error = "";
    renderLiveData();
    const shownRows = state.liveData.tables.reduce((sum, table) => sum + (Array.isArray(table?.rows) ? table.rows.length : 0), 0);
    addLog(`${marketTitles[payload.view]} DB 조회 완료 · ${shownRows.toLocaleString("ko-KR")}행 표시`);
  }

  function handleMarketDataError(payload) {
    if (!payload || payload.requestId !== state.liveData.requestId || payload.view !== state.liveData.view) return;
    clearLiveDataTimeout();
    state.liveData.status = "error";
    state.liveData.tables = [];
    state.liveData.error = typeof payload.message === "string" && payload.message.trim()
      ? payload.message.trim()
      : "데이터베이스 연결을 확인한 뒤 다시 조회하세요.";
    renderLiveData();
    addLog(`${marketTitles[payload.view]} DB 조회 실패 · ${state.liveData.error}`);
  }

  function handleNativeMessage(event) {
    let message = event.data;
    if (typeof message === "string") {
      try { message = JSON.parse(message); } catch { return; }
    }
    if (!message || typeof message.type !== "string") return;

    switch (message.type) {
      case "app-info": {
        const info = message.payload || {};
        elements.bridgeState.textContent = "연결됨";
        elements.runtimeLabel.textContent = `${info.framework || ".NET 8"} · ${info.architecture || "x64"}`;
        elements.packageLabel.textContent = `${info.package || "MSIX"}${info.version ? ` · v${info.version}` : ""}`;
        addLog(`Native Bridge 연결${info.windowsAppSdk ? ` · Windows App SDK ${info.windowsAppSdk}` : ""}`);
        break;
      }
      case "database-status":
        handleDatabaseStatus(message.payload);
        break;
      case "market-data":
        handleMarketData(message.payload);
        break;
      case "market-data-error":
        handleMarketDataError(message.payload);
        break;
      case "playout-status":
        handlePlayoutStatus(message.payload);
        break;
      case "playout-command-result":
        handlePlayoutCommandResult(message.payload);
        break;
      case "playout-command-error":
        handlePlayoutCommandError(message.payload);
        break;
    }
  }

  function bindEvents() {
    document.querySelector("#marketNav").addEventListener("click", event => {
      const button = event.target.closest("button[data-market]");
      if (!button) return;
      document.querySelectorAll(".nav-item").forEach(item => item.classList.toggle("active", item === button));
      state.activeMarket = button.dataset.market;
      elements.workspaceTitle.textContent = marketTitles[state.activeMarket];
      renderCatalog();
      requestMarketData(state.activeMarket);
      if (liveDataViews.has(state.activeMarket)) requestDatabaseStatus();
    });

    elements.catalogTabs.addEventListener("click", event => {
      const button = event.target.closest("button[data-category]");
      if (!button) return;
      elements.catalogTabs.querySelectorAll("button").forEach(item => item.classList.toggle("active", item === button));
      state.activeCategory = button.dataset.category;
      renderCatalog();
    });

    elements.catalogSearch.addEventListener("input", event => { state.search = event.target.value; renderCatalog(); });
    document.querySelector("#selectAllButton").addEventListener("click", toggleSelectAll);
    document.querySelector("#moveUpButton").addEventListener("click", () => moveSelected(-1));
    document.querySelector("#moveDownButton").addEventListener("click", () => moveSelected(1));
    document.querySelector("#deleteButton").addEventListener("click", deleteSelected);
    document.querySelector("#saveButton").addEventListener("click", savePlaylist);
    document.querySelector("#loadButton").addEventListener("click", loadPlaylist);
    elements.prepareButton.addEventListener("click", () => requestPlayoutCommand("prepare"));
    elements.takeInButton.addEventListener("click", () => requestPlayoutCommand("take-in"));
    elements.nextButton.addEventListener("click", () => requestPlayoutCommand("next"));
    elements.takeOutButton.addEventListener("click", () => requestPlayoutCommand("take-out"));
    document.querySelector("#clearPlayoutErrorButton").addEventListener("click", () => clearPlayoutError());
    document.querySelector("#clearLogButton").addEventListener("click", () => elements.eventLog.replaceChildren());
    document.querySelector("#requestInfoButton").addEventListener("click", () => {
      postNative("request-app-info");
      requestDatabaseStatus();
      requestPlayoutStatus();
      if (liveDataViews.has(state.activeMarket)) requestMarketData(state.activeMarket);
    });
    document.querySelector("#retryLiveDataButton").addEventListener("click", () => {
      requestDatabaseStatus();
      requestMarketData(state.activeMarket);
    });

    document.addEventListener("keydown", event => {
      if (event.ctrlKey && event.key.toLowerCase() === "k") {
        event.preventDefault(); elements.catalogSearch.focus(); return;
      }
      if (event.key === "F2") { event.preventDefault(); requestPlayoutCommand("prepare"); }
      if (event.key === "F8") { event.preventDefault(); requestPlayoutCommand("take-in"); }
      if (event.key === "Escape") { event.preventDefault(); requestPlayoutCommand("take-out"); }
    });
  }

  function initialize() {
    bindEvents();
    renderCatalog();
    renderPlaylist();
    renderDatabaseStatus();
    renderLiveData();
    renderPlayout();
    updateClock();
    setInterval(updateClock, 1000);
    addLog("WebView 운영 화면 시작");

    if (nativeBridge) {
      nativeBridge.addEventListener("message", handleNativeMessage);
      postNative("ready");
      postNative("request-app-info");
      requestDatabaseStatus();
      requestPlayoutStatus();
    } else {
      elements.bridgeState.textContent = "브라우저 미리보기";
      state.database.loading = false;
      state.playout.mode = "preview-dry-run";
      state.playout.engineState = "IDLE";
      state.playout.message = "Native Bridge 없음 · 미리보기 전용 DRY RUN (PROGRAM 출력 차단)";
      renderPlayout();
      renderDatabaseStatus();
      addLog("Native Bridge 없이 미리보기 전용 DRY RUN으로 실행");
    }
  }

  initialize();
})();