import { useNavigate } from 'react-router-dom'
import { MoreHorizontal } from 'lucide-react'
import { getTreeNavigatePath, getTreeEditorPath } from '@/lib/routing'

interface TreeListItemProps {
  id: string
  name: string
  description?: string | null
  treeType: string
  category?: { name: string; color?: string } | null
  tags?: string[]
  usageCount?: number
  updatedAt: string
  icon?: string
}

export function TreeListItem({
  id,
  name,
  description,
  treeType,
  category,
  tags = [],
  usageCount = 0,
  updatedAt,
  icon,
}: TreeListItemProps) {
  const navigate = useNavigate()
  const categoryColor = category?.color || '#3b82f6'

  const timeAgo = getTimeAgo(updatedAt)

  return (
    <div
      onClick={() => navigate(getTreeNavigatePath(id, treeType))}
      className="group grid cursor-pointer items-center gap-3 rounded-lg border border-transparent bg-card px-4 py-3 transition-colors hover:border-border hover:bg-[hsl(var(--sidebar-hover))]"
      style={{ gridTemplateColumns: '40px 1fr 130px 80px 100px 40px' }}
    >
      {/* Icon box */}
      <div
        className="flex h-9 w-9 items-center justify-center rounded-lg text-base"
        style={{ backgroundColor: `${categoryColor}15` }}
      >
        {icon || (treeType === 'procedural' ? '📋' : '🔧')}
      </div>

      {/* Info */}
      <div className="min-w-0">
        <p className="font-heading text-sm font-semibold text-foreground truncate">{name}</p>
        <div className="mt-0.5 flex items-center gap-2">
          {tags.slice(0, 3).map(tag => (
            <span key={tag} className="rounded border border-border bg-secondary px-1.5 py-px font-label text-[0.625rem] text-muted-foreground">
              {tag}
            </span>
          ))}
          {description && tags.length === 0 && (
            <span className="text-[0.6875rem] text-muted-foreground truncate">{description}</span>
          )}
        </div>
      </div>

      {/* Category */}
      <div className="flex items-center gap-1.5">
        {category && (
          <>
            <span className="h-2 w-2 shrink-0 rounded-full" style={{ backgroundColor: categoryColor }} />
            <span className="font-label text-xs text-muted-foreground truncate">{category.name}</span>
          </>
        )}
      </div>

      {/* Usage count */}
      <div className="text-right font-label text-xs text-muted-foreground">
        {usageCount} uses
      </div>

      {/* Updated */}
      <div className="text-right text-[0.6875rem] text-[hsl(var(--text-dimmed))]">
        {timeAgo}
      </div>

      {/* Actions */}
      <button
        onClick={(e) => {
          e.stopPropagation()
          navigate(getTreeEditorPath(id, treeType))
        }}
        className="flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground opacity-0 transition-opacity hover:bg-accent group-hover:opacity-100"
      >
        <MoreHorizontal size={16} />
      </button>
    </div>
  )
}

function getTimeAgo(dateStr: string): string {
  const now = Date.now()
  const date = new Date(dateStr).getTime()
  const diff = now - date
  const minutes = Math.floor(diff / 60000)
  if (minutes < 1) return 'Just now'
  if (minutes < 60) return `${minutes} min ago`
  const hours = Math.floor(minutes / 60)
  if (hours < 24) return `${hours}h ago`
  const days = Math.floor(hours / 24)
  if (days === 1) return 'Yesterday'
  if (days < 7) return `${days}d ago`
  return new Date(dateStr).toLocaleDateString()
}
