import { cn } from '@/lib/utils'
import type { SessionPart } from '@/types'

interface Props {
  parts: SessionPart[]
  currentPartIndex: number
  answers: Record<number, number | null>
  onSelectPart: (index: number) => void
}

export function TestSessionSidebar({ parts, currentPartIndex, answers, onSelectPart }: Props) {
  // Global question offset per part for sequential numbering
  let offset = 0
  const partOffsets: number[] = parts.map(p => {
    const o = offset
    offset += p.questions.length
    return o
  })

  return (
    <aside className="w-60 flex-shrink-0 bg-white border-r border-slate-200 overflow-y-auto">
      <div className="p-3 border-b border-slate-100">
        <span className="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Question Map</span>
      </div>

      {parts.map((part, partIdx) => {
        const isCurrent = partIdx === currentPartIndex

        return (
          <div key={part.partNumber} className="px-3 pt-3 pb-1">
            {/* Part label — click to switch */}
            <button
              onClick={() => onSelectPart(partIdx)}
              className={cn(
                'w-full text-left text-[10px] font-bold uppercase tracking-widest mb-2 px-1 py-0.5 rounded transition-colors',
                isCurrent ? 'text-blue-600' : 'text-slate-400 hover:text-slate-600',
              )}
            >
              Part {part.partNumber}
            </button>

            {/* Question number grid */}
            <div className="grid grid-cols-5 gap-1.5 mb-2">
              {part.questions.map((q, qIdx) => {
                const globalNum = partOffsets[partIdx] + qIdx + 1
                const answered = answers[q.id] !== null && answers[q.id] !== undefined

                return (
                  <button
                    key={q.id}
                    onClick={() => onSelectPart(partIdx)}
                    title={`Câu ${globalNum}`}
                    className={cn(
                      'w-8 h-8 rounded-lg flex items-center justify-center text-[11px] font-semibold transition-all',
                      isCurrent && answered
                        ? 'bg-blue-600 text-white'
                        : !isCurrent && answered
                          ? 'bg-blue-400 text-white'
                          : isCurrent
                            ? 'border-2 border-blue-600 text-blue-600'
                            : 'border-2 border-slate-200 text-slate-400 hover:border-slate-300',
                    )}
                  >
                    {globalNum}
                  </button>
                )
              })}
            </div>
          </div>
        )
      })}

      {/* Legend */}
      <div className="px-4 py-3 border-t border-slate-100 mt-1">
        <div className="flex flex-col gap-1.5 text-[10px] text-slate-400">
          <span className="flex items-center gap-2">
            <span className="w-4 h-4 rounded bg-blue-600 inline-block" />Đã trả lời
          </span>
          <span className="flex items-center gap-2">
            <span className="w-4 h-4 rounded border-2 border-slate-200 inline-block" />Chưa làm
          </span>
        </div>
      </div>
    </aside>
  )
}
