/* Shared icons, FileIcon, GitPanel, FileTree — Vue 3 classic-script port */
const { ref, computed, onMounted, onUnmounted, watch, nextTick } = Vue;

/* ---- Icon component ---- */
/* Internal map: name → { vb, inner } */
const _iconMap = {
  search: {
    vb: "0 0 16 16",
    inner: `<circle cx="7" cy="7" r="4.5" stroke="currentColor" stroke-width="1.4"/><line x1="10.5" y1="10.5" x2="14" y2="14" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/>`
  },
  branch: {
    vb: "0 0 16 16",
    inner: `<circle cx="4" cy="3.5" r="1.8" stroke="currentColor" stroke-width="1.3"/><circle cx="4" cy="12.5" r="1.8" stroke="currentColor" stroke-width="1.3"/><circle cx="12" cy="5" r="1.8" stroke="currentColor" stroke-width="1.3"/><path d="M4 5.3v5.4M5.8 5C9 5 10 6.2 10 9v0" stroke="currentColor" stroke-width="1.3" fill="none"/>`
  },
  close: {
    vb: "0 0 12 12",
    inner: `<path d="M3 3l6 6M9 3l-6 6" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/>`
  },
  copy: {
    vb: "0 0 16 16",
    inner: `<rect x="5" y="5" width="8" height="9" rx="1.5" stroke="currentColor" stroke-width="1.3"/><path d="M3 11V3a1 1 0 0 1 1-1h6" stroke="currentColor" stroke-width="1.3" fill="none"/>`
  },
  terminal: {
    vb: "0 0 16 16",
    inner: `<path d="M3 4l3 3-3 3M8 11h5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>`
  },
  spark: {
    vb: "0 0 16 16",
    inner: `<path d="M8 1.5l1.6 4.9L14.5 8l-4.9 1.6L8 14.5 6.4 9.6 1.5 8l4.9-1.6L8 1.5z" stroke="currentColor" stroke-width="1.1" fill="none" stroke-linejoin="round"/>`
  },
  file: {
    vb: "0 0 16 16",
    inner: `<path d="M4 2h5l3 3v9H4V2z" stroke="currentColor" stroke-width="1.2" fill="none"/><path d="M9 2v3h3" stroke="currentColor" stroke-width="1.2" fill="none"/>`
  },
  reveal: {
    vb: "0 0 16 16",
    inner: `<path d="M2 4.5h4l1.3 1.5H14V13H2V4.5z" stroke="currentColor" stroke-width="1.2" fill="none"/>`
  },
  diff: {
    vb: "0 0 16 16",
    inner: `<path d="M4 2v8M4 12.5v1.5M2 4h4M2 8h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/><path d="M12 14V6M12 3.5V2M10 12h4M10 8h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>`
  },
  plus: {
    vb: "0 0 14 14",
    inner: `<path d="M7 2.5v9M2.5 7h9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>`
  },
  minus: {
    vb: "0 0 14 14",
    inner: `<path d="M2.5 7h9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>`
  },
  check: {
    vb: "0 0 14 14",
    inner: `<path d="M2.5 7.5l2.8 3L11.5 3.5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>`
  },
  discard: {
    vb: "0 0 16 16",
    inner: `<path d="M12.5 5.5A5 5 0 1 0 13 9" stroke="currentColor" stroke-width="1.3" fill="none" stroke-linecap="round"/><path d="M12.5 2.5v3h-3" stroke="currentColor" stroke-width="1.3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>`
  },
};

const Icon = {
  props: {
    name: { type: String, required: true },
    w: { type: Number, default: 13 },
    h: { type: Number, default: 13 },
  },
  setup(props) {
    const entry = computed(() => _iconMap[props.name] || null);
    const vb = computed(() => entry.value ? entry.value.vb : "0 0 16 16");
    const inner = computed(() => entry.value ? entry.value.inner : "");
    return { vb, inner };
  },
  template: `<svg :width="w" :height="h" :viewBox="vb" fill="none" v-html="inner"></svg>`,
};

