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

export function InstallationSettings({
  connection,
  connected,
  connecting,
}: SettingsConnectionProps) {
  const query = useRuntimeInfoQuery(connection);
  const info = query.data;
  const error = query.isError ? "Could not load installation details." : "";
  return (
    <>
      <section className="settings-section" aria-labelledby="tools-heading">
        <div className="settings-intro">
          <h3 id="tools-heading">Tools</h3>
          <p>
            These tools are included in this installation. Configured services
            have not been tested here; account access and service availability
            can affect a run.
          </p>
        </div>
        <div className="settings-section-body">
          {error && (
            <>
              <p role="alert">{error}</p>
              <Button
                disabled={!connected}
                onClick={() => void query.refetch()}
              >
                Reload installation details
              </Button>
            </>
          )}
          {!info && !error && (connected || connecting) && (
            <LoadingState label="Loading tools and installation…" rows={6} />
          )}
          <ul className="tool-settings-list" aria-label="Tool availability">
            {info?.tools.map((tool) => (
              <li key={tool.id}>
                <div className="tool-setting-title">
                  <h4>{tool.name}</h4>
                  <span className="tool-status" data-status={tool.status}>
                    {tool.status === "available"
                      ? "Available"
                      : tool.status === "configured"
                        ? "Configured"
                        : "Not configured"}
                  </span>
                </div>
                <p>{tool.description}</p>
              </li>
            ))}
          </ul>
        </div>
      </section>
      <section
        className="settings-section"
        aria-labelledby="installation-heading"
      >
        <div className="settings-intro">
          <h3 id="installation-heading">Installation details</h3>
          <p>Your personal Flarebot installation.</p>
        </div>
        <div className="settings-section-body">
          {!info && !error && (connected || connecting) && (
            <LoadingState label="Loading installation details…" rows={4} />
          )}
          {info && (
            <dl className="installation-details">
              <div>
                <dt>Application version</dt>
                <dd>{info.applicationVersion}</dd>
              </div>
              <div>
                <dt>Installation ID</dt>
                <dd>{info.installationId}</dd>
              </div>
              <div>
                <dt>Runtime address</dt>
                <dd>{info.runtimeOrigin}</dd>
              </div>
              <div>
                <dt>Control plane address</dt>
                <dd>{info.controlPlaneOrigin}</dd>
              </div>
            </dl>
          )}
          <p className="muted">
            Update availability and deployment history are not available yet.
          </p>
        </div>
      </section>
    </>
  );
}