// kid-treasure-hunt.jsx
// Treasure Hunt level + its SurpriseComet helper component.
// SurpriseComet is only used here so it travels with the level.

function SurpriseComet({ active, comet, onTap }) {
  if (!active || !comet) return null;
  return (
    <button
      key={comet.id}
      className="surprise-comet"
      onClick={onTap}
      aria-label="Tap the surprise comet"
      title="Tap the comet"
    >
      <SafeAssetImage
        src={GENERATED_ASSETS.comet}
        alt=""
        context="SurpriseComet"
        fallbackText=""
      />
    </button>
  );
}

function TreasureHuntLevel({
  collected,
  score,
  comet,
  pickupFlight,
  onTreasure,
  onPickupComplete,
  onComet,
  onReset,
  onExit,
}) {
  const remaining = KID_TREASURES.length - collected.length;
  const nextTreasure = KID_TREASURES.find(
    (treasure) => !collected.includes(treasure.id),
  );
  const nextTreasureIndex = nextTreasure
    ? KID_TREASURES.findIndex((treasure) => treasure.id === nextTreasure.id)
    : -1;
  const nextTreasureSpot =
    nextTreasureIndex >= 0
      ? KID_TREASURE_SPOTS[nextTreasureIndex % KID_TREASURE_SPOTS.length]
      : null;
  return (
    <div className="treasure-level">
      <Starfield count={420} />
      <KidStarSurprises
        active={true}
        collected={collected}
        collectingId={pickupFlight && pickupFlight.treasure.id}
        nextTreasureId={nextTreasure && nextTreasure.id}
        busy={Boolean(pickupFlight)}
        onTap={onTreasure}
      />
      <SurpriseComet active={true} comet={comet} onTap={onComet} />
      <TreasureAstronautPickup
        flight={pickupFlight}
        onComplete={onPickupComplete}
      />
      {remaining > 0 && nextTreasureSpot && !pickupFlight ? (
        <div className="treasure-tap-helper" style={nextTreasureSpot}>
          <span>Tap this!</span>
        </div>
      ) : null}
      <div className="treasure-hud">
        <button className="treasure-back" onClick={onExit}>
          ← Back to planets
        </button>
        <div className="treasure-title-block">
          <div className="treasure-title">Treasure Hunt</div>
          <div className="treasure-subtitle">
            {pickupFlight
              ? "Astronaut flying!"
              : "Tap any treasure and Adam will fly over to grab it"}
          </div>
        </div>
        <div className="treasure-count">
          <strong>{score}</strong>
          <span>{score === 1 ? "treasure" : "treasures"} found</span>
        </div>
      </div>
      {remaining > 0 && nextTreasure ? (
        <div className="treasure-next-card" role="status" aria-live="polite">
          <span>{pickupFlight ? "Flying" : "Tap one"}</span>
          <SafeAssetImage
            src={nextTreasure.asset}
            alt=""
            context={`TreasureHunt:next:${nextTreasure.id}`}
            fallbackClassName="treasure-image-fallback"
            fallbackText={assetFallbackText(nextTreasure.label || "Treasure")}
          />
          <strong>
            {pickupFlight ? "Adam is grabbing it" : nextTreasure.label}
          </strong>
        </div>
      ) : null}
      <div className="treasure-tray">
        {KID_TREASURES.map((treasure) => (
          <span
            key={treasure.id}
            className={`treasure-tray-item ${
              collected.includes(treasure.id) ? "found" : ""
            }`}
            title={treasure.label}
          >
            <SafeAssetImage
              src={treasure.asset}
              alt=""
              context={`TreasureHunt:tray:${treasure.id}`}
              fallbackText=""
            />
          </span>
        ))}
      </div>
      {remaining > 0 ? (
        <div className="treasure-progress" aria-hidden="true">
          {KID_TREASURES.map((treasure) => (
            <span
              key={treasure.id}
              className={collected.includes(treasure.id) ? "done" : ""}
            />
          ))}
        </div>
      ) : null}
      {remaining === 0 ? (
        <div className="treasure-complete">
          <div className="treasure-complete-sparkles" aria-hidden="true">
            <span />
            <span />
            <span />
            <span />
            <span />
          </div>
          <SafeAssetImage
            src={GENERATED_ASSETS.missionBadge}
            alt=""
            context="TreasureHunt:missionBadge"
            fallbackText=""
          />
          <strong>All treasures found!</strong>
          <p>You helped the astronaut collect the whole set.</p>
          <div className="treasure-complete-actions">
            <button onClick={onReset}>Play again</button>
            <button onClick={onExit}>Back to planets</button>
          </div>
        </div>
      ) : null}
    </div>
  );
}