// quiz-mashup-maker.jsx
// Mashup Maker: open-ended creative combo game (MashupMakerLevel).

const MASHUP_ITEMS = [
  {
    id: "spoon",
    icon: "🥄",
    label: "Spoon",
    power: "scoops moon dust",
    nameBit: "Scoop",
    trait: "move little things",
  },
  {
    id: "boot",
    icon: "🥾",
    label: "Boot",
    power: "stomps and walks",
    nameBit: "Stomp",
    trait: "help with moving",
  },
  {
    id: "star",
    icon: "⭐",
    label: "Star",
    power: "glows in the dark",
    nameBit: "Glow",
    trait: "make light",
  },
  {
    id: "blanket",
    icon: "🧣",
    label: "Blanket",
    power: "keeps things cozy",
    nameBit: "Cozy",
    trait: "protect and comfort",
  },
  {
    id: "magnet",
    icon: "🧲",
    label: "Magnet",
    power: "pulls metal closer",
    nameBit: "Pull",
    trait: "pull things",
  },
  {
    id: "wheel",
    icon: "⚙",
    label: "Wheel",
    power: "rolls over rocks",
    nameBit: "Roll",
    trait: "help with moving",
  },
  {
    id: "bubble",
    icon: "🫧",
    label: "Bubble",
    power: "floats softly",
    nameBit: "Float",
    trait: "move gently",
  },
  {
    id: "flashlight",
    icon: "🔦",
    label: "Flashlight",
    power: "finds hidden paths",
    nameBit: "Beam",
    trait: "make light",
  },
];

const MASHUP_HELPERS = [
  "help a sleepy rover",
  "carry snacks on the Moon",
  "find a lost star",
  "make a quiet bedtime rocket",
  "cross a bumpy crater",
];

function mashupName(first, second) {
  if (!first || !second) return "Pick two cards";
  return `${first.nameBit}-${second.nameBit} Helper`;
}

function mashupPurpose(first, second, helper) {
  if (!first || !second) {
    return "Tap any two cards. Weird pairs are welcome.";
  }
  return `It ${first.power} and ${second.power} to ${helper}.`;
}

function mashupMechanicCue(first, second) {
  if (!first || !second) {
    return "Pick two idea ingredients and compare what each one can do.";
  }
  if (first.trait === second.trait) {
    return `Both ideas ${first.trait}, so this helper has one strong job.`;
  }
  return `One idea can ${first.trait}. The other can ${second.trait}. Together they solve more.`;
}

function MashupMakerLevel({ onExit }) {
  const [selectedIds, setSelectedIds] = useState([]);
  const [helperIndex, setHelperIndex] = useState(0);
  const selectedItems = selectedIds
    .map((id) => MASHUP_ITEMS.find((item) => item.id === id))
    .filter(Boolean);
  const [first, second] = selectedItems;
  const complete = selectedItems.length === 2;
  const helper = MASHUP_HELPERS[helperIndex];

  const toggleItem = (id) => {
    setSelectedIds((current) => {
      if (current.includes(id)) return current.filter((item) => item !== id);
      if (current.length >= 2) return [current[1], id];
      return [...current, id];
    });
    playKidSound("boop");
  };

  const clear = () => {
    setSelectedIds([]);
    playKidSound("pop");
  };

  const celebrate = () => {
    if (!complete) return;
    setHelperIndex((index) => (index + 1) % MASHUP_HELPERS.length);
    playKidSound("chime");
  };

  return (
    <section className="mashup-maker-level" aria-label="Mashup Maker game">
      <Starfield count={240} />
      <button className="planet-sort-back" onClick={onExit}>
        ← Back to planets
      </button>
      <div className="mashup-maker-shell">
        <div className="mashup-maker-copy">
          <span>Mashup Maker</span>
          <h1>Pick two things. Make a new idea.</h1>
          <p>No wrong pairs. The surprising ones are the best ones.</p>
          <div className="mashup-helper-card">
            <span>Today it can...</span>
            <strong>{helper}</strong>
            <button
              onClick={() => {
                setHelperIndex((index) => (index + 1) % MASHUP_HELPERS.length);
                playKidSound("boop");
              }}
            >
              New job
            </button>
          </div>
        </div>

        <div className="mashup-maker-board" aria-live="polite">
          <div className={`mashup-invention ${complete ? "ready" : ""}`}>
            <div className="mashup-orbit">
              <span>{first ? first.icon : "?"}</span>
              <i>+</i>
              <span>{second ? second.icon : "?"}</span>
            </div>
            <h2>{mashupName(first, second)}</h2>
            <p>{mashupPurpose(first, second, helper)}</p>
            <div className="mashup-mechanic-cue">
              <strong>How it works</strong>
              <span>{mashupMechanicCue(first, second)}</span>
            </div>
            <div className="mashup-actions">
              <button onClick={clear}>Clear</button>
              <button onClick={celebrate} disabled={!complete}>
                It works!
              </button>
            </div>
          </div>
        </div>

        <div className="mashup-card-grid" aria-label="Choose two idea cards">
          {MASHUP_ITEMS.map((item) => {
            const selected = selectedIds.includes(item.id);
            return (
              <button
                key={item.id}
                className={`mashup-card ${selected ? "selected" : ""}`}
                onClick={() => toggleItem(item.id)}
                aria-pressed={selected ? "true" : "false"}
              >
                <span>{item.icon}</span>
                <strong>{item.label}</strong>
                <small>{item.power}</small>
              </button>
            );
          })}
        </div>
      </div>
    </section>
  );
}