import { app } from "/scripts/app.js";
import { applyAdaptiveCanvasOnly } from "../shared/nodes2.mjs";

const COMFY_CLASS = "DumasH3LongVideos";
const STATE_PROPERTY = "dumas_h3_longvideos_section_state";
const DOM_WIDGET_NAME = "dumas_h3_longvideos_sections";
const MIN_WIDTH = 520;
const MIN_HEIGHT = 280;

const GROUPS = [
  {
    id: "prompt",
    label: "Prompt",
    defaultCollapsed: false,
    widgets: ["prompt", "resolution", "megapixels", "beat_split", "anchor_override", "per_beat_length", "shot_seconds", "plan_only", "fps"],
  },
  {
    id: "refs",
    label: "Refs",
    defaultCollapsed: false,
    widgets: ["ref_mode", "ref_image_size", "ref_noise_aug", "character_memory", "trim_seam", "vary_seed_per_shot", "handoff_offset"],
  },
  {
    id: "sampling",
    label: "Sampling",
    defaultCollapsed: true,
    widgets: [
      "steps", "cfg", "sampler_name", "scheduler", "seed",
      "apply_model_sampling", "shift_video", "shift_audio",
      "allow_oversize_shots", "vram_headroom_gb", "allow_res_backoff",
      "decode_tile_frames", "decode_tile_size", "cleanup_between_shots",
    ],
  },
  {
    id: "audio",
    label: "Audio",
    defaultCollapsed: true,
    widgets: [
      "global_soundscape", "non_diegetic_music", "auto_soundscape",
      "auto_silence_nonspeech", "allow_nonspeech_vocals",
      "mute_nonspeech_audio", "mute_fade_ms",
    ],
  },
  {
    id: "scene",
    label: "Scene Logic",
    defaultCollapsed: true,
    widgets: [
      "auto_wardrobe", "auto_props", "prevent_nudity", "exposed_terms",
      "anatomy_guard", "subject_count_guard", "lock_restraints",
      "contact_guard", "motion_guard", "solidity_guard",
    ],
  },
  {
    id: "finish",
    label: "Upscale/Detail",
    defaultCollapsed: true,
    widgets: [
      "upscale", "upscale_model", "upscale_target_short_edge", "upscale_batch",
      "detail_pass", "detail_sampler_name", "detail_scheduler", "detail_steps", "detail_denoise",
    ],
  },
  {
    id: "overlay",
    label: "Overlays",
    defaultCollapsed: true,
    widgets: [
      "watermark_text", "watermark_position", "watermark_size", "watermark_opacity", "watermark_margin",
      "intro_text", "intro_position", "intro_seconds", "intro_fade", "intro_size",
      "overlay_font", "overlay_stroke",
    ],
  },
];

function injectCSS() {
  if (document.getElementById("dumas-h3lv-sections-css")) return;
  const style = document.createElement("style");
  style.id = "dumas-h3lv-sections-css";
  style.textContent = `
    .dh3lv-sections {
      box-sizing: border-box;
      width: 100%;
      padding: 8px 10px 6px;
      color: #e6e7eb;
      font: 12px/1.35 "Segoe UI", sans-serif;
      pointer-events: auto;
      background: linear-gradient(180deg, rgba(33, 36, 42, 0.96), rgba(22, 24, 29, 0.96));
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }
    .dh3lv-sections-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 8px;
    }
    .dh3lv-sections-title {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: #9da5b1;
    }
    .dh3lv-sections-actions {
      display: flex;
      gap: 6px;
    }
    .dh3lv-sections-list {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    .dh3lv-chip,
    .dh3lv-action {
      appearance: none;
      border: 1px solid #464d59;
      background: #262c35;
      color: #d7dce3;
      border-radius: 999px;
      padding: 5px 9px;
      cursor: pointer;
      font: inherit;
      line-height: 1.1;
    }
    .dh3lv-chip[data-open="true"] {
      background: #d96f2b;
      border-color: #f09358;
      color: #fff7f0;
    }
    .dh3lv-chip:hover,
    .dh3lv-action:hover {
      filter: brightness(1.06);
    }
    .dh3lv-count {
      opacity: 0.78;
      margin-left: 4px;
      font-size: 11px;
    }
  `;
  document.head.appendChild(style);
}

function defaultState() {
  const state = {};
  for (const group of GROUPS) state[group.id] = !group.defaultCollapsed;
  return state;
}

function parseState(value) {
  let parsed = value;
  if (typeof parsed === "string") {
    try {
      parsed = JSON.parse(parsed);
    } catch (_error) {
      parsed = null;
    }
  }
  const base = defaultState();
  if (!parsed || typeof parsed !== "object") return base;
  for (const group of GROUPS) {
    if (typeof parsed[group.id] === "boolean") base[group.id] = parsed[group.id];
  }
  return base;
}

function readState(node) {
  return parseState(node.properties?.[STATE_PROPERTY] || node._dh3lvSectionState || "");
}

function writeState(node, state) {
  const normalized = parseState(state);
  const serialized = JSON.stringify(normalized);
  node._dh3lvSectionState = serialized;
  node.properties = node.properties || {};
  node.properties[STATE_PROPERTY] = serialized;
}

function findWidget(node, name) {
  return (node.widgets || []).find((widget) => widget?.name === name) || null;
}

