<template>
  <div class="grid gap-4">
    <div class="flex flex-col gap-3 rounded-2xl border bg-white p-4 shadow-sm md:flex-row md:items-center">
      <div class="flex items-center gap-3">
        <div class="grid h-10 w-10 place-items-center rounded-xl bg-indigo-50 text-indigo-700">
          <i class="pi pi-building"></i>
        </div>
        <div>
          <div class="text-base font-semibold leading-tight">租户列表</div>
          <div class="text-xs text-slate-500">查询、排序、续期与快速入口</div>
        </div>
      </div>
      <div class="flex-1"></div>
      <div class="flex w-full flex-col gap-2 md:w-auto md:flex-row md:items-center">
        <span class="w-full md:w-80">
          <InputText v-model="name" placeholder="按租户名称筛选（name）" class="w-full" @keyup.enter="reload" />
        </span>
        <Button severity="secondary" icon="pi pi-search" label="查询" @click="reload" />
        <Button severity="secondary" icon="pi pi-refresh" label="刷新" @click="load" />
      </div>
    </div>

    <div v-if="error" class="rounded-2xl border bg-white p-4 shadow-sm">
      <Message severity="error" :closable="false">
        <div class="flex items-center justify-between gap-4">
          <div class="min-w-0">
            <div class="font-medium">加载失败</div>
            <div class="mt-1 break-all text-xs text-slate-600">{{ error }}</div>
          </div>
          <Button icon="pi pi-refresh" label="重试" @click="load" />
        </div>
      </Message>
    </div>

    <div class="rounded-2xl border bg-white shadow-sm">
      <DataTable :value="items" :loading="loading" dataKey="id" lazy paginator stripedRows rowHover :rows="limit"
        :totalRecords="total" :first="(page - 1) * limit" :rowsPerPageOptions="[10, 20, 50, 100]" :sortField="sortField"
        :sortOrder="sortOrder" @page="onPage" @sort="onSort" class="rounded-2xl">
        <template #empty>
          <div class="flex flex-col items-center gap-2 py-10 text-slate-500">
            <i class="pi pi-inbox text-2xl"></i>
            <div class="text-sm">暂无数据</div>
            <div class="text-xs">可以尝试调整筛选条件或点击刷新。</div>
          </div>
        </template>

        <Column field="id" header="ID" sortable style="width: 90px" />
        <Column field="code" header="Code" sortable style="width: 180px">
          <template #body="{ data }">
            <div class="flex items-center gap-2">
              <span class="font-mono text-sm">{{ data.code }}</span>
              <Button text rounded size="small" icon="pi pi-copy" severity="secondary" v-tooltip.top="'复制访问链接'"
                @click="copyTenantLinks(data)" />
            </div>
          </template>
        </Column>
        <Column field="name" header="Name" sortable>
          <template #body="{ data }">
            <div class="min-w-0">
              <div class="truncate font-medium">{{ data.name || '-' }}</div>
            </div>
          </template>
        </Column>
        <Column field="status" header="Status" sortable style="width: 160px">
          <template #body="{ data }">
            <Tag :value="data.status_description" :severity="statusSeverity(data.status)" />
          </template>
        </Column>
        <Column field="expired_at" header="Expired At" sortable style="width: 210px">
          <template #body="{ data }">
            <Tag :value="formatDate(data.expired_at)" :severity="expiredSeverity(data.expired_at)"
              v-tooltip.top="expiredHint(data.expired_at)" />
          </template>
        </Column>
        <Column field="userCount" header="Users" sortable style="width: 120px">
          <template #body="{ data }">{{ Number(data.userCount || 0).toLocaleString() }}</template>
        </Column>
        <Column field="userBalance" header="Balance" sortable style="width: 140px">
          <template #body="{ data }">{{ formatMoney(data.userBalance) }}</template>
        </Column>
        <Column header="Action" style="width: 170px">
          <template #body="{ data }">
            <div class="flex items-center gap-2">
              <Button size="small" icon="pi pi-calendar-plus" label="续期" @click="openExtend(data)" />
              <Button size="small" severity="secondary" icon="pi pi-external-link" label="打开"
                @click="openTenant(data)" />
            </div>
          </template>
        </Column>
      </DataTable>
    </div>

    <Dialog v-model:visible="extendVisible" modal :style="{ width: '520px' }" :draggable="false">
      <template #header>
        <div class="flex items-center gap-2">
          <i class="pi pi-calendar-plus text-slate-700"></i>
          <span class="font-semibold">更新过期时间</span>
        </div>
      </template>

      <div class="grid gap-4">
        <div class="rounded-xl bg-slate-50 p-3 text-sm text-slate-700">
          <div class="flex items-center justify-between gap-4">
            <div class="min-w-0">
              <div class="truncate font-medium">{{ selected?.name || '-' }}</div>
              <div class="mt-1 truncate font-mono text-xs text-slate-500">{{ selected?.code || '-' }}</div>
            </div>
            <Tag v-if="selected" :value="selected.status_description" :severity="statusSeverity(selected.status)" />
          </div>
        </div>

        <div class="grid gap-2">
          <label class="text-sm font-medium text-slate-700">续期时长</label>
          <Dropdown v-model="duration" :options="durationOptions" optionLabel="label" optionValue="value"
            class="w-full" />
        </div>
      </div>

      <template #footer>
        <Button severity="secondary" label="取消" @click="extendVisible = false" />
        <Button :loading="extendLoading" icon="pi pi-check" label="保存" @click="saveExtend" />
      </template>
    </Dialog>
  </div>
