// SPDX-License-Identifier: AGPL-3.0-only
// Copyright 2026-present the Unsloth AI Inc. team. All rights reserved. See /studio/LICENSE.AGPL-3.0

import { Switch } from "@/components/ui/switch";
import {
  type PlusMenuItemId,
  useChatPreferencesStore,
  useChatRuntimeStore,
  usePlusMenuPrefsStore,
} from "@/features/chat";
import { useUserProfileStore } from "@/features/profile";
import { type TranslationKey, useT } from "@/i18n";
import {
  Bookmark02Icon,
  Download01Icon,
  FileDatabaseIcon,
  Folder01Icon,
  McpServerIcon,
  PencilRulerIcon,
  ShieldBanIcon,
} from "@hugeicons/core-free-icons";
import { HugeiconsIcon } from "@hugeicons/react";
import { Columns2Icon } from "lucide-react";
import { useEffect } from "react";
import type { ReactNode } from "react";
import { SettingsRow } from "../components/settings-row";
import { SettingsSection } from "../components/settings-section";

// Adjustable "+" menu items shown in settings, in display order. Icons mirror
// the ones used in the composer + menu itself.
const PLUS_MENU_ICON_CLASS = "size-[18px]";
const PLUS_MENU_SETTINGS: {
  id: PlusMenuItemId;
  labelKey: TranslationKey;
  icon: ReactNode;
}[] = [
  {
    id: "chatWithFiles",
    labelKey: "settings.chat.menu.chatWithFiles",
    icon: (
      <HugeiconsIcon
        icon={FileDatabaseIcon}
        strokeWidth={2}
        className={PLUS_MENU_ICON_CLASS}
      />
    ),
  },
  {
    id: "mcp",
    labelKey: "settings.chat.menu.mcp",
    icon: (
      <HugeiconsIcon
        icon={McpServerIcon}
        strokeWidth={2}
        className={PLUS_MENU_ICON_CLASS}
      />
    ),
  },
  {
    id: "savedPrompts",
    labelKey: "settings.chat.menu.savedPrompts",
    icon: (
      <HugeiconsIcon
        icon={Bookmark02Icon}
        strokeWidth={2}
        className={PLUS_MENU_ICON_CLASS}
      />
    ),
  },
  {
    id: "compareChat",
    labelKey: "settings.chat.menu.compareChat",
    icon: <Columns2Icon className={PLUS_MENU_ICON_CLASS} />,
  },
  {
    id: "exportChat",
    labelKey: "settings.chat.menu.exportChat",
    icon: (
      <HugeiconsIcon
        icon={Download01Icon}
        strokeWidth={2}
        className={PLUS_MENU_ICON_CLASS}
      />
    ),
  },
  {
    id: "canvas",
    labelKey: "settings.chat.artifacts.title",
    icon: (
      <HugeiconsIcon
        icon={PencilRulerIcon}
        strokeWidth={2}
        className={PLUS_MENU_ICON_CLASS}
      />
    ),
  },
  {
    id: "projects",
    labelKey: "shell.navigation.projects",
    icon: (
      <HugeiconsIcon
        icon={Folder01Icon}
        strokeWidth={2}
        className={PLUS_MENU_ICON_CLASS}
      />
    ),
  },
  {
    id: "bypassPermissions",
    labelKey: "settings.general.permissions.bypassLabel",
    icon: (
      <HugeiconsIcon
        icon={ShieldBanIcon}
        strokeWidth={2}
        className={PLUS_MENU_ICON_CLASS}
      />
    ),
  },
];

