import { Link } from 'react-router-dom'
import { getTreeNavigatePath } from '@/lib/routing'

interface OpenSession {
  id: string
  treeName: string
  treeId: string
  treeType?: string
  stepNumber?: number
  totalSteps?: number
  timeAgo: string
}

interface OpenSessionsProps {
  sessions: OpenSession[]
}

export function OpenSessions({ sessions }: OpenSessionsProps) {
  return (
    <div className="card-flat flex flex-col h-full">
      <div className="flex items-center justify-between px-5 py-3" style={{ borderBottom: '1px solid var(--color-border-default)' }}>
        <h3 className="font-heading text-sm font-bold text-foreground">My Open Sessions</h3>
        <Link to="/sessions" className="text-[0.6875rem] text-muted-foreground hover:text-foreground transition-colors">
          View All
        </Link>
      </div>
      <div className="flex-1 flex flex-col">
        {sessions.length === 0 ? (
          <div className="flex-1 flex items-center justify-center">
            <p className="text-sm text-muted-foreground">No open sessions</p>
          </div>
        ) : (
          sessions.map((session, i) => (
            <div
              key={session.id}
              className="flex items-center gap-3 px-5 py-3"
              style={{
                borderBottom: i < sessions.length - 1 ? '1px solid var(--color-border-default)' : undefined,
              }}
            >
              <span className="h-2 w-2 shrink-0 rounded-full bg-amber-400" />
              <div className="flex-1 min-w-0">
                <div className="text-sm text-foreground truncate">{session.treeName}</div>
                <div className="text-[0.6875rem] text-muted-foreground">
                  {session.stepNumber && session.totalSteps
                    ? `Step ${session.stepNumber} of ${session.totalSteps}`
                    : 'In progress'}
                  <span className="mx-1.5 text-[var(--text-dimmed)]">&middot;</span>
                  <span className="font-sans text-xs text-[0.625rem]">{session.timeAgo}</span>
                </div>
              </div>
              <Link
                to={getTreeNavigatePath(session.treeId, session.treeType)}
                state={{ sessionId: session.id }}
                className="shrink-0 rounded-lg border border-primary/40 px-3 py-1 text-[0.6875rem] font-medium text-primary hover:bg-primary/10 hover:border-primary/60 transition-colors"
              >
                Resume
              </Link>
            </div>
          ))
        )}
      </div>
    </div>
  )
}