import { computed, ref, watch } from 'vue'

import EnterpriseListPage from '../../components/shared/EnterpriseListPage.vue'
import { useApprovalInbox } from '../../composables/useApprovalInbox.js'
import { useSystemState } from '../../composables/useSystemState.js'
import { fetchApprovalWorkbenchItems } from '../../services/approvalWorkbench.js'
import { listPendingApprovalRequests } from '../../utils/approvalInbox.js'
import {
  filterActionableRiskFlags,
  isRiskSummaryWithRisk,
  normalizeRiskFlagTone
} from '../../utils/riskFlags.js'
import TravelRequestDetailView from '../TravelRequestDetailView.vue'

const DEFAULT_SLA_HOURS = 24
const tabs = ['全部待审', '高风险', '即将超时', '已处理']
const filters = ['法人主体', '费用类型', '风险等级', '金额区间', '所属部门']
const RISK_LABELS = {
  low: '低风险',
  medium: '中风险',
  high: '高风险'
}

function toDate(value) {
  if (!value) {
    return null
  }

  const nextDate = new Date(value)
  return Number.isNaN(nextDate.getTime()) ? null : nextDate
}

function formatCurrency(value) {
  const amount = Number(value)
  return new Intl.NumberFormat('zh-CN', {
    style: 'currency',
    currency: 'CNY',
    minimumFractionDigits: 0,
    maximumFractionDigits: Number.isInteger(amount) ? 0 : 2
  }).format(Number.isFinite(amount) ? amount : 0)
}

function resolveRiskTone(riskFlags, riskSummary) {
  const actionableFlags = filterActionableRiskFlags(riskFlags)
  if (actionableFlags.length) {
    const severities = actionableFlags.map((item) => normalizeRiskFlagTone(item)).filter(Boolean)

    if (severities.includes('high')) {
      return 'high'
    }
    if (severities.includes('medium')) {
      return 'medium'
    }
    if (severities.includes('low')) {
      return 'low'
    }
  }

  if (isRiskSummaryWithRisk(riskSummary)) {
    return 'medium'
  }

  return 'low'
}

function resolveSlaMeta(submittedAt) {
  const startAt = toDate(submittedAt)
  if (!startAt) {
    return { label: '待处理', tone: 'safe', urgent: false }
  }

  const deadline = new Date(startAt.getTime() + DEFAULT_SLA_HOURS * 60 * 60 * 1000)
  const diffMs = deadline.getTime() - Date.now()
  if (diffMs <= 0) {
    return { label: '已超时', tone: 'danger', urgent: true }
  }

  const diffHours = diffMs / (60 * 60 * 1000)
  const diffMinutes = Math.max(1, Math.ceil(diffMs / (60 * 1000)))
  const label = diffHours >= 1 ? `${diffHours.toFixed(diffHours >= 10 ? 0 : 1)}h` : `${diffMinutes}m`
  if (diffHours <= 2) {
    return { label, tone: 'danger', urgent: true }
  }
  if (diffHours <= 8) {
    return { label, tone: 'warning', urgent: false }
  }
  return { label, tone: 'safe', urgent: false }
}

function buildApprovalRow(request, workbench = {}) {
  const resolvedRiskTone = workbench.riskLevel
    || resolveRiskTone(request.riskFlags, request.riskSummary)
  const riskTone = resolvedRiskTone === 'critical' ? 'high' : resolvedRiskTone
  const slaMeta = resolveSlaMeta(request.submittedAt || request.createdAt)
  const statusTone = workbench.slaOverdue || slaMeta.urgent ? 'urgent' : 'pending'
  const evidence = workbench.evidence || {}
  const evidencePercent = Math.round(Number(evidence.completeness || 0) * 100)
  const priorityReasons = Array.isArray(workbench.priorityReasons)
    ? workbench.priorityReasons.map((item) => item.label).filter(Boolean)
    : []

  return {
    ...request,
    applicant: request.person,
    avatar: String(request.person || '?').trim().slice(0, 1) || '?',
    department: request.dept,
    type: request.typeLabel,
    amount: formatCurrency(request.amount),
    time: request.applyTime,
    risk: RISK_LABELS[riskTone] || RISK_LABELS.low,
    riskTone,
    priorityScore: Number(workbench.priorityScore || 0),
    priorityTier: workbench.priorityTier || 'normal',
    priorityLabel: workbench.priorityTier === 'urgent'
      ? '紧急'
      : workbench.priorityTier === 'high'
        ? '优先'
        : '常规',
    priorityReasons,
    priorityTitle: priorityReasons.join('；') || '常规低风险待办',
    sla: workbench.slaOverdue
      ? '已超时'
      : workbench.waitingHours != null
        ? `已等待 ${Number(workbench.waitingHours || 0).toFixed(1)}h`
        : slaMeta.label,
    slaTone: workbench.slaOverdue ? 'danger' : slaMeta.tone,
    evidenceLabel: `${evidencePercent}%`,
    evidenceTone: evidencePercent < 100 ? 'warning' : 'safe',
    evidenceTitle: evidence.missingLabels?.length
      ? `缺少：${evidence.missingLabels.join('、')}`
      : '必要材料相对完整',
    historicalLabels: evidence.historicalLabels || [],
    suggestionLabel: workbench.suggestion?.label || '人工复核',
    suggestionReason: workbench.suggestion?.reason || '',
    node: request.workflowNode || '审批中',
    statusLabel: statusTone === 'urgent' ? '即将超时' : '待审批',
    statusTone,
    spotlight: workbench.priorityTier === 'urgent' || riskTone === 'high' || statusTone === 'urgent'
  }
}

