/**
 * Shared Components for Memory and Review Systems
 */
import React from 'react'
import { Tag, Badge, Progress } from 'antd'
import { ImportanceLevel, SeverityLevel } from '@/types'

/**
 * Importance Badge Component
 */
export const ImportanceBadge: React.FC<{ level: ImportanceLevel }> = ({ level }) => {
  const colors: Record<ImportanceLevel, string> = {
    high: 'red',
    medium: 'orange',
    low: 'blue'
  }

  const labels: Record<ImportanceLevel, string> = {
    high: '高',
    medium: '中',
    low: '低'
  }

  return <Tag color={colors[level]}>{labels[level]}</Tag>
}

/**
 * Severity Badge Component
 */
export const SeverityBadge: React.FC<{ level: SeverityLevel }> = ({ level }) => {
  const colors: Record<SeverityLevel, string> = {
    high: 'red',
    medium: 'orange',
    low: 'green'
  }

  const labels: Record<SeverityLevel, string> = {
    high: '高',
    medium: '中',
    low: '低'
  }

  return <Tag color={colors[level]}>{labels[level]}</Tag>
}

/**
 * Score Gauge Component
 */
export const ScoreGauge: React.FC<{ score: number; size?: 'small' | 'default' | 'large' }> = ({
  score,
  size = 'default'
}) => {
  const getColor = (score: number) => {
    if (score >= 80) return '#52c41a'
    if (score >= 60) return '#faad14'
    return '#f5222d'
  }

  const sizeMap = {
    small: { fontSize: 24, width: 60 },
    default: { fontSize: 36, width: 100 },
    large: { fontSize: 48, width: 140 }
  }

  const { fontSize, width } = sizeMap[size]

  return (
    <div style={{ textAlign: 'center' }}>
      <Progress
        type="circle"
        percent={score}
        strokeColor={getColor(score)}
        width={width}
        format={(percent) => (
          <span style={{ fontSize, fontWeight: 'bold', color: getColor(score) }}>
            {percent}
          </span>
        )}
      />
    </div>
  )
}

/**
 * Thread Status Badge Component
 */
export const ThreadStatusBadge: React.FC<{ status: string }> = ({ status }) => {
  const statusConfig: Record<string, { color: string; label: string }> = {
    pending: { color: 'default', label: '待处理' },
    in_progress: { color: 'processing', label: '进行中' },
    resolved: { color: 'success', label: '已解决' }
  }

  const config = statusConfig[status] || { color: 'default', label: status }
  return <Badge status={config.color as any} text={config.label} />
}

/**
 * Foreshadowing Status Badge Component
 */
export const ForeshadowingStatusBadge: React.FC<{ status: string }> = ({ status }) => {
  const statusConfig: Record<string, { color: string; label: string }> = {
    planted: { color: 'blue', label: '已埋伏笔' },
    partially_paid: { color: 'orange', label: '部分收线' },
    paid_off: { color: 'green', label: '已收线' }
  }

  const config = statusConfig[status] || { color: 'default', label: status }
  return <Tag color={config.color}>{config.label}</Tag>
}

/**
 * Relationship Strength Component
 */
export const RelationshipStrength: React.FC<{ strength: number }> = ({ strength }) => {
  const getColor = (strength: number) => {
    if (strength > 70) return '#f5222d'
    if (strength > 40) return '#faad14'
    return '#1890ff'
  }

  return (
    <Progress
      percent={strength}
      strokeColor={getColor(strength)}
      size="small"
      format={(percent) => `${percent}%`}
    />
  )
}

/**
 * Episode Tag Component
 */
export const EpisodeTag: React.FC<{ episodeNumber: number }> = ({ episodeNumber }) => {
  return <Tag color="blue">第 {episodeNumber} 集</Tag>
}

/**
 * Character Avatar Component
 */
export const CharacterAvatar: React.FC<{ name: string; size?: 'small' | 'default' | 'large' }> = ({
  name,
  size = 'default'
}) => {
  const sizeMap = {
    small: 24,
    default: 32,
    large: 40
  }

  return (
    <div
      style={{
        width: sizeMap[size],
        height: sizeMap[size],
        borderRadius: '50%',
        background: '#0ea5e9',
        color: 'white',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        fontSize: size === 'small' ? 12 : size === 'large' ? 18 : 14,
        fontWeight: 'bold'
      }}
    >
      {name.charAt(0).toUpperCase()}
    </div>
  )
}
