<script setup lang="ts">
import type { TaskItem, TaskListRequest } from '@/api/aiImage/types';
import {
  CircleCloseFilled,
  CollectionTag,
  CopyDocument,
  Download,
  Filter,
  Loading,
  MagicStick,
  Picture,
  Refresh,
  Search,
  User,
  WarningFilled,
  ZoomIn,
} from '@element-plus/icons-vue';
import { useClipboard } from '@vueuse/core';
import { format } from 'date-fns';
import { ElMessage } from 'element-plus';
import { computed, onMounted, onUnmounted, reactive, ref, watch } from 'vue';
import { getImagePlaza } from '@/api/aiImage';
import TaskCard from './TaskCard.vue';

const emit = defineEmits(['use-prompt', 'use-reference']);

const taskList = ref<TaskItem[]>([]);
const pageIndex = ref(1);
const pageSize = ref(10);
const loading = ref(false);
const noMore = ref(false);
const dialogVisible = ref(false);
const currentTask = ref<TaskItem | null>(null);

// Mobile detection
const isMobile = ref(false);

function checkMobile() {
  isMobile.value = window.innerWidth < 768;
}

onMounted(() => {
  checkMobile();
  window.addEventListener('resize', checkMobile);
  loadMore();
});

onUnmounted(() => {
  window.removeEventListener('resize', checkMobile);
});

// Mobile filter drawer
const showMobileFilter = ref(false);

// Viewer State
const showViewer = ref(false);
const previewUrl = ref('');

// Filter State
const searchForm = reactive({
  Prompt: '',
  Categories: '',
  UserName: '',
  OrderByColumn: '',
  IsAscending: true,
});
const dateRange = ref<[string, string] | null>(null);

const { copy } = useClipboard();

const disabled = computed(() => loading.value || noMore.value);

async function loadMore() {
  if (loading.value || noMore.value)
    return;

  loading.value = true;
  try {
    const params: TaskListRequest = {
      SkipCount: pageIndex.value,
      MaxResultCount: pageSize.value,
      TaskStatus: 'Success',
      Prompt: searchForm.Prompt || undefined,
      Categories: searchForm.Categories || undefined,
      UserName: searchForm.UserName || undefined,
      StartTime: dateRange.value ? dateRange.value[0] : undefined,
      EndTime: dateRange.value ? dateRange.value[1] : undefined,
      OrderByColumn: searchForm.OrderByColumn || undefined,
      IsAscending: searchForm.IsAscending,
    };

    const res = await getImagePlaza(params);

    // Handle potential wrapper
    const data = (res as any).data || res;
    const items = data.items || [];
    const total = data.total || 0;

    if (pageIndex.value === 1) {
      taskList.value = items;
    }
    else {
      // Avoid duplicates
      const newItems = items.filter((item: TaskItem) => !taskList.value.some(t => t.id === item.id));
      taskList.value.push(...newItems);
    }

    // Check if we should stop loading more
    if (items.length === 0 || items.length < pageSize.value || taskList.value.length >= total) {
      noMore.value = true;
    }
    else {
      // Increment pageIndex for next load only if there's more data
      pageIndex.value++;
    }
  }
  catch (error) {
    console.error(error);
    noMore.value = true;
  }
  finally {
    loading.value = false;
  }
}

function handleSearch() {
  pageIndex.value = 1;
  taskList.value = [];
  noMore.value = false;
  loadMore();
}

function handleReset() {
  searchForm.Prompt = '';
  searchForm.Categories = '';
  searchForm.UserName = '';
  dateRange.value = null;
  handleSearch();
}

function handleCardClick(task: TaskItem) {
  currentTask.value = task;
  dialogVisible.value = true;
}

function handlePreview(url: string) {
  previewUrl.value = url;
  showViewer.value = true;
}

function closeViewer() {
  showViewer.value = false;
}

function formatTime(time: string) {
  try {
    return format(new Date(time), 'yyyy-MM-dd HH:mm');
  }
  catch (e) {
    return time;
  }
}

async function copyPrompt(text: string) {
  await copy(text);
  ElMessage.success('已复制到剪贴板');
}

async function downloadImage(url: string) {
  try {
    const response = await fetch(url);
    const blob = await response.blob();
    const blobUrl = window.URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = blobUrl;
    link.download = `image-${Date.now()}.png`;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    window.URL.revokeObjectURL(blobUrl);
  }
  catch (e) {
    console.error('Download failed', e);
    window.open(url, '_blank');
  }
}

// Expose refresh method
defineExpose({
  refresh: () => {
    pageIndex.value = 1;
    taskList.value = [];
    noMore.value = false;
    loadMore();
  },
});

