// static/vue-app.js
// 使用 CDN 引入的 Vue3 + Vue Router，构建单页应用

const { createApp, ref, computed, onMounted } = Vue;
const { createRouter, createWebHistory, useRoute, useRouter } = VueRouter;

// 通用工具函数
function formatFileSize(bytes) {
  if (!bytes || bytes === 0) return "0 Bytes";
  const k = 1024;
  const sizes = ["Bytes", "KB", "MB", "GB"];
  const i = Math.floor(Math.log(bytes) / Math.log(k));
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
}

function formatNumber(num) {
  if (num === null || num === undefined) return "N/A";
  if (num >= 1_000_000) return (num / 1_000_000).toFixed(2) + "M";
  if (num >= 1_000) return (num / 1_000).toFixed(2) + "K";
  return num.toFixed ? num.toFixed(2) : String(num);
}

function formatDateTime(dateString) {
  if (!dateString) return "N/A";
  try {
    return new Date(dateString).toLocaleString();
  } catch {
    return dateString;
  }
}

function statusText(status) {
  const map = {
    pending: "排队中",
    processing: "处理中",
    completed: "已完成",
    failed: "失败",
  };
  return map[status] || status || "未知";
}

// 顶部导航 + 布局
const App = {
  setup() {
    const route = useRoute();
    const router = useRouter();
    const health = ref(null);

    const isActive = (pathPrefix) =>
      computed(() => route.path === pathPrefix || route.path.startsWith(pathPrefix));

    const loadHealth = async () => {
      try {
        const res = await fetch("/health", { method: "POST" });
        if (res.ok) {
          health.value = await res.json();
        }
      } catch {
        health.value = null;
      }
    };

    onMounted(loadHealth);

    return { route, router, health, isActive };
  },
  template: `
    <div class="app-shell">
      <header class="app-header">
        <div class="app-title">
          <span class="logo">🔧</span>
          <div>
            <h1>STP 模具几何分析中心</h1>
            <p>上传模型 → 自动分析几何 / 型腔 / 工艺 → 聚合展示关键指标</p>
          </div>
        </div>
        <nav class="app-nav">
          <router-link :class="['nav-link', { active: isActive('/').value }]" to="/">仪表盘</router-link>
          <router-link :class="['nav-link', { active: isActive('/history').value }]" to="/history">历史记录</router-link>
        </nav>
      </header>

      <main class="app-main">
        <router-view />
      </main>

      <footer class="app-footer">
        <div class="footer-left">
          <span>PythonOCC: <strong>{{ health?.pythonocc ? '可用' : '未知' }}</strong></span>
          <span v-if="health"> | 当前任务数: {{ health.total_tasks }}</span>
        </div>
        <div class="footer-right">
          <span>后端版本: 3.0.0</span>
        </div>
      </footer>
    </div>
  `,
};

