<template>
  <div class="space-y-4">
    <a-page-header title="发票记录" sub-title="开票申请与发票下载">
      <template #extra>
        <a-space>
          <a-button :loading="loadingPrefill" @click="prefill">自动填充</a-button>
          <a-button @click="reloadRecords">刷新记录</a-button>
        </a-space>
      </template>
    </a-page-header>

    <a-card :bordered="false" class="card">
      <a-alert
        class="mb-4"
        show-icon
        type="info"
        message="开票申请提交后会记录在本地（浏览器）用于演示；如需接入后端开票流程，可在 submitApply 中替换为真实接口。"
      />

      <a-form ref="formRef" layout="vertical" :model="form" :rules="rules">
        <div class="grid gap-4 md:grid-cols-2">
          <a-form-item label="发票类型" name="invoiceType">
            <a-select
              v-model:value="form.invoiceType"
              placeholder="请选择发票类型"
              :options="invoiceTypeOptions"
            />
          </a-form-item>

          <a-form-item label="发票获取方式" name="deliveryMethod">
            <a-select v-model:value="form.deliveryMethod" :options="deliveryMethodOptions" disabled />
          </a-form-item>

          <a-form-item label="发票抬头" name="invoiceTitle">
            <a-input v-model:value="form.invoiceTitle" placeholder="例如：某某科技有限公司" />
          </a-form-item>

          <a-form-item label="纳税人识别号" name="taxpayerId">
            <a-input v-model:value="form.taxpayerId" placeholder="请输入纳税人识别号" />
          </a-form-item>

          <a-form-item label="邮箱地址" name="email">
            <a-input v-model:value="form.email" placeholder="例如：name@example.com" />
          </a-form-item>

          <div class="hidden md:block" />

          <a-form-item label="开户银行" name="bankName">
            <a-input v-model:value="form.bankName" placeholder="专票必填" />
          </a-form-item>

          <a-form-item label="开户账号" name="bankAccount">
            <a-input v-model:value="form.bankAccount" placeholder="专票必填" />
          </a-form-item>

          <a-form-item label="注册地址" name="registeredAddress">
            <a-input v-model:value="form.registeredAddress" placeholder="专票必填" />
          </a-form-item>

          <a-form-item label="注册电话" name="registeredPhone">
            <a-input v-model:value="form.registeredPhone" placeholder="专票必填（座机/手机号）" />
          </a-form-item>
        </div>

        <a-space class="mt-2">
          <a-button type="primary" :loading="submitting" @click="submitApply">提交开票申请</a-button>
          <a-button :disabled="submitting" @click="resetForm">重置</a-button>
        </a-space>
      </a-form>
    </a-card>

    <a-card :bordered="false" class="card">
      <a-space class="mb-3" align="center">
        <div class="text-base font-medium">申请记录</div>
        <a-tag color="blue">{{ records.length }}</a-tag>
      </a-space>

      <a-empty v-if="!records.length" description="暂无开票申请记录" />

      <a-table
        v-else
        :data-source="records"
        :pagination="false"
        size="middle"
        :row-key="(r: InvoiceApplyRecord) => r.id"
      >
        <a-table-column title="提交时间" key="createdAt" width="180">
          <template #default="{ record }">
            <span>{{ formatTime(record.createdAt) }}</span>
          </template>
        </a-table-column>

        <a-table-column title="发票类型" key="invoiceType" width="170">
          <template #default="{ record }">
            <span>{{ invoiceTypeText(record.invoiceType) }}</span>
          </template>
        </a-table-column>

        <a-table-column title="发票抬头" key="invoiceTitle" ellipsis>
          <template #default="{ record }">
            <span>{{ record.invoiceTitle || '-' }}</span>
          </template>
        </a-table-column>

        <a-table-column title="邮箱" key="email" width="220" ellipsis>
          <template #default="{ record }">
            <span>{{ record.email || '-' }}</span>
          </template>
        </a-table-column>

        <a-table-column title="状态" key="status" width="120">
          <template #default="{ record }">
            <a-tag v-if="record.status === 'submitted'" color="default">已提交</a-tag>
            <a-tag v-else-if="record.status === 'issued'" color="green">已开具</a-tag>
            <a-tag v-else-if="record.status === 'rejected'" color="red">已驳回</a-tag>
            <a-tag v-else color="default">-</a-tag>
          </template>
        </a-table-column>

        <a-table-column title="操作" key="actions" width="220" fixed="right">
          <template #default="{ record }">
            <a-space>
              <a-button size="small" @click="openDetail(record)">查看</a-button>
              <a-button size="small" :disabled="!record.fileUrl" @click="download(record)">下载</a-button>
              <a-button danger size="small" @click="removeRecord(record)">删除</a-button>
            </a-space>
          </template>
        </a-table-column>
      </a-table>
    </a-card>

    <a-modal v-model:open="detailOpen" title="开票申请详情" :width="720" ok-text="关闭" cancel-text="取消" :footer="null">
      <a-descriptions bordered size="small" :column="2">
        <a-descriptions-item label="发票类型">{{ invoiceTypeText(detail?.invoiceType) }}</a-descriptions-item>
        <a-descriptions-item label="发票获取方式">数字电子发票</a-descriptions-item>
        <a-descriptions-item label="发票抬头" :span="2">{{ detail?.invoiceTitle || '-' }}</a-descriptions-item>
        <a-descriptions-item label="纳税人识别号" :span="2">{{ detail?.taxpayerId || '-' }}</a-descriptions-item>
        <a-descriptions-item label="邮箱" :span="2">{{ detail?.email || '-' }}</a-descriptions-item>
        <a-descriptions-item label="开户银行" :span="2">{{ detail?.bankName || '-' }}</a-descriptions-item>
        <a-descriptions-item label="开户账号" :span="2">{{ detail?.bankAccount || '-' }}</a-descriptions-item>
        <a-descriptions-item label="注册地址" :span="2">{{ detail?.registeredAddress || '-' }}</a-descriptions-item>
        <a-descriptions-item label="注册电话" :span="2">{{ detail?.registeredPhone || '-' }}</a-descriptions-item>
        <a-descriptions-item label="提交时间">{{ formatTime(detail?.createdAt) }}</a-descriptions-item>
        <a-descriptions-item label="状态">
          <a-tag v-if="detail?.status === 'submitted'" color="default">已提交</a-tag>
          <a-tag v-else-if="detail?.status === 'issued'" color="green">已开具</a-tag>
          <a-tag v-else-if="detail?.status === 'rejected'" color="red">已驳回</a-tag>
          <a-tag v-else color="default">-</a-tag>
        </a-descriptions-item>
      </a-descriptions>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, reactive, ref } from 'vue'
