import { useMutation, useQueryClient } from "@tanstack/react-query";
import { useNavigate } from "react-router";
import { useApi } from "../api/context";
import { PLAYER_STATE_KEY } from "../state/player";

/** First launch: create a guest account (decision: guests first, accounts later). */
export function StartScreen() {
  const api = useApi();
  const queryClient = useQueryClient();
  const navigate = useNavigate();
  const start = useMutation({
    mutationFn: () => api.call("createGuest", {}),
    onSuccess: ({ state }) => {
      // The session cookie is now set; the response already holds the new state.
      queryClient.setQueryData(PLAYER_STATE_KEY, state);
      // Straight to work: the first company run is one tap away (CR-001).
      void navigate("/contracts");
    },
  });

  return (
    <main className="flex min-h-dvh flex-col items-center justify-center gap-6 bg-slate-950 p-6 text-center text-slate-100">
      <div>
        <h1 className="text-3xl font-bold tracking-wide">DEADHEAD</h1>
        <p className="mt-1 text-slate-400">Space Freight Tycoon</p>
      </div>
      <p className="max-w-xs text-sm text-slate-300">
        Fly company runs between Earth and the Moon, save up for your own ship, and build a freight
        empire across the solar system.
      </p>
      <button
        type="button"
        onClick={() => start.mutate()}
        disabled={start.isPending}
        className="rounded-lg bg-amber-500 px-6 py-3 font-semibold text-slate-950 disabled:opacity-60"
      >
        {start.isPending ? "Starting…" : "Start your company"}
      </button>
      {start.isError && (
        <p role="alert" className="text-sm text-red-400">
          Could not start a company. Check your connection and try again.
        </p>
      )}
    </main>
  );
}