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
  onSelectQuestion: (questionId: number) => void
}

export function TestSessionSidebar({
  parts, currentPartIndex, answers, onSelectPart, onSelectQuestion,
}: 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="overflow-y-auto"
      style={{
        width: 240,
        flexShrink: 0,
        background: 'var(--at-surface)',
        borderRight: '1px solid var(--at-line)',
        padding: '18px 16px 40px',
      }}
    >
      <div
        className="uppercase"
        style={{
          fontSize: 11,
          letterSpacing: '0.08em',
          color: 'var(--at-mute)',
          marginBottom: 12,
        }}
      >
        Question Map
      </div>

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

        return (
          <div key={part.partNumber} style={{ marginBottom: 18 }}>
            <button
              onClick={() => onSelectPart(partIdx)}
              className="text-left w-full"
              style={{
                fontFamily: 'var(--at-serif)',
                fontStyle: 'italic',
                fontWeight: 400,
                fontSize: 13,
                color: isCurrent ? 'var(--at-brand)' : 'var(--at-ink-2)',
                marginBottom: 8,
                letterSpacing: '0.04em',
              }}
            >
              Part {part.partNumber}
            </button>

            <div className="grid grid-cols-5 gap-1">
              {part.questions.map((q, qIdx) => {
                const globalNum = partOffsets[partIdx] + qIdx + 1
                const answered = answers[q.id] !== null && answers[q.id] !== undefined
                // Soft brand-tinted border for all unanswered cells.
                const unansweredBorder = 'rgba(84, 114, 158, 0.35)'

                return (
                  <button
                    key={q.id}
                    onClick={() => onSelectQuestion(q.id)}
                    title={`Câu ${globalNum}`}
                    className={cn(
                      'tabular-nums transition-all aspect-square',
                      'hover:border-[var(--at-ink-2)]',
                    )}
                    style={{
                      borderRadius: 6,
                      border: `1px solid ${answered ? 'var(--at-brand)' : unansweredBorder}`,
                      background: answered ? 'var(--at-brand)' : 'var(--at-surface)',
                      color: answered ? '#fff' : 'var(--at-ink-2)',
                      fontSize: 11,
                      fontWeight: 500,
                      padding: 0,
                    }}
                  >
                    {globalNum}
                  </button>
                )
              })}
            </div>
          </div>
        )
      })}
    </aside>
  )
}