export function ChatTab() {
  const t = useT();
  const plusPins = usePlusMenuPrefsStore((state) => state.pins);
  const togglePlusPin = usePlusMenuPrefsStore((state) => state.togglePin);
  const autoTitle = useChatRuntimeStore((state) => state.autoTitle);
  const setAutoTitle = useChatRuntimeStore((state) => state.setAutoTitle);
  const showGreetingSloth = useUserProfileStore((s) => s.showGreetingSloth);
  const setShowGreetingSloth = useUserProfileStore(
    (s) => s.setShowGreetingSloth,
  );
  const showCanvasMenuItem = useChatRuntimeStore(
    (state) => state.showCanvasMenuItem,
  );
  const setShowCanvasMenuItem = useChatRuntimeStore(
    (state) => state.setShowCanvasMenuItem,
  );
  const collapseHtmlArtifacts = useChatRuntimeStore(
    (state) => state.collapseHtmlArtifacts,
  );
  const setCollapseHtmlArtifacts = useChatRuntimeStore(
    (state) => state.setCollapseHtmlArtifacts,
  );
  const allowArtifactNetworkAccess = useChatRuntimeStore(
    (state) => state.allowArtifactNetworkAccess,
  );
  const setAllowArtifactNetworkAccess = useChatRuntimeStore(
    (state) => state.setAllowArtifactNetworkAccess,
  );
  const hydratePersistedSettings = useChatRuntimeStore(
    (state) => state.hydratePersistedSettings,
  );
  const expandQuantizations = useChatRuntimeStore(
    (state) => state.expandQuantizations,
  );
  const setExpandQuantizations = useChatRuntimeStore(
    (state) => state.setExpandQuantizations,
  );
  const showAllQuantizations = useChatRuntimeStore(
    (state) => state.showAllQuantizations,
  );
  const setShowAllQuantizations = useChatRuntimeStore(
    (state) => state.setShowAllQuantizations,
  );
  const showModelDisclaimer = useChatPreferencesStore(
    (state) => state.showModelDisclaimer,
  );
  const setShowModelDisclaimer = useChatPreferencesStore(
    (state) => state.setShowModelDisclaimer,
  );
  const showResponseModel = useChatPreferencesStore(
    (state) => state.showResponseModel,
  );
  const setShowResponseModel = useChatPreferencesStore(
    (state) => state.setShowResponseModel,
  );
  const collapseThinkingByDefault = useChatPreferencesStore(
    (state) => state.collapseThinkingByDefault,
  );
  const setCollapseThinkingByDefault = useChatPreferencesStore(
    (state) => state.setCollapseThinkingByDefault,
  );

  useEffect(() => {
    void hydratePersistedSettings();
  }, [hydratePersistedSettings]);

  return (
    <div className="flex flex-col gap-6">
      <header className="flex flex-col gap-1">
        <h1 className="text-xl font-semibold font-heading">
          {t("settings.chat.title")}
        </h1>
        <p className="text-xs text-muted-foreground">
          {t("settings.chat.description")}
        </p>
      </header>

      <SettingsSection title={t("settings.chat.modelSelection.title")}>
        <SettingsRow
          label={t("settings.chat.modelSelection.expandQuantizations")}
          description={t(
            "settings.chat.modelSelection.expandQuantizationsDescription",
          )}
        >
          <Switch
            checked={expandQuantizations}
            onCheckedChange={setExpandQuantizations}
          />
        </SettingsRow>
        <SettingsRow
          label={t("settings.chat.modelSelection.showAllQuantizations")}
          description={t(
            "settings.chat.modelSelection.showAllQuantizationsDescription",
          )}
        >
          <Switch
            checked={showAllQuantizations}
            onCheckedChange={setShowAllQuantizations}
          />
        </SettingsRow>
      </SettingsSection>

      <SettingsSection
        title={t("settings.chat.menu.title")}
        description={t("settings.chat.menu.description")}
      >
        {PLUS_MENU_SETTINGS.map((item) => (
          <SettingsRow key={item.id} label={t(item.labelKey)} icon={item.icon}>
            {/* Canvas toggles menu visibility; the rest toggle pin placement. */}
            <Switch
              checked={
                item.id === "canvas" ? showCanvasMenuItem : plusPins[item.id]
              }
              onCheckedChange={
                item.id === "canvas"
                  ? setShowCanvasMenuItem
                  : () => togglePlusPin(item.id)
              }
            />
          </SettingsRow>
        ))}
      </SettingsSection>

      <SettingsSection title={t("settings.general.chatDefaults")}>
        <SettingsRow
          label={t("settings.chat.thinking.collapseByDefault")}
          description={t("settings.chat.thinking.collapseByDefaultDescription")}
        >
          <Switch
            checked={collapseThinkingByDefault}
            onCheckedChange={setCollapseThinkingByDefault}
          />
        </SettingsRow>
        <SettingsRow
          label={t("settings.chat.modelDisclaimer")}
          description={t("settings.chat.modelDisclaimerDescription")}
        >
          <Switch
            checked={showModelDisclaimer}
            onCheckedChange={setShowModelDisclaimer}
          />
        </SettingsRow>
        <SettingsRow
          label={t("settings.chat.showResponseModel")}
          description={t("settings.chat.showResponseModelDescription")}
        >
          <Switch
            checked={showResponseModel}
            onCheckedChange={setShowResponseModel}
          />
        </SettingsRow>
        <SettingsRow
          label={t("settings.general.autoTitleNewChats")}
          description={t("settings.general.autoTitleNewChatsDescription")}
        >
          <Switch checked={autoTitle} onCheckedChange={setAutoTitle} />
        </SettingsRow>
        <SettingsRow
          label={t("settings.profile.greetingSloth")}
          description={t("settings.profile.greetingSlothDescription")}
        >
          <Switch
            id="profile-greeting-sloth"
            checked={showGreetingSloth}
            onCheckedChange={setShowGreetingSloth}
          />
        </SettingsRow>
      </SettingsSection>

      <SettingsSection title={t("settings.chat.artifacts.title")}>
        <SettingsRow
          label={t("settings.chat.artifacts.collapseHtmlBlocks")}
          description={t(
            "settings.chat.artifacts.collapseHtmlBlocksDescription",
          )}
        >
          <Switch
            checked={collapseHtmlArtifacts}
            onCheckedChange={setCollapseHtmlArtifacts}
          />
        </SettingsRow>
        <SettingsRow
          label={t("settings.chat.artifacts.allowNetworkAccess")}
          description={t(
            "settings.chat.artifacts.allowNetworkAccessDescription",
          )}
        >
          <Switch
            checked={allowArtifactNetworkAccess}
            onCheckedChange={setAllowArtifactNetworkAccess}
          />
        </SettingsRow>
      </SettingsSection>
    </div>
  );
}
