import React, { useState, useEffect } from 'react';
import authFetch from '../utils/authFetch.js';

const CareerPrioritiesModal = ({ userProfile, onClose }) => {
  const [responses, setResponses] = useState({});

  useEffect(() => {
    if (userProfile?.career_priorities) {
      setResponses(JSON.parse(userProfile.career_priorities));
    }
  }, [userProfile]);

  // Updated "interests" question:
  const questions = [
    {
      id: 'interests',
      text: 'How important is it that your career aligns with your personal interests?',
      options: ['Very important', 'Somewhat important', 'Not as important'],
    },
    {
      id: 'meaning',
      text: 'Is it important your job helps others or makes a difference?',
      options: ['Yes, very important', 'Somewhat important', 'Not as important'],
    },
    {
      id: 'stability',
      text: 'How important is it that your career pays well?',
      options: ['Very important', 'Somewhat important', 'Not as important'],
    },
    {
      id: 'growth',
      text: 'Do you want clear chances to advance and grow professionally?',
      options: ['Yes, very important', 'Somewhat important', 'Not as important'],
    },
    {
      id: 'balance',
      text: 'Do you prefer a job with flexible hours and time outside work?',
      options: ['Yes, very important', 'Somewhat important', 'Not as important'],
    },
    {
      id: 'recognition',
      text: 'How important is it to have a career that others admire?',
      options: ['Very important', 'Somewhat important', 'Not as important'],
    },
  ];

  const handleSave = async () => {
    const payload = {
      firstName: userProfile.firstname,
      lastName: userProfile.lastname,
      email: userProfile.email,
      zipCode: userProfile.zipcode,
      state: userProfile.state,
      area: userProfile.area,
      careerSituation: userProfile.career_situation || null,
      career_priorities: JSON.stringify(responses),
    };
  
    try {
      await authFetch('/api/user-profile', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload),
      });
      onClose();
    } catch (error) {
      console.error('Error saving priorities:', error);
    }
  };

  const allAnswered = questions.every(q => responses[q.id]);

  return (
    <div className="fixed inset-0 bg-gray-900 bg-opacity-60 flex justify-center items-center z-50">
      <div className="bg-white p-6 rounded-lg shadow-lg w-full max-w-2xl overflow-y-auto max-h-[90vh] z-60">
        <h2 className="text-xl font-bold mb-4">Tell us what's important to you</h2>
        {questions.map(q => (
          <div key={q.id} className="mb-4">
            <label className="block mb-2 font-medium">{q.text}</label>
            <select
              value={responses[q.id] || ''}
              onChange={(e) =>
                setResponses({ ...responses, [q.id]: e.target.value })
              }
              className="w-full border px-3 py-2 rounded"
            >
              <option value="" disabled>
                Select an answer
              </option>
              {q.options.map((opt) => (
                <option key={opt} value={opt}>
                  {opt}
                </option>
              ))}
            </select>
          </div>
        ))}
        <div className="flex justify-end space-x-2">
          <button
            onClick={handleSave}
            disabled={!allAnswered}
            className={`px-4 py-2 rounded ${
              allAnswered ? 'bg-blue-600 text-white' : 'bg-gray-300 cursor-not-allowed'
            }`}
          >
            Save Answers
          </button>
        </div>
      </div>
    </div>
  );
};

export default CareerPrioritiesModal;