<script setup lang="ts">
// --- Vue 核心 ---
import { computed, ref } from "vue";
import { useI18n } from "vue-i18n";

// --- Wails & 后端绑定 ---
import { Dialogs, Clipboard } from "@wailsio/runtime";
import { Transfer } from "../../bindings/mesh-drop/internal/transfer";
import {
  ResolvePendingRequest,
  CancelTransfer,
  DeleteTransfer,
} from "../../bindings/mesh-drop/internal/transfer/service";

// --- 属性 & 事件 ---
const props = defineProps<{
  transfer: Transfer;
}>();

const { t } = useI18n();

// --- 状态 ---
const showContentDialog = ref(false);

// --- 计算属性 ---
const percentage = computed(() =>
  Math.min(
    100,
    Math.round(
      (props.transfer.progress.current / props.transfer.progress.total) * 100,
    ),
  ),
);

const progressColor = computed(() => {
  if (props.transfer.status === "error") return "error";
  if (props.transfer.status === "completed") return "success";
  return "primary";
});

const canCancel = computed(() => {
  if (
    props.transfer.status === "completed" ||
    props.transfer.status === "error" ||
    props.transfer.status === "canceled" ||
    props.transfer.status === "rejected"
  ) {
    return false;
  }
  if (props.transfer.type === "send") {
    return true;
  } else if (props.transfer.type === "receive") {
    // 接收端在 pending 状态只能拒绝不能取消
    if (props.transfer.status === "pending") {
      return false;
    }
    return true;
  }
  return false;
});

const canCopy = computed(() => {
  if (
    props.transfer.type === "receive" &&
    props.transfer.status === "completed" &&
    props.transfer.content_type === "text"
  ) {
    return true;
  }
  return false;
});

const canAccept = computed(() => {
  if (
    props.transfer.type === "receive" &&
    props.transfer.status === "pending"
  ) {
    return true;
  }
  return false;
});

// --- 方法 ---
const formatSize = (bytes?: number) => {
  if (bytes === undefined) return "";
  if (bytes === 0) return "0 B";
  const k = 1024;
  const sizes = ["B", "KB", "MB", "GB"];
  const i = Math.floor(Math.log(bytes) / Math.log(k));
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
};

const formatSpeed = (speed?: number) => {
  if (!speed) return "";
  return formatSize(speed) + "/s";
};

const formatTime = (time: number): string => {
  return new Date(time).toLocaleString();
};

const acceptTransfer = () => {
  ResolvePendingRequest(props.transfer.id, true, "");
};

const rejectTransfer = () => {
  ResolvePendingRequest(props.transfer.id, false, "");
};

const acceptToFolder = async () => {
  const opts: Dialogs.OpenFileDialogOptions = {
    Title: t("transfers.selectSavePath"),
    CanChooseDirectories: true,
    CanChooseFiles: false,
    AllowsMultipleSelection: false,
  };
  const path = await Dialogs.OpenFile(opts);
  if (path !== "") {
    ResolvePendingRequest(props.transfer.id, true, path as string);
  }
};

const handleDelete = () => {
  DeleteTransfer(props.transfer.id);
};

const handleCopy = async () => {
  Clipboard.SetText(props.transfer.text).catch(() => {
    console.error("Failed to copy");
  });
};
</script>

