import { useNavigate } from "@tanstack/react-router";
import { useEffect } from "react";
import { libraryBySlug } from "@/lib/libraries";
import { VISTAS } from "@/lib/world-layout";
import { useWorldUi } from "@/lib/world-input";
import { Joystick } from "./joystick";

export function WorldHud() {
  const navigate = useNavigate();
  const nearestLibrary = useWorldUi((s) => s.nearestLibrary);
  const alignedVista = useWorldUi((s) => s.alignedVista);
  const nearestVista = useWorldUi((s) => s.nearestVista);
  const hint = useWorldUi((s) => s.hint);
  const enterStore = useWorldUi((s) => s.enterStore);

  const aligned = VISTAS.find((v) => v.id === alignedVista);
  const near = VISTAS.find((v) => v.id === nearestVista);
  const lib = libraryBySlug(nearestLibrary ?? undefined);

  useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      if (e.code !== "KeyE") return;
      const state = useWorldUi.getState();
      if (state.enterStore) {
        void navigate({ to: "/store" });
        return;
      }
      if (state.nearestLibrary) {
        void navigate({ to: "/library/$slug", params: { slug: state.nearestLibrary } });
      }
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [navigate]);

  return (
    <div className="pointer-events-none absolute inset-0 z-20">
      {!aligned ? (
        <div className="absolute left-4 top-16 max-w-xs sm:left-6 sm:top-20">
          <p className="font-display text-3xl leading-none text-fg sm:text-4xl">Walk the ridge.</p>
          <p className="mt-2 max-w-[16rem] text-sm text-fg/80">
            Images hide in the stone. Change your angle.
          </p>
        </div>
      ) : null}

      {aligned ? (
        <div className="absolute inset-x-0 top-[26%] text-center">
          <p className="text-[11px] uppercase tracking-[0.22em] text-fg/85">{aligned.kicker}</p>
          <p className="font-display text-5xl text-fg sm:text-6xl">{aligned.name}</p>
        </div>
      ) : null}

      <div className="absolute bottom-[max(1.25rem,env(safe-area-inset-bottom))] left-0 right-0 flex flex-col items-center gap-2 px-4">
        {hint ? (
          <p className="max-w-md rounded-full border border-border bg-bg/70 px-4 py-2 text-center text-sm text-fg">
            {hint}
          </p>
        ) : near ? (
          <p className="max-w-md rounded-full border border-border bg-bg/70 px-4 py-2 text-center text-sm text-fg">
            {near.hint}
          </p>
        ) : null}
        {lib ? (
          <button
            type="button"
            className="pointer-events-auto h-11 rounded-md bg-accent px-5 text-sm font-medium text-accent-fg"
            onClick={() => void navigate({ to: "/library/$slug", params: { slug: lib.slug } })}
          >
            Enter {lib.name}
          </button>
        ) : enterStore ? (
          <button
            type="button"
            className="pointer-events-auto h-11 rounded-md bg-accent px-5 text-sm font-medium text-accent-fg"
            onClick={() => void navigate({ to: "/store" })}
          >
            Enter the store
          </button>
        ) : null}
        <p className="hidden text-[11px] uppercase tracking-[0.16em] text-fg/70 sm:block">
          WASD walk · drag to look · click a cairn · E to enter
        </p>
      </div>
      <Joystick />
    </div>
  );
}