// Watch for filter changes - debounce for text inputs, immediate for others
let searchTimer: ReturnType<typeof setTimeout> | null = null;
watch(() => searchForm.Prompt, () => {
  if (searchTimer) {
    clearTimeout(searchTimer);
  }
  searchTimer = setTimeout(() => {
    handleSearch();
  }, 500);
});

watch([() => searchForm.Categories, () => searchForm.UserName], () => {
  if (searchTimer) {
    clearTimeout(searchTimer);
  }
  searchTimer = setTimeout(() => {
    handleSearch();
  }, 500);
});

watch(dateRange, () => {
  handleSearch();
});
</script>

<template>
  <div class="h-full flex flex-col md:flex-row bg-gray-50 overflow-hidden">
    <!-- Mobile Filter Button -->
    <div class="md:hidden p-4 bg-white border-b border-gray-200 flex items-center justify-between">
      <h2 class="text-lg font-bold text-gray-800">
        图片广场
      </h2>
      <el-button type="primary" @click="showMobileFilter = true">
        <el-icon class="mr-1">
          <Filter />
        </el-icon>
        筛选
      </el-button>
    </div>

    <!-- Left Sidebar - Filters (Desktop) -->
    <div class="hidden md:flex w-72 bg-white border-r border-gray-200 flex-col shadow-sm">
      <div class="p-6 border-b border-gray-100">
        <h2 class="text-lg font-bold text-gray-800 flex items-center gap-2">
          <el-icon><Filter /></el-icon>
          筛选条件
        </h2>
      </div>

      <div class=" overflow-y-auto p-6 custom-scrollbar">
        <el-form :model="searchForm" label-position="top" class="space-y-4">
          <el-form-item label="提示词">
            <el-input
              v-model="searchForm.Prompt"
              placeholder="搜索提示词..."
              clearable
              @keyup.enter="handleSearch"
            >
              <template #prefix>
                <el-icon><Search /></el-icon>
              </template>
            </el-input>
          </el-form-item>

          <el-form-item label="分类标签">
            <el-input
              v-model="searchForm.Categories"
              placeholder="搜索分类..."
              clearable
              @keyup.enter="handleSearch"
            >
              <template #prefix>
                <el-icon><CollectionTag /></el-icon>
              </template>
            </el-input>
          </el-form-item>

          <el-form-item label="用户名">
            <el-input
              v-model="searchForm.UserName"
              placeholder="搜索用户..."
              clearable
              @keyup.enter="handleSearch"
            >
              <template #prefix>
                <el-icon><User /></el-icon>
              </template>
            </el-input>
          </el-form-item>

          <el-form-item label="创建时间">
            <el-date-picker
              v-model="dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="YYYY-MM-DD"
              class="w-full"
            />
          </el-form-item>

          <el-form-item v-if="false" label="排序方式">
            <el-select
              v-model="searchForm.OrderByColumn"
              placeholder="默认排序"
              class="w-full"
              clearable
            >
              <el-option label="创建时间" value="CreationTime" />
            </el-select>
          </el-form-item>

          <el-form-item v-if="searchForm.OrderByColumn" label="排序方向">
            <el-radio-group v-model="searchForm.IsAscending">
              <el-radio :value="true">
                升序
              </el-radio>
              <el-radio :value="false">
                降序
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>

      <div class="p-6 border-t border-gray-100 space-y-2">
        <el-button type="primary" class="w-full" @click="handleSearch">
          <el-icon class="mr-1">
            <Search />
          </el-icon>
          搜索
        </el-button>
        <el-button class="w-full refresh-btn" @click="handleReset">
          <el-icon class="mr-1">
            <Refresh />
          </el-icon>
          重置
        </el-button>
        <el-button class="w-full refresh-btn" type="success" @click="handleSearch">
          <el-icon class="mr-1">
            <Refresh />
          </el-icon>
          刷新
        </el-button>
      </div>
    </div>

    <!-- Mobile Filter Drawer -->
    <el-drawer
      v-model="showMobileFilter"
      title="筛选条件"
      direction="ltr"
      size="80%"
    >
      <el-form :model="searchForm" label-position="top" class="space-y-4">
        <el-form-item label="提示词">
          <el-input
            v-model="searchForm.Prompt"
            placeholder="搜索提示词..."
            clearable
          >
            <template #prefix>
              <el-icon><Search /></el-icon>
            </template>
          </el-input>
        </el-form-item>

        <el-form-item label="分类标签">
          <el-input
            v-model="searchForm.Categories"
            placeholder="搜索分类..."
            clearable
          >
            <template #prefix>
              <el-icon><CollectionTag /></el-icon>
            </template>
          </el-input>
        </el-form-item>

        <el-form-item label="用户名">
          <el-input
            v-model="searchForm.UserName"
            placeholder="搜索用户..."
            clearable
          >
            <template #prefix>
              <el-icon><User /></el-icon>
            </template>
          </el-input>
        </el-form-item>

        <el-form-item label="创建时间">
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="YYYY-MM-DD"
            class="w-full"
          />
        </el-form-item>

        <el-form-item label="排序方式">
          <el-select
            v-model="searchForm.OrderByColumn"
            placeholder="默认排序"
            class="w-full"
            clearable
          >
            <el-option label="创建时间" value="CreationTime" />
          </el-select>
        </el-form-item>

        <el-form-item v-if="searchForm.OrderByColumn" label="排序方向">
          <el-radio-group v-model="searchForm.IsAscending">
            <el-radio :value="true">
              升序
            </el-radio>
            <el-radio :value="false">
              降序
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="space-y-2">
          <el-button type="primary" class="w-full" @click="handleSearch(); showMobileFilter = false">
            <el-icon class="mr-1">
              <Search />
            </el-icon>
            搜索
          </el-button>
          <el-button class="w-full refresh-btn" @click="handleReset(); showMobileFilter = false">
            <el-icon class="mr-1">
              <Refresh />
            </el-icon>
            重置
          </el-button>
          <el-button class="w-full refresh-btn" type="success" @click="handleSearch(); showMobileFilter = false">
            <el-icon class="mr-1">
              <Refresh />
            </el-icon>
            刷新
          </el-button>
        </div>
      </template>
    </el-drawer>

    <!-- Right Content Area -->
    <div class="flex-1 flex flex-col overflow-hidden">
      <div
        v-infinite-scroll="loadMore"
        class="flex-1 overflow-y-auto p-4 md:p-6 custom-scrollbar"
        :infinite-scroll-disabled="disabled"
        :infinite-scroll-distance="50"
      >
        <div v-if="taskList.length > 0" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
          <TaskCard
            v-for="task in taskList"
            :key="task.id"
            :task="task"
            @click="handleCardClick(task)"
            @use-prompt="$emit('use-prompt', $event)"
            @use-reference="$emit('use-reference', $event)"
            @preview="handlePreview"
          />
        </div>

        <!-- Empty State -->
        <div v-else-if="!loading && taskList.length === 0" class="h-full flex flex-col items-center justify-center text-gray-400">
          <el-icon class="text-6xl mb-4">
            <Picture />
          </el-icon>
          <p>暂无图片，快去生成一张吧！</p>
        </div>

        <!-- Loading State -->
        <div v-if="loading" class="py-6 flex justify-center">
          <div class="flex items-center gap-2 text-gray-500">
            <el-icon class="is-loading">
              <Loading />
            </el-icon>
            <span>加载中...</span>
          </div>
        </div>

        <!-- No More State -->
        <div v-if="noMore && taskList.length > 0" class="py-6 text-center text-gray-400 text-sm">
          - 到底了，没有更多图片了 -
        </div>
      </div>
    </div>

    <!-- Dialog for details -->
    <el-dialog
      v-model="dialogVisible"
      title="图片详情"
      :width="isMobile ? '95%' : '900px'"
      :fullscreen="isMobile"
      append-to-body
      class="image-detail-dialog"
      align-center
    >
      <div v-if="currentTask" class="flex flex-col md:flex-row gap-4 md:gap-6 h-auto md:h-[600px]">
        <!-- Left Image -->
        <div class="flex-1 bg-black/5 rounded-lg flex items-center justify-center overflow-hidden relative group">
          <el-image
            v-if="currentTask.storeUrl"
            :src="currentTask.storeUrl"
            fit="contain"
            class="w-full h-full"
            :preview-src-list="[currentTask.storeUrl]"
          />
          <div v-else class="flex flex-col items-center justify-center text-gray-400 p-4 text-center w-full h-full">
            <span v-if="currentTask.taskStatus === 'Processing'" class="flex flex-col items-center">
              <el-icon class="text-4xl mb-3 is-loading text-blue-500"><Loading /></el-icon>
              <span class="text-blue-500 font-medium">生成中...</span>
            </span>
            <div v-else-if="currentTask.taskStatus === 'Fail'" class="flex flex-col items-center w-full max-w-md px-4">
              <el-icon class="text-5xl mb-4 text-red-500">
                <CircleCloseFilled />
              </el-icon>
              <span class="font-bold mb-4 text-lg text-red-600">生成失败</span>
              <div class="w-full bg-gradient-to-br from-red-50 to-red-100 border-2 border-red-200 rounded-xl p-4 relative shadow-sm">
                <div class="flex items-start gap-3">
                  <el-icon class="text-red-500 mt-0.5 flex-shrink-0">
                    <WarningFilled />
                  </el-icon>
                  <div class="flex-1 text-sm text-red-800 max-h-40 overflow-y-auto custom-scrollbar break-words text-left leading-relaxed">
                    {{ currentTask.errorInfo || '未知错误，请稍后重试' }}
                  </div>
                </div>
                <el-button
                  class="absolute top-2 right-2"
                  size="small"
                  circle
                  type="danger"
                  :icon="CopyDocument"
                  title="复制错误信息"
                  @click="copyPrompt(currentTask.errorInfo || '未知错误')"
                />
              </div>
            </div>
          </div>

          <!-- Desktop Button Overlay -->
          <div v-if="currentTask.storeUrl" class="hidden md:flex absolute bottom-4 right-4 gap-2 opacity-0 group-hover:opacity-100 transition-opacity z-10">
            <el-button circle type="primary" :icon="ZoomIn" @click="handlePreview(currentTask.storeUrl)" />
            <el-button circle type="primary" :icon="Download" @click="downloadImage(currentTask.storeUrl)" />
          </div>

          <!-- Mobile Button Overlay -->
          <div v-if="currentTask.storeUrl" class="md:hidden absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-3 z-10">
            <div class="flex items-center justify-center gap-2">
              <el-button circle type="primary" :icon="ZoomIn" @click="handlePreview(currentTask.storeUrl)" />
              <el-button circle type="primary" :icon="Download" @click="downloadImage(currentTask.storeUrl)" />
            </div>
          </div>
        </div>

        <!-- Right Info -->
        <div class="w-full md:w-[300px] flex flex-col gap-4 overflow-hidden">
          <div class="flex-1 flex flex-col min-h-0">
            <h3 class="font-bold text-gray-800 mb-2 flex items-center gap-2 shrink-0">
              <el-icon><MagicStick /></el-icon> 提示词
            </h3>
            <div class="bg-gray-50 p-4 rounded-lg border border-gray-100 text-sm text-gray-600 leading-relaxed relative group/prompt overflow-y-auto custom-scrollbar flex-1">
              {{ currentTask.prompt }}
              <el-button
                class="absolute top-2 right-2 opacity-0 group-hover/prompt:opacity-100 transition-opacity shadow-sm z-10"
                size="small"
                circle
                :icon="CopyDocument"
                title="复制提示词"
                @click="copyPrompt(currentTask.prompt)"
              />
            </div>
          </div>

          <div class="mt-auto space-y-3 pt-4 border-t border-gray-100 shrink-0">
            <!-- 分类标签 -->
            <div v-if="currentTask.categories && currentTask.categories.length > 0" class="space-y-2">
              <div class="flex items-center gap-2 text-sm text-gray-500">
                <el-icon><CollectionTag /></el-icon>
                <span>分类标签</span>
              </div>
              <div class="flex flex-wrap gap-1">
                <el-tag
                  v-for="tag in currentTask.categories"
                  :key="tag"
                  size="small"
                  type="info"
                  effect="plain"
                >
                  {{ tag }}
                </el-tag>
              </div>
            </div>

            <!-- 用户信息 -->
            <div class="flex justify-between text-sm">
              <span class="text-gray-500">创建者</span>
              <span v-if="!currentTask.isAnonymous && currentTask.userName" class="text-blue-500 flex items-center gap-1">
                <el-icon><User /></el-icon> {{ currentTask.userName }}
              </span>
              <span v-else class="text-gray-400 flex items-center gap-1">
                <el-icon><User /></el-icon> 匿名用户
              </span>
            </div>

            <div class="flex justify-between text-sm">
              <span class="text-gray-500">创建时间</span>
              <span class="text-gray-800">{{ formatTime(currentTask.creationTime) }}</span>
            </div>
            <div class="flex justify-between text-sm">
              <span class="text-gray-500">状态</span>
              <el-tag size="small" type="success">
                生成成功
              </el-tag>
            </div>

            <div class="grid grid-cols-1 gap-1 mt-2">
              <el-button
                type="primary"
                :icon="MagicStick"
                @click="$emit('use-prompt', currentTask.prompt)"
              >
                使用提示词
              </el-button>
              <el-button
                v-if="false"
                type="primary"
                plain
                :icon="Picture"
                @click="$emit('use-reference', currentTask.storeUrl)"
              >
                做参考图
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>

    <!-- Global Image Viewer -->
    <el-image-viewer
      v-if="showViewer && previewUrl"
      :url-list="[previewUrl]"
      @close="closeViewer"
    />
  </div>
</template>

<style lang="scss" scoped>
.refresh-btn {
  margin: 20px 0;
}
</style>
