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

import { $t } from '@vben/locales';

import { ElForm, ElFormItem, ElInput, ElInputNumber } from 'element-plus';

import ConfirmModeSelect from '../components/ConfirmModeSelect.vue';
import SmartInput from '../components/SmartInput.vue';

const props = defineProps<{
  data: any;
  nodeId: string;
}>();

const emit = defineEmits(['update']);

const form = ref({
  label: $t('ai-platform.workflow.panels.dashboardPublish.label'),
  dashboard_id: '',
  menu_name: '',
  menu_parent_id: '',
  menu_icon: 'lucide:layout-dashboard',
  menu_order: 0,
  application_id: '',
  require_confirmation: true,
  ...props.data,
});

watch(
  form,
  (newVal) => {
    emit('update', newVal);
  },
  { deep: true },
);
</script>

<template>
  <div class="space-y-4">
    <ElForm :model="form" label-position="top" size="small">
      <ElFormItem :label="$t('ai-platform.workflow.panels.common.nodeName')">
        <ElInput
          v-model="form.label"
          :placeholder="
            $t('ai-platform.workflow.panels.dashboardPublish.placeholder')
          "
        />
      </ElFormItem>

      <ElFormItem
        :label="$t('ai-platform.workflow.panels.dashboardPublish.dashboardId')"
        required
      >
        <SmartInput
          v-model="form.dashboard_id"
          :placeholder="
            $t(
              'ai-platform.workflow.panels.dashboardPublish.dashboardIdPlaceholder',
            )
          "
          :current-node-id="nodeId"
        />
      </ElFormItem>

      <ElFormItem
        :label="$t('ai-platform.workflow.panels.dashboardPublish.menuName')"
        required
      >
        <SmartInput
          v-model="form.menu_name"
          :placeholder="
            $t(
              'ai-platform.workflow.panels.dashboardPublish.menuNamePlaceholder',
            )
          "
          :current-node-id="nodeId"
        />
      </ElFormItem>

      <ElFormItem
        :label="$t('ai-platform.workflow.panels.dashboardPublish.parentMenuId')"
      >
        <SmartInput
          v-model="form.menu_parent_id"
          :placeholder="
            $t(
              'ai-platform.workflow.panels.dashboardPublish.parentMenuIdPlaceholder',
            )
          "
          :current-node-id="nodeId"
        />
      </ElFormItem>

      <ElFormItem
        :label="$t('ai-platform.workflow.panels.dashboardPublish.menuIcon')"
      >
        <ElInput
          v-model="form.menu_icon"
          placeholder="lucide:layout-dashboard"
        />
      </ElFormItem>

      <ElFormItem
        :label="$t('ai-platform.workflow.panels.dashboardPublish.menuSort')"
      >
        <ElInputNumber
          v-model="form.menu_order"
          :min="0"
          :max="9999"
          class="w-full"
        />
      </ElFormItem>

      <ElFormItem
        :label="$t('ai-platform.workflow.panels.dashboardPublish.appId')"
      >
        <SmartInput
          v-model="form.application_id"
          :placeholder="
            $t('ai-platform.workflow.panels.dashboardPublish.appIdPlaceholder')
          "
          :current-node-id="nodeId"
        />
      </ElFormItem>

      <ElFormItem :label="$t('ai-platform.workflow.panels.common.confirmMode')">
        <ConfirmModeSelect
          v-model="form.require_confirmation"
          :current-node-id="nodeId"
        />
      </ElFormItem>
    </ElForm>

    <div class="bg-muted/50 rounded-lg p-3">
      <div class="text-muted-foreground text-xs">
        <p class="mb-2 font-medium">
          {{ $t('ai-platform.workflow.panels.common.outputVars') }}:
        </p>
        <ul class="list-inside list-disc space-y-1">
          <li>
            <code>menu_id</code> -
            {{
              $t('ai-platform.workflow.panels.dashboardPublish.menuIdOutput')
            }}
          </li>
          <li>
            <code>route_path</code> -
            {{
              $t('ai-platform.workflow.panels.dashboardPublish.routePathOutput')
            }}
          </li>
          <li>
            <code>publish_result</code> -
            {{
              $t(
                'ai-platform.workflow.panels.dashboardPublish.publishResultOutput',
              )
            }}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
