import { LanguageSwitcher } from "@/components/language-switcher";
import { useAuth } from "@/hooks/use-auth";
import { api } from "@/lib/api-client";
import { signIn } from "@/lib/auth-client";
import { useTranslation } from "@/lib/i18n";
import { capture } from "@/lib/posthog";
import { toast } from "@/lib/toast";
import { getUserSettings, setUserSetting } from "@/lib/user-settings";
import { Button } from "@sase/ui";
import { Input } from "@sase/ui";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@sase/ui";
import { Label } from "@sase/ui";
import { Separator } from "@sase/ui";
import { Badge } from "@sase/ui";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@sase/ui";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@sase/ui";
import { Skeleton } from "@sase/ui";
import { useQuery } from "@tanstack/react-query";
import {
  AlertTriangle,
  Bell,
  Copy,
  Eye,
  EyeOff,
  Gift,
  Link2,
  Monitor,
  Moon,
  Share2,
  Shield,
  SlidersHorizontal,
  Sun,
  Trash2,
  User,
} from "lucide-react";
import { useEffect, useState } from "react";

const TAB_ITEMS = [
  { value: "profile", icon: User, labelKey: "settings.tabs.profile" },
  { value: "preferences", icon: SlidersHorizontal, labelKey: "settings.tabs.preferences" },
  { value: "notifications", icon: Bell, labelKey: "settings.tabs.notifications" },
  { value: "security", icon: Shield, labelKey: "settings.tabs.security" },
  { value: "connections", icon: Link2, labelKey: "settings.tabs.connections" },
  { value: "referral", icon: Gift, labelKey: "settings.tabs.referral" },
  { value: "account", icon: Trash2, labelKey: "settings.tabs.account" },
] as const;

/**
 * UI categories rendered by the Notifications tab. Each maps to a bundle of
 * underlying workflows on the server — see
 * `apps/api/src/notifications/email-preferences.service.ts
 *  NOTIFICATION_CATEGORIES`. We render two switches, not six, because users
 * care about "e-mail vs mobile" not "did the day-3 referral mail fire".
 *
 * The API also returns each category's label so the server is the source of
 * truth for copy; the static fallback below just avoids a flash of untitled
 * rows before the GET completes.
 */
type NotificationCategoryKey = "email_marketing" | "mobile_push";

const FALLBACK_CATEGORY_LABEL: Record<NotificationCategoryKey, string> = {
  email_marketing: "E-posta bildirimleri",
  mobile_push: "Mobil Bildirim",
};

interface NotificationPref {
  category: NotificationCategoryKey;
  label: string;
  optedOut: boolean;
}

type ThemePref = "light" | "dark" | "system";

const THEME_OPTIONS: { value: ThemePref; icon: typeof Sun; labelKey: string }[] = [
  { value: "light", icon: Sun, labelKey: "settings.preferences.themeLight" },
  { value: "dark", icon: Moon, labelKey: "settings.preferences.themeDark" },
  { value: "system", icon: Monitor, labelKey: "settings.preferences.themeSystem" },
];

function applyTheme(theme: ThemePref) {
  const isDark =
    theme === "dark" ||
    (theme === "system" && window.matchMedia("(prefers-color-scheme: dark)").matches);
  document.documentElement.classList.toggle("dark", isDark);
}

function PasswordField({
  id,
  label,
  value,
  onChange,
  required,
  minLength,
  hint,
  error,
}: {
  id: string;
  label: string;
  value: string;
  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
  required?: boolean;
  minLength?: number;
  hint?: string;
  error?: string;
}) {
  const { t } = useTranslation();
  const [show, setShow] = useState(false);
  return (
    <div className="space-y-2">
      <Label htmlFor={id}>{label}</Label>
      <div className="relative">
        <Input
          id={id}
          type={show ? "text" : "password"}
          value={value}
          onChange={onChange}
          required={required}
          minLength={minLength}
          aria-invalid={error ? true : undefined}
          aria-describedby={hint || error ? `${id}-hint` : undefined}
          className="pr-10"
        />
        <button
          type="button"
          onClick={() => setShow((s) => !s)}
          aria-label={
            show ? t("settings.security.hidePassword") : t("settings.security.showPassword")
          }
          className="absolute right-2 top-1/2 -translate-y-1/2 rounded p-1 text-muted-foreground transition-colors hover:text-foreground"
        >
          {show ? <EyeOff className="size-4" /> : <Eye className="size-4" />}
        </button>
      </div>
      {error ? (
        <p id={`${id}-hint`} className="text-xs text-destructive">
          {error}
        </p>
      ) : hint ? (
        <p id={`${id}-hint`} className="text-xs text-muted-foreground">
          {hint}
        </p>
      ) : null}
    </div>
  );
}

