<template>
  <div class="w-full h-full flex flex-col">
    <!-- Content -->
    <div class="flex-1 overflow-y-auto">
      <!-- Prompt Info -->
      <div class="space-y-4">
        <div class="flex items-center justify-between">
          <div class="w-full">
            <div class="flex w-full justify-between">
              <h2 class="text-xl font-semibold text-gray-900">{{ template.name }}</h2>
            </div>
            <p class="text-gray-600 text-sm">{{ template.description }}</p>
          </div>
        </div>

        <!-- Prompt Content -->
        <div class="space-y-2">
          <p class="whitespace-pre-wrap text-sm text-sidebar-foreground">
            {{ template.prompt }}
          </p>
        </div>
      </div>
    </div>

    <!-- Footer Actions -->
    <div class="flex flex-row border-t px-2.5 py-1.5 md:py-1.5 justify-end gap-2 -mx-7 md:-mx-5">
      <Button
        @click="handleCopyPrompt"
        variant="outline"
        class="border-primary hover:border-primary-hover"
      >
        <i :class="isCopied ? 'dku-icon-checkmark-16' : 'dku-icon-copy-16'"></i>
        {{ isCopied ? 'Copied' : 'Copy prompt' }}
      </Button>
      <Button @click="handleUsePrompt">
        <i class="dku-icon-text-box-16"></i>
        Use prompt
      </Button>
    </div>
  </div>

  <!-- Warning Dialog -->
  <AlertDialog v-model:open="showWarningDialog">
    <AlertDialogContent>
      <AlertDialogHeader>
        <AlertDialogTitle>Replace existing prompt ?</AlertDialogTitle>
        <AlertDialogDescription>
          You already have a prompt configured. Using this template will replace your current
          prompt.
          <br /><br />
          This action cannot be undone.
        </AlertDialogDescription>
      </AlertDialogHeader>
      <AlertDialogFooter>
        <AlertDialogCancel @click="cancelUsePrompt">Cancel</AlertDialogCancel>
        <AlertDialogAction @click="confirmUsePrompt">Replace prompt</AlertDialogAction>
      </AlertDialogFooter>
    </AlertDialogContent>
  </AlertDialog>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Button } from '@/components/ui/button'
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from '@/components/ui/alert-dialog'
import type { Prompt } from '@/types/prompt'
import { useAgentStore } from '@/store/agentStore'
import { WT1iser } from '@/lib/wt1'

// Props
const props = defineProps<{
  template: Prompt
  showHeader?: boolean
  showDismissButton?: boolean
}>()

// Emits
const emit = defineEmits<{
  (e: 'back'): void
  (e: 'use', template: Prompt): void
  (e: 'dismiss'): void
}>()

// State
const isCopied = ref(false)
const showWarningDialog = ref(false)
const agentStore = useAgentStore()

function handleCopyPrompt() {
  navigator.clipboard.writeText(props.template.prompt)
  isCopied.value = true
  WT1iser.copyPredefinedPrompt()
  // Reset the copied state after 1 second
  setTimeout(() => {
    isCopied.value = false
  }, 1000)
}

function handleUsePrompt() {
  WT1iser.usePredefinedPrompt()
  // Check if there's existing prompt content
  if (agentStore.draft.systemPrompt && agentStore.draft.systemPrompt.trim()) {
    showWarningDialog.value = true
  } else {
    // No existing content, use prompt directly
    emit('use', props.template)
  }
}

function confirmUsePrompt() {
  showWarningDialog.value = false
  emit('use', props.template)
}

function cancelUsePrompt() {
  showWarningDialog.value = false
}
</script>
