"use client";

// THE BANNER'S "End focus", for the surfaces that are NOT /channels.
//
// The banner itself has no writer and must not grow one (FocusBanner.tsx's
// header states why): `settings.channelPriority` has exactly one writer,
// `saveChannelPriorityAction`, and a second one for a single button is the
// thing the model was built to avoid. So this is not a second writer — it is
// the same one, reached through `endFocusAction`, the named gesture
// `ChannelFocusBar` on /channels posts. One writer, two controls.
//
// It lives here rather than under operations/ because it belongs to the
// priority vocabulary, beside the action it posts and the bar that shares it.
//
// A FAILED WRITE MUST SAY SO. The writer returns `{error}` before it
// revalidates, so a swallowed result would read as "the click did nothing" —
// the same rule, and the same shape, as `useBarAction` in ChannelFocusBar.

import { useState, useTransition } from "react";
import { endFocusAction } from "../actions";

export default function EndFocusButton(): React.ReactNode {
  const [pending, startTransition] = useTransition();
  const [error, setError] = useState<string | null>(null);
  return (
    <>
      <button
        type="button"
        disabled={pending}
        onClick={() =>
          startTransition(async () => {
            try {
              const result = await endFocusAction();
              setError(result?.error ?? null);
            } catch (e) {
              setError((e as Error).message);
            }
          })
        }
        className="rounded-md border border-border px-2 py-1 text-xs hover:bg-muted disabled:opacity-50"
      >
        End focus
      </button>
      {error && (
        <span
          role="alert"
          aria-label="focus error"
          className="text-xs text-destructive"
        >
          {error}
        </span>
      )}
    </>
  );
}