<template>
  <view class="plan-card" hover-class="card-hover">
    <view class="card-glow"></view>

    <view class="card-top">
      <view class="cycle-pill">
        <text>{{ plan.cycleName }}</text>
      </view>
      <view class="status-dot" :class="statusMeta.className"></view>
    </view>

    <view class="account-row">
      <text class="account-label">{{ plan.socialTypeName }}</text>
      <text class="account-value">{{ maskedAccount }}</text>
    </view>

    <view class="content-box">
      <text class="content-text">{{ plan.content }}</text>
    </view>

    <view class="meta-row">
      <text class="meta-label">下次传送</text>
      <text class="meta-value">{{ nextRunTime }}</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed } from "vue";

import { formatMailTime } from "@/config/mail";
import { PLAN_STATUS_META, maskSocialAccount, type PlanItem } from "@/config/planning";

const props = defineProps({
  plan: {
    type: Object as () => PlanItem,
    required: true,
  },
});

const statusMeta = computed(() => PLAN_STATUS_META[props.plan.status]);
const maskedAccount = computed(() => maskSocialAccount(props.plan.socialAccount));
const nextRunTime = computed(() => formatMailTime(props.plan.nextRunTime));
</script>

<style scoped lang="scss">
.plan-card {
  position: relative;
  overflow: hidden;
  margin-bottom: 16rpx;
  padding: 18rpx 20rpx;
  border-radius: 22rpx;
  border: 1rpx solid rgba(255, 255, 255, 0.72);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.76), rgba(247, 252, 255, 0.54)),
    rgba(255, 255, 255, 0.52);
  box-shadow: 0 12rpx 28rpx rgba(93, 107, 139, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-hover {
  transform: scale(0.98);
  box-shadow: 0 12rpx 26rpx rgba(93, 107, 139, 0.06);
}

.card-glow {
  position: absolute;
  top: -72rpx;
  right: -66rpx;
  width: 170rpx;
  height: 170rpx;
  border-radius: 50%;
  background: rgba(255, 192, 216, 0.18);
  pointer-events: none;
}

.card-top,
.account-row,
.content-box,
.meta-row {
  position: relative;
  z-index: 1;
}

.card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18rpx;
}

.cycle-pill {
  display: flex;
  align-items: center;
  height: 40rpx;
  padding: 0 16rpx;
  border-radius: 999rpx;
  font-size: 21rpx;
  font-weight: 700;
}

.cycle-pill {
  color: #d94f75;
  background: rgba(255, 232, 241, 0.86);
}

.status-running {
  background: #35b779;
}

.status-done {
  background: #9aa3b2;
}

.status-paused {
  background: #f59e0b;
}

.status-dot {
  width: 18rpx;
  height: 18rpx;
  border-radius: 50%;
  box-shadow: 0 0 0 8rpx rgba(154, 163, 178, 0.12);
}

.account-row {
  display: flex;
  align-items: center;
  margin-top: 16rpx;
}

.account-label {
  height: 36rpx;
  line-height: 36rpx;
  padding: 0 12rpx;
  border-radius: 999rpx;
  color: #8c96a8;
  font-size: 20rpx;
  background: rgba(255, 255, 255, 0.72);
  border: 1rpx solid rgba(232, 238, 248, 0.9);
}

.account-value {
  margin-left: 12rpx;
  color: #263044;
  font-size: 27rpx;
  font-weight: 700;
}

.content-box {
  margin-top: 14rpx;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: 0;
}

.content-text {
  display: block;
  color: #586174;
  font-size: 25rpx;
  line-height: 1.5;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18rpx;
  margin-top: 14rpx;
}

.meta-label {
  flex-shrink: 0;
  color: #a0a9b8;
  font-size: 21rpx;
}

.meta-value {
  color: #737d90;
  font-size: 21rpx;
  text-align: right;
}
</style>
