import { CheckCircle, Circle, Loader2, Play, RotateCcw, Eye } from 'lucide-react'
import { useNavigate } from 'react-router-dom'
import { cn } from '@/lib/utils'
import type { Session } from '@/types'

interface BatchStatusCardProps {
  session: Session | null
  targetLabel: string
  treeId: string
  batchId: string
}

function formatDuration(startedAt: string, completedAt: string): string {
  const ms = new Date(completedAt).getTime() - new Date(startedAt).getTime()
  const totalSeconds = Math.floor(ms / 1000)
  const minutes = Math.floor(totalSeconds / 60)
  const seconds = totalSeconds % 60
  if (minutes === 0) return `${seconds}s`
  return `${minutes}m ${seconds}s`
}

const OUTCOME_LABELS: Record<string, string> = {
  resolved: 'Resolved',
  escalated: 'Escalated',
  workaround: 'Workaround',
  unresolved: 'Unresolved',
}

const OUTCOME_COLORS: Record<string, string> = {
  resolved: 'text-emerald-400 bg-emerald-500/10',
  escalated: 'text-red-400 bg-red-500/10',
  workaround: 'text-amber-400 bg-amber-500/10',
  unresolved: 'text-muted-foreground bg-muted',
}

export function BatchStatusCard({ session, targetLabel, treeId, batchId }: BatchStatusCardProps) {
  const navigate = useNavigate()

  const isComplete = !!session?.completed_at
  const isInProgress = !!session?.started_at && !session.completed_at
  const isNotStarted = !session || !session.started_at

  // Derive step progress for in-progress sessions
  const stepProgress = (() => {
    if (!session || !isInProgress) return null
    const snapshot = session.tree_snapshot as { steps?: { type: string }[] } | null
    const totalSteps = snapshot?.steps?.filter(s => s.type === 'procedure_step').length ?? 0
    const completedSteps = (session.decisions ?? []).filter(d => d.answer === 'completed').length
    return totalSteps > 0 ? { completed: completedSteps, total: totalSteps } : null
  })()

  const handleStart = () => {
    navigate(`/flows/${treeId}/navigate`, {
      state: { targetLabel, batchId },
    })
  }

  const handleResume = () => {
    if (!session) return
    navigate(`/flows/${treeId}/navigate`, {
      state: { sessionId: session.id },
    })
  }

  const handleView = () => {
    if (!session) return
    navigate(`/sessions/${session.id}`)
  }

  return (
    <div className="flex items-center justify-between rounded-lg border border-border bg-card px-4 py-3 gap-4">
      {/* Status indicator + target name */}
      <div className="flex items-center gap-3 min-w-0">
        {isComplete && (
          <CheckCircle className="h-4 w-4 shrink-0 text-emerald-400" />
        )}
        {isInProgress && (
          <Loader2 className="h-4 w-4 shrink-0 text-amber-400 animate-spin" />
        )}
        {isNotStarted && (
          <Circle className="h-4 w-4 shrink-0 text-muted-foreground" />
        )}

        <div className="min-w-0">
          <p className="text-[0.875rem] font-medium text-foreground truncate">{targetLabel}</p>
          <div className="flex items-center gap-2 mt-0.5">
            {isComplete && session?.outcome && (
              <span className={cn(
                "font-label text-[0.625rem] uppercase tracking-wide rounded-full px-2 py-0.5",
                OUTCOME_COLORS[session.outcome] ?? OUTCOME_COLORS.unresolved
              )}>
                {OUTCOME_LABELS[session.outcome] ?? session.outcome}
              </span>
            )}
            {isComplete && session?.started_at && session?.completed_at && (
              <span className="text-[0.75rem] text-muted-foreground">
                {formatDuration(session.started_at, session.completed_at)}
              </span>
            )}
            {isInProgress && stepProgress && (
              <span className="text-[0.75rem] text-amber-400">
                Step {stepProgress.completed + 1} of {stepProgress.total}
              </span>
            )}
            {isNotStarted && (
              <span className="text-[0.75rem] text-muted-foreground">Not started</span>
            )}
          </div>
        </div>
      </div>

      {/* Action button */}
      <div className="shrink-0">
        {isComplete && (
          <button
            onClick={handleView}
            className="flex items-center gap-1.5 rounded-lg border border-border px-3 py-1.5 text-[0.8125rem] text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
          >
            <Eye className="h-3.5 w-3.5" />
            View
          </button>
        )}
        {isInProgress && (
          <button
            onClick={handleResume}
            className="flex items-center gap-1.5 rounded-lg bg-amber-500/10 border border-amber-500/30 px-3 py-1.5 text-[0.8125rem] text-amber-400 hover:bg-amber-500/20 transition-colors"
          >
            <RotateCcw className="h-3.5 w-3.5" />
            Resume
          </button>
        )}
        {isNotStarted && (
          <button
            onClick={handleStart}
            className="flex items-center gap-1.5 rounded-lg bg-gradient-brand px-3 py-1.5 text-[0.8125rem] font-medium text-white shadow-sm shadow-primary/20 hover:opacity-90 transition-opacity"
          >
            <Play className="h-3.5 w-3.5" />
            Start
          </button>
        )}
      </div>
    </div>
  )
}