export function SettingsContent({
  tab,
  onTabChange,
}: {
  tab: string;
  onTabChange: (next: string) => void;
}) {
  const { t, locale } = useTranslation();
  const { user, signOut } = useAuth();

  // Profile state
  const [name, setName] = useState(user?.name || "");
  const [savingProfile, setSavingProfile] = useState(false);

  // Security state
  const [currentPassword, setCurrentPassword] = useState("");
  const [newPassword, setNewPassword] = useState("");
  const [confirmPassword, setConfirmPassword] = useState("");
  const [changingPassword, setChangingPassword] = useState(false);

  // Account deletion state
  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
  const [deleteConfirmText, setDeleteConfirmText] = useState("");
  const [deleting, setDeleting] = useState(false);

  // Referral stats
  const { data: referralStats, isLoading: referralLoading } = useQuery({
    queryKey: ["referral-stats"],
    queryFn: () => api.get<{ totalReferrals: number; rewardDays: number }>("/referrals/stats"),
    retry: false,
  });

  // Google connection status
  const { data: connections, isLoading: connectionsLoading } = useQuery({
    queryKey: ["connections"],
    queryFn: () => api.get<{ google: boolean }>("/users/me/connections"),
    retry: false,
  });

  const passwordMismatch = confirmPassword.length > 0 && newPassword !== confirmPassword;

  // Appearance
  const [theme, setTheme] = useState<ThemePref>(() => getUserSettings().theme ?? "dark");

  function selectTheme(next: ThemePref) {
    setTheme(next);
    setUserSetting("theme", next);
    applyTheme(next);
  }

  useEffect(() => {
    if (user?.name) setName(user.name);
  }, [user?.name]);

  async function handleUpdateProfile(e: React.FormEvent) {
    e.preventDefault();
    setSavingProfile(true);
    try {
      await api.patch("/users/me", { name });
      toast.success(t("settings.profile.updated"));
    } catch {
      toast.error(t("settings.profile.updateFailed"));
    } finally {
      setSavingProfile(false);
    }
  }

  async function handleChangePassword(e: React.FormEvent) {
    e.preventDefault();
    if (newPassword !== confirmPassword) {
      toast.error(t("auth.passwordsDoNotMatch"));
      return;
    }
    setChangingPassword(true);
    try {
      await api.post("/users/me/change-password", {
        currentPassword,
        newPassword,
      });
      toast.success(t("auth.passwordChanged"));
      setCurrentPassword("");
      setNewPassword("");
      setConfirmPassword("");
    } catch {
      toast.error(t("auth.passwordChangeFailed"));
    } finally {
      setChangingPassword(false);
    }
  }

  async function handleLinkGoogle() {
    try {
      await signIn.social({ provider: "google" });
      toast.success(t("settings.connections.linkSuccess"));
    } catch {
      toast.error(t("settings.connections.linkFailed"));
    }
  }

  async function handleUnlinkGoogle() {
    try {
      await api.delete("/users/me/connections/google");
      toast.success(t("settings.connections.unlinkSuccess"));
    } catch {
      toast.error(t("errors.generic"));
    }
  }

  async function handleDeleteAccount() {
    if (deleteConfirmText !== t("settings.account.confirmWord")) return;
    setDeleting(true);
    try {
      await api.delete("/users/me");
      toast.success(t("settings.account.deleted"));
      capture("user_logged_out", { reason: "account_deleted" });
      signOut();
    } catch {
      toast.error(t("settings.account.deleteFailed"));
    } finally {
      setDeleting(false);
    }
  }

  function copyReferralCode() {
    if (user?.referralCode) {
      navigator.clipboard.writeText(user.referralCode);
      toast.success(t("settings.referral.codeCopied"));
    }
  }

  function copyShareLink() {
    if (user?.referralCode) {
      const link = `${window.location.origin}/register?ref=${user.referralCode}`;
      navigator.clipboard.writeText(link);
      toast.success(t("settings.referral.linkCopied"));
    }
  }

  return (
    <div className="mx-auto max-w-3xl space-y-6">
      <h2 className="text-2xl font-bold">{t("settings.title")}</h2>

      <Tabs
        value={tab}
        onValueChange={onTabChange}
        className="lg:grid lg:grid-cols-[210px_1fr] lg:items-start lg:gap-8"
      >
        <TabsList className="-mx-1 mb-2 flex w-full justify-start gap-1 overflow-x-auto px-1 lg:mx-0 lg:mb-0 lg:h-auto lg:flex-col lg:items-stretch lg:bg-transparent lg:p-0">
          {TAB_ITEMS.map(({ value, icon: Icon, labelKey }) => (
            <TabsTrigger
              key={value}
              value={value}
              className="shrink-0 gap-2 lg:w-full lg:justify-start lg:px-3 lg:py-2"
            >
              <Icon className="h-4 w-4" />
              <span>{t(labelKey)}</span>
            </TabsTrigger>
          ))}
        </TabsList>

        <div className="min-w-0">
          {/* Profile Tab */}
          <TabsContent value="profile">
            <Card>
              <CardHeader>
                <CardTitle>{t("settings.profile.title")}</CardTitle>
                <CardDescription>{t("settings.profile.description")}</CardDescription>
              </CardHeader>
              <CardContent>
                <form onSubmit={handleUpdateProfile} className="space-y-4">
                  <div className="space-y-2">
                    <Label htmlFor="name">{t("settings.profile.name")}</Label>
                    <Input id="name" value={name} onChange={(e) => setName(e.target.value)} />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="email">{t("settings.profile.email")}</Label>
                    <Input id="email" value={user?.email || ""} disabled />
                  </div>
                  {user?.createdAt && (
                    <div className="space-y-2">
                      <Label htmlFor="memberSince">{t("settings.profile.memberSince")}</Label>
                      <Input
                        id="memberSince"
                        value={new Date(user.createdAt).toLocaleDateString(
                          locale === "tr" ? "tr-TR" : "en-US",
                          { day: "numeric", month: "long", year: "numeric" },
                        )}
                        disabled
                      />
                    </div>
                  )}
                  <Button type="submit" disabled={savingProfile}>
                    {savingProfile ? t("common.saving") : t("common.save")}
                  </Button>
                </form>
              </CardContent>
            </Card>
          </TabsContent>

          {/* Preferences Tab */}
          {/* Notifications Tab (audit §9.3 #14) */}
          <TabsContent value="notifications">
            <NotificationsCard />
          </TabsContent>

          <TabsContent value="preferences">
            <Card>
              <CardHeader>
                <CardTitle>{t("settings.preferences.title")}</CardTitle>
                <CardDescription>{t("settings.preferences.description")}</CardDescription>
              </CardHeader>
              <CardContent className="space-y-6">
                <fieldset className="space-y-2">
                  <legend className="mb-2 text-sm font-medium">
                    {t("settings.preferences.theme")}
                  </legend>
                  <div className="grid grid-cols-3 gap-2 sm:max-w-md">
                    {THEME_OPTIONS.map(({ value, icon: Icon, labelKey }) => (
                      <button
                        key={value}
                        type="button"
                        onClick={() => selectTheme(value)}
                        aria-pressed={theme === value}
                        className={`flex flex-col items-center gap-2 rounded-lg border p-3 text-sm font-medium transition-colors ${
                          theme === value
                            ? "border-brand bg-brand/10 text-foreground"
                            : "border-border text-muted-foreground hover:bg-accent hover:text-foreground"
                        }`}
                      >
                        <Icon className="size-5" />
                        {t(labelKey)}
                      </button>
                    ))}
                  </div>
                </fieldset>

                <Separator />

                <div className="space-y-2">
                  <Label>{t("settings.preferences.language")}</Label>
                  <LanguageSwitcher variant="inline" />
                </div>
              </CardContent>
            </Card>
          </TabsContent>

          {/* Security Tab */}
          <TabsContent value="security">
            <Card>
              <CardHeader>
                <CardTitle>{t("settings.security.title")}</CardTitle>
                <CardDescription>{t("settings.security.description")}</CardDescription>
              </CardHeader>
              <CardContent>
                <form onSubmit={handleChangePassword} className="space-y-4">
                  <PasswordField
                    id="currentPassword"
                    label={t("settings.security.currentPassword")}
                    value={currentPassword}
                    onChange={(e) => setCurrentPassword(e.target.value)}
                    required
                  />
                  <PasswordField
                    id="newPassword"
                    label={t("settings.security.newPassword")}
                    value={newPassword}
                    onChange={(e) => setNewPassword(e.target.value)}
                    required
                    minLength={8}
                    hint={t("settings.security.passwordHint")}
                  />
                  <PasswordField
                    id="confirmPassword"
                    label={t("settings.security.confirmPassword")}
                    value={confirmPassword}
                    onChange={(e) => setConfirmPassword(e.target.value)}
                    required
                    minLength={8}
                    error={passwordMismatch ? t("auth.passwordsDoNotMatch") : undefined}
                  />
                  <Button type="submit" disabled={changingPassword || passwordMismatch}>
                    {changingPassword
                      ? t("settings.security.changing")
                      : t("settings.security.changePassword")}
                  </Button>
                </form>
              </CardContent>
            </Card>
          </TabsContent>

          {/* Connections Tab */}
          <TabsContent value="connections">
            <Card>
              <CardHeader>
                <CardTitle>{t("settings.connections.title")}</CardTitle>
                <CardDescription>{t("settings.connections.description")}</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="flex items-center justify-between rounded-lg border p-4">
                  <div className="flex items-center gap-3">
                    <div className="flex h-10 w-10 items-center justify-center rounded-full bg-muted">
                      <svg className="h-5 w-5" viewBox="0 0 24 24" role="img" aria-label="Google">
                        <path
                          d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 01-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z"
                          fill="#4285F4"
                        />
                        <path
                          d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
                          fill="#34A853"
                        />
                        <path
                          d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
                          fill="#FBBC05"
                        />
                        <path
                          d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
                          fill="#EA4335"
                        />
                      </svg>
                    </div>
                    <div>
                      <p className="font-medium">{t("settings.connections.google")}</p>
                      {connectionsLoading ? (
                        <Skeleton className="mt-1 h-5 w-20" />
                      ) : (
                        <Badge variant={connections?.google ? "default" : "secondary"}>
                          {connections?.google
                            ? t("settings.connections.linked")
                            : t("settings.connections.notLinked")}
                        </Badge>
                      )}
                    </div>
                  </div>
                  <div>
                    {connectionsLoading ? (
                      <Skeleton className="h-8 w-24" />
                    ) : connections?.google ? (
                      <Button variant="outline" size="sm" onClick={handleUnlinkGoogle}>
                        {t("settings.connections.unlink")}
                      </Button>
                    ) : (
                      <Button size="sm" onClick={handleLinkGoogle}>
                        {t("settings.connections.link")}
                      </Button>
                    )}
                  </div>
                </div>
              </CardContent>
            </Card>
          </TabsContent>

          {/* Referral Tab */}
          <TabsContent value="referral">
            <Card>
              <CardHeader>
                <CardTitle>{t("settings.referral.title")}</CardTitle>
                <CardDescription>{t("settings.referral.description")}</CardDescription>
              </CardHeader>
              <CardContent className="space-y-6">
                {user?.referralCode ? (
                  <>
                    {/* Referral Code */}
                    <div className="space-y-2">
                      <Label htmlFor="referralCode">{t("settings.referral.yourCode")}</Label>
                      <div className="flex items-center gap-3">
                        <Input
                          id="referralCode"
                          value={user.referralCode}
                          readOnly
                          className="font-mono text-lg"
                        />
                        <Button variant="outline" size="icon" onClick={copyReferralCode}>
                          <Copy className="h-4 w-4" />
                        </Button>
                      </div>
                    </div>

                    {/* Share Link */}
                    <div className="space-y-2">
                      <Label htmlFor="shareLink">{t("settings.referral.shareLink")}</Label>
                      <div className="flex items-center gap-3">
                        <Input
                          id="shareLink"
                          value={`${window.location.origin}/register?ref=${user.referralCode}`}
                          readOnly
                          className="text-sm"
                        />
                        <Button variant="outline" size="icon" onClick={copyShareLink}>
                          <Share2 className="h-4 w-4" />
                        </Button>
                      </div>
                    </div>

                    <Separator />

                    {/* Referral Stats */}
                    <div>
                      <h4 className="mb-3 font-medium">{t("settings.referral.stats")}</h4>
                      <div className="grid grid-cols-2 gap-4">
                        <div className="rounded-lg bg-muted/50 py-4 text-center">
                          {referralLoading ? (
                            <Skeleton className="mx-auto h-9 w-12" />
                          ) : (
                            <p className="text-3xl font-bold tabular-nums">
                              {referralStats?.totalReferrals ?? 0}
                            </p>
                          )}
                          <p className="text-sm text-muted-foreground">
                            {t("settings.referral.totalReferrals")}
                          </p>
                        </div>
                        <div className="rounded-lg bg-muted/50 py-4 text-center">
                          {referralLoading ? (
                            <Skeleton className="mx-auto h-9 w-12" />
                          ) : (
                            <p className="text-3xl font-bold tabular-nums">
                              {referralStats?.rewardDays ?? 0}
                            </p>
                          )}
                          <p className="text-sm text-muted-foreground">
                            {t("settings.referral.rewardDays")}
                          </p>
                        </div>
                      </div>
                    </div>
                  </>
                ) : (
                  <p className="text-sm text-muted-foreground">{t("settings.referral.noCode")}</p>
                )}
              </CardContent>
            </Card>
          </TabsContent>

          {/* Account Tab */}
          <TabsContent value="account">
            <Card className="border-destructive/50">
              <CardHeader>
                <CardTitle className="flex items-center gap-2 text-destructive">
                  <AlertTriangle className="h-5 w-5" />
                  {t("settings.account.title")}
                </CardTitle>
                <CardDescription>{t("settings.account.description")}</CardDescription>
              </CardHeader>
              <CardContent>
                <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
                  <DialogTrigger asChild>
                    <Button variant="destructive">
                      <Trash2 className="mr-2 h-4 w-4" />
                      {t("settings.account.deleteAccount")}
                    </Button>
                  </DialogTrigger>
                  <DialogContent>
                    <DialogHeader>
                      <DialogTitle>{t("settings.account.deleteConfirmTitle")}</DialogTitle>
                      <DialogDescription>
                        {t("settings.account.deleteConfirmDescription")}
                      </DialogDescription>
                    </DialogHeader>
                    <div className="space-y-2">
                      <Label htmlFor="deleteConfirm">{t("settings.account.typeConfirm")}</Label>
                      <Input
                        id="deleteConfirm"
                        value={deleteConfirmText}
                        onChange={(e) => setDeleteConfirmText(e.target.value)}
                        autoComplete="off"
                      />
                    </div>
                    <DialogFooter>
                      <Button
                        variant="outline"
                        onClick={() => {
                          setDeleteDialogOpen(false);
                          setDeleteConfirmText("");
                        }}
                      >
                        {t("common.cancel")}
                      </Button>
                      <Button
                        variant="destructive"
                        onClick={handleDeleteAccount}
                        disabled={
                          deleteConfirmText !== t("settings.account.confirmWord") || deleting
                        }
                      >
                        {deleting
                          ? t("settings.account.deleting")
                          : t("settings.account.deleteAccount")}
                      </Button>
                    </DialogFooter>
                  </DialogContent>
                </Dialog>
              </CardContent>
            </Card>
          </TabsContent>
        </div>
      </Tabs>
    </div>
  );
}