// 仪表盘视图：上传 + 总览
const DashboardView = {
  setup() {
    const router = useRouter();

    const selectedFile = ref(null);
    const uploading = ref(false);
    const error = ref("");
    const currentTask = ref(null);
    const polling = ref(false);
    const historySummary = ref(null);

    const totalFiles = computed(() => historySummary.value?.total_files || 0);
    const totalRecords = computed(() =>
      (historySummary.value?.files || []).reduce(
        (sum, f) => sum + (f.record_count || 0),
        0
      )
    );
    const latestFile = computed(() =>
      (historySummary.value?.files || [])[0] || null
    );

    const handleFileChange = (event) => {
      const file = event.target.files[0];
      if (!file) return;

      if (
        !file.name.toLowerCase().endsWith(".stp") &&
        !file.name.toLowerCase().endsWith(".step")
      ) {
        error.value = "请选择 STP 或 STEP 格式文件";
        selectedFile.value = null;
        return;
      }
      if (file.size > 100 * 1024 * 1024) {
        error.value = "文件大小不能超过 100MB";
        selectedFile.value = null;
        return;
      }

      error.value = "";
      selectedFile.value = file;
    };

    const uploadFile = async () => {
      if (!selectedFile.value) return;
      uploading.value = true;
      error.value = "";

      const formData = new FormData();
      formData.append("file", selectedFile.value);

      try {
        const res = await fetch("/upload", {
          method: "POST",
          body: formData,
        });
        if (!res.ok) {
          throw new Error(`上传失败: ${res.status} ${res.statusText}`);
        }
        const data = await res.json();
        currentTask.value = {
          task_id: data.task_id,
          status: "processing",
          filename: data.file_info?.filename,
          file_size: data.file_info?.size,
        };
        startPolling(data.task_id);
      } catch (e) {
        error.value = e.message || "上传失败";
      } finally {
        uploading.value = false;
      }
    };

    const startPolling = async (taskId) => {
      polling.value = true;
      const poll = async () => {
        try {
          const res = await fetch(`/status/${taskId}`, { method: "POST" });
          if (!res.ok) {
            throw new Error("查询任务状态失败");
          }
          const task = await res.json();
          currentTask.value = task;

          if (task.status === "completed") {
            polling.value = false;
            // 跳转到结果详情页
            router.push(`/result/${task.task_id}`);
          } else if (task.status === "failed") {
            polling.value = false;
            error.value = `分析失败: ${task.error || "未知错误"}`;
          } else {
            setTimeout(poll, 1000);
          }
        } catch (e) {
          polling.value = false;
          error.value = e.message || "轮询失败";
        }
      };
      poll();
    };

    const loadHistorySummary = async () => {
      try {
        const res = await fetch("/api/history", { method: "POST" });
        if (res.ok) {
          historySummary.value = await res.json();
        }
      } catch {
        historySummary.value = null;
      }
    };

    onMounted(() => {
      loadHistorySummary();
    });

    return {
      selectedFile,
      uploading,
      error,
      currentTask,
      polling,
      historySummary,
      totalFiles,
      totalRecords,
      latestFile,
      handleFileChange,
      uploadFile,
      formatFileSize,
      statusText,
      formatDateTime,
    };
  },
  template: `
    <div class="dashboard">
      <section class="grid-2">
        <div class="card upload-card">
          <h2>📁 上传 STP / STEP 文件</h2>
          <p class="card-subtitle">上传后系统会自动解析几何、生成模具型腔并计算关键工艺参数。</p>

          <div class="upload-panel">
            <label class="upload-dropzone">
              <input type="file" accept=".stp,.step" @change="handleFileChange" hidden />
              <div class="upload-icon">📂</div>
              <div v-if="!selectedFile">
                <h3>点击选择或拖拽文件到此处</h3>
                <p>最大 100MB，支持 .stp / .step</p>
              </div>
              <div v-else>
                <h3>已选择文件：</h3>
                <p><strong>{{ selectedFile.name }}</strong></p>
                <p>大小：{{ formatFileSize(selectedFile.size) }}</p>
              </div>
            </label>

            <button
              class="upload-btn"
              :disabled="!selectedFile || uploading"
              @click="uploadFile"
            >
              <span v-if="!uploading">开始分析</span>
              <span v-else>正在上传...</span>
            </button>

            <p v-if="error" class="error-text">{{ error }}</p>
          </div>

          <div v-if="currentTask" class="card current-task">
            <h3>当前任务</h3>
            <div class="info-row">
              <span>任务 ID：</span><span>{{ currentTask.task_id }}</span>
            </div>
            <div class="info-row">
              <span>文件名：</span><span>{{ currentTask.filename || 'N/A' }}</span>
            </div>
            <div class="info-row">
              <span>文件大小：</span><span>{{ currentTask.file_size ? formatFileSize(currentTask.file_size) : 'N/A' }}</span>
            </div>
            <div class="info-row">
              <span>状态：</span>
              <span class="status-pill" :class="'status-' + currentTask.status">
                {{ statusText(currentTask.status) }}
              </span>
            </div>
            <div v-if="polling" class="small-hint">正在后台分析，请稍候，完成后会跳转到结果页。</div>
          </div>
        </div>

        <div class="card summary-card">
          <h2>📊 项目总览</h2>
          <div class="summary-grid">
            <div class="summary-item">
              <div class="summary-label">已分析文件数</div>
              <div class="summary-value">{{ totalFiles }}</div>
            </div>
            <div class="summary-item">
              <div class="summary-label">总处理记录数</div>
              <div class="summary-value">{{ totalRecords }}</div>
            </div>
            <div class="summary-item" v-if="latestFile">
              <div class="summary-label">最近上传文件</div>
              <div class="summary-value text-left">
                <div class="filename">{{ latestFile.filename }}</div>
                <div class="meta">
                  最近上传：{{ formatDateTime(latestFile.last_upload) }}<br />
                  历史记录：{{ latestFile.record_count }} 条
                </div>
              </div>
            </div>
            <div v-else class="summary-empty">
              还没有历史记录，先上传一个 STP 文件试试吧。
            </div>
          </div>

          <router-link class="link-btn" to="/history">查看详细历史记录 →</router-link>
        </div>
      </section>
    </div>
  `,
};

