import { Link } from 'react-router-dom'
import { Clock, CheckCircle2, ArrowUpRight, AlertCircle, Pause, Route, MessageCircle } from 'lucide-react'
import { cn } from '@/lib/utils'
import type { AISessionSummary } from '@/types/ai-session'

interface AISessionListItemProps {
  session: AISessionSummary
}

const STATUS_CONFIG = {
  active: { icon: Clock, color: 'text-primary', label: 'Active' },
  paused: { icon: Pause, color: 'text-warning', label: 'Paused' },
  resolved: { icon: CheckCircle2, color: 'text-success', label: 'Resolved' },
  escalated: { icon: ArrowUpRight, color: 'text-warning', label: 'Escalated' },
  abandoned: { icon: AlertCircle, color: 'text-text-muted', label: 'Abandoned' },
} as const

export function AISessionListItem({ session }: AISessionListItemProps) {
  const config = STATUS_CONFIG[session.status as keyof typeof STATUS_CONFIG] ?? STATUS_CONFIG.active
  const StatusIcon = config.icon
  // Both chat and guided sessions now land on the unified /pilot surface.
  // session_type is preserved on the DB row for data compatibility but is
  // no longer used for frontend route selection (Phase 1 FlowPilot migration).
  const isChat = session.session_type === 'chat'
  const TypeIcon = isChat ? MessageCircle : Route
  const linkTo = `/pilot/${session.id}`
  const displayTitle = isChat
    ? (session.title || session.problem_summary || 'Untitled chat')
    : (session.problem_summary || 'Untitled session')

  return (
    <Link
      to={linkTo}
      className="card-interactive block p-4 transition-all"
    >
      <div className="flex items-start justify-between gap-3">
        <div className="flex-1 min-w-0">
          <div className="flex items-center gap-2">
            <span className={cn(
              'flex items-center justify-center w-5 h-5 rounded',
              isChat ? 'text-violet-400' : 'text-primary'
            )}>
              <TypeIcon size={14} />
            </span>
            <p className="text-sm font-medium text-foreground truncate">
              {displayTitle}
            </p>
          </div>
          <div className="mt-1.5 flex items-center gap-3 flex-wrap">
            {session.problem_domain && (
              <span className="font-sans text-xs rounded-md bg-accent-dim px-2 py-0.5 text-[0.625rem] uppercase tracking-wider text-primary">
                {session.problem_domain}
              </span>
            )}
            <span className={cn('flex items-center gap-1 text-xs', config.color)}>
              <StatusIcon size={12} />
              {config.label}
            </span>
            <span className="text-xs text-muted-foreground">
              {session.step_count} {isChat ? 'messages' : 'steps'}
            </span>
            <span className="text-xs text-text-muted">
              {new Date(session.created_at).toLocaleDateString(undefined, {
                month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit',
              })}
            </span>
          </div>
        </div>
        {session.session_rating && (
          <span className="font-sans text-xs text-xs text-warning">
            {'★'.repeat(session.session_rating)}
          </span>
        )}
      </div>
    </Link>
  )
}