</template>

<script setup lang="ts">
import Button from 'primevue/button'
import Column from 'primevue/column'
import DataTable from 'primevue/datatable'
import Dialog from 'primevue/dialog'
import Dropdown from 'primevue/dropdown'
import InputText from 'primevue/inputtext'
import Message from 'primevue/message'
import Tag from 'primevue/tag'
import { useToast } from 'primevue/usetoast'
import { onMounted, ref } from 'vue'
import { api } from '../api'

type TenantItem = {
  id: number
  code: string
  uuid: string
  name: string
  status: string
  created_at?: string
  updated_at?: string
  expired_at?: string
  userCount?: number
  userBalance?: number
}

const toast = useToast()
const loading = ref(false)
const items = ref<TenantItem[]>([])
const total = ref(0)
const error = ref('')

const page = ref(1)
const limit = ref(20)
const name = ref('')

const sortField = ref<string>('id')
const sortOrder = ref<number>(-1) // -1 desc, 1 asc

async function load() {
  loading.value = true
  error.value = ''
  try {
    const params: any = {
      page: page.value,
      limit: limit.value,
    }
    if (name.value.trim()) params.name = name.value.trim()
    if (sortField.value) {
      if (sortOrder.value === 1) params.asc = sortField.value
      else if (sortOrder.value === -1) params.desc = sortField.value
    }
    const resp = await api.get('/tenants', { params })
    items.value = Array.isArray(resp.data?.items) ? resp.data.items : []
    total.value = Number(resp.data?.total || 0)
  } catch (e: any) {
    const msg = e?.response?.data?.message || e?.message || 'error'
    error.value = String(msg)
    toast.add({ severity: 'error', summary: '加载失败', detail: msg, life: 3500 })
  } finally {
    loading.value = false
  }
}

function reload() {
  page.value = 1
  load()
}

function onPage(e: any) {
  page.value = Math.floor(e.first / e.rows) + 1
  limit.value = e.rows
  load()
}

function onSort(e: any) {
  sortField.value = e.sortField || 'id'
  sortOrder.value = e.sortOrder || -1
  load()
}

function statusSeverity(status: string) {
  if (status === 'verified') return 'success'
  if (status === 'pending_verify') return 'warning'
  if (status === 'banned') return 'danger'
  return 'secondary'
}

function formatDate(s?: string) {
  if (!s) return '-'
  const d = new Date(s)
  if (Number.isNaN(d.getTime())) return String(s)
  return d.toLocaleString(undefined, { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' })
}

function daysUntil(expiredAt?: string) {
  if (!expiredAt) return null
  const d = new Date(expiredAt)
  if (Number.isNaN(d.getTime())) return null
  const diffMs = d.getTime() - Date.now()
  return Math.floor(diffMs / (24 * 60 * 60 * 1000))
}

function expiredSeverity(expiredAt?: string) {
  const days = daysUntil(expiredAt)
  if (days === null) return 'secondary'
  if (days < 10) return 'danger'
  if (days < 30) return 'warning'
  return 'success'
}

function expiredHint(expiredAt?: string) {
  const days = daysUntil(expiredAt)
  if (days === null) return ''
  if (days < 0) return `已过期 ${Math.abs(days)} 天`
  if (days === 0) return '今天到期'
  return `剩余 ${days} 天`
}

function formatMoney(v?: number) {
  const n = Number(v || 0)
  return `¥${(n / 100).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`
}

async function copyTenantLinks(row: TenantItem) {
  const origin = window.location.origin
  const userUrl = `${origin}/t/${encodeURIComponent(row.code)}/`
  const adminUrl = `${origin}/t/${encodeURIComponent(row.code)}/admin/`
  const text = `User: ${userUrl}\nAdmin: ${adminUrl}`
  try {
    await navigator.clipboard.writeText(text)
    toast.add({ severity: 'success', summary: '已复制', detail: row.code, life: 1500 })
  } catch {
    toast.add({ severity: 'warn', summary: '复制失败', detail: '浏览器不支持剪贴板或权限不足', life: 2500 })
  }
}

function openTenant(row: TenantItem) {
  const origin = window.location.origin
  const url = `${origin}/t/${encodeURIComponent(row.code)}/admin/`
  window.open(url, '_blank', 'noopener,noreferrer')
}

const extendVisible = ref(false)
const extendLoading = ref(false)
const selected = ref<TenantItem | null>(null)
const duration = ref<number>(30)
const durationOptions = [
  { label: '7 天', value: 7 },
  { label: '30 天', value: 30 },
  { label: '90 天', value: 90 },
  { label: '180 天', value: 180 },
  { label: '365 天', value: 365 },
]

function openExtend(row: TenantItem) {
  selected.value = row
  duration.value = 30
  extendVisible.value = true
}

async function saveExtend() {
  if (!selected.value) return
  extendLoading.value = true
  try {
    await api.patch(`/tenants/${selected.value.id}`, { duration: duration.value })
    toast.add({ severity: 'success', summary: '已更新', life: 1500 })
    extendVisible.value = false
    await load()
  } catch (e: any) {
    toast.add({ severity: 'error', summary: '更新失败', detail: e?.response?.data?.message || e?.message || 'error', life: 3000 })
  } finally {
    extendLoading.value = false
  }
}

onMounted(load)
</script>