// 历史记录视图
const HistoryView = {
  setup() {
    const router = useRouter();
    const files = ref([]);
    const loading = ref(true);
    const error = ref("");
    const expanded = ref({});

    const loadHistory = async () => {
      loading.value = true;
      error.value = "";
      try {
        const res = await fetch("/api/history", { method: "POST" });
        if (!res.ok) throw new Error("获取历史记录失败");
        const data = await res.json();
        files.value = data.files || [];
      } catch (e) {
        error.value = e.message || "加载失败";
      } finally {
        loading.value = false;
      }
    };

    const toggleExpand = async (filename) => {
      expanded.value[filename] = !expanded.value[filename];
      // 首次展开时加载该文件的所有记录
      if (expanded.value[filename]) {
        const file = files.value.find((f) => f.filename === filename);
        if (!file.records) {
          try {
            const res = await fetch(
              `/api/history/${encodeURIComponent(filename)}`,
              { method: "POST" }
            );
            if (!res.ok) throw new Error("加载记录失败");
            file.records = await res.json();
          } catch (e) {
            error.value = e.message || "加载记录失败";
          }
        }
      }
    };

    const openResult = (taskId) => {
      router.push(`/result/${taskId}`);
    };

    onMounted(loadHistory);

    return {
      files,
      loading,
      error,
      expanded,
      toggleExpand,
      openResult,
      formatFileSize,
      formatDateTime,
      statusText,
    };
  },
  template: `
    <div class="history-view">
      <h2>📋 历史记录</h2>
      <p class="card-subtitle">按文件名聚合展示所有上传与分析任务。</p>

      <div v-if="loading" class="center-block">
        <div class="spinner"></div>
        <p>正在加载历史记录...</p>
      </div>

      <p v-if="error" class="error-text">{{ error }}</p>

      <div v-if="!loading && files.length === 0 && !error" class="center-block">
        <div style="font-size: 40px; margin-bottom: 12px;">📁</div>
        <p>暂无历史记录，先在仪表盘上传一个文件吧。</p>
      </div>

      <div class="file-list" v-if="files.length">
        <div
          v-for="file in files"
          :key="file.filename"
          class="file-card"
          :class="{ expanded: expanded[file.filename] }"
        >
          <div class="file-header" @click="toggleExpand(file.filename)">
            <div>
              <div class="file-name">📄 {{ file.filename }}</div>
              <div class="file-meta">
                总记录：{{ file.record_count }} 条
                <span v-if="file.last_upload"> | 最近上传：{{ formatDateTime(file.last_upload) }}</span>
              </div>
            </div>
            <button class="expand-btn">
              {{ expanded[file.filename] ? '收起' : '展开' }}
            </button>
          </div>

          <div class="record-list" v-if="expanded[file.filename]">
            <div v-if="!file.records" class="center-block">
              <div class="spinner small"></div>
              <p>正在加载记录...</p>
            </div>
            <div v-else-if="file.records.length === 0" class="center-block">
              暂无详细记录
            </div>
            <div
              v-else
              v-for="record in file.records"
              :key="record.task_id"
              class="record-item"
              @click="openResult(record.task_id)"
            >
              <div class="record-header">
                <span>📅 {{ formatDateTime(record.upload_time) }}</span>
                <span class="status-pill" :class="'status-' + record.status">
                  {{ statusText(record.status) }}
                </span>
              </div>
              <div class="record-meta">
                <span>任务 ID：{{ record.task_id }}</span>
                <span>文件大小：{{ formatFileSize(record.file_size) }}</span>
                <span v-if="record.completed_at">完成时间：{{ formatDateTime(record.completed_at) }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  `,
};

