import { gameRuntime } from '../state/runtime';
import { useGameStore } from '../state/store';
import { StoryProseLog } from './StoryProseLog';
import { StoryTree } from './StoryTree';

const SHELL_HEIGHT = 'h-[calc(100dvh-6rem)]';

export function StoryView() {
  const tree = useGameStore((s) => s.story.tree);
  const log = useGameStore((s) => s.storyLog);
  const selectedId = useGameStore((s) => s.selectedStoryNodeId);
  const currentProse = useGameStore((s) => s.story.currentProse);
  const isBootIntro = useGameStore((s) => s.story.atBootIntro);

  if (isBootIntro) {
    return (
      <div className={`flex ${SHELL_HEIGHT} flex-col items-center justify-center gap-6`}>
        <p className="max-w-lg text-center text-lg leading-relaxed text-slate-100 whitespace-pre-wrap">
          {currentProse}
        </p>
        <button
          type="button"
          onClick={() => gameRuntime.continueStory()}
          className="cursor-pointer rounded-lg bg-amber-600 px-6 py-2.5 font-medium text-slate-100 transition-colors hover:bg-amber-500"
        >
          Continue
        </button>
      </div>
    );
  }

  return (
    <div className={`grid ${SHELL_HEIGHT} grid-cols-[3fr_2fr] gap-4`}>
      <StoryTree
        nodes={tree}
        selectedId={selectedId}
        onSelect={(id) => gameRuntime.selectStoryNode(id)}
      />
      <StoryProseLog log={log} selectedId={selectedId} />
    </div>
  );
}