/**
 * 入离职统计看板 — 展示按月入职/离职趋势和汇总数据
 */
import { useQuery } from '@tanstack/react-query'
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend } from 'recharts'
import { UserPlus, UserMinus, Users, TrendingDown } from 'lucide-react'
import { dashboardApi } from '../../lib/api-services'

export default function TurnoverStats() {
  const { data, isLoading } = useQuery({
    queryKey: ['turnover-stats'],
    queryFn: async () => {
      return await dashboardApi.turnoverStats(12)
    },
  })

  if (isLoading) {
    return (
      <div className="card p-4">
        <div className="animate-pulse space-y-3">
          <div className="h-4 bg-surface-muted rounded w-32" />
          <div className="h-48 bg-surface-muted rounded" />
        </div>
      </div>
    )
  }

  if (!data || data.monthly.length === 0) {
    return (
      <div className="card p-4">
        <h3 className="text-sm font-medium text-ink-700 mb-2">入离职统计</h3>
        <div className="flex items-center justify-center h-32 text-ink-400 text-sm">暂无数据</div>
      </div>
    )
  }

  const { monthly, summary } = data

  return (
    <div className="card p-4">
      <h3 className="text-sm font-medium text-ink-700 mb-3">入离职趋势（近 12 个月）</h3>

      {/* 汇总卡片 */}
      <div className="grid grid-cols-4 gap-3 mb-4">
        <div className="flex flex-col">
          <span className="text-xs text-ink-500">入职人数</span>
          <span className="text-lg font-semibold text-success flex items-center gap-1">
            <UserPlus className="w-4 h-4" />{summary.totalHired}
          </span>
        </div>
        <div className="flex flex-col">
          <span className="text-xs text-ink-500">离职人数</span>
          <span className="text-lg font-semibold text-danger flex items-center gap-1">
            <UserMinus className="w-4 h-4" />{summary.totalLeft}
          </span>
        </div>
        <div className="flex flex-col">
          <span className="text-xs text-ink-500">当前人数</span>
          <span className="text-lg font-semibold text-ink-900 flex items-center gap-1">
            <Users className="w-4 h-4" />{summary.currentHeadcount}
          </span>
        </div>
        <div className="flex flex-col">
          <span className="text-xs text-ink-500">离职率</span>
          <span className="text-lg font-semibold text-warning flex items-center gap-1">
            <TrendingDown className="w-4 h-4" />{summary.turnoverRate}%
          </span>
        </div>
      </div>

      {/* 趋势图 */}
      <ResponsiveContainer width="100%" height={200}>
        <BarChart data={monthly} margin={{ top: 4, right: 8, bottom: 0, left: -16 }}>
          <CartesianGrid strokeDasharray="3 3" stroke="#ECEEEC" />
          <XAxis
            dataKey="month"
            tick={{ fontSize: 10, fill: '#7A8278' }}
            tickFormatter={(v: string) => v.slice(5)}
          />
          <YAxis tick={{ fontSize: 10, fill: '#7A8278' }} allowDecimals={false} />
          <Tooltip
            contentStyle={{ fontSize: 12, borderRadius: 8, border: '1px solid #DDE1DD' }}
            formatter={(v: any) => [v, ''] as [any, any]}
          />
          <Legend wrapperStyle={{ fontSize: 12 }} />
          <Bar dataKey="hired" name="入职" fill="#237A57" radius={[3, 3, 0, 0]} />
          <Bar dataKey="left" name="离职" fill="#B83232" radius={[3, 3, 0, 0]} />
        </BarChart>
      </ResponsiveContainer>
    </div>
  )
}
