Assessments and Surveys

import { useState } from 'react';
import { Wizard, Stepper, RadioButtonGroup, RadioBoxGroup, Slider, RangeSlider, BellCurve, RadarChart, Collapsible } from '@cleen/cleen-components';
import { useAssessment, useResponseSet } from '@/hooks/useAssessment';

export function AssessmentRunner({ assessmentId }) {
  const { assessment, sections } = useAssessment(assessmentId);
  const { responses, save, submit, results } = useResponseSet(assessmentId);
  const [step, setStep] = useState(0);

  if (!assessment) return null;

  const section = sections[step];
  return (
    <Wizard
      step={step}
      onStepChange={setStep}
      header={<Stepper steps={sections.map((s) => s.title)} current={step} />}
    >
      {section.questions.map((q) => (
        <Collapsible key={q.id} title={q.title} defaultOpen>
          {q.type === 'choice' && <RadioButtonGroup options={q.options} value={responses[q.id]} onChange={(v) => save(q.id, v)} />}
          {q.type === 'card'   && <RadioBoxGroup options={q.options} value={responses[q.id]} onChange={(v) => save(q.id, v)} />}
          {q.type === 'scale'  && <Slider min={1} max={10} value={responses[q.id]} onChange={(v) => save(q.id, v)} />}
          {q.type === 'range'  && <RangeSlider min={0} max={100} value={responses[q.id]} onChange={(v) => save(q.id, v)} />}
        </Collapsible>
      ))}
      {results && (
        <section className="results">
          <BellCurve data={results.distribution} value={results.score} />
          <RadarChart data={results.factorScores} />
        </section>
      )}
    </Wizard>
  );
}