import React from 'react'
import {
  FileText,
  Edit,
  CheckCircle,
  XCircle,
  Rocket,
  Activity,
} from 'lucide-react'
import type { ActivityItem } from '../../api/types'

interface RecentActivityPanelProps {
  activities: ActivityItem[]
  isLoading?: boolean
  onSeeAll?: () => void
}

const getActivityIcon = (type: ActivityItem['type']) => {
  switch (type) {
    case 'document_uploaded':
      return { Icon: FileText, color: 'text-blue-500', bg: 'bg-blue-50' }
    case 'annotation_modified':
      return { Icon: Edit, color: 'text-orange-500', bg: 'bg-orange-50' }
    case 'training_completed':
      return { Icon: CheckCircle, color: 'text-green-500', bg: 'bg-green-50' }
    case 'training_failed':
      return { Icon: XCircle, color: 'text-red-500', bg: 'bg-red-50' }
    case 'model_activated':
      return { Icon: Rocket, color: 'text-purple-500', bg: 'bg-purple-50' }
    default:
      return { Icon: Activity, color: 'text-gray-500', bg: 'bg-gray-50' }
  }
}

const formatTimestamp = (timestamp: string): string => {
  const date = new Date(timestamp)
  const now = new Date()
  const diffMs = now.getTime() - date.getTime()
  const diffMinutes = Math.floor(diffMs / 60000)
  const diffHours = Math.floor(diffMs / 3600000)
  const diffDays = Math.floor(diffMs / 86400000)

  if (diffMinutes < 1) return 'just now'
  if (diffMinutes < 60) return `${diffMinutes} minutes ago`
  if (diffHours < 24) return `${diffHours} hours ago`
  if (diffDays === 1) return 'yesterday'
  if (diffDays < 7) return `${diffDays} days ago`

  return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
}

export const RecentActivityPanel: React.FC<RecentActivityPanelProps> = ({
  activities,
  isLoading = false,
  onSeeAll,
}) => {
  if (isLoading) {
    return (
      <div className="bg-warm-card border border-warm-border rounded-lg shadow-sm overflow-hidden">
        <div className="p-6 border-b border-warm-border flex items-center justify-between">
          <h2 className="text-sm font-semibold text-warm-text-muted uppercase tracking-wide">
            Recent Activity
          </h2>
        </div>
        <div className="p-6">
          <div className="flex items-center justify-center py-8">
            <div className="animate-pulse text-warm-text-muted">Loading...</div>
          </div>
        </div>
      </div>
    )
  }

  if (activities.length === 0) {
    return (
      <div className="bg-warm-card border border-warm-border rounded-lg shadow-sm overflow-hidden">
        <div className="p-6 border-b border-warm-border">
          <h2 className="text-sm font-semibold text-warm-text-muted uppercase tracking-wide">
            Recent Activity
          </h2>
        </div>
        <div className="p-6">
          <div className="flex flex-col items-center justify-center py-8 text-center">
            <Activity className="w-12 h-12 text-warm-text-disabled mb-3 opacity-20" />
            <p className="text-warm-text-primary font-medium mb-1">No recent activity</p>
            <p className="text-sm text-warm-text-muted">
              Start by uploading documents or creating training jobs
            </p>
          </div>
        </div>
      </div>
    )
  }

  return (
    <div className="bg-warm-card border border-warm-border rounded-lg shadow-sm overflow-hidden">
      <div className="p-6 border-b border-warm-border flex items-center justify-between">
        <h2 className="text-sm font-semibold text-warm-text-muted uppercase tracking-wide">
          Recent Activity
        </h2>
        {onSeeAll && (
          <button
            onClick={onSeeAll}
            className="text-sm text-blue-600 hover:text-blue-800 font-medium"
          >
            See All
          </button>
        )}
      </div>
      <div className="divide-y divide-warm-border">
        {activities.map((activity, index) => {
          const { Icon, color, bg } = getActivityIcon(activity.type)

          return (
            <div
              key={`${activity.type}-${activity.timestamp}-${index}`}
              className="px-6 py-3 flex items-center gap-4 hover:bg-warm-hover transition-colors"
            >
              <div className={`p-2 rounded-lg ${bg}`}>
                <Icon className={color} size={16} />
              </div>
              <p className="flex-1 text-sm text-warm-text-primary truncate">
                {activity.description}
              </p>
              <span className="text-xs text-warm-text-muted whitespace-nowrap">
                {formatTimestamp(activity.timestamp)}
              </span>
            </div>
          )
        })}
      </div>
    </div>
  )
}
