impuestospy/apps/web/app/[locale]/(app)/perfil/notifications-section.tsx

'use client';

import type { ProfileDto } from '@impuestos/contracts';
import { SUPPORTED_LOCALES, type Locale } from '@impuestos/i18n';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { PushOptIn } from '@/components/push-optin';
import { ThemeToggle } from '@/components/theme-toggle';
import { Card } from '@/components/ui/card';
import { Skeleton } from '@/components/ui/skeleton';
import { Switch } from '@/components/ui/switch';
import { usePathname, useRouter } from '@/i18n/navigation';
import { useT } from '@/i18n/t';
import { api } from '@/lib/api';

const LABEL_KEY = { es: 'common.languageEs', en: 'common.languageEn' } as const;

export function NotificationsSection({ profile }: { profile: ProfileDto }) {
  const t = useT();
  const queryClient = useQueryClient();
  const router = useRouter();
  const pathname = usePathname();

  const prefs = useQuery({
    queryKey: ['me', 'notification-prefs'],
    queryFn: ({ signal }) => api.getNotificationPrefs(signal),
  });

  const update = useMutation({
    mutationFn: api.patchNotificationPrefs,
    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['me', 'notification-prefs'] }),
  });

  /**
   * Changing the language here persists it to the profile, because the API sends
   * notifications, emails and error messages in the locale stored there.
   */
  const setLocale = useMutation({
    mutationFn: (locale: Locale) => api.putProfile({ ...profile, locale }),
    onSuccess: async (_data, locale) => {
      await queryClient.invalidateQueries({ queryKey: ['me'] });
      router.replace(pathname, { locale });
    },
  });

  return (
    <Card className="space-y-5">
      <h2 className="font-semibold tracking-tight">{t('profile.notifications')}</h2>

      {prefs.isPending ? <Skeleton name="doc-list-item" count={2} /> : null}

      {prefs.isError ? (
        <p role="alert" className="text-sm text-overdue">
          {t('common.error.generic')}
        </p>
      ) : null}

      {prefs.data ? (
        <div className="space-y-4">
          <label className="flex items-center justify-between gap-4">
            <span className="text-sm">{t('notif.email')}</span>
            <Switch
              checked={prefs.data.emailEnabled}
              onCheckedChange={(emailEnabled) => update.mutate({ emailEnabled })}
              label={t('notif.email')}
            />
          </label>

          <label className="flex items-center justify-between gap-4">
            <span className="text-sm">{t('notif.digestHour')}</span>
            <select
              aria-label={t('notif.digestHour')}
              value={prefs.data.digestHour}
              onChange={(event) => update.mutate({ digestHour: Number(event.target.value) })}
              className="tnum h-11 rounded-2xl border bg-[var(--surface-raised)] px-3"
            >
              {Array.from({ length: 24 }).map((_, hour) => {
                // A clock time, not copy: the same in every locale.
                const label = `${String(hour).padStart(2, '0')}:00`;
                return (
                  <option key={hour} value={hour}>
                    {label}
                  </option>
                );
              })}
            </select>
          </label>

          {/* Push shows itself only where it can work; Telegram is linked from the bot
              rather than here (FLOWS.md section 9: unconfigured channels stay hidden). */}
          <PushOptIn />
        </div>
      ) : null}

      <ThemeToggle />

      <div className="flex items-center justify-between gap-4 border-t pt-4">
        <span className="text-sm">{t('common.language')}</span>
        <select
          aria-label={t('common.language')}
          value={profile.locale}
          disabled={setLocale.isPending}
          onChange={(event) => setLocale.mutate(event.target.value as Locale)}
          className="h-11 rounded-2xl border bg-[var(--surface-raised)] px-3"
        >
          {SUPPORTED_LOCALES.map((code) => (
            <option key={code} value={code}>
              {t(LABEL_KEY[code])}
            </option>
          ))}
        </select>
      </div>
    </Card>
  );
}