import { message, Modal, type FormInstance } from 'ant-design-vue'
import { getTenantInfo, getUserInfo } from '@/api/layout'

definePageMeta({ layout: 'console' })

type InvoiceType = 'normal' | 'special'
type InvoiceDeliveryMethod = 'digital'
type InvoiceApplyStatus = 'submitted' | 'issued' | 'rejected'

type InvoiceApplyRecord = {
  id: string
  createdAt: string
  status: InvoiceApplyStatus
  invoiceType: InvoiceType
  invoiceTitle: string
  taxpayerId: string
  email: string
  deliveryMethod: InvoiceDeliveryMethod
  bankName: string
  bankAccount: string
  registeredAddress: string
  registeredPhone: string
  invoiceNo?: string
  fileUrl?: string
}

const STORAGE_KEY = 'console.invoiceApplications.v1'

const invoiceTypeOptions = [
  { label: '增值税普通发票', value: 'normal' },
  { label: '增值税专用发票', value: 'special' }
]

const deliveryMethodOptions = [{ label: '数字电子发票', value: 'digital' }]

const loadingPrefill = ref(false)
const submitting = ref(false)

const formRef = ref<FormInstance>()
const form = reactive<{
  invoiceType: InvoiceType | undefined
  invoiceTitle: string
  taxpayerId: string
  email: string
  deliveryMethod: InvoiceDeliveryMethod
  bankName: string
  bankAccount: string
  registeredAddress: string
  registeredPhone: string
}>({
  invoiceType: undefined,
  invoiceTitle: '',
  taxpayerId: '',
  email: '',
  deliveryMethod: 'digital',
  bankName: '',
  bankAccount: '',
  registeredAddress: '',
  registeredPhone: ''
})

const records = ref<InvoiceApplyRecord[]>([])
const detailOpen = ref(false)
const detail = ref<InvoiceApplyRecord | null>(null)

function invoiceTypeText(value?: InvoiceType | null) {
  if (value === 'special') return '增值税专用发票'
  if (value === 'normal') return '增值税普通发票'
  return '-'
}

