web/src/pages/SmsTenantPage.vue

<script setup lang="ts">
import { computed, onMounted, reactive, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { message } from 'ant-design-vue'
import { ArrowRightOutlined } from '@ant-design/icons-vue'
import api from '@/api/http'

type BalanceLevel = 'healthy' | 'warning' | 'critical' | 'unknown'

type SmsSummary = {
  balanceRials: number
  balanceLabel: string
  balanceLevel: BalanceLevel
  perPartRials: number
  todayMessages: number
  todayParts: number
  todayCostRials: number
  monthMessages: number
  monthParts: number
  monthCostRials: number
}

const route = useRoute()
const router = useRouter()
const loading = ref(false)
const saving = ref(false)
const charging = ref(false)
const safeNote = ref('')
const ledgers = ref<any[]>([])
const summary = ref<SmsSummary | null>(null)
const tenant = ref<{
  id: string
  product: 'hamkar' | 'khanegi'
  slug: string
  nameFa: string
  domain: string
} | null>(null)

const form = reactive({
  pricePerPartRials: 2500,
  isBlocked: false,
  alertCriticalRials: 10000,
  alertWarningRials: 100000,
  gatewayProvider: 'melipayamak',
  melipayamakUser: '',
  melipayamakPassword: '',
  melipayamakFrom: '',
  panelUsername: '',
  panelPassword: '',
  panelFrom: '',
})

const chargeForm = reactive({
  amountRials: 100000,
  note: '',
})

const tenantId = computed(() => String(route.params.tenantId || ''))

function toneClass(level?: BalanceLevel) {
  return level || 'unknown'
}

function formatMoney(value: number | null | undefined) {
  if (value == null) return '—'
  return `${new Intl.NumberFormat('fa-IR').format(value)} ریال`
}

async function loadDetail() {
  if (!tenantId.value) return
  loading.value = true
  try {
    const { data } = await api.get(`/sms/tenants/${tenantId.value}`)
    tenant.value = data.tenant
    safeNote.value = data.safeNote || ''
    summary.value = data.summary
    ledgers.value = data.ledgers || []
    Object.assign(form, {
      pricePerPartRials: data.account.pricePerPartRials,
      isBlocked: data.account.isBlocked,
      alertCriticalRials: data.account.alertCriticalRials,
      alertWarningRials: data.account.alertWarningRials,
      gatewayProvider: data.account.gatewayProvider || 'melipayamak',
      melipayamakUser: data.account.melipayamakUser || '',
      melipayamakPassword: data.account.melipayamakPassword || '',
      melipayamakFrom: data.account.melipayamakFrom || '',
      panelUsername: data.account.panelUsername || '',
      panelPassword: data.account.panelPassword || '',
      panelFrom: data.account.panelFrom || '',
    })
  } catch (e: any) {
    message.error(e?.response?.data?.message || 'خطا در دریافت حساب پیامک')
  } finally {
    loading.value = false
  }
}

async function saveAccount() {
  saving.value = true
  try {
    await api.patch(`/sms/tenants/${tenantId.value}`, { ...form })
    message.success('تنظیمات ذخیره شد')
    await loadDetail()
  } catch (e: any) {
    message.error(e?.response?.data?.message || 'ذخیره ناموفق')
  } finally {
    saving.value = false
  }
}

async function chargeWallet() {
  charging.value = true
  try {
    await api.post(`/sms/tenants/${tenantId.value}/charge`, {
      amountRials: Number(chargeForm.amountRials),
      note: chargeForm.note || undefined,
    })
    message.success('موجودی به‌روز شد')
    chargeForm.note = ''
    await loadDetail()
  } catch (e: any) {
    message.error(e?.response?.data?.message || 'شارژ ناموفق')
  } finally {
    charging.value = false
  }
}

async function toggleBlock() {
  const path = form.isBlocked ? 'unblock' : 'block'
  try {
    await api.post(`/sms/tenants/${tenantId.value}/${path}`)
    message.success(form.isBlocked ? 'پیامک آزاد شد' : 'پیامک مسدود شد')
    await loadDetail()
  } catch (e: any) {
    message.error(e?.response?.data?.message || 'عملیات ناموفق')
  }
}

watch(tenantId, loadDetail)
onMounted(loadDetail)
</script>

<template>
  <div class="page-shell">
    <div style="display: flex; align-items: flex-start; gap: 8px; margin-bottom: 16px">
      <a-button type="text" @click="router.push({ name: 'sms-panel' })">
        <ArrowRightOutlined />
      </a-button>
      <div style="flex: 1">
        <h1 class="page-title">{{ tenant?.nameFa || 'پنل پیامک نسخه' }}</h1>
        <p class="page-sub">مدیریت کیف پول، تعرفه و گلوگاه پیامک این نسخه</p>
      </div>
    </div>

    <a-alert
      type="info"
      show-icon
      style="margin-bottom: 14px; border-radius: 14px"
      message="پنل پیامکی همکار/خانگی فعلاً دست نخورده می‌ماند"
      :description="safeNote"
    />

    <a-spin :spinning="loading">
      <section v-if="tenant" class="sms-main">
        <div class="selected-tenant-head">
          <div>
            <h2>{{ tenant.nameFa }}</h2>
            <div class="selected-tenant-meta">
              <a-tag :color="tenant.product === 'hamkar' ? 'cyan' : 'orange'">
                {{ tenant.product === 'hamkar' ? 'همکار' : 'خانگی' }}
              </a-tag>
              <span>{{ tenant.domain }}</span>
              <a-tag v-if="form.isBlocked" color="error">مسدود</a-tag>
            </div>
          </div>
          <div class="selected-balance" :class="toneClass(summary?.balanceLevel)">
            {{ summary?.balanceLabel || '—' }}
          </div>
        </div>

        <div class="summary-grid">
          <div class="summary-card">
            <span>موجودی کیف پول</span>
            <strong>{{ summary?.balanceLabel || '—' }}</strong>
          </div>
          <div class="summary-card">
            <span>قیمت هر پارت</span>
            <strong>{{ formatMoney(summary?.perPartRials) }}</strong>
          </div>
          <div class="summary-card">
            <span>امروز</span>
            <strong>
              {{ summary?.todayMessages ?? 0 }} پیامک
              <small>{{ summary?.todayParts ?? 0 }} پارت · {{ formatMoney(summary?.todayCostRials) }}</small>
            </strong>
          </div>
          <div class="summary-card">
            <span>ماه جاری</span>
            <strong>
              {{ summary?.monthMessages ?? 0 }} پیامک
              <small>{{ summary?.monthParts ?? 0 }} پارت · {{ formatMoney(summary?.monthCostRials) }}</small>
            </strong>
          </div>
        </div>

        <div class="panels-grid">
          <div class="panel-card">
            <h3>شارژ / اصلاح موجودی</h3>
            <a-form layout="vertical">
              <a-form-item label="مبلغ (ریال) — منفی = کاهش">
                <a-input-number v-model:value="chargeForm.amountRials" style="width: 100%" :step="10000" />
              </a-form-item>
              <a-form-item label="توضیح">
                <a-input v-model:value="chargeForm.note" placeholder="مثلاً واریز مشتری" />
              </a-form-item>
              <a-button type="primary" block :loading="charging" @click="chargeWallet">ثبت روی کیف پول</a-button>
            </a-form>
          </div>

          <div class="panel-card">
            <h3>تعرفه و هشدار و مسدودسازی</h3>
            <a-form layout="vertical">
              <a-form-item label="قیمت هر پارت (ریال)">
                <a-input-number v-model:value="form.pricePerPartRials" style="width: 100%" :min="0" />
              </a-form-item>
              <a-form-item label="آستانه قرمز (ریال)">
                <a-input-number v-model:value="form.alertCriticalRials" style="width: 100%" :min="0" />
              </a-form-item>
              <a-form-item label="آستانه زرد (ریال)">
                <a-input-number v-model:value="form.alertWarningRials" style="width: 100%" :min="0" />
              </a-form-item>
              <a-button danger ghost block style="margin-bottom: 10px" @click="toggleBlock">
                {{ form.isBlocked ? 'آزاد کردن پیامک' : 'مسدود کردن پیامک' }}
              </a-button>
              <a-button type="primary" block :loading="saving" @click="saveAccount">ذخیره تنظیمات</a-button>
            </a-form>
          </div>
        </div>

        <div class="panel-card" style="margin-top: 12px">
          <h3>گلوگاه پیامک (سوپرادمین)</h3>
          <div class="fields-grid">
            <div class="field-card">
              <label>ارائه‌دهنده</label>
              <a-select
                v-model:value="form.gatewayProvider"
                style="width: 100%"
                :options="[
                  { label: 'ملی‌پیامک', value: 'melipayamak' },
                  { label: 'پنل ۰۰۹۸', value: 'panel0098' },
                  { label: 'مرکزی', value: 'central' },
                ]"
              />
            </div>
            <div class="field-card">
              <label>ملی‌پیامک — کاربر</label>
              <a-input v-model:value="form.melipayamakUser" dir="ltr" />
            </div>
            <div class="field-card">
              <label>ملی‌پیامک — رمز</label>
              <a-input-password v-model:value="form.melipayamakPassword" dir="ltr" />
            </div>
            <div class="field-card">
              <label>ملی‌پیامک — فرستنده</label>
              <a-input v-model:value="form.melipayamakFrom" dir="ltr" />
            </div>
            <div class="field-card">
              <label>۰۰۹۸ — کاربر</label>
              <a-input v-model:value="form.panelUsername" dir="ltr" />
            </div>
            <div class="field-card">
              <label>۰۰۹۸ — رمز</label>
              <a-input-password v-model:value="form.panelPassword" dir="ltr" />
            </div>
            <div class="field-card">
              <label>۰۰۹۸ — فرستنده</label>
              <a-input v-model:value="form.panelFrom" dir="ltr" />
            </div>
          </div>
          <a-button type="primary" style="margin-top: 12px" :loading="saving" @click="saveAccount">
            ذخیره گلوگاه
          </a-button>
        </div>

        <div class="panel-card" style="margin-top: 12px">
          <h3>آخرین تراکنش‌ها</h3>
          <a-empty v-if="!ledgers.length" description="هنوز تراکنشی نیست" />
          <div v-else class="ledger-list">
            <div v-for="item in ledgers" :key="item.id" class="ledger-item">
              <strong :class="item.amountRials >= 0 ? 'plus' : 'minus'">
                {{ formatMoney(item.amountRials) }}
              </strong>
              <span>{{ item.note || item.type }}</span>
              <small>{{ new Date(item.createdAt).toLocaleString('fa-IR') }}</small>
            </div>
          </div>
        </div>
      </section>
      <a-empty v-else-if="!loading" description="نسخه پیدا نشد" />
    </a-spin>
  </div>
