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

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

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.systemSummary.label'),
  app_info: '',
  form_results: '',
  dashboard_info: '',
  summary_title: $t(
    'ai-platform.workflow.panels.systemSummary.summaryTitleDefault',
  ),
  show_statistics: true,
  base_url: '',
  ...props.data,
});

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.systemSummary.placeholder')
        "
      />
    </ElFormItem>

    <ElFormItem>
      <template #label>
        <div class="flex items-center gap-2">
          <span>{{
            $t('ai-platform.workflow.panels.systemSummary.formResultList')
          }}</span>
          <span class="text-red-500">*</span>
          <span class="text-muted-foreground text-xs">(array)</span>
        </div>
      </template>
      <SmartInput
        v-model="form.form_results"
        :current-node-id="nodeId"
        type="textarea"
        :rows="2"
        placeholder="{{loop.results}} or {{form_publish.publish_result}}"
      />
      <div class="text-muted-foreground mt-1 text-xs">
        {{ $t('ai-platform.workflow.panels.systemSummary.formResultListHint') }}
      </div>
    </ElFormItem>

    <ElFormItem>
      <template #label>
        <div class="flex items-center gap-2">
          <span>{{
            $t('ai-platform.workflow.panels.systemSummary.appName')
          }}</span>
          <span class="text-muted-foreground text-xs">{{
            $t('ai-platform.workflow.panels.llm.optional')
          }}</span>
        </div>
      </template>
      <SmartInput
        v-model="form.app_info"
        :current-node-id="nodeId"
        placeholder="{{app_create.app_name}} or enter name directly"
      />
      <div class="text-muted-foreground mt-1 text-xs">
        {{ $t('ai-platform.workflow.panels.systemSummary.appNameHint') }}
      </div>
    </ElFormItem>

    <ElFormItem>
      <template #label>
        <div class="flex items-center gap-2">
          <span>{{
            $t('ai-platform.workflow.panels.systemSummary.dashboardName')
          }}</span>
          <span class="text-muted-foreground text-xs">{{
            $t('ai-platform.workflow.panels.llm.optional')
          }}</span>
        </div>
      </template>
      <SmartInput
        v-model="form.dashboard_info"
        :current-node-id="nodeId"
        placeholder="{{dashboard_publish.menu_name}} or enter name directly"
      />
      <div class="text-muted-foreground mt-1 text-xs">
        {{ $t('ai-platform.workflow.panels.systemSummary.dashboardNameHint') }}
      </div>
    </ElFormItem>

    <ElFormItem
      :label="$t('ai-platform.workflow.panels.systemSummary.summaryTitle')"
    >
      <SmartInput
        v-model="form.summary_title"
        :current-node-id="nodeId"
        :placeholder="
          $t('ai-platform.workflow.panels.systemSummary.summaryTitleDefault')
        "
      />
    </ElFormItem>

    <ElFormItem
      :label="$t('ai-platform.workflow.panels.systemSummary.showStats')"
    >
      <ElSwitch v-model="form.show_statistics" />
      <div class="text-muted-foreground mt-1 text-xs">
        {{ $t('ai-platform.workflow.panels.systemSummary.showStatsHint') }}
      </div>
    </ElFormItem>

    <ElFormItem
      :label="$t('ai-platform.workflow.panels.systemSummary.baseUrl')"
    >
      <SmartInput
        v-model="form.base_url"
        :current-node-id="nodeId"
        :placeholder="
          $t('ai-platform.workflow.panels.systemSummary.baseUrlPlaceholder')
        "
      />
      <div class="text-muted-foreground mt-1 text-xs">
        {{ $t('ai-platform.workflow.panels.systemSummary.baseUrlHint') }}
      </div>
    </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">summary</span>
          <span>{{
            $t('ai-platform.workflow.panels.systemSummary.summaryDataOutput')
          }}</span>
        </div>
        <div class="flex justify-between">
          <span class="font-mono">total_forms</span>
          <span>{{
            $t('ai-platform.workflow.panels.systemSummary.formCountOutput')
          }}</span>
        </div>
        <div class="flex justify-between">
          <span class="font-mono">has_app</span>
          <span>{{
            $t('ai-platform.workflow.panels.systemSummary.hasAppOutput')
          }}</span>
        </div>
        <div class="flex justify-between">
          <span class="font-mono">has_dashboard</span>
          <span>{{
            $t('ai-platform.workflow.panels.systemSummary.hasDashboardOutput')
          }}</span>
        </div>
      </div>
    </div>

    <div
      class="mt-4 rounded border border-blue-200 bg-blue-50 p-3 dark:border-blue-800 dark:bg-blue-950"
    >
      <div class="mb-2 font-medium text-blue-700 dark:text-blue-300">
        {{ $t('ai-platform.workflow.panels.systemSummary.usageScenarios') }}
      </div>
      <div class="text-muted-foreground space-y-2 text-xs">
        <div>
          <strong
            >{{
              $t('ai-platform.workflow.panels.systemSummary.fullAppCreate')
            }}:</strong
          >
          <div class="mt-1">
            AppCreate → Loop[Form] → Dashboard → SystemSummary
          </div>
        </div>
        <div>
          <strong
            >{{
              $t('ai-platform.workflow.panels.systemSummary.subAppCreate')
            }}:</strong
          >
          <div class="mt-1">Loop[Form] → SystemSummary</div>
        </div>
        <div>
          <strong
            >{{
              $t('ai-platform.workflow.panels.systemSummary.singleFormCreate')
            }}:</strong
          >
          <div class="mt-1">FormPublish → SystemSummary</div>
        </div>
      </div>
    </div>
  </ElForm>
</template>
