<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 videoUrl = ref<string>(props.data?.url ?? "");
const videoWidth = ref(0);
const videoHeight = ref(0);

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

const hasVideo = computed(() => !!videoUrl.value);
const isChild = computed(() => !!props.data?.isChildOf);
const isPortrait = computed(() => videoHeight.value > videoWidth.value);

const videoStyle = computed(() => {
  if (!videoWidth.value || !videoHeight.value) return {};
  return isPortrait.value
    ? { height: "300px", width: "auto" }
    : { width: "300px", height: "auto" };
});

const onLoadedMetadata = (e: Event) => {
  const v = e.target as HTMLVideoElement;
  videoWidth.value = v.videoWidth;
  videoHeight.value = v.videoHeight;
};

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

<template>
  <div class="video-node">
    <NodeTitle :data="data" />
    <button
      v-if="selected && !isChild"
      class="upload-btn"
      @click.stop="triggerUpload"
    >
      {{ uploading ? '上传中…' : hasVideo ? '⬆替换' : '⬆上传' }}
    </button>
    <div class="video-row">
      <HandleComponents
        v-if="!hasVideo"
        :position="position"
        :id="id"
        :data="data"
        type="target"
        handleType="video"
        @node-added="emit('node-added', $event)"
      />

      <!-- 有视频：直接展示，按横竖屏自适应尺寸 -->
      <div v-if="hasVideo" class="video-display">
        <video
          :src="videoUrl"
          class="video-player"
          :style="videoStyle"
          controls
          preload="metadata"
          @loadedmetadata="onLoadedMetadata"
        />
      </div>

      <!-- 无视频：占位 -->
      <div v-else class="video-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="video"
        @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;
}

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

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

/* 有视频：容器贴合视频尺寸 */
.video-display {
  position: relative;
  box-sizing: border-box;
  background: #000;
  border: 1px solid var(--node-border);
  border-radius: 6px;
  overflow: hidden;
  cursor: move;
  transition: border-color 0.2s;
  user-select: none;

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

.video-player {
  display: block;
  background: #000;
  /* metadata 加载前先用最大边约束，避免瞬时溢出 */
  max-width: 300px;
  max-height: 300px;
  width: auto;
  height: auto;
}

/* 无视频：占位 */
.video-empty {
  width: 260px;
  height: 180px;
  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: #888;
  transition: border-color 0.2s, color 0.2s;

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

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

/* 选中时右上角上传按钮 */
.upload-btn {
  position: absolute;
  top: 30px;
  right: 8px;
  z-index: 20;
  padding: 4px 8px 6px 8px;
  border: none;
  border-radius: 4px;
  background: #3f3f3f;
  color: #fff;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s;
  opacity: .8;

  &:hover {
    background: #555;
  }
}

input,
textarea {
  &:focus {
    outline: none;
  }
}
</style>
