"use client";

import { useState } from "react";
import { Button } from "./Button";
import { Field } from "./Field";

const UUID_RE = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;

/*
 * The relink control, and only the control.
 *
 * It used to carry its own heading and its own "N of M relinks left this term"
 * line. It now sits inside the Moves panel, which already says both — a panel
 * titled Moves with "2 of 3 used" in its header, wrapping a section headed
 * "Moved to a new server?" that says "1 of 3 relinks left", is the same fact
 * told twice in two different directions.
 *
 * The exhausted case still lives here rather than in the caller: it is the
 * reason the button is disabled, so it belongs beside the button.
 */
export function RelinkPanel({ used, max, onRelink, error }: { instanceId: string; used: number; max: number; onRelink: (newId: string) => void; error?: string }) {
    const [open, setOpen] = useState(false);
    const [value, setValue] = useState("");
    const remaining = Math.max(0, max - used);
    const exhausted = remaining === 0;

    return (
        <div className="grid gap-3">
            {open && !exhausted && (
                <Field label="New instance ID" value={value} onChange={(e) => setValue(e.target.value)} error={error} hint="From Settings → Licence on the new install." />
            )}
            <div className="flex flex-wrap items-center gap-3">
                <Button
                    type="button"
                    variant="line"
                    disabled={exhausted || (open && !UUID_RE.test(value.trim()))}
                    onClick={() => (open ? onRelink(value.trim()) : setOpen(true))}
                >
                    Move to another install
                </Button>
                {exhausted ? (
                    <span className="text-[0.82rem] text-ink-3">You have used every move for this term — contact support and we will sort it out.</span>
                ) : (
                    open && <span className="text-[0.82rem] text-ink-3">Relinking issues a replacement licence covering the rest of your current term.</span>
                )}
            </div>
        </div>
    );
}