/** * Pre-Interview Questionnaire * * A step-based form shown BEFORE the interview starts. * Collects user preferences to personalize the interview experience. */ import React, { useState, useCallback } from 'react'; import { Briefcase, GraduationCap, Target, AlertCircle, Star, TrendingUp, ChevronRight, ChevronLeft, Check, Sparkles, User } from 'lucide-react'; // =========================================== // QUESTION DEFINITIONS // =========================================== const QUESTIONS = [ { id: 'target_role', title: 'Target Role', question: 'What role are you preparing for?', description: 'Enter the job title you\'re targeting', type: 'text', placeholder: 'e.g., Software Engineer, Product Manager', icon: Briefcase, required: true, }, { id: 'experience_level', title: 'Experience Level', question: 'What is your experience level?', description: 'This helps us tailor the difficulty', type: 'select', icon: GraduationCap, required: true, options: [ { value: 'student', label: 'Student', description: 'Currently studying, limited work experience' }, { value: 'fresher', label: 'Fresher / Entry-Level', description: '0-1 years of professional experience' }, { value: 'mid', label: 'Mid-Level', description: '2-5 years of professional experience' }, { value: 'senior', label: 'Senior', description: '6+ years of professional experience' }, ], }, { id: 'strengths', title: 'Your Strengths', question: 'What are your key strengths?', description: 'Select areas where you excel (choose up to 3)', type: 'multi-select', icon: Star, required: true, maxSelect: 3, options: [ { value: 'problem_solving', label: 'Problem Solving' }, { value: 'communication', label: 'Communication' }, { value: 'leadership', label: 'Leadership' }, { value: 'technical_skills', label: 'Technical Skills' }, { value: 'teamwork', label: 'Teamwork' }, { value: 'adaptability', label: 'Adaptability' }, { value: 'creativity', label: 'Creativity' }, { value: 'analytical', label: 'Analytical Thinking' }, ], }, { id: 'weaknesses', title: 'Areas to Improve', question: 'What areas do you want to improve?', description: 'Select areas you want to work on (choose up to 2)', type: 'multi-select', icon: AlertCircle, required: true, maxSelect: 2, options: [ { value: 'public_speaking', label: 'Public Speaking' }, { value: 'technical_depth', label: 'Technical Depth' }, { value: 'time_management', label: 'Time Management' }, { value: 'confidence', label: 'Confidence' }, { value: 'structured_answers', label: 'Structured Answers' }, { value: 'handling_pressure', label: 'Handling Pressure' }, { value: 'asking_questions', label: 'Asking Questions' }, ], }, { id: 'interview_goal', title: 'Your Goal', question: 'What is your goal for this interview?', description: 'This helps us focus the session', type: 'select', icon: Target, required: true, options: [ { value: 'practice', label: 'Practice & Learn', description: 'Casual practice to improve skills' }, { value: 'preparation', label: 'Real Interview Prep', description: 'Preparing for an upcoming interview' }, { value: 'confidence', label: 'Build Confidence', description: 'Reduce interview anxiety' }, { value: 'assessment', label: 'Self Assessment', description: 'Evaluate current interview readiness' }, ], }, { id: 'difficulty', title: 'Difficulty Level', question: 'What difficulty do you prefer?', description: 'Higher difficulty means tougher questions', type: 'select', icon: TrendingUp, required: true, options: [ { value: 'easy', label: 'Easy', description: 'Foundational questions, more guidance' }, { value: 'medium', label: 'Medium', description: 'Balanced challenge, standard interview' }, { value: 'hard', label: 'Hard', description: 'Challenging questions, less hints' }, ], }, ]; // =========================================== // MAIN COMPONENT // =========================================== function PreInterviewQuestionnaire({ onComplete, onSkip, defaultValues = {} }) { const [currentStep, setCurrentStep] = useState(0); const [answers, setAnswers] = useState({ target_role: defaultValues.target_role || '', experience_level: defaultValues.experience_level || '', strengths: defaultValues.strengths || [], weaknesses: defaultValues.weaknesses || [], interview_goal: defaultValues.interview_goal || '', difficulty: defaultValues.difficulty || 'medium', }); const [errors, setErrors] = useState({}); const currentQuestion = QUESTIONS[currentStep]; const isLastStep = currentStep === QUESTIONS.length - 1; const isFirstStep = currentStep === 0; // Validate current step const validateStep = useCallback(() => { const question = QUESTIONS[currentStep]; const value = answers[question.id]; if (question.required) { if (question.type === 'multi-select') { if (!value || value.length === 0) { setErrors(prev => ({ ...prev, [question.id]: 'Please select at least one option' })); return false; } } else if (!value || value.trim() === '') { setErrors(prev => ({ ...prev, [question.id]: 'This field is required' })); return false; } } setErrors(prev => ({ ...prev, [question.id]: null })); return true; }, [currentStep, answers]); // Navigation const handleNext = useCallback(() => { if (!validateStep()) return; if (isLastStep) { onComplete?.(answers); } else { setCurrentStep(prev => prev + 1); } }, [validateStep, isLastStep, answers, onComplete]); const handleBack = useCallback(() => { if (!isFirstStep) { setCurrentStep(prev => prev - 1); } }, [isFirstStep]); // Update answer const updateAnswer = useCallback((questionId, value) => { setAnswers(prev => ({ ...prev, [questionId]: value })); setErrors(prev => ({ ...prev, [questionId]: null })); }, []); // Toggle multi-select option const toggleOption = useCallback((questionId, optionValue, maxSelect = 10) => { setAnswers(prev => { const current = prev[questionId] || []; if (current.includes(optionValue)) { return { ...prev, [questionId]: current.filter(v => v !== optionValue) }; } else if (current.length < maxSelect) { return { ...prev, [questionId]: [...current, optionValue] }; } return prev; }); setErrors(prev => ({ ...prev, [questionId]: null })); }, []); // Render question content const renderQuestionContent = () => { const question = currentQuestion; const value = answers[question.id]; const error = errors[question.id]; const Icon = question.icon; return (

{question.question}

{question.description}

{question.type === 'text' && ( updateAnswer(question.id, e.target.value)} autoFocus /> )} {question.type === 'select' && (
{question.options.map((option) => ( ))}
)} {question.type === 'multi-select' && (
{question.options.map((option) => { const isSelected = (value || []).includes(option.value); const isMaxed = (value || []).length >= question.maxSelect && !isSelected; return ( ); })}

Select up to {question.maxSelect} ({(value || []).length}/{question.maxSelect})

)}
{error && (
{error}
)}
); }; return (
{/* Progress */}
Step {currentStep + 1} of {QUESTIONS.length}
{/* Question */}
{renderQuestionContent()}
{/* Navigation */}
{!isFirstStep && ( )}
{onSkip && ( )}
); } export default PreInterviewQuestionnaire;