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

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

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

export interface DashboardDesignData {
  type: string;
  title: string;
  data: {
    dashboard_code?: string;
    design_suggestion?: string;
    design_title?: string;
    page_config?: Record<string, any>;
  };
  nodeId: string;
}

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

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

const isFullscreen = ref(false);
const configText = ref('{}');

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

watch(
  () => props.design,
  (design) => {
    configText.value = JSON.stringify(design?.data?.page_config || {}, null, 2);
  },
  { immediate: true },
);

function handleConfirm() {
  try {
    emit('confirm', {
      design_title:
        props.design?.data?.design_title ||
        $t('ai-platform.dashboard.design.title'),
      page_config: JSON.parse(configText.value || '{}'),
    });
  } catch {
    ElMessage.error('页面配置不是有效 JSON');
  }
}

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 flex items-center gap-3 font-medium">
        <div class="bg-primary flex h-8 w-8 items-center justify-center rounded">
          <span class="text-sm font-bold text-white">D</span>
        </div>
        <span>{{ design?.title || $t('ai-platform.dashboard.design.title') }}</span>
      </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>
        <div class="bg-border mx-1 h-5 w-px"></div>
        <ElButton
          link
          :icon="isFullscreen ? Minimize : Maximize"
          :title="isFullscreen ? '退出全屏' : '全屏'"
          @click="isFullscreen = !isFullscreen"
        />
      </div>
    </div>

    <div class="grid min-h-0 flex-1 grid-cols-[320px_minmax(0,1fr)] gap-4 overflow-hidden p-4">
      <div class="space-y-4 overflow-auto rounded-md border bg-muted/20 p-4">
        <div>
          <div class="text-sm font-medium">仪表盘编码</div>
          <div class="mt-1 text-sm text-muted-foreground">
            {{ design?.data?.dashboard_code || '-' }}
          </div>
        </div>
        <div>
          <div class="text-sm font-medium">设计标题</div>
          <div class="mt-1 text-sm text-muted-foreground">
            {{ design?.data?.design_title || '-' }}
          </div>
        </div>
        <div>
          <div class="text-sm font-medium">设计建议</div>
          <div class="mt-1 whitespace-pre-wrap text-sm text-muted-foreground">
            {{ design?.data?.design_suggestion || '暂无设计建议' }}
          </div>
        </div>
      </div>
      <ElInput
        v-model="configText"
        class="min-h-0"
        resize="none"
        type="textarea"
        placeholder="页面配置 JSON"
      />
    </div>
  </div>
</template>

<style scoped>
:deep(.el-textarea),
:deep(.el-textarea__inner) {
  height: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
</style>
