import { PersonalityDimensionIcon } from '@/components/personality-quiz/PersonalityQuizIcons';
import type { PersonalityQuizWorkflow } from '@/components/personality-quiz/types';
import { getPersonalityDimensionLabel } from '@/business/personality/selectors';

interface PersonalityQuizProgressHeaderProps {
  readonly workflow: PersonalityQuizWorkflow;
}

export function PersonalityQuizProgressHeader({ workflow }: PersonalityQuizProgressHeaderProps) {
  return (
    <div className="p-4 border-b border-slate-700/40">
      <div className="flex items-center justify-between mb-2">
        <div className="flex items-center gap-2">
          <span className="text-xs font-medium text-violet-400 bg-violet-500/10 border border-violet-500/20 px-2.5 py-1 rounded-lg inline-flex items-center gap-1">
            <PersonalityDimensionIcon dimension={workflow.currentQuestion.dimension} />
            {getPersonalityDimensionLabel(workflow.currentQuestion.dimension)}
          </span>
        </div>
        <span className="text-xs text-slate-500">
          Question {workflow.currentQuestionIndex + 1} of {workflow.totalQuestions}
        </span>
      </div>
      <div className="h-2 bg-slate-700/50 rounded-full overflow-hidden">
        <div
          className="h-full bg-gradient-to-r from-violet-500 to-indigo-500 rounded-full transition-all duration-500 ease-out"
          style={{ width: `${workflow.progress}%` }}
        />
      </div>
      <div className="flex gap-1.5 mt-3">
        {workflow.dimensionProgress.map((dimension) => (
          <div key={dimension.dimension} className="flex-1">
            <div className={`text-[10px] text-center mb-1 font-medium ${dimension.current ? 'text-violet-400' : 'text-slate-500'}`}>
              {dimension.label}
            </div>
            <div className="flex gap-0.5">
              {Array.from({ length: dimension.totalCount }, (_, index) => (
                <div
                  key={`${dimension.dimension}-${index}`}
                  className={`h-1 flex-1 rounded-full ${
                    index < dimension.answeredCount
                      ? 'bg-violet-500'
                      : dimension.current && index === dimension.answeredCount
                        ? 'bg-violet-500/40'
                        : 'bg-slate-700/50'
                  }`}
                />
              ))}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}
