<script setup lang="ts">
import { ref, computed, watch } from "vue";
import HandleComponents from "./HandleComponents.vue";
import NodeTitle from "./NodeTitle.vue";
import { useNodeUpload } from "../composables/useNodeUpload";

const props = defineProps(["id", "data", "position", "selected"]);

const emit = defineEmits<{
  'node-added': [nodeId: string],
  'upload-success': []
}>();

const audioUrl = ref<string>(props.data?.url ?? "");
const audioLabel = ref<string>(props.data?.label ?? "");

watch(
  () => props.data?.url,
  (url) => {
    if (url && url !== audioUrl.value) {
      audioUrl.value = url;
    }
  }
);

watch(
  () => props.data?.label,
  (label) => {
    audioLabel.value = label ?? "";
  }
);

const hasAudio = computed(() => !!audioUrl.value);
const isChild = computed(() => !!props.data?.isChildOf);

const { uploading, triggerUpload } = useNodeUpload(props.id, "audio", {
  onSuccess: () => emit('upload-success'),
});
</script>

<template>
  <div class="audio-node">
    <NodeTitle :data="data" />
    <button
      v-if="selected && !isChild"
      class="upload-btn absolute top-30 right-8 z-1 round-4 color-fff fs-12 pointer border-none opacity-80"
      @click.stop="triggerUpload"
    >
      {{ uploading ? '上传中…' : hasAudio ? '⬆替换' : '⬆上传' }}
    </button>
    <div class="audio-row">
      <!-- 有内容时隐藏 target 柄 -->
      <HandleComponents
        v-if="!hasAudio"
        :position="position"
        :id="id"
        :data="data"
        type="target"
        handleType="audio"
        @node-added="emit('node-added', $event)"
      />

      <!-- 有音频：图标 + 标题 + 原生播放器 -->
      <div v-if="hasAudio" class="audio-display">
        <div class="audio-head">
          <span class="audio-icon">🎵</span>
          <span class="audio-name" :title="audioLabel">{{ audioLabel || "音频文件" }}</span>
        </div>
        <audio
          :src="audioUrl"
          class="audio-player"
          controls
          preload="metadata"
        />
      </div>

      <!-- 无音频：占位 -->
      <div v-else class="audio-empty">
        <div class="empty-icon">🎵</div>
        <div class="empty-text">暂无音频</div>
        <div v-if="data?.label" class="empty-label">{{ data.label }}</div>
      </div>

      <HandleComponents
        :position="position"
        :id="id"
        :data="data"
        type="source"
        handleType="audio"
        @node-added="emit('node-added', $event)"
      />
    </div>
  </div>
</template>

<style scoped lang="scss">
.vue-flow__handle {
  background: #000;
  border: none;
  box-shadow: 0 0 0 1px #fff;
  width: 8px;
  height: 8px;
  line-height: 6px;
  font-size: 8px;
  color: #fff;
}

.audio-node {
  position: relative;
  display: flex;
  flex-direction: column;
  --node-bg: #1f1f1f;
  --node-border: #3a3a3a;
  --node-border-hover: #555;
  --node-w: 260px;
}

.audio-row {
  display: flex;
  align-items: center;
}

/* 有音频：固定宽度卡片，高度随内容自适应 */
.audio-display {
  width: var(--node-w);
  box-sizing: border-box;
  padding: 10px 12px;
  background: var(--node-bg);
  border: 1px solid var(--node-border);
  border-radius: 6px;
  cursor: move;
  transition: border-color 0.2s;
  user-select: none;
  display: flex;
  flex-direction: column;
  gap: 8px;

  &:hover {
    border-color: var(--node-border-hover);
  }
}

.audio-head {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #e6e6e6;
  font-size: 13px;
}

.audio-icon {
  font-size: 16px;
  flex-shrink: 0;
}

.audio-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 原生音频播放器：占满卡片宽度 */
.audio-player {
  width: 100%;
  display: block;
}

/* 无音频：固定尺寸占位 */
.audio-empty {
  width: var(--node-w);
  height: 120px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--node-bg);
  border: 1px dashed var(--node-border);
  border-radius: 6px;
  color: #777;
  transition: border-color 0.2s, color 0.2s;

  &:hover {
    border-color: var(--node-border-hover);
    color: #bbb;
  }

  .empty-icon {
    font-size: 26px;
    color: #555;
  }
  .empty-text {
    font-size: 13px;
  }
  .empty-label {
    font-size: 12px;
    color: #666;
  }
}

/* 选中时右上角上传按钮 */
.upload-btn {
  padding: 4px 8px 6px 8px;
  background: #3f3f3f;
  white-space: nowrap;
  transition: background 0.2s;

  &:hover {
    background: #555;
  }
}
</style>