/**
 * Per-workflow opt-out toggles for the lifecycle / engagement e-mails.
 * Pure presentation — heavy lifting (HMAC token, audit row) is on the API
 * side. Auth + payment mail is unaffected (`OPTIONAL_WORKFLOWS` on the
 * server is the canonical list).
 */
function NotificationsCard() {
  const { t } = useTranslation();
  const [prefs, setPrefs] = useState<NotificationPref[] | null>(null);
  const [pending, setPending] = useState<Set<NotificationCategoryKey>>(new Set());
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    let cancelled = false;
    api
      .get<NotificationPref[]>("/email/preferences")
      .then((data) => {
        if (!cancelled) setPrefs(data);
      })
      .catch((err) => {
        if (!cancelled) setError((err as Error).message || "Hata");
      });
    return () => {
      cancelled = true;
    };
  }, []);

  async function toggle(category: NotificationCategoryKey, currentlyOptedOut: boolean) {
    const nextOptedOut = !currentlyOptedOut;
    // Optimistic update — flip the local row immediately so the switch feels
    // instant; revert on failure.
    setPrefs((cur) =>
      cur
        ? cur.map((p) => (p.category === category ? { ...p, optedOut: nextOptedOut } : p))
        : cur,
    );
    setPending((s) => new Set(s).add(category));
    try {
      await api.post("/email/preferences", { category, optedOut: nextOptedOut });
      capture(nextOptedOut ? "notifications_category_opted_out" : "notifications_category_opted_in", {
        category,
      });
      toast.success(nextOptedOut ? "Bildirim kapatıldı." : "Bildirim açıldı.");
    } catch (err) {
      setPrefs((cur) =>
        cur
          ? cur.map((p) =>
              p.category === category ? { ...p, optedOut: currentlyOptedOut } : p,
            )
          : cur,
      );
      toast.error((err as Error).message || "Güncellenemedi");
    } finally {
      setPending((s) => {
        const ns = new Set(s);
        ns.delete(category);
        return ns;
      });
    }
  }

  // Show two rows regardless of API state: keys are stable, so we render the
  // skeleton in their slots until the GET resolves.
  const categoryKeys: NotificationCategoryKey[] = ["email_marketing", "mobile_push"];

  return (
    <Card>
      <CardHeader>
        <CardTitle>{t("settings.notifications.title")}</CardTitle>
        <CardDescription>{t("settings.notifications.description")}</CardDescription>
      </CardHeader>
      <CardContent className="space-y-4">
        {error ? (
          <p className="text-sm text-destructive">{error}</p>
        ) : (
          categoryKeys.map((key) => {
            const row = prefs?.find((p) => p.category === key);
            const isLoading = prefs === null;
            if (isLoading) {
              return <Skeleton key={key} className="h-20 w-full" />;
            }
            const label = row?.label ?? FALLBACK_CATEGORY_LABEL[key];
            const optedOut = row?.optedOut ?? false;
            const isPending = pending.has(key);
            return (
              <div
                key={key}
                className="flex items-center justify-between gap-4 rounded-lg border p-4"
              >
                <p className="min-w-0 flex-1 text-sm font-medium">{label}</p>
                <Button
                  type="button"
                  variant={optedOut ? "outline" : "default"}
                  size="sm"
                  disabled={isPending}
                  onClick={() => toggle(key, optedOut)}
                  aria-pressed={!optedOut}
                  aria-label={`${label}: ${optedOut ? "kapalı" : "açık"}`}
                >
                  {isPending ? "…" : optedOut ? "Kapalı" : "Açık"}
                </Button>
              </div>
            );
          })
        )}
        <p className="text-xs text-muted-foreground">
          Doğrulama, şifre sıfırlama ve ödeme bildirimleri buradan kapatılamaz — hesabını
          yönetebilmen için gerekli.
        </p>
      </CardContent>
    </Card>
  );
}