import { Trans, useLingui } from "@lingui/react/macro";
import { Checkbox, Input, Switch } from "@rakazo/ui-web";
import { useId } from "react";

/** Capability tags and the builtin tool allowlist of one bot, edited inside its settings. */
export function BotCapabilitiesFields({
  tags,
  onTagsChange,
  restrictBuiltinTools,
  onRestrictBuiltinToolsChange,
  allowedBuiltinTools,
  onAllowedBuiltinToolsChange,
  toolNames,
}: {
  tags: string;
  onTagsChange: (tags: string) => void;
  restrictBuiltinTools: boolean;
  onRestrictBuiltinToolsChange: (restrict: boolean) => void;
  allowedBuiltinTools: string[];
  onAllowedBuiltinToolsChange: (names: string[]) => void;
  toolNames: string[];
}) {
  const { t } = useLingui();
  const ids = useId();
  return (
    <div data-testid="bot-capabilities">
      <label htmlFor={`${ids}-tags`} className="mt-4 block text-ui-body text-muted-foreground">
        <Trans>Tags</Trans>
        <Input
          id={`${ids}-tags`}
          value={tags}
          onChange={(event) => onTagsChange(event.target.value)}
          placeholder={t`research, writing`}
          className="mt-2"
        />
      </label>
      <label
        htmlFor={`${ids}-restrict-tools`}
        className="mt-5 flex cursor-pointer items-center gap-3 text-ui-body text-muted-foreground"
      >
        <Switch
          id={`${ids}-restrict-tools`}
          checked={restrictBuiltinTools}
          onCheckedChange={onRestrictBuiltinToolsChange}
        />
        <span id={`${ids}-restrict-tools-label`}>
          <Trans>Limit built-in tools</Trans>
        </span>
      </label>
      {restrictBuiltinTools ? (
        <fieldset
          aria-labelledby={`${ids}-restrict-tools-label`}
          className="rk-scroll mt-2 max-h-56 min-w-0 overflow-y-auto rounded-xl border border-border p-1.5"
        >
          {toolNames.map((name) => (
            <label
              key={name}
              htmlFor={`${ids}-tool-${name}`}
              className="flex cursor-pointer items-center gap-2.5 rounded-lg px-2 py-1.5 font-mono text-ui-body-sm text-muted-foreground hover:bg-accent hover:text-accent-foreground"
            >
              <Checkbox
                id={`${ids}-tool-${name}`}
                checked={allowedBuiltinTools.includes(name)}
                onCheckedChange={(checked) =>
                  onAllowedBuiltinToolsChange(
                    checked
                      ? toolNames.filter(
                          (tool) => tool === name || allowedBuiltinTools.includes(tool),
                        )
                      : allowedBuiltinTools.filter((allowed) => allowed !== name),
                  )
                }
              />
              {name}
            </label>
          ))}
        </fieldset>
      ) : null}
    </div>
  );
}