import { useI18n } from '../../i18n/useI18n'

export interface ActivityEntry {
  id: string
  actor_username: string
  action: string
  resource_type?: string
  resource_id?: string
  resource_name?: string
  created_at: string
}

interface ActivityFeedProps {
  activities: ActivityEntry[]
  loading: boolean
}

const ACTION_LABELS: Record<string, string> = {
  'project.create': '프로젝트 생성',
  'project.update': '프로젝트 수정',
  'project.delete': '프로젝트 삭제',
  'project.archive': '프로젝트 보관',
  'member.add': '멤버 추가',
  'member.remove': '멤버 제거',
  'member.role_change': '역할 변경',
  'user.create': '사용자 생성',
  'user.update': '사용자 수정',
  'user.deactivate': '사용자 비활성화',
  'episode.create': '에피소드 생성',
  'episode.update': '에피소드 수정',
  'episode.delete': '에피소드 삭제',
  'entity.create': '엔티티 생성',
  'entity.update': '엔티티 수정',
  'entity.delete': '엔티티 삭제',
  'episode.analyze': '에피소드 분석',
  'auth.login': '로그인',
  'auth.logout': '로그아웃',
  'login': '로그인',
  'logout': '로그아웃',
  'image.generate': '이미지 생성',
  'image.review': '이미지 리뷰',
  'image.regenerate': '이미지 재생성',
  'export.webbook': '웹북 생성',
  'export.render_pdf': 'PDF 렌더링',
}

function formatRelativeTime(iso: string): string {
  const diff = Date.now() - new Date(iso).getTime()
  const mins = Math.floor(diff / 60000)
  if (mins < 1) return '방금 전'
  if (mins < 60) return `${mins}분 전`
  const hours = Math.floor(mins / 60)
  if (hours < 24) return `${hours}시간 전`
  const days = Math.floor(hours / 24)
  if (days < 30) return `${days}일 전`
  return new Date(iso).toLocaleDateString('ko-KR', { year: 'numeric', month: 'short', day: 'numeric' })
}

function humanizeAction(action: string): string {
  return ACTION_LABELS[action] ?? action
}

export function ActivityFeed({ activities, loading }: ActivityFeedProps) {
  const { t } = useI18n()

  if (loading) {
    return <div className="empty-state">{t('common.loading')}</div>
  }

  if (activities.length === 0) {
    return <div className="empty-state">{t('common.no_data')}</div>
  }

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '1px' }}>
      {activities.map((entry) => (
        <div
          key={entry.id}
          style={{
            display: 'flex',
            alignItems: 'flex-start',
            gap: '12px',
            padding: '12px 0',
            borderBottom: '1px solid var(--border)',
          }}
        >
          {/* Avatar circle */}
          <div style={{
            width: '32px',
            height: '32px',
            background: 'var(--accent-glow)',
            border: '1px solid rgba(99,134,255,0.2)',
            borderRadius: '50%',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            fontSize: '12px',
            fontWeight: 700,
            color: 'var(--accent)',
            flexShrink: 0,
          }}>
            {entry.actor_username?.[0]?.toUpperCase() ?? '?'}
          </div>

          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: '13px', marginBottom: '2px' }}>
              <span style={{ fontWeight: 600, color: 'var(--text)' }}>
                {entry.actor_username}
              </span>
              <span style={{ color: 'var(--text-muted)', marginLeft: '6px' }}>
                {humanizeAction(entry.action)}
              </span>
              {entry.resource_name && (
                <span style={{ color: 'var(--accent)', marginLeft: '4px' }}>
                  {entry.resource_name}
                </span>
              )}
            </div>
            <div style={{ fontSize: '11px', color: 'var(--text-dim)' }}>
              {formatRelativeTime(entry.created_at)}
            </div>
          </div>
        </div>
      ))}
    </div>
  )
}