import { Button } from "@repo/shadcn-ui/components/button";
import { FormDialog } from "@repo/shadcn-ui/components/form-dialog";
import { useQuery } from "@tanstack/react-query";
import { useState } from "react";
import { useTranslation } from "react-i18next";

import type { SupportToolDTO } from "../common/support";

import { supportApi, supportKeys } from "./support-api";
import { SupportToolForm } from "./support-tool-form";
export function SupportTools({ csrfToken }: { csrfToken: string }) {
  const { t } = useTranslation("assets");
  const query = useQuery({ queryKey: supportKeys.tools, queryFn: () => supportApi.tools() });
  const [edit, setEdit] = useState<SupportToolDTO | undefined>();
  const [open, setOpen] = useState(false);
  return (
    <div className="space-y-4">
      <header className="flex justify-end">
        <Button
          onClick={() => {
            setEdit(undefined);
            setOpen(true);
          }}
        >
          {t("support.newTool")}
        </Button>
      </header>
      {query.isPending && <p role="status">{t("support.loading")}</p>}
      {query.isError && (
        <div role="alert">
          <p>{t("support.loadError")}</p>
          <Button
            onClick={() => {
              query.refetch().catch(() => undefined);
            }}
            variant="outline"
          >
            {t("retry")}
          </Button>
        </div>
      )}
      <ul className="divide-y">
        {query.data?.tools.map((tool) => (
          <li className="flex items-center justify-between gap-3 py-3" key={tool.id}>
            <span>
              {tool.name} · {t(tool.active ? "support.active" : "inactive")}
              {tool.builtin ? ` · ${t("support.builtin")}` : ""}
            </span>
            <Button
              onClick={() => {
                setEdit(tool);
                setOpen(true);
              }}
              variant="outline"
            >
              {t("edit")}
            </Button>
          </li>
        ))}
      </ul>
      <FormDialog
        cancelLabel={t("cancel")}
        formActions
        onOpenChange={setOpen}
        open={open}
        title={t(edit ? "support.editTool" : "support.newTool")}
      >
        <SupportToolForm
          csrfToken={csrfToken}
          key={edit?.id ?? "new"}
          {...(edit ? { tool: edit } : {})}
          onSaved={() => setOpen(false)}
        />
      </FormDialog>
    </div>
  );
}