function setWidgetHidden(widget, hidden) {
  if (!widget) return;
  if (!widget._dh3lvOriginal) {
    widget._dh3lvOriginal = {
      type: widget.type,
      computeSize: widget.computeSize,
      hidden: widget.hidden,
    };
  }
  if (hidden) {
    widget.type = "hidden";
    widget.hidden = true;
    widget.computeSize = () => [0, -4];
    return;
  }
  widget.type = widget._dh3lvOriginal.type;
  widget.hidden = !!widget._dh3lvOriginal.hidden;
  widget.computeSize = widget._dh3lvOriginal.computeSize;
}

function applyVisibility(node) {
  const state = readState(node);
  for (const group of GROUPS) {
    for (const name of group.widgets) {
      const widget = findWidget(node, name);
      if (!widget || widget.name === DOM_WIDGET_NAME) continue;
      setWidgetHidden(widget, !state[group.id]);
    }
  }
}

function resizeNode(node) {
  requestAnimationFrame(() => {
    const size = node.computeSize?.();
    if (Array.isArray(size)) {
      node.size[0] = Math.max(MIN_WIDTH, size[0] || 0, node.size?.[0] || 0);
      node.size[1] = Math.max(MIN_HEIGHT, size[1] || 0);
    }
    node.setDirtyCanvas?.(true, true);
  });
}

function renderToolbar(node) {
  const ui = node._dh3lvUI;
  if (!ui) return;
  const state = readState(node);
  ui.list.innerHTML = "";
  for (const group of GROUPS) {
    const button = document.createElement("button");
    button.type = "button";
    button.className = "dh3lv-chip";
    button.dataset.open = state[group.id] ? "true" : "false";
    button.textContent = state[group.id] ? `Hide ${group.label}` : `Show ${group.label}`;

    const count = document.createElement("span");
    count.className = "dh3lv-count";
    count.textContent = String(group.widgets.filter((name) => findWidget(node, name)).length);
    button.appendChild(count);

    button.addEventListener("click", () => {
      const next = readState(node);
      next[group.id] = !next[group.id];
      writeState(node, next);
      applyVisibility(node);
      renderToolbar(node);
      resizeNode(node);
    });
    ui.list.appendChild(button);
  }
}

function setAll(node, open) {
  const next = {};
  for (const group of GROUPS) next[group.id] = !!open;
  writeState(node, next);
  applyVisibility(node);
  renderToolbar(node);
  resizeNode(node);
}

function setupNode(node) {
  if (node._dh3lvUI) return;
  injectCSS();
  writeState(node, readState(node));

  const root = document.createElement("div");
  root.className = "dh3lv-sections";

  const head = document.createElement("div");
  head.className = "dh3lv-sections-head";

  const title = document.createElement("div");
  title.className = "dh3lv-sections-title";
  title.textContent = "Sections";

  const actions = document.createElement("div");
  actions.className = "dh3lv-sections-actions";

  const expandAll = document.createElement("button");
  expandAll.type = "button";
  expandAll.className = "dh3lv-action";
  expandAll.textContent = "Expand All";
  expandAll.addEventListener("click", () => setAll(node, true));

  const collapseAll = document.createElement("button");
  collapseAll.type = "button";
  collapseAll.className = "dh3lv-action";
  collapseAll.textContent = "Collapse Extras";
  collapseAll.addEventListener("click", () => {
    const next = defaultState();
    writeState(node, next);
    applyVisibility(node);
    renderToolbar(node);
    resizeNode(node);
  });

  actions.append(expandAll, collapseAll);
  head.append(title, actions);

  const list = document.createElement("div");
  list.className = "dh3lv-sections-list";
  root.append(head, list);

  node._dh3lvUI = { root, list };
  const widget = node.addDOMWidget(DOM_WIDGET_NAME, "custom", root, {
    getValue: () => null,
    setValue: () => {},
    serialize: false,
    getMinHeight: () => 52,
    hideOnZoom: false,
  });
  applyAdaptiveCanvasOnly(widget);
  const widgets = node.widgets || [];
  const index = widgets.indexOf(widget);
  if (index > 0) {
    widgets.splice(index, 1);
    widgets.unshift(widget);
  }

  applyVisibility(node);
  renderToolbar(node);
  resizeNode(node);
}

app.registerExtension({
  name: "Dumas.H3LongVideosSections",
  async beforeRegisterNodeDef(nodeType, nodeData) {
    if (nodeData?.name !== COMFY_CLASS) return;

    const originalOnNodeCreated = nodeType.prototype.onNodeCreated;
    nodeType.prototype.onNodeCreated = function onNodeCreated() {
      const result = originalOnNodeCreated?.apply(this, arguments);
      setupNode(this);
      return result;
    };

    const originalConfigure = nodeType.prototype.onConfigure;
    nodeType.prototype.onConfigure = function onConfigure() {
      const result = originalConfigure?.apply(this, arguments);
      setupNode(this);
      writeState(this, readState(this));
      applyVisibility(this);
      renderToolbar(this);
      resizeNode(this);
      return result;
    };

    const originalSerialize = nodeType.prototype.onSerialize;
    nodeType.prototype.onSerialize = function onSerialize(o) {
      writeState(this, readState(this));
      const result = originalSerialize?.apply(this, arguments);
      if (o && this.properties?.[STATE_PROPERTY]) {
        o.properties = o.properties || {};
        o.properties[STATE_PROPERTY] = this.properties[STATE_PROPERTY];
      }
      return result;
    };
  },
});