"use client";

import { useRouter } from "next/navigation";
import { useQueryClient } from "@tanstack/react-query";
import { LinkForm } from "./LinkForm";

export default function LinkPage() {
    const router = useRouter();
    const qc = useQueryClient();

    return (
        <div className="grid max-w-2xl gap-6">
            <header className="grid gap-2">
                <h1 className="text-3xl">Link an install</h1>
                <p className="text-ink-2">
                    Every licence is tied to one install, so we need its ID before we can issue
                    yours. Paste it below and your licence is ready on the next screen.
                </p>
            </header>
            <LinkForm
                onLinked={(instanceId) => {
                    qc.invalidateQueries({ queryKey: ["account"] });
                    // Straight to the download, not back to a list: the licence is
                    // the thing they came for.
                    router.push(`/instances/${instanceId}`);
                }}
            />
        </div>
    );
}
