import { Link } from 'react-router-dom'
import { Clock, CheckCircle2, ArrowUpRight, AlertCircle, Pause } 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-amber-400', label: 'Paused' },
  resolved: { icon: CheckCircle2, color: 'text-emerald-400', label: 'Resolved' },
  escalated: { icon: ArrowUpRight, color: 'text-amber-400', label: 'Escalated' },
  abandoned: { icon: AlertCircle, color: 'text-[#5a6170]', 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

  return (
    <Link
      to={`/pilot/${session.id}`}
      className="glass-card block p-4 transition-all"
    >
      <div className="flex items-start justify-between gap-3">
        <div className="flex-1 min-w-0">
          <p className="text-sm font-medium text-foreground truncate">
            {session.problem_summary || 'Untitled session'}
          </p>
          <div className="mt-1.5 flex items-center gap-3 flex-wrap">
            {session.problem_domain && (
              <span className="font-label rounded-md bg-primary/10 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} steps
            </span>
            <span className="text-xs text-[#5a6170]">
              {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-label text-xs text-amber-400">
            {'★'.repeat(session.session_rating)}
          </span>
        )}
      </div>
    </Link>
  )
}