/* ---- Chevron ---- */
const Chevron = {
  props: {
    open: { type: Boolean, default: false },
  },
  template: `
    <svg width="9" height="9" viewBox="0 0 10 10"
      :style="{ transform: open ? 'rotate(90deg)' : 'none', transition: 'transform .12s' }">
      <path d="M3.5 2l3.5 3-3.5 3" stroke="currentColor" stroke-width="1.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
  `,
};

/* ---- FolderIcon ---- */
const FolderIcon = {
  props: {
    open: { type: Boolean, default: false },
  },
  template: `
    <svg class="folder-ic" width="14" height="14" viewBox="0 0 16 16" fill="none">
      <path
        :d="open ? 'M1.5 4.5h4l1.2 1.4H14V13H2V4.5z' : 'M1.5 4.5h4l1.2 1.4H14V13H1.5V4.5z'"
        :fill="open ? 'rgba(122,131,140,.18)' : 'rgba(122,131,140,.12)'"
        stroke="currentColor" stroke-width="1.1"/>
    </svg>
  `,
};

/* ---- FileIcon ---- */
const FileIcon = {
  props: {
    path: { type: String, required: true },
  },
  setup(props) {
    const ic = computed(() => HL.iconFor(props.path));
    return { ic };
  },
  template: `
    <span class="ficon" :style="{ background: ic.c }"><span>{{ ic.t }}</span></span>
  `,
};

/* ---- GitRow ---- */
const GitRow = {
  props: {
    c: { type: Object, required: true },
    staged: { type: Boolean, required: true },
    activePath: { type: String, default: null },
    onOpen: { type: Function, required: true },
    onContext: { type: Function, required: true },
    onToggleStage: { type: Function, required: true },
  },
  components: { Icon, FileIcon },
  setup(props) {
    const name = computed(() => props.c.path.split("/").pop());
    const dir = computed(() => props.c.path.split("/").slice(0, -1).join("/"));
    return { name, dir };
  },
  template: `
    <div
      :class="'git-row' + (activePath === c.path ? ' active' : '')"
      @click="onOpen(c.path, { diff: true })"
      @contextmenu="(e) => onContext(e, { path: c.path, kind: 'git', staged })"
      :title="c.path">
      <span :class="'git-stat ' + c.status">{{ c.status }}</span>
      <FileIcon :path="c.path" />
      <span :class="'git-name' + (c.deleted ? ' del' : '')">{{ name }}</span>
      <span v-if="dir" class="git-dir">{{ dir }}/</span>
      <button
        class="git-act"
        :title="staged ? 'Unstage changes' : 'Stage changes'"
        @click.stop="onToggleStage(c.path)">
        <Icon v-if="staged" name="minus" />
        <Icon v-else name="plus" />
      </button>
      <span class="git-delta">
        <span v-if="c.add > 0" class="a">+{{ c.add }}</span>
        <span v-if="c.del > 0" class="d">-{{ c.del }}</span>
      </span>
    </div>
  `,
};

