<template>
  <view class="upload panel" @tap="pickFile">
    <view class="upload__icon">+</view>
    <view class="upload__body">
      <text class="upload__title">{{ fileName || "上传剧本文件" }}</text>
      <text class="upload__desc">支持 doc、docx、txt、pdf、md，上传后可直接启动 Agent。</text>
    </view>
    <text class="upload__action">选择</text>
  </view>
</template>

<script setup lang="ts">
import { SCRIPT_EXTENSIONS } from "@/utils/constants";

defineProps<{
  fileName?: string;
}>();

const emit = defineEmits<{
  (event: "picked", payload: { path: string; name: string }): void;
}>();

function pickFile() {
  const chooseMessageFile = (uni as unknown as {
    chooseMessageFile?: (options: Record<string, unknown>) => void;
  }).chooseMessageFile;

  const success = (result: { tempFiles?: Array<{ path: string; name?: string }> }) => {
    const file = result.tempFiles?.[0];
    if (!file) return;
    emit("picked", {
      path: file.path,
      name: file.name || "剧本文件"
    });
  };

  if (chooseMessageFile) {
    chooseMessageFile({
      count: 1,
      type: "file",
      extension: SCRIPT_EXTENSIONS,
      success: success as (result: unknown) => void
    });
    return;
  }

  uni.chooseFile({
    count: 1,
    type: "all",
    extension: SCRIPT_EXTENSIONS,
    success: success as (result: UniApp.ChooseFileSuccessCallbackResult) => void
  });
}
</script>

<style scoped lang="scss">
.upload {
  display: flex;
  align-items: center;
  gap: 20rpx;
  padding: 28rpx;
}

.upload__icon {
  width: 76rpx;
  height: 76rpx;
  border-radius: 22rpx;
  background: #eef4ff;
  color: #5b5cf6;
  font-size: 42rpx;
  font-weight: 560;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.upload__body {
  min-width: 0;
  flex: 1;
}

.upload__title {
  display: block;
  color: #101828;
  font-size: 29rpx;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.upload__desc {
  display: block;
  margin-top: 8rpx;
  color: #667085;
  font-size: 24rpx;
  line-height: 1.45;
}

.upload__action {
  color: #5b5cf6;
  font-size: 25rpx;
  font-weight: 760;
}
</style>
