"use client";

import { useState } from "react";
import { Button } from "./Button";
import { Field } from "./Field";
import { Note } from "./Panel";
import { ApiError, type RenameResult } from "@/lib/api";
import { baseSlug, hostFor, slugError } from "@/lib/slug";

/*
 * The rename control, and only the control — the same shape as RelinkPanel: an
 * input that expands in place rather than a modal, because this app has no modal
 * and one action with one field does not need one.
 *
 * The host preview is drawn from lib/slug.ts, a mirror of the Go rules. It can
 * disagree with the server; the 409 that comes back is the answer that counts.
 */
export function RenamePanel({
    currentName,
    currentSlug,
    onRename,
}: {
    currentName: string;
    currentSlug: string;
    onRename: (name: string) => Promise<RenameResult>;
}) {
    const [open, setOpen] = useState(false);
    const [value, setValue] = useState(currentName);
    const [error, setError] = useState<string | undefined>();
    const [busy, setBusy] = useState(false);
    const [done, setDone] = useState<RenameResult | undefined>();

    const name = value.trim();
    const derived = baseSlug(name);
    const invalid = slugError(name);
    // A cosmetic edit that lands on the same slug is still a rename worth doing —
    // the name is what the customer reads. Only an empty or unchanged name is
    // nothing to submit.
    const unchanged = name === currentName.trim();

    async function submit() {
        setError(undefined);
        setBusy(true);
        try {
            const res = await onRename(name);
            setDone(res);
            setOpen(false);
        } catch (err) {
            setError(err instanceof ApiError ? err.message : "Rename failed. Try again.");
        } finally {
            setBusy(false);
        }
    }

    if (done) {
        const host = done.login_url || `https://${hostFor(done.slug)}`;
        return (
            <Note tone="warn">
                <span className="grid gap-2">
                    <span>
                        This instance is now <strong>{done.name}</strong>, at{" "}
                        <span className="font-mono">{hostFor(done.slug)}</span>. The old address has stopped working, and your
                        sign-in does not follow it — you will need to sign in again there.
                    </span>
                    <a href={host} className="justify-self-start font-mono text-[0.78rem] text-accent underline">
                        Open {hostFor(done.slug)} &rarr;
                    </a>
                </span>
            </Note>
        );
    }

    return (
        <div className="grid gap-3">
            {open && (
                <Field
                    label="Instance name"
                    value={value}
                    onChange={(e) => setValue(e.target.value)}
                    error={error ?? (name ? invalid : undefined)}
                    hint={
                        name && !invalid ? (
                            <>
                                Moves to <span className="font-mono">{hostFor(derived)}</span>
                                {derived === currentSlug && " — the address does not change"}
                            </>
                        ) : (
                            "Letters and digits; everything else becomes a hyphen."
                        )
                    }
                />
            )}
            <div className="flex flex-wrap items-center gap-3">
                <Button
                    type="button"
                    variant="line"
                    disabled={busy || (open && (!name || Boolean(invalid) || unchanged))}
                    onClick={() => (open ? submit() : setOpen(true))}
                >
                    {busy ? "Renaming…" : "Rename instance"}
                </Button>
                {open && (
                    <span className="text-[0.82rem] text-ink-3">
                        Anyone signed in will need to sign in again at the new address, and links to the old one stop working.
                    </span>
                )}
            </div>
        </div>
    );
}