// import { UserProfile, SignedIn, SignedOut, SignInButton } from "@clerk/clerk-react";
import { useTranslate } from "@/utils/i18n";

import SettingGroup from "./SettingGroup";
import SettingSection from "./SettingSection";
import AccessTokenSection from "./AccessTokenSection";
import LocaleSelect from "../LocaleSelect";
import ThemeSelect from "../ThemeSelect";
import { UserSetting_GeneralSetting, UserSetting_GeneralSettingSchema } from "@/types/proto/api/v1/user_service_pb";
import { useAuth } from "@/contexts/AuthContext";
import { create } from "@bufbuild/protobuf";
import { useUpdateUserGeneralSetting } from "@/hooks/useUserQueries";
import { loadLocale } from "@/utils/i18n";
import { loadTheme } from "@/utils/theme";
import SettingRow from "./SettingRow";

const MyAccountSection = () => {
  const t = useTranslate();

  const { currentUser, userGeneralSetting: generalSetting, refetchSettings } = useAuth();
  const { mutate: updateUserGeneralSetting } = useUpdateUserGeneralSetting(currentUser?.name);

  const handleLocaleSelectChange = async (locale: Locale) => {
    loadLocale(locale);
    updateUserGeneralSetting(
      { generalSetting: { locale }, updateMask: ["locale"] },
      { onSuccess: () => refetchSettings() },
    );
  };

  const handleThemeChange = async (theme: string) => {
    loadTheme(theme);
    updateUserGeneralSetting(
      { generalSetting: { theme }, updateMask: ["theme"] },
      { onSuccess: () => refetchSettings() },
    );
  };

  const setting: UserSetting_GeneralSetting =
    generalSetting ||
    create(UserSetting_GeneralSettingSchema, {
      locale: "en",
      memoVisibility: "PRIVATE",
      theme: "system",
    });

  return (
    <SettingSection>
      <SettingGroup title="Clerk Profile">
        <div className="w-full flex justify-center py-4 border border-dashed border-border rounded-lg bg-muted/30">
          {/* Placeholder for Clerk UserProfile */}
          <div className="text-center p-6">
            <p className="text-muted-foreground font-medium">Authentication is managed by Clerk</p>
            <p className="text-xs text-muted-foreground mt-1">(UserProfile component will appear here when Auth is enabled)</p>
          </div>
          {/* <SignedIn>
            <UserProfile
              routing="virtual"
              appearance={{
                elements: {
                  rootBox: "w-full shadow-none",
                  card: "w-full shadow-none border-0 bg-transparent",
                  navbar: "hidden",
                  navbarMobileMenuButton: "hidden",
                  headerTitle: "hidden",
                  headerSubtitle: "hidden",
                }
              }}
            />
          </SignedIn>
          <SignedOut>
            <div className="flex flex-col items-center gap-4 py-8">
              <p className="text-muted-foreground">Please sign in to manage your account.</p>
              <SignInButton mode="modal">
                <Button>Sign In</Button>
              </SignInButton>
            </div>
          </SignedOut> */}
        </div>
      </SettingGroup>

      <SettingGroup title={t("setting.preference")} showSeparator>
        <SettingRow label={t("common.language")}>
          <LocaleSelect value={setting.locale} onChange={handleLocaleSelectChange} />
        </SettingRow>

        <SettingRow label={t("setting.preference-section.theme")}>
          <ThemeSelect value={setting.theme} onValueChange={handleThemeChange} />
        </SettingRow>
      </SettingGroup>

      <SettingGroup title={t("setting.access-token")} showSeparator>
        <AccessTokenSection />
      </SettingGroup>
    </SettingSection>
  );
};

export default MyAccountSection;
