/**
 * 入职进度面板 — 员工端查看入职流程完成状态
 * 展示入职步骤进度、材料提交状态、待完成项
 */
import { useQuery } from '@tanstack/react-query'
import { Check, Clock, AlertCircle, FileText, Upload, User, Banknote } from 'lucide-react'
import { portalApi } from '../../lib/api-services'
import Card from '../../components/ui/Card'
import { InlineAlert } from '../../components/ui/InlineAlert'
import { Stepper } from '../../components/ui/Stepper'

/** 入职步骤定义 */
const ONBOARDING_STEPS = [
  { key: 'profile', title: '基本信息', icon: User },
  { key: 'documents', title: '材料上传', icon: Upload },
  { key: 'contract', title: '合同签署', icon: FileText },
  { key: 'bankcard', title: '银行卡登记', icon: Banknote },
  { key: 'complete', title: '入职完成', icon: Check },
]

export default function OnboardingProgress() {
  /** 获取入职进度数据 */
  const { data: progress, isLoading } = useQuery<any>({
    queryKey: ['portal-onboarding-progress'],
    queryFn: async () => {
      return await portalApi.onboardingProgress()
    },
  })

  if (isLoading) {
    return <div className="space-y-4">
      <div className="h-24 bg-gray-100 rounded-xl animate-pulse" />
      <div className="h-48 bg-gray-100 rounded-xl animate-pulse" />
    </div>
  }

  if (!progress) {
    return <Card><div className="text-center py-8 text-gray-400 text-sm">暂无入职进度信息</div></Card>
  }

  const steps = ONBOARDING_STEPS.map((s, i) => {
    const stepData = progress.steps?.[s.key]
    const status: 'complete' | 'current' | 'pending' = 
      stepData?.completed ? 'complete' :
      i === progress.currentStepIndex ? 'current' : 'pending'
    return { key: s.key, title: s.title, status, description: stepData?.description }
  })

  const completionRate = progress.completionRate || 0
  const pendingItems = progress.pendingItems || []

  return (
    <div className="space-y-4">
      {/* 进度概览 */}
      <Card className="bg-gradient-to-br from-indigo-600 to-indigo-700 text-white border-0">
        <div className="text-center">
          <div className="text-3xl font-bold">{completionRate}%</div>
          <div className="text-sm text-indigo-100 mt-1">入职完成度</div>
          <div className="mt-3 h-2 bg-indigo-800/50 rounded-full overflow-hidden">
            <div className="h-full bg-white rounded-full transition-all" style={{ width: `${completionRate}%` }} />
          </div>
        </div>
      </Card>

      {/* 待办提醒 */}
      {pendingItems.length > 0 && (
        <div className="space-y-2">
          <h2 className="text-sm font-medium text-gray-700 flex items-center gap-1">
            <AlertCircle className="w-4 h-4 text-amber-500" />
            待完成项（{pendingItems.length}）
          </h2>
          {pendingItems.map((item: any, i: number) => (
            <InlineAlert key={i} type="warning" className="text-xs">
              {item.message}
            </InlineAlert>
          ))}
        </div>
      )}

      {/* 步骤进度条 */}
      <Card>
        <h2 className="text-sm font-medium mb-4">入职流程进度</h2>
        <Stepper steps={steps} orientation="vertical" />
      </Card>

      {/* 各步骤详情 */}
      <Card>
        <h2 className="text-sm font-medium mb-3">步骤详情</h2>
        <div className="space-y-3">
          {ONBOARDING_STEPS.map((step) => {
            const stepData = progress.steps?.[step.key]
            const Icon = step.icon
            const completed = stepData?.completed
            return (
              <div key={step.key} className="flex items-start gap-3 p-3 rounded-lg border border-gray-100">
                <div className={`w-8 h-8 rounded-lg flex items-center justify-center shrink-0 ${
                  completed ? 'bg-emerald-50 text-emerald-600' : 'bg-gray-50 text-gray-400'
                }`}>
                  {completed ? <Check className="w-4 h-4" /> : <Icon className="w-4 h-4" />}
                </div>
                <div className="flex-1 min-w-0">
                  <div className="text-sm font-medium text-gray-700">{step.title}</div>
                  {stepData?.description && (
                    <div className="text-xs text-gray-400 mt-0.5">{stepData.description}</div>
                  )}
                  {stepData?.completedAt && (
                    <div className="text-xs text-emerald-500 mt-0.5 flex items-center gap-1">
                      <Clock className="w-3 h-3" />
                      完成于 {new Date(stepData.completedAt).toLocaleDateString('zh-CN')}
                    </div>
                  )}
                </div>
              </div>
            )
          })}
        </div>
      </Card>
    </div>
  )
}
