import type { PreparedWorldDefinition } from '../engine';
import type { WorldId } from '../worlds';

interface WorldPickerProps {
  currentWorldId: WorldId;
  worlds: PreparedWorldDefinition[];
  onSelect: (worldId: WorldId) => void;
}

export function WorldPicker({ currentWorldId, worlds, onSelect }: WorldPickerProps) {
  return (
    <section className="panel world-strip">
      <div className="panel-head">
        <h2>World registry</h2>
        <p>
          The app shell can now swap worlds without changing the runtime. Add a definition,
          register it, and the picker updates automatically.
        </p>
      </div>
      <div className="world-list">
        {worlds.map((world) => {
          const isActive = world.id === currentWorldId;

          return (
            <button
              aria-pressed={isActive}
              className={`world-card ${isActive ? 'is-active' : ''}`}
              key={world.id}
              onClick={() => onSelect(world.id as WorldId)}
              type="button"
            >
              <div className="world-card-top">
                <span className="world-card-label">{world.presentation?.label ?? world.id}</span>
                <span className="world-card-count">{world.actions.length} actions</span>
              </div>
              <strong>{world.name}</strong>
              <p>{world.presentation?.headline ?? world.description}</p>
              <div className="world-card-meta">
                <span>{world.phases.length} phases</span>
                <span>{world.events.length} events</span>
              </div>
            </button>
          );
        })}
      </div>
    </section>
  );
}