</template>

<style scoped>
.sms-main {
  background: #f7f9fc;
  border-radius: 18px;
  padding: 14px;
  border: 1px solid #e8eef5;
}
.selected-tenant-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.selected-tenant-head h2 { margin: 0 0 6px; font-size: 1.1rem; }
.selected-tenant-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  color: #8b95a8;
  font-size: 0.84rem;
}
.selected-balance {
  border-radius: 14px;
  padding: 10px 12px;
  font-weight: 800;
  white-space: nowrap;
}
.selected-balance.healthy { background: #dff8ea; color: #0f6b3c; }
.selected-balance.warning { background: #fff4c7; color: #8a6200; }
.selected-balance.critical { background: #ffd8d8; color: #9d1f1f; }
.selected-balance.unknown { background: #eef2f7; color: #6a7789; }

.summary-grid,
.panels-grid,
.fields-grid { display: grid; gap: 10px; }
.summary-grid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin-bottom: 14px;
}
.panels-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.fields-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.summary-card,
.panel-card,
.field-card {
  background: #fff;
  border: 1px solid #e8eef5;
  border-radius: 14px;
  padding: 12px;
}
.summary-card span,
.field-card label {
  color: #8b95a8;
  font-size: 0.82rem;
  display: block;
  margin-bottom: 6px;
}
.summary-card strong { display: grid; gap: 4px; }
.summary-card small { color: #6f7d90; font-size: 0.8rem; }
.panel-card h3 { margin: 0 0 12px; font-size: 0.98rem; }
.ledger-list { display: grid; gap: 8px; }
.ledger-item {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  gap: 10px;
  align-items: center;
  background: #f7f9fc;
  border-radius: 12px;
  padding: 10px 12px;
}
.ledger-item .plus { color: #0f6b3c; }
.ledger-item .minus { color: #9d1f1f; }
.ledger-item small { color: #8b95a8; }
@media (max-width: 720px) {
  .selected-tenant-head { flex-direction: column; }
  .ledger-item { grid-template-columns: 1fr; }
}
</style>