import { Link } from 'react-router-dom'
import { cn } from '@/lib/utils'

interface SessionItem {
  id: string
  treeName: string
  status: 'in_progress' | 'completed' | 'abandoned'
  currentStep?: string
  totalSteps?: number
  stepNumber?: number
  ticketNumber?: string
  timeAgo: string
}

interface SessionsPanelProps {
  sessions: SessionItem[]
  delay?: number
}

export function SessionsPanel({ sessions, delay = 200 }: SessionsPanelProps) {
  if (sessions.length === 0) return null

  return (
    <div className="card-flat fade-in" style={{ animationDelay: `${delay}ms` }}>
      <div className="flex items-center justify-between px-4 py-3" style={{ borderBottom: '1px solid var(--glass-border)' }}>
        <h3 className="font-heading text-sm font-semibold text-foreground">Recent Sessions</h3>
        <Link to="/sessions" className="text-[0.6875rem] text-muted-foreground hover:text-foreground transition-colors">
          View All
        </Link>
      </div>
      <div className="divide-y divide-border">
        {sessions.map(session => (
          <Link
            key={session.id}
            to={`/sessions/${session.id}`}
            className="grid items-center gap-3 px-4 py-2.5 transition-colors hover:bg-accent/50"
            style={{ gridTemplateColumns: '8px 1fr 140px 80px 100px' }}
          >
            {/* Status dot */}
            <span
              className={cn(
                'h-2 w-2 rounded-full',
                session.status === 'completed' ? 'bg-green-500' :
                session.status === 'in_progress' ? 'bg-amber-500' :
                'bg-[#848b9b]'
              )}
            />

            {/* Name */}
            <span className="text-sm text-foreground truncate">{session.treeName}</span>

            {/* Progress */}
            <span className="text-[0.6875rem] text-muted-foreground truncate">
              {session.status === 'completed'
                ? '✓ Resolved'
                : session.stepNumber && session.totalSteps
                  ? `→ step ${session.stepNumber}/${session.totalSteps}`
                  : '→ In progress'}
            </span>

            {/* Ticket */}
            <span className="font-sans text-xs text-[0.6875rem] text-muted-foreground truncate">
              {session.ticketNumber || '—'}
            </span>

            {/* Time */}
            <span className="text-right text-[0.6875rem] text-[var(--text-dimmed)]">
              {session.timeAgo}
            </span>
          </Link>
        ))}
      </div>
    </div>
  )
}