import { useEffect, useState } from 'react'
import { Link } from 'react-router-dom'
import { l1Api } from '@/api/l1'
import type { WalkSession } from '@/types/l1'

export function ResumeInProgress() {
  const [sessions, setSessions] = useState<WalkSession[] | null>(null)

  useEffect(() => {
    l1Api
      .listActiveSessions()
      .then(setSessions)
      .catch(() => setSessions([]))
  }, [])

  if (!sessions || sessions.length === 0) return null

  return (
    <section>
      <div className="flex items-center gap-3 mb-3">
        <span className="font-sans text-[0.625rem] uppercase tracking-[0.12em] font-semibold text-muted-foreground">
          Resume in progress · {sessions.length}
        </span>
        <div className="flex-1 h-px bg-border" />
      </div>
      <div className="rounded-lg border border-default bg-card overflow-hidden">
        {sessions.map((s) => (
          <Link
            key={s.id}
            to={`/l1/walk/${s.id}`}
            className="flex items-center justify-between px-4 py-3 hover:bg-elevated transition-colors border-b border-default last:border-b-0"
          >
            <div className="flex items-center gap-3">
              <span className="font-mono text-xs text-muted-foreground">#{s.id.slice(0, 8)}</span>
              <span className="text-sm">
                {s.session_kind === 'adhoc'
                  ? `Ad-hoc · ${s.walk_notes.length} notes`
                  : `Step ${s.walked_path.length}`}
              </span>
            </div>
            <span className="text-xs text-muted-foreground">
              {new Date(s.last_step_at).toLocaleTimeString()}
            </span>
          </Link>
        ))}
      </div>
    </section>
  )
}