/* ---- GitPanel (multi-root fragment) ---- */
const GitPanel = {
  props: {
    changes: { type: Array, required: true },
    staged: { type: Object, required: true },   /* Set */
    committed: { type: Object, required: true }, /* Set */
    commitMsg: { type: String, required: true },
    setCommitMsg: { type: Function, required: true },
    onStage: { type: Function, required: true },
    onUnstage: { type: Function, required: true },
    onStageAll: { type: Function, required: true },
    onUnstageAll: { type: Function, required: true },
    onCommit: { type: Function, required: true },
    onOpen: { type: Function, required: true },
    onContext: { type: Function, required: true },
    activePath: { type: String, default: null },
  },
  components: { Icon, GitRow },
  setup(props) {
    const visible = computed(() => props.changes.filter((c) => !props.committed.has(c.path)));
    const stagedList = computed(() => visible.value.filter((c) => props.staged.has(c.path)));
    const changesList = computed(() => visible.value.filter((c) => !props.staged.has(c.path)));
    const totals = computed(() =>
      visible.value.reduce((a, c) => ({ add: a.add + c.add, del: a.del + c.del }), { add: 0, del: 0 })
    );
    const canCommit = computed(() => stagedList.value.length > 0 && props.commitMsg.trim().length > 0);

    function handleKeyDown(e) {
      if ((e.metaKey || e.ctrlKey) && e.key === "Enter" && canCommit.value) {
        e.preventDefault();
        props.onCommit();
      }
    }

    return { visible, stagedList, changesList, totals, canCommit, handleKeyDown };
  },
  /* Vue 3 allows multi-root templates */
  template: `
    <div class="phead">
      <Icon name="branch" /><span>Source Control</span>
      <span class="ct">{{ visible.length }}</span>
    </div>

    <div class="commit-box">
      <textarea
        class="commit-input"
        rows="1"
        :value="commitMsg"
        :spellcheck="false"
        placeholder="Message (⌘↵ to commit)"
        @input="(e) => setCommitMsg(e.target.value)"
        @keydown="handleKeyDown">
      </textarea>
      <button
        class="commit-btn"
        :disabled="!canCommit"
        @click="onCommit"
        :title="canCommit ? 'Commit staged changes' : 'Stage files and write a message to commit'">
        <Icon name="check" /><span>Commit{{ stagedList.length ? ' ' + stagedList.length : '' }}</span>
      </button>
    </div>

    <div class="git-body">
      <div v-if="visible.length === 0" class="git-empty">
        <Icon name="check" :w="20" :h="20" /><span>No changes — working tree clean</span>
      </div>
      <template v-else>
        <div class="git-group">
          Staged Changes <span class="gc">{{ stagedList.length }}</span>
          <button v-if="stagedList.length > 0" class="grp-act" title="Unstage all" @click="onUnstageAll">
            <Icon name="minus" />
          </button>
        </div>
        <template v-if="stagedList.length > 0">
          <GitRow
            v-for="c in stagedList"
            :key="c.path"
            :c="c"
            :staged="true"
            :activePath="activePath"
            :onOpen="onOpen"
            :onContext="onContext"
            :onToggleStage="onUnstage" />
        </template>
        <div v-else class="git-none">Nothing staged — use <span class="key">+</span> to stage a file</div>

        <div class="git-divider"></div>

        <div class="git-group">
          Changes <span class="gc">{{ changesList.length }}</span>
          <button v-if="changesList.length > 0" class="grp-act" title="Stage all" @click="onStageAll">
            <Icon name="plus" />
          </button>
        </div>
        <template v-if="changesList.length > 0">
          <GitRow
            v-for="c in changesList"
            :key="c.path"
            :c="c"
            :staged="false"
            :activePath="activePath"
            :onOpen="onOpen"
            :onContext="onContext"
            :onToggleStage="onStage" />
        </template>
        <div v-else class="git-none">All changes staged</div>
      </template>
    </div>

    <div class="git-foot">
      <span class="branch-chip"><Icon name="branch" /><b>{{ PROJECT.branch }}</b></span>
      <span :style="{ marginLeft: 'auto', fontFamily: 'var(--mono)' }">
        <span class="a" :style="{ color: 'var(--add)' }">+{{ totals.add }}</span>{{ ' ' }}
        <span class="d" :style="{ color: 'var(--del)' }">-{{ totals.del }}</span>
      </span>
    </div>
  `,
};