// 结果详情视图
const ResultView = {
  setup() {
    const route = useRoute();
    const task = ref(null);
    const loading = ref(true);
    const error = ref("");

    const taskId = computed(() => route.params.taskId);

    const loadTask = async () => {
      loading.value = true;
      error.value = "";
      try {
        const res = await fetch(`/status/${taskId.value}`, { method: "POST" });
        if (!res.ok) throw new Error("获取任务数据失败");
        const data = await res.json();
        task.value = data;
      } catch (e) {
        error.value = e.message || "加载失败";
      } finally {
        loading.value = false;
      }
    };

    const geometry = computed(() => task.value?.geometry_data || null);
    const keyInfo = computed(() => task.value?.key_info || null);
    const meshSummary = computed(() => task.value?.mesh_summary || null);

    onMounted(loadTask);

    return {
      task,
      loading,
      error,
      taskId,
      geometry,
      keyInfo,
      meshSummary,
      formatNumber,
      formatFileSize,
      formatDateTime,
      statusText,
    };
  },
  template: `
    <div class="result-view">
      <h2>📊 分析结果详情</h2>

      <div v-if="loading" class="center-block">
        <div class="spinner"></div>
        <p>正在加载任务 {{ taskId }} 的分析结果...</p>
      </div>

      <p v-if="error" class="error-text">{{ error }}</p>

      <div v-if="task && !loading" class="result-layout">
        <section class="card task-card">
          <h3>📝 任务信息</h3>
          <div class="info-grid">
            <div class="info-item">
              <span class="info-label">任务 ID</span>
              <span class="info-value">{{ task.task_id || 'N/A' }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">文件名</span>
              <span class="info-value">{{ task.filename || 'N/A' }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">文件大小</span>
              <span class="info-value">{{ task.file_size ? formatFileSize(task.file_size) : 'N/A' }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">状态</span>
              <span class="info-value">
                <span class="status-pill" :class="'status-' + task.status">
                  {{ statusText(task.status) }}
                </span>
              </span>
            </div>
            <div class="info-item">
              <span class="info-label">上传时间</span>
              <span class="info-value">{{ task.upload_time ? formatDateTime(task.upload_time) : 'N/A' }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">完成时间</span>
              <span class="info-value">{{ task.completed_at ? formatDateTime(task.completed_at) : 'N/A' }}</span>
            </div>
          </div>
          <div v-if="task.error" class="error-box">
            <strong>错误信息：</strong>{{ task.error }}
          </div>
        </section>

        <section class="grid-3">
          <div class="card">
            <h3>📐 几何属性</h3>
            <div v-if="geometry" class="data-grid">
              <div class="data-item">
                <span class="data-label">体积</span>
                <span class="data-value">
                  {{ geometry.volume ? formatNumber(geometry.volume) + ' mm³' : 'N/A' }}
                </span>
              </div>
              <div class="data-item">
                <span class="data-label">表面积</span>
                <span class="data-value">
                  {{ geometry.surface_area ? formatNumber(geometry.surface_area) + ' mm²' : 'N/A' }}
                </span>
              </div>
              <div class="data-item">
                <span class="data-label">体积/面积比</span>
                <span class="data-value">
                  {{
                    geometry.volume && geometry.surface_area
                      ? (geometry.volume / geometry.surface_area).toFixed(4)
                      : 'N/A'
                  }}
                </span>
              </div>
            </div>
            <div v-else class="placeholder">无几何数据</div>
          </div>

          <div class="card">
            <h3>📦 边界框</h3>
            <div v-if="geometry?.bounding_box" class="data-grid">
              <div class="data-item">
                <span class="data-label">尺寸 (mm)</span>
                <span class="data-value">
                  {{ geometry.bounding_box.dimensions[0].toFixed(2) }} ×
                  {{ geometry.bounding_box.dimensions[1].toFixed(2) }} ×
                  {{ geometry.bounding_box.dimensions[2].toFixed(2) }}
                </span>
              </div>
              <div class="data-item">
                <span class="data-label">最小坐标</span>
                <span class="data-value">
                  X: {{ geometry.bounding_box.min[0].toFixed(2) }},
                  Y: {{ geometry.bounding_box.min[1].toFixed(2) }},
                  Z: {{ geometry.bounding_box.min[2].toFixed(2) }}
                </span>
              </div>
              <div class="data-item">
                <span class="data-label">最大坐标</span>
                <span class="data-value">
                  X: {{ geometry.bounding_box.max[0].toFixed(2) }},
                  Y: {{ geometry.bounding_box.max[1].toFixed(2) }},
                  Z: {{ geometry.bounding_box.max[2].toFixed(2) }}
                </span>
              </div>
            </div>
            <div v-else class="placeholder">无边界框数据</div>
          </div>

          <div class="card">
            <h3>🔺 拓扑结构</h3>
            <div v-if="geometry?.topology" class="data-grid">
              <div class="data-item">
                <span class="data-label">面数</span>
                <span class="data-value">{{ geometry.topology.faces || 0 }}</span>
              </div>
              <div class="data-item">
                <span class="data-label">边数</span>
                <span class="data-value">{{ geometry.topology.edges || 0 }}</span>
              </div>
              <div class="data-item">
                <span class="data-label">顶点数</span>
                <span class="data-value">{{ geometry.topology.vertices || 0 }}</span>
              </div>
            </div>
            <div v-else class="placeholder">无拓扑数据</div>
          </div>
        </section>

        <section class="grid-2">
          <div class="card">
            <h3>🔧 模具 / 工艺关键信息</h3>
            <div v-if="keyInfo" class="data-grid">
              <div class="data-item">
                <span class="data-label">收缩率</span>
                <span class="data-value">
                  {{ keyInfo.metadata?.shrinkage_rate ?? 'N/A' }}
                </span>
              </div>
              <div class="data-item">
                <span class="data-label">拔模角</span>
                <span class="data-value">
                  {{
                    keyInfo.metadata?.draft_angle !== undefined
                      ? keyInfo.metadata.draft_angle + '°'
                      : 'N/A'
                  }}
                </span>
              </div>
              <div class="data-item">
                <span class="data-label">预估夹紧力</span>
                <span class="data-value">
                  {{ keyInfo.manufacturing_info?.estimated_clamping_force || 'N/A' }}
                </span>
              </div>
              <div class="data-item">
                <span class="data-label">模具尺寸 (mm)</span>
                <span class="data-value">
                  {{
                    keyInfo.manufacturing_info?.estimated_mold_size
                      ? keyInfo.manufacturing_info.estimated_mold_size.length +
                        ' × ' +
                        keyInfo.manufacturing_info.estimated_mold_size.width +
                        ' × ' +
                        keyInfo.manufacturing_info.estimated_mold_size.height
                      : 'N/A'
                  }}
                </span>
              </div>
              <div class="data-item">
                <span class="data-label">产品重量</span>
                <span class="data-value">
                  {{
                    keyInfo.mold_cavities?.cavity_key_info?.geometric_characteristics
                      ?.product_weight || 'N/A'
                  }}
                </span>
              </div>
              <div class="data-item">
                <span class="data-label">壁厚范围</span>
                <span class="data-value">
                  {{
                    keyInfo.mold_cavities?.cavity_key_info?.geometric_characteristics
                      ?.wall_thickness_range || 'N/A'
                  }}
                </span>
              </div>
              <div class="data-item">
                <span class="data-label">预估成型周期</span>
                <span class="data-value">
                  {{ keyInfo.manufacturing_info?.estimated_cycle_time || 'N/A' }}
                </span>
              </div>
            </div>
            <div v-else class="placeholder">无型腔 / 工艺数据</div>
          </div>

          <div class="card">
            <h3>🧱 网格摘要</h3>
            <div v-if="meshSummary" class="data-grid">
              <div class="data-item">
                <span class="data-label">网格质量等级</span>
                <span class="data-value">{{ meshSummary.quality }}</span>
              </div>
              <div class="data-item">
                <span class="data-label">顶点数</span>
                <span class="data-value">{{ meshSummary.vertex_count }}</span>
              </div>
              <div class="data-item">
                <span class="data-label">面数</span>
                <span class="data-value">{{ meshSummary.face_count }}</span>
              </div>
              <div class="data-item">
                <span class="data-label">点云采样点数</span>
                <span class="data-value">{{ meshSummary.point_count ?? 'N/A' }}</span>
              </div>
            </div>
            <div v-else class="placeholder">
              当前任务未生成网格摘要，或网格生成过程中出现问题。
            </div>
          </div>
        </section>
      </div>
    </div>
  `,
};

// 路由配置
const routes = [
  { path: "/", component: DashboardView },
  { path: "/history", component: HistoryView },
  { path: "/result/:taskId", component: ResultView },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

// 挂载应用
createApp(App).use(router).mount("#app");