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

import { Maximize, Minimize } from '@vben/icons';
import { $t } from '@vben/locales';

import { ElButton, ElInput } from 'element-plus';

export interface AppDesignData {
  type: 'app_design';
  title: string;
  data: {
    content: string;
    title: string;
  };
  nodeId?: string;
}

const props = defineProps<{
  design?: AppDesignData;
  visible: boolean;
}>();

const emit = defineEmits<{
  close: [];
  confirm: [data: Record<string, any>];
  'update:visible': [value: boolean];
}>();

const isFullscreen = ref(false);
const editContent = ref('');

const dialogVisible = computed({
  get: () => props.visible,
  set: (val) => emit('update:visible', val),
});

const panelTitle = computed(
  () => props.design?.data?.title || props.design?.title || '应用设计方案',
);

watch(
  () => props.design,
  (design) => {
    editContent.value = design?.data?.content || '';
  },
  { immediate: true },
);

function handleConfirm() {
  emit('confirm', {
    content: editContent.value,
    title: panelTitle.value,
  });
}

function handleClose() {
  dialogVisible.value = false;
  emit('close');
}
</script>

<template>
  <div
    v-if="visible"
    class="border-border bg-card flex flex-col rounded-lg"
    :class="[isFullscreen ? 'fixed inset-0 z-50 ml-0' : 'ml-3 h-full w-full']"
  >
    <div
      class="border-border bg-muted/50 flex shrink-0 items-center justify-between border-b px-4 py-3"
    >
      <div class="text-foreground font-medium">{{ panelTitle }}</div>
      <div class="flex items-center gap-2">
        <ElButton size="small" @click="handleClose">
          {{ $t('common.cancel') }}
        </ElButton>
        <ElButton size="small" type="primary" @click="handleConfirm">
          {{ $t('common.confirmAndContinue') }}
        </ElButton>
        <ElButton
          link
          :icon="isFullscreen ? Minimize : Maximize"
          :title="isFullscreen ? '退出全屏' : '全屏'"
          @click="isFullscreen = !isFullscreen"
        />
      </div>
    </div>

    <div class="flex min-h-0 flex-1 flex-col gap-4 overflow-hidden p-4">
      <div class="rounded-md border bg-muted/30 p-3 text-sm text-muted-foreground">
        AI 已生成应用设计方案。确认前可以直接调整正文，确认后将继续后续编排节点。
      </div>
      <ElInput
        v-model="editContent"
        class="min-h-0 flex-1"
        resize="none"
        type="textarea"
        placeholder="请输入应用设计方案"
      />
    </div>
  </div>
</template>

<style scoped>
:deep(.el-textarea),
:deep(.el-textarea__inner) {
  height: 100%;
}
</style>
