import { Wrench, ChevronLeft } from 'lucide-react'
import { useNavigate } from 'react-router-dom'

interface MaintenanceContextStripProps {
  treeId: string
  targetLabel?: string | null
  batchId?: string | null
  batchProgress?: { completed: number; total: number } | null
}

export function MaintenanceContextStrip({
  treeId,
  targetLabel,
  batchId,
  batchProgress,
}: MaintenanceContextStripProps) {
  const navigate = useNavigate()

  return (
    <div className="flex items-center gap-3 border-b border-amber-500/20 bg-amber-500/5 px-4 py-2 text-sm">
      <Wrench className="h-3.5 w-3.5 shrink-0 text-amber-400" />
      <span className="font-medium text-amber-300">
        {targetLabel ? `Target: ${targetLabel}` : 'Manual Run'}
      </span>

      {batchProgress && (
        <>
          <span className="text-muted-foreground">·</span>
          <span className="text-muted-foreground text-[0.8125rem]">
            {batchProgress.completed} / {batchProgress.total} complete
          </span>
        </>
      )}

      {batchId && (
        <button
          onClick={() => navigate(`/flows/${treeId}/batches/${batchId}`)}
          className="ml-auto flex items-center gap-1 text-xs text-amber-400 hover:text-amber-300 transition-colors"
        >
          <ChevronLeft className="h-3 w-3" />
          Back to Batch
        </button>
      )}
    </div>
  )
}