<script setup lang="ts">
import { Globe } from '@vben/icons';
import { $t } from '@vben/locales';

import BaseNode from './BaseNode.vue';

defineProps(['selected', 'data', 'id']);

const getMethodColor = (method: string) => {
  const map: Record<string, string> = {
    GET: 'text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-950 border-blue-200 dark:border-blue-700',
    POST: 'text-green-600 dark:text-green-400 bg-green-50 dark:bg-green-950 border-green-200 dark:border-green-700',
    PUT: 'text-orange-600 dark:text-orange-400 bg-orange-50 dark:bg-orange-950 border-orange-200 dark:border-orange-700',
    DELETE:
      'text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-950 border-red-200 dark:border-red-700',
  };
  return (
    map[method?.toUpperCase()] || 'text-muted-foreground bg-muted border-border'
  );
};
</script>

<template>
  <BaseNode
    :selected="selected"
    :execution-status="data.executionStatus"
    :execution-result="data.executionResult"
    :label="data.label || $t('ai-platform.workflow.nodes.http.label')"
    :inputs="[{ id: 'target' }]"
    :outputs="[{ id: 'source' }]"
    :node-id="id"
    node-type="http"
  >
    <template #icon><Globe class="size-5" /></template>
    <template #desc>{{ $t('ai-platform.workflow.nodes.http.desc') }}</template>

    <div class="space-y-2">
      <div class="flex items-center gap-2">
        <span
          class="rounded border px-1.5 py-0.5 text-[10px] font-bold uppercase"
          :class="getMethodColor(data.method || 'GET')"
        >
          {{ data.method || 'GET' }}
        </span>
        <span
          class="text-muted-foreground flex-1 truncate font-mono"
          :title="data.url"
        >
          {{ data.url || 'https://api.example.com' }}
        </span>
      </div>
    </div>
  </BaseNode>
</template>
