@domainkit/react

/**
 * One hook. `Domain.useFlow` connects a provider, plans the changes, takes the customer's approval
 * or refusal, applies the plan, observes the records, and cleans them up against the receipt. It
 * reports only the capability groups the transport declares, and your markup renders it.
 */
function DomainSetup() {
  const flow = Domain.useFlow({ domain: "app.example.com", requirements });
  const writes = flow.plan === null ? [] : Plan.writes(flow.plan);
  return (
    <section>
      <p>{flow.state.connected ? `Connected to ${flow.state.provider}` : "Not connected"}</p>
      {writes.length === 0 ? null : (
        <button onClick={() => flow.provisioning.approve()} type="button">
          Add {writes.length} records
        </button>
      )}
    </section>
  );
}

export function DomainSettings() {
  return (
    <DomainKit.Root transport={transport}>
      <DomainSetup />
    </DomainKit.Root>
  );
}

/**
 * Compose the surface yourself from the same hooks `Domain.useFlow` runs. Each takes one options
 * object and returns a controller whose `state` is a tagged union.
 */
export function DomainRow({ domain }: { readonly domain: string }) {
  const connection = Connect.useController({ domain });
  const provisioning = Provision.useController({ domain, requirements });
  const cleanup = Cleanup.useController({ domain });
  const verification = Verify.useController({ domain, polling: true });

  if (!Connect.holdsConnection(connection)) {
    return <ConnectButton controller={connection} />;
  }
  return (
    <section>
      <RecordRows readiness={verification.readiness} records={requirements} />
      <ReviewActions controller={provisioning} />
      <RemoveButton controller={cleanup} />
    </section>
  );
}

/** Mount inside DomainKit.Root on the page an interactive connection returns to. */
export function ConnectionRecovery() {
  const recovery = Connect.useRecovery();
  const accounts = Connect.useAccounts();
  const messages = DomainKit.useMessages();
  const readOnly = DomainKit.useReadOnly();
  const outcome = recovery.outcome;
  if (outcome === null) return null;

  const provider = accounts.providers.find((entry) => entry.id === outcome.provider);
  const name = provider?.name ?? outcome.provider;
  const words =
    outcome.kind === "cancelled"
      ? messages.recoveryCancelled(name)
      : outcome.kind === "restart"
        ? messages.recoveryRestart(name)
        : messages.recoveryInspect(name);
  const method =
    provider === undefined ? undefined : Connect.describeMethods(provider).interactive[0];
  const busy = accounts.state._tag === "Submitting" || accounts.state._tag === "Redirecting";

  return (
    <div role="alert">
      <strong>{words.title}</strong>
      <p>{words.description}</p>
      {outcome.kind === "inspect" || method === undefined || readOnly ? null : (
        <button
          disabled={busy}
          onClick={() => {
            recovery.dismiss();
            if (outcome.connectionId === undefined) {
              accounts.connect({ provider: outcome.provider, method: method.kind });
            } else {
              accounts.reconnect({
                connectionId: outcome.connectionId,
                provider: outcome.provider,
                method: method.kind,
              });
            }
          }}
          type="button"
        >
          {messages.retry}
        </button>
      )}
      <button onClick={recovery.dismiss} type="button">
        {messages.dismissRecovery}
      </button>
    </div>
  );
}

/**
 * One input over those zones. Arrow keys move the highlight, Tab or Enter finishes the name while
 * keeping whatever subdomain was typed in front of the zone, and `found` says which account the
 * records would go to.
 */
export function AddDomainField() {
  const [value, setValue] = useState("");
  const { zones } = Connect.useZones();
  const field = Connect.useDomainField({ onChange: setValue, value, zones });
  return (
    <div>
      <input {...field.inputProps} placeholder="app.example.com" />
      <ul {...field.listboxProps}>
        {field.suggestions.map((zone) => (
          <li key={`${zone.connectionId}:${zone.zone}`} {...field.optionProps(zone)}>
            {zone.zone}
          </li>
        ))}
      </ul>
      <p>{field.found === null ? "Not in a connected account" : field.found.zone.label}</p>
    </div>
  );
}

/** A surface of your own asks which mode it is in. */
export function RemoveDomainButton({ onRemove }: { readonly onRemove: () => void }) {
  const readOnly = DomainKit.useReadOnly();
  if (readOnly) return null;
  return (
    <button onClick={onRemove} type="button">
      Remove this domain
    </button>
  );
}

/** Or narrow one subtree without touching the rest of the page. */
export function ReadOnlySection({ children }: { readonly children: React.ReactNode }) {
  return <DomainKit.ReadOnly value={true}>{children}</DomainKit.ReadOnly>;
}

/** A failure keeps the `DomainKit.Error`, so read `reason`, `category`, and `isRetryable`. */
export function ConnectionProblem({ domain }: { readonly domain: string }) {
  const describe = Outcome.useDescribe();
  const connection = Connect.useController({ domain });
  const state = connection.state;
  if (state._tag !== "Failure") return null;
  const words = describe(state.error, {
    ...(state.attempt === null
      ? {}
      : { provider: Connect.displayName(connection, state.attempt.provider) }),
  });
  return (
    <div role="alert">
      <strong>{words.title}</strong>
      <p>{words.description}</p>
      {state.error.isRetryable ? (
        <button onClick={connection.retry} type="button">
          Try again
        </button>
      ) : null}
    </div>
  );
}