<script setup lang="ts">
import { ref, watch } from 'vue';

import { Plus, Trash2 } from '@vben/icons';
import { $t } from '@vben/locales';

import { ElButton, ElInput } from 'element-plus';

const props = defineProps<{ data: any; nodeId: string }>();
const emit = defineEmits(['update']);

const label = ref(
  props.data.label || $t('ai-platform.workflow.panels.parallel.label'),
);
const branches = ref<any[]>(
  props.data.branches || [
    {
      id: 'branch_1',
      name: `${$t('ai-platform.workflow.panels.parallel.branch', { index: 1 })}`,
    },
    {
      id: 'branch_2',
      name: `${$t('ai-platform.workflow.panels.parallel.branch', { index: 2 })}`,
    },
  ],
);

watch(
  [label, branches],
  ([labelVal, branchesVal]) => {
    emit('update', { ...props.data, label: labelVal, branches: branchesVal });
  },
  { deep: true },
);

const addBranch = () => {
  const newId = `branch_${Date.now()}`;
  branches.value.push({
    id: newId,
    name: `${$t('ai-platform.workflow.panels.parallel.branch', { index: branches.value.length + 1 })}`,
  });
};

const removeBranch = (index: number) => {
  if (branches.value.length > 2) {
    branches.value.splice(index, 1);
  }
};
</script>

<template>
  <div class="space-y-4">
    <div class="mb-4">
      <label class="text-foreground mb-1 block text-sm font-medium">{{
        $t('ai-platform.workflow.panels.common.nodeName')
      }}</label>
      <ElInput
        v-model="label"
        :placeholder="$t('ai-platform.workflow.panels.parallel.placeholder')"
      />
    </div>

    <div class="flex items-center justify-between">
      <span class="text-foreground text-sm font-medium">{{
        $t('ai-platform.workflow.panels.parallel.title')
      }}</span>
      <ElButton link type="primary" :icon="Plus" @click="addBranch">
        {{ $t('ai-platform.workflow.panels.parallel.addBranch') }}
      </ElButton>
    </div>

    <div class="text-muted-foreground text-xs">
      {{ $t('ai-platform.workflow.panels.parallel.branchHint') }}
    </div>

    <div class="space-y-2">
      <div
        v-for="(branch, index) in branches"
        :key="branch.id"
        class="flex items-center gap-2 rounded border border-purple-200 bg-purple-50 p-2"
      >
        <span class="text-xs font-bold text-purple-600">{{ index + 1 }}</span>
        <ElInput
          v-model="branch.name"
          :placeholder="$t('ai-platform.workflow.panels.parallel.branchName')"
          size="small"
          class="flex-1"
        />
        <ElButton
          v-if="branches.length > 2"
          link
          type="danger"
          :icon="Trash2"
          @click="removeBranch(index)"
        />
      </div>
    </div>

    <div class="border-border bg-muted rounded border p-3">
      <div class="text-muted-foreground text-xs font-medium">
        {{ $t('ai-platform.workflow.panels.common.usage') }}
      </div>
      <ul class="text-muted-foreground mt-1 list-inside list-disc text-xs">
        <li>{{ $t('ai-platform.workflow.panels.parallel.usageTip1') }}</li>
        <li>{{ $t('ai-platform.workflow.panels.parallel.usageTip2') }}</li>
        <li>{{ $t('ai-platform.workflow.panels.parallel.usageTip3') }}</li>
      </ul>
    </div>
  </div>
</template>