function formatTime(value?: string | null) {
  if (!value) return '-'
  const d = new Date(value)
  if (Number.isNaN(d.getTime())) return value
  const pad = (n: number) => String(n).padStart(2, '0')
  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`
}

function safeParseRecords(raw: string | null): InvoiceApplyRecord[] {
  if (!raw) return []
  try {
    const parsed = JSON.parse(raw) as unknown
    if (!Array.isArray(parsed)) return []
    return parsed as InvoiceApplyRecord[]
  } catch {
    return []
  }
}

function persistRecords(next: InvoiceApplyRecord[]) {
  try {
    if (!import.meta.client) return
    localStorage.setItem(STORAGE_KEY, JSON.stringify(next))
  } catch {
    // ignore
  }
}

function reloadRecords() {
  if (!import.meta.client) return
  records.value = safeParseRecords(localStorage.getItem(STORAGE_KEY))
}

function generateId() {
  if (globalThis.crypto?.randomUUID) return globalThis.crypto.randomUUID()
  return `${Date.now()}-${Math.random().toString(16).slice(2)}`
}

function isSpecialInvoice() {
  return form.invoiceType === 'special'
}

function requiredWhenSpecial(label: string) {
  return (_rule: unknown, value: unknown) => {
    if (!isSpecialInvoice()) return Promise.resolve()
    const normalized = typeof value === 'string' ? value.trim() : ''
    if (normalized) return Promise.resolve()
    return Promise.reject(new Error(`${label}不能为空（专票必填）`))
  }
}

function phoneValidator(_rule: unknown, value: unknown) {
  const normalized = typeof value === 'string' ? value.trim() : ''
  if (!normalized) {
    if (isSpecialInvoice()) return Promise.reject(new Error('注册电话不能为空（专票必填）'))
    return Promise.resolve()
  }
  const mobileReg = /^1[3-9]\d{9}$/
  const landlineReg = /^0\d{2,3}-?\d{7,8}$/
  if (mobileReg.test(normalized) || landlineReg.test(normalized)) return Promise.resolve()
  return Promise.reject(new Error('电话格式不正确（座机：0xx-xxxxxxx 或手机号）'))
}

const rules = computed(() => ({
  invoiceType: [{ required: true, message: '请选择发票类型' }],
  invoiceTitle: [{ required: true, message: '请输入发票抬头', type: 'string' }],
  taxpayerId: [{ required: true, message: '请输入纳税人识别号', type: 'string' }],
  email: [
    { required: true, message: '请输入邮箱地址', type: 'string' },
    { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
  ],
  deliveryMethod: [{ required: true, message: '请选择发票获取方式' }],
  bankName: [{ validator: requiredWhenSpecial('开户银行'), trigger: 'blur' }],
  bankAccount: [{ validator: requiredWhenSpecial('开户账号'), trigger: 'blur' }],
  registeredAddress: [{ validator: requiredWhenSpecial('注册地址'), trigger: 'blur' }],
  registeredPhone: [{ validator: phoneValidator, trigger: 'blur' }]
}))

async function prefill(options: { silent?: boolean } = {}) {
  loadingPrefill.value = true
  try {
    const [uRes, cRes] = await Promise.allSettled([getUserInfo(), getTenantInfo()])
    if (uRes.status === 'fulfilled') {
      if (!form.email.trim()) form.email = (uRes.value.email ?? '').trim()
    }
    if (cRes.status === 'fulfilled') {
      const title = (cRes.value.invoiceHeader ?? cRes.value.companyName ?? cRes.value.tenantName ?? '').trim()
      if (title && !form.invoiceTitle.trim()) form.invoiceTitle = title
    }
    if (!options.silent) message.success('已自动填充可用信息')
  } catch (e: unknown) {
    console.error(e)
    if (!options.silent) message.error(e instanceof Error ? e.message : '自动填充失败')
  } finally {
    loadingPrefill.value = false
  }
}

function resetForm() {
  form.invoiceType = undefined
  form.invoiceTitle = ''
  form.taxpayerId = ''
  form.bankName = ''
  form.bankAccount = ''
  form.registeredAddress = ''
  form.registeredPhone = ''
  form.deliveryMethod = 'digital'
}

async function submitApply() {
  try {
    await formRef.value?.validate()
  } catch {
    return
  }

  const payload: Omit<InvoiceApplyRecord, 'id' | 'createdAt' | 'status'> = {
    invoiceType: form.invoiceType as InvoiceType,
    invoiceTitle: form.invoiceTitle.trim(),
    taxpayerId: form.taxpayerId.trim(),
    email: form.email.trim(),
    deliveryMethod: form.deliveryMethod,
    bankName: form.bankName.trim(),
    bankAccount: form.bankAccount.trim(),
    registeredAddress: form.registeredAddress.trim(),
    registeredPhone: form.registeredPhone.trim()
  }

  if (!payload.invoiceTitle) return message.error('请输入发票抬头')
  if (!payload.taxpayerId) return message.error('请输入纳税人识别号')
  if (!payload.email) return message.error('请输入邮箱地址')

  submitting.value = true
  try {
    const next: InvoiceApplyRecord = {
      id: generateId(),
      createdAt: new Date().toISOString(),
      status: 'submitted',
      ...payload
    }

    const updated = [next, ...records.value]
    records.value = updated
    persistRecords(updated)

    message.success('已提交开票申请')
    resetForm()
    await prefill({ silent: true })
  } catch (e: unknown) {
    console.error(e)
    message.error(e instanceof Error ? e.message : '提交失败')
  } finally {
    submitting.value = false
  }
}

function openDetail(record: InvoiceApplyRecord) {
  detail.value = record
  detailOpen.value = true
}

function download(record: InvoiceApplyRecord) {
  if (!record.fileUrl) return
  if (!import.meta.client) return
  window.open(record.fileUrl, '_blank', 'noopener,noreferrer')
}

function removeRecord(record: InvoiceApplyRecord) {
  Modal.confirm({
    title: '确认删除该开票申请？',
    content: '删除后无法恢复（仅删除本地记录）。',
    okText: '删除',
    okType: 'danger',
    cancelText: '取消',
    onOk: async () => {
      const updated = records.value.filter((r) => r.id !== record.id)
      records.value = updated
      persistRecords(updated)
      if (detail.value?.id === record.id) {
        detailOpen.value = false
        detail.value = null
      }
      message.success('已删除')
    }
  })
}

onMounted(() => {
  reloadRecords()
  prefill({ silent: true })
})
</script>

<style scoped>
.card {
  border-radius: 12px;
}
</style>
