<script setup lang="ts">
import { reactive, watch, computed } from 'vue'
import type { EnterpriseAgentItem } from '@/types/admin-config'
import { Input } from '@/components/ui/input'
import { Textarea } from '@/components/ui/textarea'
import { Button } from '@/components/ui/button'
import { Separator } from '@/components/ui/separator'
import StringListEditor from './StringListEditor.vue'

interface Props {
  modelValue: EnterpriseAgentItem
}
const props = defineProps<Props>()
const emit = defineEmits<{ (e: 'save', v: EnterpriseAgentItem): void; (e: 'cancel'): void }>()

const local = reactive<EnterpriseAgentItem>({
  id: '',
  projectKey: '',
  name: '',
  description: '',
  exampleQuestions: [],
})

watch(
  () => props.modelValue,
  (v) => {
    Object.assign(local, JSON.parse(JSON.stringify(v || {})))
    if (!Array.isArray(local.exampleQuestions)) local.exampleQuestions = []
  },
  { immediate: true }
)

const invalidName = computed(() => !local.name || !local.name.trim())
const invalidDescription = computed(() => !local.description || !local.description.trim())

function save() {
  if (invalidName.value || invalidDescription.value) return
  emit('save', JSON.parse(JSON.stringify(local)))
}
</script>

<template>
  <div class="space-y-4">
    <div class="grid grid-cols-2 gap-3">
      <div>
        <label class="text-xs text-muted-foreground">Project</label>
        <div class="mt-1 text-sm font-mono">{{ local.projectKey || '—' }}</div>
      </div>
      <div>
        <label class="text-xs text-muted-foreground">Agent ID</label>
        <div class="mt-1 text-sm font-mono truncate">{{ local.id }}</div>
      </div>
    </div>

    <div class="grid grid-cols-2 gap-3">
      <div>
        <label class="text-xs text-muted-foreground"
          >Display name<span class="text-red-600">*</span></label
        >
        <Input
          v-model="local.name"
          :class="invalidName ? 'border-red-500 focus-visible:ring-red-500' : ''"
        />
        <div v-if="invalidName" class="text-[11px] mt-1 text-red-600">Name is required.</div>
      </div>
      <div>
        <label class="text-xs text-muted-foreground"
          >Description<span class="text-red-600">*</span></label
        >
        <Textarea
          v-model="local.description"
          rows="3"
          :class="invalidDescription ? 'border-red-500 focus-visible:ring-red-500' : ''"
        />
        <div v-if="invalidDescription" class="text-[11px] mt-1 text-red-600">
          Description is required.
        </div>
      </div>
    </div>

    <Separator />

    <div class="grid grid-cols-2 gap-3">
      <div>
        <label class="text-xs text-muted-foreground">Example questions</label>
        <StringListEditor v-model="local.exampleQuestions" placeholder="Ask me about…" />
      </div>
    </div>

    <div class="flex items-center justify-end gap-2">
      <Button variant="outline" @click="emit('cancel')">Cancel</Button>
      <Button :disabled="invalidName || invalidDescription" @click="save">Save</Button>
    </div>
  </div>
</template>
