import { useState } from "react"; import { Backend } from "../lib/backend"; export default function JobDetectionCard({ onDetect, onClose }) { const [description, setDescription] = useState(""); const [loading, setLoading] = useState(false); const [error, setError] = useState(""); const [step, setStep] = useState(1); // 1: input, 2: confirmation, 3: assessment, 4: results const [detectedData, setDetectedData] = useState(null); const [assessment, setAssessment] = useState(null); const [currentQuestion, setCurrentQuestion] = useState(0); const [answers, setAnswers] = useState({}); const [assessmentResults, setAssessmentResults] = useState(null); const examples = [ "Saya tertarik membuat aplikasi web interaktif dengan React dan ingin mendalami frontend development", "Saya ingin belajar machine learning dan AI untuk membuat model prediktif", "Saya suka menganalisis data dan membuat visualisasi untuk business insights", "Saya tertarik dengan cloud computing dan deployment aplikasi di AWS/GCP" ]; // Step 1: Detect Job & Skills const handleDetect = async () => { if (!description.trim()) { setError("Mohon isi deskripsi minat Anda!"); return; } setLoading(true); setError(""); try { const data = await Backend.detectJobAndSkills(description, 6); setDetectedData(data); setStep(2); // Go to confirmation step } catch (err) { console.error('Detection error:', err); setError(err.message || "Gagal mendeteksi job role. Coba lagi!"); } finally { setLoading(false); } }; // Step 2: Start Assessment const handleStartAssessment = async () => { setLoading(true); setError(""); try { const assessmentData = await Backend.generateAssessment(detectedData.skills, 18); setAssessment(assessmentData); setStep(3); // Go to assessment } catch (err) { console.error('Assessment generation error:', err); setError(err.message || "Gagal membuat assessment. Coba lagi!"); } finally { setLoading(false); } }; // Step 3: Handle Answer const handleAnswer = (answer) => { const skills = Object.keys(assessment.assessment); const currentSkillIdx = Math.floor(currentQuestion / 3); const currentSkill = skills[currentSkillIdx]; const questionIdx = currentQuestion % 3; console.log(`Answer for ${currentSkill} Q${questionIdx}: ${answer}`); setAnswers(prev => ({ ...prev, [`${currentSkill}_${questionIdx}`]: answer })); // Next question const totalQuestions = Object.values(assessment.assessment).flat().length; if (currentQuestion < totalQuestions - 1) { setCurrentQuestion(prev => prev + 1); } else { // Finish assessment submitAssessment(); } }; // Step 4: Submit Assessment const submitAssessment = async () => { setLoading(true); try { const formattedAnswers = {}; Object.keys(assessment.assessment).forEach((skill) => { const skillQuestions = assessment.assessment[skill]; formattedAnswers[skill] = []; skillQuestions.forEach((q, qIdx) => { const userAnswer = answers[`${skill}_${qIdx}`] || "A"; const correctAnswer = q.answer || "A"; formattedAnswers[skill].push({ question: q.question, user_answer: userAnswer, correct_answer: correctAnswer, is_correct: userAnswer === correctAnswer }); }); }); console.log("Submitting answers:", JSON.stringify(formattedAnswers, null, 2)); const results = await Backend.submitAssessmentAdvanced(formattedAnswers); console.log("Assessment results:", results); setAssessmentResults(results); setStep(4); } catch (err) { console.error("Submit error:", err); setError("Gagal submit assessment: " + err.message); } finally { setLoading(false); } }; // Step 5: Get Course Recommendations const handleGetCourses = async () => { setLoading(true); try { const courses = await Backend.recommendCoursesST( detectedData.job_role, assessmentResults.aggregate_level, 10 ); // Send to chat onDetect({ job_role: detectedData.job_role, skills: detectedData.skills, level: assessmentResults.aggregate_level, results: assessmentResults.results, courses: courses }); onClose(); } catch (err) { setError("Gagal mendapatkan rekomendasi: " + err.message); } finally { setLoading(false); } }; // Render current question const renderCurrentQuestion = () => { if (!assessment) return null; const skills = Object.keys(assessment.assessment); const currentSkillIdx = Math.floor(currentQuestion / 3); const currentSkill = skills[currentSkillIdx]; const questionIdx = currentQuestion % 3; const question = assessment.assessment[currentSkill][questionIdx]; const totalQuestions = Object.values(assessment.assessment).flat().length; return (
{currentSkill} Pertanyaan {currentQuestion + 1} dari {totalQuestions}

{question.question}

{question.options.map((opt, idx) => ( ))}
); }; return ( <>
e.stopPropagation()}>
🎯 {step === 1 ? "Deteksi Job Role & Skills" : step === 2 ? "Konfirmasi Job Role" : step === 3 ? "Assessment" : "Hasil Assessment"}
{error && (
⚠️ {error}
)} {/* Step 1: Input Description */} {step === 1 && ( <>

Ceritakan minat dan tujuan belajar Anda, dan kami akan mendeteksi job role yang cocok beserta skills yang perlu dikuasai!