export default {
  name: 'ApprovalCenterView',
  components: {
    EnterpriseListPage,
    TravelRequestDetailView
  },
  setup() {
    const { currentUser } = useSystemState()
    const { markClaimViewed, syncPendingClaimIds } = useApprovalInbox()
    const activeTab = ref('全部待审')
    const selectedClaimId = ref('')
    const listKeyword = ref('')
    const rows = ref([])
    const loading = ref(false)
    const error = ref('')

    watch(
      () => selectedClaimId.value,
      (claimId) => {
        if (claimId) {
          markClaimViewed(claimId)
        }
      }
    )

    const selectedRow = computed({
      get() {
        return rows.value.find((row) => row.claimId === selectedClaimId.value) || null
      },
      set(value) {
        selectedClaimId.value = value?.claimId || ''
      }
    })

    const visibleRows = computed(() => {
      let filteredRows = rows.value

      if (activeTab.value === '高风险') {
        filteredRows = filteredRows.filter((row) => row.riskTone === 'high')
      } else if (activeTab.value === '即将超时') {
        filteredRows = filteredRows.filter((row) => row.statusTone === 'urgent')
      } else if (activeTab.value === '已处理') {
        filteredRows = []
      }

      if (listKeyword.value.trim()) {
        const keyword = listKeyword.value.trim().toLowerCase()
        filteredRows = filteredRows.filter((row) => (
          String(row.id || '').toLowerCase().includes(keyword)
          || String(row.applicant || '').toLowerCase().includes(keyword)
          || String(row.department || '').toLowerCase().includes(keyword)
          || String(row.type || '').toLowerCase().includes(keyword)
          || String(row.amount || '').toLowerCase().includes(keyword)
        ))
      }

      return filteredRows
    })
    const showEmpty = computed(() => !loading.value && !error.value && visibleRows.value.length === 0)
    const approvalEmptyState = computed(() => {
      if (!rows.value.length) {
        return {
          eyebrow: '审批中心',
          title: '当前没有待审批单据',
          desc: '进入直属领导或财务审批节点的报销单会自动汇总到这里，后续可继续处理或跟踪。',
          icon: 'mdi mdi-clipboard-check-outline',
          actionLabel: null,
          actionIcon: null,
          tone: 'slate',
          artLabel: 'QUEUE',
          tips: ['当前仅展示您有权限处理的单据', '高风险和即将超时单据会优先高亮']
        }
      }

      return {
        eyebrow: '状态列表为空',
        title: `“${activeTab.value}”里暂时没有单据`,
        desc: activeTab.value === '已处理'
          ? '当前视图还没有已处理审批数据，可以先回到全部待审继续处理。'
          : '可以切换到其他状态查看，或返回全部待审列表继续处理。',
        icon: activeTab.value === '已处理' ? 'mdi mdi-archive-clock-outline' : 'mdi mdi-view-list-outline',
        actionLabel: '查看全部待审',
        actionIcon: 'mdi mdi-format-list-bulleted',
        tone: activeTab.value === '已处理' ? 'amber' : 'sky',
        artLabel: activeTab.value === '已处理' ? 'DONE' : 'FILTER',
        tips: ['分页与表格只在有数据时展示', '空态页面会保留当前页签上下文说明']
      }
    })

    function handleEmptyAction() {
      if (!rows.value.length) {
        void reload()
        return
      }

      activeTab.value = '全部待审'
    }

    function closeSelectedDetail() {
      selectedClaimId.value = ''
    }

    async function handleDetailUpdated() {
      selectedClaimId.value = ''
      await reload()
    }

    async function handleDetailDeleted() {
      selectedClaimId.value = ''
      await reload()
    }

    async function reload() {
      loading.value = true
      error.value = ''

      try {
        const payload = await fetchApprovalWorkbenchItems({ limit: 100 })
        const mappedRows = payload.items.flatMap((workbenchItem) => {
          const pendingRequests = listPendingApprovalRequests(
            [workbenchItem.claim],
            currentUser.value
          )
          return pendingRequests.map((item) => buildApprovalRow(item, workbenchItem))
        })
        rows.value = mappedRows
        syncPendingClaimIds(mappedRows.map((item) => item.claimId))
        if (!mappedRows.some((item) => item.claimId === selectedClaimId.value)) {
          selectedClaimId.value = ''
        }
      } catch (nextError) {
        rows.value = []
        selectedClaimId.value = ''
        error.value = nextError instanceof Error ? nextError.message : '审批中心加载失败。'
      } finally {
        loading.value = false
      }
    }

    void reload()

    return {
      activeTab,
      approvalEmptyState,
      closeSelectedDetail,
      error,
      filters,
      handleDetailDeleted,
      handleDetailUpdated,
      handleEmptyAction,
      listKeyword,
      loading,
      reload,
      rows,
      selectedRow,
      showEmpty,
      tabs,
      visibleRows
    }
  }
}
