import React, { useState, useEffect } from 'react';
import { Button } from './ui/button.js';

// This modal will ONLY ask for Interest & Meaning.
function InterestMeaningModal({
  show,
  onClose,
  onSave,
  careerTitle,
  askForInterest,    // boolean
  defaultInterest,   // number
  defaultMeaning,    // number
}) {
  const [interestValue, setInterestValue] = useState(defaultInterest || 3);
  const [meaningValue, setMeaningValue] = useState(defaultMeaning || 3);

  // If `defaultInterest` or `defaultMeaning` change while open, reset local state
  useEffect(() => {
    setInterestValue(defaultInterest || 3);
  }, [defaultInterest]);

  useEffect(() => {
    setMeaningValue(defaultMeaning || 3);
  }, [defaultMeaning]);

  if (!show) {
    return null; // Do not render anything if show=false
  }

  const handleSave = () => {
    onSave({
      interest: askForInterest ? interestValue : null,
      meaning: meaningValue,
    });
    onClose();
  };

  return (
    <div className="fixed inset-0 z-60 bg-black bg-opacity-40 flex items-center justify-center">
      <div className="bg-white p-4 rounded shadow-lg w-full max-w-sm">
        <h2 className="text-xl font-semibold mb-4">
          Add "{careerTitle}" to Comparison
        </h2>

        {/* If the user is "not sure yet," ask for interest rating */}
        {askForInterest && (
          <div className="mb-4">
            <label className="block font-medium mb-1">
              Your Interest in This Career (1–5)
            </label>
            <input
              type="number"
              min="1"
              max="5"
              value={interestValue}
              onChange={(e) => setInterestValue(Number(e.target.value))}
              className="w-full border rounded px-3 py-1"
            />
          </div>
        )}

        {/* Always ask for meaning rating */}
        <div className="mb-4">
          <label className="block font-medium mb-1">
            How Meaningful is This Career to You? (i.e. how you feel this career's contributions to society rank) (1–5)
          </label>
          <input
            type="number"
            min="1"
            max="5"
            value={meaningValue}
            onChange={(e) => setMeaningValue(Number(e.target.value))}
            className="w-full border rounded px-3 py-1"
          />
        </div>

        <div className="flex justify-end gap-2">
          <Button onClick={onClose} className="bg-gray-300">
            Cancel
          </Button>
          <Button onClick={handleSave} className="bg-blue-600 text-white">
            Save
          </Button>
        </div>
      </div>
    </div>
  );
}

export default InterestMeaningModal;