import { LoadingState } from "../components/loading-state";
import { Button } from "octane-kumo/components/button";
import { useDomainInfoQuery } from "../runtime/queries/use-domain-info-query";
import type { SettingsConnectionProps } from "../runtime/owner-rpc";

export function DomainSettings({
  connection,
  connected,
  connecting,
}: SettingsConnectionProps) {
  const query = useDomainInfoQuery(connection);
  const info = query.data;
  const error = query.isError ? "Could not load domain settings." : "";
  return (
    <section className="settings-section" aria-labelledby="domain-heading">
      <div className="settings-intro">
        <h3 id="domain-heading">Domain</h3>
        <p>
          A custom domain is optional. Your default workers.dev address remains
          available.
        </p>
      </div>
      <div className="settings-section-body">
        {!info && !error && (connected || connecting) && (
          <LoadingState label="Loading domain…" rows={2} />
        )}
        {error && (
          <>
            <p role="alert">{error}</p>
            <Button disabled={!connected} onClick={() => void query.refetch()}>
              Reload domain settings
            </Button>
          </>
        )}
        {info && (
          <>
            <p>
              {info.origin ? (
                <>
                  Current hostname:{" "}
                  <strong>{new URL(info.origin).hostname}</strong>
                </>
              ) : (
                "Using the default workers.dev address."
              )}
            </p>
            <a href={info.setupUrl}>Configure domain</a>
          </>
        )}
      </div>
    </section>
  );
}