import { Button } from "@repo/shadcn-ui/components/button";
import {
  EntityAction,
  EntityListHeader,
  EntityRowActions,
  EntityStatus,
  EntityTable,
} from "@repo/shadcn-ui/components/entity-list";
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 { SupportToolEditorDialog } from "./support-tool-editor-dialog";
export function SupportTools({ csrfToken }: { csrfToken: string }) {
  const { t, i18n } = 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">
      <EntityListHeader
        actions={
          <>
            {" "}
            <Button
              onClick={() => {
                setEdit(undefined);
                setOpen(true);
              }}
            >
              {t("support.newTool")}
            </Button>{" "}
          </>
        }
        locale={i18n.language}
        title={t("support.tools")}
      />
      {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>
      )}
      <EntityTable
        columns={[
          {
            id: "name",
            label: t("name"),
            value: (tool) => tool.name,
            hideable: false,
            render: (tool) => <span className="font-medium">{tool.name}</span>,
          },
          {
            id: "state",
            label: t("status"),
            value: (tool) => tool.active,
            render: (tool) => (
              <EntityStatus active={tool.active}>
                {t(tool.active ? "support.active" : "inactive")}
              </EntityStatus>
            ),
          },
          {
            id: "origin",
            label: t("origin"),
            value: (tool) => tool.builtin,
            render: (tool) => <>{t(tool.builtin ? "support.builtin" : "custom")}</>,
          },
          {
            id: "actions",
            label: t("actions"),
            hideable: false,
            render: (tool) => (
              <EntityRowActions label={t("actions")}>
                <EntityAction
                  onClick={() => {
                    setEdit(tool);
                    setOpen(true);
                  }}
                >
                  {t("edit")}
                </EntityAction>
              </EntityRowActions>
            ),
          },
        ]}
        items={query.data?.tools ?? []}
        loading={query.isPending}
        locale={i18n.language}
        title={t("support.tools")}
        unavailable={query.isError}
      />
      <SupportToolEditorDialog
        csrfToken={csrfToken}
        edit={edit}
        onOpenChange={setOpen}
        onSaved={() => setOpen(false)}
        open={open}
      />
    </div>
  );
}