import { useT } from "../../i18n";
import { toast } from "../../dialogs";
import { Icon } from "../Icon";
import { useFetch } from "../../hooks";
import type { Info } from "../../types";

/** How to install and use the terminal client. */
export function CliInstall() {
  const t = useT();
  const prebuilt = useFetch<Info>("/info").data?.cli_builds ?? false;
  const cmd = prebuilt
    ? `curl -fsSL ${location.origin}/cli/install.sh | sh`
    : "cargo install --locked --git https://git.familie-zink.org/zink/codecraft codecraft-cli";
  const copy = (s: string) => navigator.clipboard.writeText(s).then(() => toast(t("tokens.copied"), "success"));
  return (
    <div className="panel">
      <h3>
        <Icon name="terminal" /> {t("cli.title")}
      </h3>
      <div className="hint" style={{ marginBottom: 10 }}>
        {t("cli.intro")}
      </div>
      <ol className="cli-steps">
        <li>
          {t(prebuilt ? "cli.step1" : "cli.step1Source")}
          <div className="row" style={{ gap: 6, marginTop: 4 }}>
            <code className="token-value">{cmd}</code>
            <button className="small" onClick={() => copy(cmd)}>
              <Icon name="copy" /> {t("tokens.copy")}
            </button>
          </div>
        </li>
        <li>
          {t("cli.step2")}
          <div className="row" style={{ gap: 6, marginTop: 4 }}>
            <code className="token-value">{`codecraft login ${location.origin}`}</code>
            <button className="small" onClick={() => copy(`codecraft login ${location.origin}`)}>
              <Icon name="copy" /> {t("tokens.copy")}
            </button>
          </div>
        </li>
        <li>{t("cli.step3")}</li>
      </ol>
      {prebuilt && (
        <div className="hint">
          {t("cli.downloads")} <a href="/cli/download/linux-x86_64">Linux x86_64</a> · <a href="/cli/download/linux-aarch64">Linux arm64</a>
        </div>
      )}
    </div>
  );
}