<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { ref, watch } from 'vue'

import { updateSystemConfig, type SystemConfig } from '@/features/admin/api/systemConfigs'
import type { OrderAgreements } from '@/features/orders/api/orders'
import { safeParseJSON } from '@/utils/json'

const defaultOrderAgreements: OrderAgreements = {
  virtual_asset_purchase: {
    title: '虚拟资产购买协议',
    content: `请您在下单前仔细阅读并确认以下内容：

一、交易性质
1. 本平台商品涉及游戏账号租用期间的虚拟资产使用权益、租金和押金托管服务。
2. 虚拟资产、游戏账号及相关数据均受游戏厂商规则约束，平台不承诺虚拟资产具备现实货币价值或永久可用性。
3. 您下单即表示已理解商品页面展示的哈夫币、装备、皮肤、消耗品、租期、押金和交接规则。

二、风险告知
1. 游戏厂商可能因版本更新、风控策略、账号安全策略等因素调整游戏资产状态。
2. 因租客违规操作、使用外挂、恶意消耗、转移资产、私下交易或违反游戏规则造成的损失，可能从押金中扣除或进入争议处理。
3. 请勿绕过平台私下付款、私下交接或私下协商退款，否则平台可能无法保障您的资金与交易权益。

三、费用与结算
1. 订单租金、押金和可能产生的额外消耗品费用以平台订单和结账页面展示为准。
2. 未实际使用完的租金或剩余押金，将按平台结账规则退回。
3. 若发生争议，平台将依据订单记录、聊天记录、截图证据和双方说明进行处理。`,
  },
  renter_agreement: {
    title: '租客协议',
    content: `请您作为租客在下单前确认并遵守以下约定：

一、账号使用义务
1. 您仅可在订单约定时间内按商品说明使用账号，不得转租、转借、出售、赠与或用于任何非订单目的。
2. 您不得使用外挂、脚本、漏洞、恶意组队、违规交易、消极比赛、辱骂举报等可能导致账号异常的行为。
3. 您不得修改账号绑定信息、登录凭证、安全设置、实名信息或任何影响号主取回账号的内容。

二、资产保护义务
1. 您应按商品详情和订单快照合理使用哈夫币、装备、物资、皮肤及其他虚拟资产。
2. 额外消耗品、哈夫币消耗、违规损失、封禁损失等应在结账时如实登记。
3. 因您未按约定使用账号造成的损失，平台可根据证据从押金中扣除相应赔付。

三、交接与结账
1. 下单后请通过平台流程完成交接、沟通、归还和结账，不要私下交易。
2. 租用结束后请及时发起结账并说明资产状态；号主确认或双方完成争议处理后，订单结算完成。
3. 您同意平台依据订单记录、资产快照、聊天记录、截图证据和相关规则处理退款、赔付及争议。`,
  },
}

const props = defineProps<{
  modelValue: boolean
  config: SystemConfig
}>()

const emit = defineEmits<{
  (e: 'update:modelValue', val: boolean): void
  (e: 'saved'): void
}>()

const submitting = ref(false)
const description = ref('')
const draft = ref<OrderAgreements>(cloneAgreements(defaultOrderAgreements))

watch(
  () => props.modelValue,
  (val) => {
    if (val) {
      draft.value = parseOrderAgreements(props.config.value)
      description.value = props.config.description || ''
    }
  },
  { immediate: true },
)

function parseOrderAgreements(raw: string) {
  const parsed = safeParseJSON(raw, defaultOrderAgreements)
  return cloneAgreements({
    virtual_asset_purchase: {
      title: readText(parsed?.virtual_asset_purchase?.title, defaultOrderAgreements.virtual_asset_purchase.title),
      content: readText(parsed?.virtual_asset_purchase?.content, defaultOrderAgreements.virtual_asset_purchase.content),
    },
    renter_agreement: {
      title: readText(parsed?.renter_agreement?.title, defaultOrderAgreements.renter_agreement.title),
      content: readText(parsed?.renter_agreement?.content, defaultOrderAgreements.renter_agreement.content),
    },
  })
}

function readText(value: unknown, fallback: string) {
  return typeof value === 'string' && value.trim() ? value : fallback
}

function cloneAgreements(value: OrderAgreements) {
  return JSON.parse(JSON.stringify(value)) as OrderAgreements
}

function resetDefaults() {
  draft.value = cloneAgreements(defaultOrderAgreements)
}

async function handleSave() {
  submitting.value = true
  try {
    const value = JSON.stringify(draft.value, null, 2)
    await updateSystemConfig(props.config.key, {
      value,
      description: description.value,
    })
    ElMessage.success('协议配置已更新')
    emit('saved')
    emit('update:modelValue', false)
  } catch (error) {
    ElMessage.error(readError(error, '保存失败'))
  } finally {
    submitting.value = false
  }
}

function readError(error: unknown, fallback: string) {
  if (typeof error === 'object' && error && 'response' in error) {
    const response = (error as { response?: { data?: { message?: string } } }).response
    return response?.data?.message || fallback
  }
  return fallback
}
</script>

<template>
  <el-dialog
    :model-value="modelValue"
    title="编辑下单协议"
    width="860px"
    @update:model-value="emit('update:modelValue', $event)"
  >
    <div class="dialog-body">
      <div class="dialog-header">
        <p class="config-key-label"><strong>{{ config.key }}</strong></p>
        <el-button size="small" @click="resetDefaults">恢复默认文本</el-button>
      </div>

      <div class="agreement-editor-grid">
        <section class="agreement-editor-card">
          <div class="agreement-card-title">虚拟资产购买协议</div>
          <el-form-item label="协议标题" class="full-control">
            <el-input v-model="draft.virtual_asset_purchase.title" placeholder="请输入协议标题" />
          </el-form-item>
          <el-form-item label="协议正文" class="full-control">
            <el-input
              v-model="draft.virtual_asset_purchase.content"
              type="textarea"
              :rows="14"
              resize="vertical"
              placeholder="请输入协议正文"
            />
          </el-form-item>
        </section>

        <section class="agreement-editor-card">
          <div class="agreement-card-title">租客协议</div>
          <el-form-item label="协议标题" class="full-control">
            <el-input v-model="draft.renter_agreement.title" placeholder="请输入协议标题" />
          </el-form-item>
          <el-form-item label="协议正文" class="full-control">
            <el-input
              v-model="draft.renter_agreement.content"
              type="textarea"
              :rows="14"
              resize="vertical"
              placeholder="请输入协议正文"
            />
          </el-form-item>
        </section>
      </div>

      <el-form-item label="配置说明" class="desc-item">
        <el-input v-model="description" type="textarea" :rows="3" placeholder="配置说明" />
      </el-form-item>
    </div>
    <template #footer>
      <el-button @click="emit('update:modelValue', false)">取消</el-button>
      <el-button type="primary" :loading="submitting" @click="handleSave">保存</el-button>
    </template>
  </el-dialog>
</template>

<style scoped>
.dialog-body {
  display: grid;
  gap: 16px;
  max-height: 68vh;
  overflow-y: auto;
  padding-right: 8px;
}

.dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.config-key-label {
  margin: 0;
  color: #374151;
}

.agreement-editor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.agreement-editor-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #f9fafb;
}

.agreement-card-title {
  color: #111827;
  font-weight: 700;
}

.full-control,
.desc-item {
  margin-bottom: 0;
}

@media (max-width: 900px) {
  .agreement-editor-grid {
    grid-template-columns: 1fr;
  }
}
</style>
