import { theme } from 'antd'
import { STATUS_COLOR_LEGEND } from './constants'

function getStatusStyle(key: string, token: ReturnType<typeof theme.useToken>['token']) {
  const map: Record<string, { bg: string; border: string }> = {
    completed: { bg: token.colorSuccessBg, border: token.colorSuccessBorder },
    pending: { bg: token.colorWarningBg, border: token.colorWarningBorder },
    rejected: { bg: token.colorErrorBg, border: token.colorErrorBorder },
    inProgress: { bg: token.colorInfoBg, border: token.colorInfoBorder },
    notStarted: { bg: token.colorFillQuaternary, border: token.colorBorderSecondary },
  }
  return map[key] ?? { bg: token.colorFillQuaternary, border: token.colorBorderSecondary }
}

export function StatusLegend() {
  const { token } = theme.useToken()
  return (
    <div
      style={{
        marginBottom: 16,
        padding: '12px 16px',
        background: token.colorBgContainer,
        borderRadius: 10,
        border: `1px solid ${token.colorBorder}`,
        display: 'flex',
        alignItems: 'center',
        flexWrap: 'wrap',
        gap: '0 4px',
      }}
    >
      <span style={{ fontSize: 12, color: token.colorTextSecondary, marginRight: 8, lineHeight: '20px' }}>
        颜色说明：
      </span>
      {STATUS_COLOR_LEGEND.map(({ key, label }) => {
        const style = getStatusStyle(key, token)
        return (
          <span
            key={key}
            style={{
              display: 'inline-flex',
              alignItems: 'center',
              marginRight: 16,
              fontSize: 12,
              color: token.colorTextSecondary,
              lineHeight: '20px',
            }}
          >
            <span
              style={{
                display: 'inline-block',
                width: 20,
                height: 14,
                borderRadius: 4,
                background: style.bg,
                border: `1px solid ${style.border}`,
                marginRight: 6,
                flexShrink: 0,
              }}
            />
            {label}
          </span>
        )
      })}
    </div>
  )
}