import { useNavigate } from 'react-router-dom'
import { getTreeNavigatePath } from '@/lib/routing'
import { cn } from '@/lib/utils'

interface ActivityItemProps {
  sessionId: string
  treeName: string
  treeId: string
  treeType: 'troubleshooting' | 'procedural' | 'maintenance'
  status: 'active' | 'paused' | 'recent'
  ticketNumber?: string | null
  timestamp?: string | null
}

function formatRelativeTime(dateString: string): string {
  const now = Date.now()
  const then = new Date(dateString).getTime()
  const diffMinutes = Math.floor((now - then) / 60000)

  if (diffMinutes < 1) return 'just now'
  if (diffMinutes < 60) return `${diffMinutes}m ago`
  const diffHours = Math.floor(diffMinutes / 60)
  if (diffHours < 24) return `${diffHours}h ago`
  return 'yesterday'
}

export function ActivityItem({
  sessionId,
  treeName,
  treeId,
  treeType,
  status,
  ticketNumber,
  timestamp,
}: ActivityItemProps) {
  const navigate = useNavigate()

  const handleClick = () => {
    navigate(getTreeNavigatePath(treeId, treeType), {
      state: { sessionId },
    })
  }

  const isRecent = status === 'recent'

  return (
    <button
      onClick={handleClick}
      className={cn(
        'flex w-full items-center gap-2 rounded-lg px-2.5 py-1.5 text-left transition-colors',
        'hover:bg-[rgba(255,255,255,0.03)]',
        isRecent ? 'text-text-rail-label text-[0.72rem]' : 'text-text-primary text-[0.8rem]'
      )}
      title={`${treeName}${ticketNumber ? ` (${ticketNumber})` : ''} — click to resume`}
      aria-label={
        status === 'active'
          ? `Active session: ${treeName}`
          : status === 'paused'
            ? `Paused session: ${treeName}`
            : `Recent session: ${treeName}`
      }
    >
      {/* Status dot */}
      {status === 'active' && (
        <span
          className="h-[7px] w-[7px] shrink-0 rounded-full"
          style={{
            background: '#34d399',
            boxShadow: '0 0 6px rgba(52,211,153,0.5)',
            animation: 'pulse-dot 2s ease-in-out infinite',
          }}
          aria-label="Active session"
        />
      )}
      {status === 'paused' && (
        <span
          className="h-[7px] w-[7px] shrink-0 rounded-full"
          style={{
            background: '#f59e0b',
            boxShadow: '0 0 4px rgba(245,158,11,0.3)',
          }}
          aria-label="Paused session"
        />
      )}
      {status === 'recent' && (
        <span className="h-1 w-1 shrink-0 rounded-full bg-muted-foreground" />
      )}

      {/* Flow name */}
      <span className="flex-1 truncate">{treeName}</span>

      {/* Ticket number or timestamp */}
      {ticketNumber && !isRecent && (
        <span className="shrink-0 font-mono text-[0.5625rem] text-[#60a5fa]">
          {ticketNumber}
        </span>
      )}
      {isRecent && timestamp && (
        <span className="shrink-0 font-mono text-[0.5625rem] text-text-muted">
          {formatRelativeTime(timestamp)}
        </span>
      )}
    </button>
  )
}