<template>
  <v-card class="transfer-item mb-2">
    <v-card-text class="py-2 px-3">
      <div class="d-flex align-center flex-wrap ga-2">
        <!-- 图标 -->
        <div>
          <v-icon
            size="24"
            v-if="props.transfer.type === 'send'"
            color="info"
            icon="mdi-arrow-up"
          ></v-icon>
          <v-icon
            size="24"
            v-else-if="props.transfer.type === 'receive'"
            color="success"
            icon="mdi-arrow-down"
          ></v-icon>
          <v-icon
            size="24"
            v-else
            color="warning"
            icon="mdi-alert-circle"
          ></v-icon>
        </div>

        <!-- 信息 -->
        <div class="info-wrapper flex-grow-1" style="min-width: 0">
          <div class="d-flex align-center ga-2 mb-1 flex-wrap">
            <div class="font-weight-bold text-truncate d-flex align-center">
              <v-icon
                size="small"
                class="mr-1"
                v-if="props.transfer.content_type === 'file'"
                icon="mdi-file"
              ></v-icon>
              <v-icon
                size="small"
                class="mr-1"
                v-else-if="props.transfer.content_type === 'text'"
                icon="mdi-file-document"
              ></v-icon>
              <v-icon
                size="small"
                class="mr-1"
                v-else-if="props.transfer.content_type === 'folder'"
                icon="mdi-folder"
              ></v-icon>
              {{
                props.transfer.file_name ||
                (props.transfer.content_type === "text"
                  ? t("transfers.text")
                  : t("transfers.folder"))
              }}
            </div>

            <v-chip
              size="x-small"
              v-if="
                props.transfer.sender.name && props.transfer.type === 'receive'
              "
              :color="
                props.transfer.sender.trust_mismatch ? 'warning' : undefined
              "
              :prepend-icon="
                props.transfer.sender.trust_mismatch
                  ? 'mdi-alert'
                  : 'mdi-account'
              "
            >
              {{ props.transfer.sender.name }}
              <v-tooltip
                v-if="props.transfer.sender.trust_mismatch"
                activator="parent"
                location="bottom"
              >
                {{ t("transfers.securityAlert") }}
              </v-tooltip>
            </v-chip>

            <v-chip
              size="x-small"
              v-if="props.transfer.create_time"
              prepend-icon="mdi-clock-outline"
            >
              {{ formatTime(props.transfer.create_time) }}
            </v-chip>
          </div>

          <div class="text-caption text-medium-emphasis d-flex align-center">
            <span>{{ formatSize(props.transfer.file_size) }}</span>

            <!-- 状态文本 -->
            <span v-if="props.transfer.status === 'active'">
              &nbsp;- {{ formatSpeed(props.transfer.progress.speed) }}
            </span>
            <span
              v-if="props.transfer.status === 'completed'"
              class="text-success"
            >
              &nbsp;- {{ t("transfers.completed") }}
            </span>
            <span v-if="props.transfer.status === 'error'" class="text-error">
              &nbsp;- {{ props.transfer.error_msg || t("common.error") }}
            </span>
            <span v-if="props.transfer.status === 'canceled'" class="text-info">
              &nbsp;- {{ t("transfers.cancelled") }}
            </span>
            <span
              v-if="props.transfer.status === 'rejected'"
              class="text-error"
            >
              &nbsp;- {{ t("transfers.rejected") }}
            </span>
            <span
              v-if="props.transfer.status === 'pending'"
              class="text-warning"
            >
              &nbsp;- {{ t("transfers.waitingForAccept") }}
            </span>
          </div>

          <!-- 进度条 -->
          <v-progress-linear
            v-if="props.transfer.status === 'active'"
            :model-value="percentage"
            :color="progressColor"
            height="4"
            striped
            class="mt-1"
          ></v-progress-linear>
        </div>

        <!-- 操作按钮 -->
        <div class="actions-wrapper">
          <v-btn-group density="compact" variant="tonal" divided rounded="xl">
            <v-btn v-if="canAccept" color="success" @click="acceptTransfer">
              <v-icon icon="mdi-content-save"></v-icon>
              <v-tooltip activator="parent" location="bottom">{{
                t("common.accept")
              }}</v-tooltip>
            </v-btn>

            <v-btn
              v-if="canAccept && props.transfer.content_type !== 'text'"
              color="success"
              @click="acceptToFolder"
            >
              <v-icon icon="mdi-folder-arrow-right"></v-icon>
              <v-tooltip activator="parent" location="bottom">
                {{ t("transfers.saveToFolder") }}
              </v-tooltip>
            </v-btn>

            <v-btn v-if="canAccept" color="error" @click="rejectTransfer">
              <v-icon icon="mdi-close"></v-icon>
              <v-tooltip activator="parent" location="bottom">{{
                t("common.reject")
              }}</v-tooltip>
            </v-btn>

            <v-btn
              v-if="canCopy"
              color="success"
              @click="showContentDialog = true"
            >
              <v-icon icon="mdi-eye"></v-icon>
              <v-tooltip activator="parent" location="bottom">
                {{ t("transfers.viewContent") }}
              </v-tooltip>
            </v-btn>

            <v-btn v-if="canCopy" color="success" @click="handleCopy">
              <v-icon icon="mdi-content-copy"></v-icon>
              <v-tooltip activator="parent" location="bottom">{{
                t("common.copy")
              }}</v-tooltip>
            </v-btn>

            <v-btn
              v-if="
                props.transfer.status === 'completed' ||
                props.transfer.status === 'error' ||
                props.transfer.status === 'canceled' ||
                props.transfer.status === 'rejected'
              "
              color="info"
              @click="handleDelete"
            >
              <v-icon icon="mdi-delete"></v-icon>
              <v-tooltip activator="parent" location="bottom">{{
                t("common.delete")
              }}</v-tooltip>
            </v-btn>

            <v-btn
              v-if="canCancel"
              color="error"
              @click="CancelTransfer(props.transfer.id)"
            >
              <v-icon icon="mdi-stop"></v-icon>
              <v-tooltip activator="parent" location="bottom">{{
                t("common.cancel")
              }}</v-tooltip>
            </v-btn>
          </v-btn-group>
        </div>
      </div>
    </v-card-text>
  </v-card>

  <v-dialog v-model="showContentDialog" width="600">
    <v-card :title="t('transfers.textContent')">
      <v-card-text>
        <v-textarea
          :model-value="props.transfer.text"
          readonly
          rows="10"
        ></v-textarea>
      </v-card-text>
    </v-card>
  </v-dialog>
</template>

<style scoped>
.info-wrapper {
  overflow: hidden;
}
</style>