/* ---- TreeNode (recursive — registered globally) ---- */
const TreeNode = {
  name: "TreeNode",
  props: {
    node: { type: Object, required: true },
    depth: { type: Number, required: true },
    openDirs: { type: Object, required: true },   /* Set */
    toggleDir: { type: Function, required: true },
    onOpen: { type: Function, required: true },
    onContext: { type: Function, required: true },
    activePath: { type: String, default: null },
    changeMap: { type: Object, required: true },
    committed: { type: Object, default: null },   /* Set or null */
  },
  components: { Chevron, FolderIcon, FileIcon },
  setup(props) {
    const pad = computed(() => 10 + props.depth * 13);
    const isOpen = computed(() => props.node.type === "dir" && (props.openDirs.has(props.node.path) || props.node.path === ""));
    const status = computed(() => {
      if (props.node.type === "dir") return null;
      return (props.committed && props.committed.has(props.node.path)) ? null : props.changeMap[props.node.path];
    });
    return { pad, isOpen, status };
  },
  /* Multi-root fragment for the dir case */
  template: `
    <template v-if="node.type === 'dir'">
      <div
        v-if="node.path !== ''"
        class="tree-row folder"
        :style="{ paddingLeft: pad + 'px' }"
        @click="toggleDir(node.path)"
        @contextmenu="(e) => onContext(e, { path: node.path, kind: 'dir' })">
        <span class="tw"><Chevron :open="isOpen" /></span>
        <FolderIcon :open="isOpen" />
        <span class="tree-label">{{ node.name }}</span>
      </div>
      <template v-if="isOpen">
        <TreeNode
          v-for="c in node.children"
          :key="c.path"
          :node="c"
          :depth="node.path === '' ? 0 : depth + 1"
          :openDirs="openDirs"
          :toggleDir="toggleDir"
          :onOpen="onOpen"
          :onContext="onContext"
          :activePath="activePath"
          :changeMap="changeMap"
          :committed="committed" />
      </template>
    </template>
    <div
      v-else
      :class="'tree-row' + (activePath === node.path ? ' active' : '')"
      :style="{ paddingLeft: (pad + 2) + 'px' }"
      @click="onOpen(node.path)"
      @contextmenu="(e) => onContext(e, { path: node.path, kind: 'file' })"
      :title="node.path">
      <span class="tw"></span>
      <FileIcon :path="node.path" />
      <span
        class="tree-label"
        :style="status === 'D' ? { textDecoration: 'line-through', color: 'var(--fg-3)' } : null">
        {{ node.name }}
      </span>
      <span v-if="status" :class="'tree-badge ' + status">{{ status }}</span>
    </div>
  `,
};

/* Self-reference: register TreeNode in itself for recursion */
TreeNode.components = Object.assign(TreeNode.components || {}, { TreeNode });

/* ---- FileTree (multi-root fragment) ---- */
const FileTree = {
  props: {
    tree: { type: Object, required: true },
    openDirs: { type: Object, required: true },   /* Set */
    toggleDir: { type: Function, required: true },
    onOpen: { type: Function, required: true },
    onContext: { type: Function, required: true },
    activePath: { type: String, default: null },
    changeMap: { type: Object, required: true },
    committed: { type: Object, default: null },   /* Set or null */
  },
  components: { TreeNode },
  template: `
    <div class="phead">
      <span>Explorer</span>
      <span :style="{ marginLeft: 'auto', color: 'var(--fg-3)', textTransform: 'none', letterSpacing: 0, fontFamily: 'var(--mono)', fontSize: '10.5px' }">{{ tree.name }}</span>
    </div>
    <div class="tree-body">
      <TreeNode
        :node="tree"
        :depth="0"
        :openDirs="openDirs"
        :toggleDir="toggleDir"
        :onOpen="onOpen"
        :onContext="onContext"
        :activePath="activePath"
        :changeMap="changeMap"
        :committed="committed" />
    </div>
  `,
};

/* ---- Global export ---- */
window.HelderComponents = Object.assign(window.HelderComponents || {}, {
  Icon,
  Chevron,
  FolderIcon,
  FileIcon,
  GitRow,
  GitPanel,
  TreeNode,
  FileTree,
});