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

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

import { ElForm, ElFormItem, ElInput, ElOption, ElSelect } 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.appSettings.label'),
  app_name: '',
  home_path: '',
  logo_source: '',
  theme_builtin_type: 'default',
  theme_color_primary: '',
  app_layout: 'sidebar-nav',
  require_confirmation: true,
  ...props.data,
});

// 布局选项
const layoutOptions = [
  {
    label: $t('ai-platform.appSettings.layoutOptions.sidebar-nav'),
    value: 'sidebar-nav',
  },
  {
    label: $t('ai-platform.appSettings.layoutOptions.sidebar-mixed-nav'),
    value: 'sidebar-mixed-nav',
  },
  {
    label: $t('ai-platform.appSettings.layoutOptions.header-nav'),
    value: 'header-nav',
  },
  {
    label: $t('ai-platform.appSettings.layoutOptions.mixed-nav'),
    value: 'mixed-nav',
  },
  {
    label: $t('ai-platform.appSettings.layoutOptions.full-content'),
    value: 'full-content',
  },
];

// 主题选项
const themeOptions = [
  {
    label: $t('ai-platform.appSettings.themeOptions.default'),
    value: 'default',
  },
  { label: $t('ai-platform.appSettings.themeOptions.violet'), value: 'violet' },
  { label: $t('ai-platform.appSettings.themeOptions.pink'), value: 'pink' },
  { label: $t('ai-platform.appSettings.themeOptions.rose'), value: 'rose' },
  { label: $t('ai-platform.appSettings.themeOptions.sky'), value: 'sky' },
  { label: $t('ai-platform.appSettings.themeOptions.cyan'), value: 'cyan' },
  { label: $t('ai-platform.appSettings.themeOptions.green'), value: 'green' },
  { label: $t('ai-platform.appSettings.themeOptions.orange'), value: 'orange' },
  { label: $t('ai-platform.appSettings.themeOptions.yellow'), value: 'yellow' },
  { label: $t('ai-platform.appSettings.themeOptions.zinc'), value: 'zinc' },
  {
    label: $t('ai-platform.appSettings.themeOptions.neutral'),
    value: 'neutral',
  },
  { label: $t('ai-platform.appSettings.themeOptions.slate'), value: 'slate' },
  { label: $t('ai-platform.appSettings.themeOptions.gray'), value: 'gray' },
  {
    label: $t('ai-platform.appSettings.themeOptions.deep-blue'),
    value: 'deep-blue',
  },
  {
    label: $t('ai-platform.appSettings.themeOptions.deep-green'),
    value: 'deep-green',
  },
];

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

<template>
  <ElForm label-position="top">
    <ElFormItem :label="$t('ai-platform.workflow.panels.common.nodeName')">
      <ElInput
        v-model="form.label"
        :placeholder="$t('ai-platform.workflow.panels.appSettings.placeholder')"
      />
    </ElFormItem>

    <ElFormItem :label="$t('ai-platform.appSettings.appName')">
      <SmartInput
        v-model="form.app_name"
        :current-node-id="nodeId"
        :placeholder="$t('ai-platform.appSettings.appNamePlaceholder')"
      />
      <div class="text-muted-foreground mt-1 text-xs">
        {{ $t('ai-platform.workflow.panels.appSettings.varRefHint') }}
        <code v-pre>{{llm-1.output}}</code>
      </div>
    </ElFormItem>

    <ElFormItem :label="$t('ai-platform.workflow.panels.appSettings.homePath')">
      <SmartInput
        v-model="form.home_path"
        :current-node-id="nodeId"
        placeholder="e.g. /dashboard"
      />
      <div class="text-muted-foreground mt-1 text-xs">
        {{ $t('ai-platform.workflow.panels.appSettings.homePathHint') }}
      </div>
    </ElFormItem>

    <ElFormItem :label="$t('ai-platform.appSettings.logoSource')">
      <SmartInput
        v-model="form.logo_source"
        :current-node-id="nodeId"
        :placeholder="$t('ai-platform.appSettings.logoSourcePlaceholder')"
      />
      <div class="text-muted-foreground mt-1 text-xs">
        {{ $t('ai-platform.workflow.panels.appSettings.logoHint') }}
      </div>
    </ElFormItem>

    <ElFormItem :label="$t('ai-platform.appSettings.builtinTheme')">
      <ElSelect v-model="form.theme_builtin_type" class="w-full">
        <ElOption
          v-for="item in themeOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </ElSelect>
    </ElFormItem>

    <ElFormItem :label="$t('ai-platform.appSettings.primaryColor')">
      <SmartInput
        v-model="form.theme_color_primary"
        :current-node-id="nodeId"
        placeholder="e.g. hsl(212 100% 45%)"
      />
      <div class="text-muted-foreground mt-1 text-xs">
        {{ $t('ai-platform.workflow.panels.appSettings.primaryColorHint') }}
      </div>
    </ElFormItem>

    <ElFormItem :label="$t('ai-platform.appSettings.layout')">
      <ElSelect v-model="form.app_layout" class="w-full">
        <ElOption
          v-for="item in layoutOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </ElSelect>
    </ElFormItem>

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

    <!-- 输出变量说明 -->
    <div
      class="mt-4 rounded border border-green-200 bg-green-50 p-3 dark:border-green-800 dark:bg-green-950"
    >
      <div class="mb-2 font-medium text-green-700 dark:text-green-300">
        {{ $t('ai-platform.workflow.panels.common.outputVars') }}
      </div>
      <div class="text-muted-foreground space-y-1 text-xs">
        <div class="flex justify-between">
          <span class="font-mono">settings</span>
          <span>{{
            $t('ai-platform.workflow.panels.appSettings.settingsOutput')
          }}</span>
        </div>
        <div class="flex justify-between">
          <span class="font-mono">confirmed</span>
          <span>{{
            $t('ai-platform.workflow.panels.appSettings.confirmedOutput')
          }}</span>
        </div>
      </div>
    </div>
  </ElForm>
</template>
