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

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

import {
  ElButton,
  ElForm,
  ElFormItem,
  ElInput,
  ElInputNumber,
  ElOption,
  ElSelect,
  ElTabPane,
  ElTabs,
} 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.http.label'),
  method: 'GET',
  url: '',
  headers: [] as any[],
  params: [] as any[],
  body: '',
  auth_type: 'none',
  auth_key: '',
  auth_value: '',
  timeout: 30,
  ...props.data,
});

// 确保数组存在
if (!form.value.headers) form.value.headers = [];
if (!form.value.params) form.value.params = [];

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

const addHeader = () => {
  form.value.headers.push({ key: '', value: '' });
};

const removeHeader = (index: number) => {
  form.value.headers.splice(index, 1);
};

const addParam = () => {
  form.value.params.push({ key: '', value: '' });
};

const removeParam = (index: number) => {
  form.value.params.splice(index, 1);
};
</script>

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

    <div class="mb-4 space-y-2">
      <div class="flex gap-2">
        <ElSelect
          v-model="form.method"
          placeholder="Method"
          style="width: 100px; flex-shrink: 0"
        >
          <ElOption value="GET" label="GET" />
          <ElOption value="POST" label="POST" />
          <ElOption value="PUT" label="PUT" />
          <ElOption value="DELETE" label="DELETE" />
          <ElOption value="PATCH" label="PATCH" />
        </ElSelect>
        <SmartInput
          v-model="form.url"
          :current-node-id="nodeId"
          placeholder="https://api.example.com"
        />
      </div>

      <!-- Authorization -->
      <div
        class="border-border bg-muted flex items-center gap-2 rounded border p-2"
      >
        <span class="text-muted-foreground w-20 text-xs font-medium"
          >Authorization</span
        >
        <ElSelect v-model="form.auth_type" size="small" style="width: 100px">
          <ElOption label="None" value="none" />
          <ElOption label="API Key" value="api_key" />
          <ElOption label="Bearer" value="bearer" />
        </ElSelect>

        <div v-if="form.auth_type === 'api_key'" class="flex flex-1 gap-2">
          <ElInput v-model="form.auth_key" size="small" placeholder="Key" />
          <SmartInput
            v-model="form.auth_value"
            :current-node-id="nodeId"
            size="small"
            placeholder="Value"
          />
        </div>

        <div v-if="form.auth_type === 'bearer'" class="flex-1">
          <SmartInput
            v-model="form.auth_value"
            :current-node-id="nodeId"
            size="small"
            placeholder="Token"
          />
        </div>
      </div>
    </div>

    <ElTabs type="border-card" class="http-tabs">
      <ElTabPane label="Params">
        <div class="space-y-2">
          <div
            v-for="(item, index) in form.params"
            :key="index"
            class="flex gap-2"
          >
            <ElInput v-model="item.key" placeholder="Key" size="small" />
            <ElInput v-model="item.value" placeholder="Value" size="small" />
            <ElButton
              link
              type="danger"
              :icon="Trash2"
              @click="removeParam(index)"
            />
          </div>
          <ElButton link type="primary" :icon="Plus" @click="addParam">
            {{ $t('ai-platform.workflow.panels.http.addParam') }}
          </ElButton>
        </div>
      </ElTabPane>

      <ElTabPane label="Headers">
        <div class="space-y-2">
          <div
            v-for="(item, index) in form.headers"
            :key="index"
            class="flex gap-2"
          >
            <ElInput v-model="item.key" placeholder="Key" size="small" />
            <ElInput v-model="item.value" placeholder="Value" size="small" />
            <ElButton
              link
              type="danger"
              :icon="Trash2"
              @click="removeHeader(index)"
            />
          </div>
          <ElButton link type="primary" :icon="Plus" @click="addHeader">
            {{ $t('ai-platform.workflow.panels.http.addHeader') }}
          </ElButton>
        </div>
      </ElTabPane>

      <ElTabPane label="Body">
        <ElInput
          v-model="form.body"
          type="textarea"
          :rows="10"
          resize="vertical"
          class="workflow-code-textarea"
          placeholder='{"key": "value"}'
        />
        <div class="text-muted-foreground mt-1 text-xs">
          {{ $t('ai-platform.workflow.panels.http.bodyHint') }}
        </div>
      </ElTabPane>

      <ElTabPane :label="$t('ai-platform.workflow.panels.http.settings')">
        <ElFormItem :label="$t('ai-platform.workflow.panels.http.timeout')">
          <ElInputNumber
            v-model="form.timeout"
            :min="1"
            :max="300"
            size="small"
          />
        </ElFormItem>
      </ElTabPane>
    </ElTabs>
  </ElForm>
</template>

<style scoped>
:deep(.http-tabs .el-tabs__content) {
  padding: 12px;
}

:deep(.workflow-code-textarea textarea) {
  font-family:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
    'Courier New', monospace;
  font-size: 12px;
  line-height: 1.6;
}
</style>
