"use client";

/**
 * v1.4.25 — Settings → Sources.
 *
 * Per-metric-class source priority. When more than one ingest source
 * records the same metric for the same day, the analytics aggregator
 * picks ONE canonical source per day (for cumulative metrics like
 * steps / sleep duration) or surfaces a "preferred" source (for point
 * measurements like weight / BP). Non-picked rows stay in the DB as an
 * audit trail.
 *
 * Today (v1.4.25) only WITHINGS + MANUAL coexist; the cumulative-metric
 * aggregator no-ops because no user has two ingest paths reporting the
 * same daily total. The UI lands now so v1.5's Apple Health passthrough
 * drops onto a known foundation — every user's preferences carry
 * straight into iOS-era analytics without an extra migration step.
 *
 * v1.4.25 — two-axis extension. The same screen now hosts three
 * vertically-stacked sections (the maintainer no-split directive):
 *   1. Global default ladder per metric class (existing).
 *   2. Per-metric override expander — collapsed by default; an
 *      explicit knob for power users (the global ladder already lives
 *      above and most users never open this).
 *   3. Device-type override expander — collapsed by default; one
 *      global ladder ("watch beats phone beats scale") with optional
 *      per-metric overrides.
 */

import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import Link from "next/link";
import { useMemo, useState } from "react";
import { toast } from "sonner";
import { showErrorToast } from "@/lib/errors/error-toast";
import {
  ArrowDown,
  ArrowUp,
  ChevronDown,
  Layers,
  Loader2,
  RotateCcw,
} from "lucide-react";

import { Button } from "@/components/ui/button";
import { SettingsCardActions } from "@/components/settings/_card-actions";
import { ConfirmButton } from "@/components/ui/confirm-button";
import { Skeleton } from "@/components/ui/skeleton";
import { EmptyState } from "@/components/ui/empty-state";
import { SettingsCard } from "@/components/settings/settings-card";
import { SettingsCardHeader } from "@/components/settings/_card-header";
import { useTranslations } from "@/lib/i18n/context";
import { MEASUREMENT_SOURCE_SETTINGS_LABEL_KEYS } from "@/lib/i18n/source-labels";
import { queryKeys, refetchInactiveDailyReads } from "@/lib/query-keys";
import {
  DEFAULT_DEVICE_TYPE_PRIORITY,
  DEFAULT_SOURCE_PRIORITY,
  type DeviceType,
  type DeviceTypePriority,
  type MetricPriority,
  SOURCE_PRIORITY_METRIC_KEYS,
  type SourcePriorityMetricKey,
} from "@/lib/validations/source-priority";
import { apiGet, apiPut } from "@/lib/api/api-fetch";

/**
 * Resolved shape returned by `GET /api/auth/me/source-priority`. Mirrors
 * `parseSourcePriority()`'s return: every metric ladder is defaulted,
 * the two-axis containers are present (possibly empty).
 */
interface ResolvedPriority extends Required<MetricPriority> {
  metricPriority: Required<MetricPriority>;
  deviceTypePriority: DeviceTypePriority;
  /**
   * The ranked sources this account has connected or holds data from. The
   * editor lists only these; the ladders it edits keep every source.
   */
  inUse?: string[];
}

type LadderSource = Required<MetricPriority>[SourcePriorityMetricKey][number];

/**
 * Move `source` one step past its nearest VISIBLE neighbour in `list`.
 *
 * The editor hides sources the account does not use, so an adjacent swap on
 * the full ladder would trade places with an invisible entry and look like a
 * button that did nothing. Swapping with the next visible entry keeps the
 * hidden ones in their slots. Returns `null` when there is no visible
 * neighbour in that direction.
 */
export function moveAmongVisible<T>(
  list: readonly T[],
  source: T,
  delta: -1 | 1,
  isVisible: (entry: T) => boolean,
): T[] | null {
  const from = list.indexOf(source);
  if (from < 0) return null;
  let to = from + delta;
  while (to >= 0 && to < list.length && !isVisible(list[to])) to += delta;
  if (to < 0 || to >= list.length) return null;
  const next = [...list];
  [next[from], next[to]] = [next[to], next[from]];
  return next;
}

const METRIC_LABEL_KEYS: Record<SourcePriorityMetricKey, string> = {
  steps: "settings.sections.sources.metrics.steps",
  activeEnergy: "settings.sections.sources.metrics.activeEnergy",
  walkingRunningDistance:
    "settings.sections.sources.metrics.walkingRunningDistance",
  flightsClimbed: "settings.sections.sources.metrics.flightsClimbed",
  sleep: "settings.sections.sources.metrics.sleep",
  weight: "settings.sections.sources.metrics.weight",
  bloodPressure: "settings.sections.sources.metrics.bloodPressure",
  pulse: "settings.sections.sources.metrics.pulse",
  bodyFat: "settings.sections.sources.metrics.bodyFat",
  bodyTemperature: "settings.sections.sources.metrics.bodyTemperature",
  spo2: "settings.sections.sources.metrics.spo2",
  hrv: "settings.sections.sources.metrics.hrv",
  hrvRmssd: "settings.sections.sources.metrics.hrvRmssd",
  restingHeartRate: "settings.sections.sources.metrics.restingHeartRate",
  vo2Max: "settings.sections.sources.metrics.vo2Max",
  // v1.11.0 — WHOOP-overlapping metric classes + native-vs-derived recovery.
  skinTemperature: "settings.sections.sources.metrics.skinTemperature",
  respiratoryRate: "settings.sections.sources.metrics.respiratoryRate",
  recovery: "settings.sections.sources.metrics.recovery",
  // v1.18.10 — native-vs-derived stress ladder.
  stress: "settings.sections.sources.metrics.stress",
  // v1.25.0 — native-vs-computed sleep-debt ladder.
  sleepDebt: "settings.sections.sources.metrics.sleepDebt",
};

const DEVICE_TYPE_LABEL_KEYS: Record<DeviceType, string> = {
  watch: "settings.sections.sources.deviceLabels.watch",
  band: "settings.sections.sources.deviceLabels.band",
  ring: "settings.sections.sources.deviceLabels.ring",
  phone: "settings.sections.sources.deviceLabels.phone",
  scale: "settings.sections.sources.deviceLabels.scale",
  other: "settings.sections.sources.deviceLabels.other",
  unknown: "settings.sections.sources.deviceLabels.unknown",
};

/**
 * `<SourcesSection>` — the per-metric source-priority + device-type ladders.
 *
 * v1.18.1 — Sources is a standalone `/settings/sources` left-side entry
 * again (split back out of the Integrations sub-tabs). It renders its own
 * section header + the cross-link back to Integrationen.
 */
export function SourcesSection() {
  const { t } = useTranslations();
  const queryClient = useQueryClient();

  const { data: remote, isLoading } = useQuery({
    queryKey: queryKeys.sourcePriority(),
    queryFn: async () => {
      return apiGet<ResolvedPriority>("/api/auth/me/source-priority");
    },
  });

  // Local draft state — same pattern as `<DashboardLayoutSection>`. The
  // user reorders sources via the up/down arrows; nothing hits the
  // network until they click Save.
  const [draft, setDraft] = useState<ResolvedPriority | null>(null);
  const priority = draft ?? remote ?? null;

  const [showPerMetric, setShowPerMetric] = useState(false);
  const [showDeviceType, setShowDeviceType] = useState(false);

  const saveMutation = useMutation({
    mutationFn: async (next: ResolvedPriority) => {
      // PUT the W8c-canonical shape: nested `metricPriority` +
      // `deviceTypePriority` together. The server's
      // `parseSourcePriority` echoes the resolved shape back so the
      // optimistic update is just a `setQueryData`.
      const body = {
        metricPriority: next.metricPriority,
        deviceTypePriority: next.deviceTypePriority,
      };
      return apiPut<ResolvedPriority>("/api/auth/me/source-priority", body);
    },
    onSuccess: (saved) => {
      queryClient.setQueryData(queryKeys.sourcePriority(), saved);
      // The analytics aggregator, the per-chart daily aggregates, the
      // measurement list and the dashboard snapshot all fold source
      // priority into their per-day canonical-row picks — flush them so
      // every chart and tile re-paints with the new picker, not only the
      // analytics report.
      queryClient.invalidateQueries({ queryKey: queryKeys.analytics() });
      queryClient.invalidateQueries({ queryKey: queryKeys.chartDataRoot() });
      queryClient.invalidateQueries({ queryKey: queryKeys.measurements() });
      void refetchInactiveDailyReads(queryClient);
      setDraft(null);
      toast.success(t("settings.sections.sources.saveSuccess"));
    },
    onError: (failure) =>
      showErrorToast(t("settings.sections.sources.saveError"), {
        cause: failure,
      }),
  });

  const resetMutation = useMutation({
    mutationFn: async () => {
      // Sending the empty W8c shape clears every per-user override; the
      // server's `parseSourcePriority` then returns the constant
      // defaults verbatim. Keeps the wire payload tiny.
      return apiPut<ResolvedPriority>("/api/auth/me/source-priority", {});
    },
    onSuccess: (saved) => {
      queryClient.setQueryData(queryKeys.sourcePriority(), saved);
      // Same fan-out as the save arm: the defaults change the canonical-row
      // picks everywhere the overrides did.
      queryClient.invalidateQueries({ queryKey: queryKeys.analytics() });
      queryClient.invalidateQueries({ queryKey: queryKeys.chartDataRoot() });
      queryClient.invalidateQueries({ queryKey: queryKeys.measurements() });
      void refetchInactiveDailyReads(queryClient);
      setDraft(null);
      toast.success(t("settings.sections.sources.resetSuccess"));
    },
  });

  /**
   * Shared adjacent-swap for both ladder buckets. Returns a copy of
   * `list` with `index` and `index+delta` swapped, or `null` when the
   * target index falls outside the array. The helper deliberately stays
   * generic (typed via `T`) so both the source ladder (string[]) and
   * the device-type ladder (DeviceType[]) share one implementation —
   * the previous moveSource + moveDeviceType pair drifted apart twice
   * during W8c before they were re-aligned.
   */
  function reorderLadder<T>(
    list: readonly T[],
    index: number,
    delta: -1 | 1,
  ): T[] | null {
    const targetIdx = index + delta;
    if (targetIdx < 0 || targetIdx >= list.length) return null;
    const next = [...list];
    [next[index], next[targetIdx]] = [next[targetIdx], next[index]];
    return next;
  }

  function moveSource(
    metric: SourcePriorityMetricKey,
    source: LadderSource,
    delta: -1 | 1,
  ) {
    if (!priority) return;
    const current =
      priority.metricPriority[metric] ?? DEFAULT_SOURCE_PRIORITY[metric];
    const list = moveAmongVisible(current, source, delta, isSourceVisible);
    if (!list) return;
    const nextMetric = { ...priority.metricPriority, [metric]: list };
    setDraft({
      ...priority,
      ...nextMetric,
      metricPriority: nextMetric,
    });
  }

  function moveDeviceType(
    /** `null` for the global ladder, MeasurementType-enum string otherwise. */
    bucket: string | null,
    index: number,
    delta: -1 | 1,
  ) {
    if (!priority) return;
    const key = bucket ?? "default";
    const current =
      priority.deviceTypePriority[key] ?? DEFAULT_DEVICE_TYPE_PRIORITY;
    const list = reorderLadder(current, index, delta);
    if (!list) return;
    const nextDevicePriority: DeviceTypePriority = {
      ...priority.deviceTypePriority,
      [key]: list,
    };
    setDraft({ ...priority, deviceTypePriority: nextDevicePriority });
  }

  function resetMetricToDefault(metric: SourcePriorityMetricKey) {
    if (!priority) return;
    const nextMetric: Required<MetricPriority> = {
      ...priority.metricPriority,
      [metric]: [...DEFAULT_SOURCE_PRIORITY[metric]],
    };
    setDraft({
      ...priority,
      ...nextMetric,
      metricPriority: nextMetric,
    });
  }

  function resetDeviceTypeAxis() {
    if (!priority) return;
    setDraft({ ...priority, deviceTypePriority: {} });
  }

  const dirty = draft !== null && priority !== null;

  // An older server sends no `inUse`; then every source stays listed.
  const remoteInUse = remote?.inUse;
  const inUse = useMemo(
    () => (remoteInUse ? new Set(remoteInUse) : null),
    [remoteInUse],
  );
  function isSourceVisible(source: string): boolean {
    return inUse === null || inUse.has(source);
  }

  // The metrics worth showing: those with at least one source in use. A
  // metric nobody delivers has nothing to rank.
  const visibleMetrics = useMemo(() => {
    if (!priority) return [] as SourcePriorityMetricKey[];
    return SOURCE_PRIORITY_METRIC_KEYS.filter((metric) =>
      (priority.metricPriority[metric] ?? DEFAULT_SOURCE_PRIORITY[metric]).some(
        (source) => inUse === null || inUse.has(source),
      ),
    );
  }, [priority, inUse]);

  // Every group starts collapsed except the first, so the page opens on one
  // worked example instead of twenty open ladders. Toggled groups are
  // remembered by key; the first group's default is the inverse.
  const [toggledMetrics, setToggledMetrics] = useState<
    ReadonlySet<SourcePriorityMetricKey>
  >(new Set());
  function isMetricOpen(metric: SourcePriorityMetricKey): boolean {
    const openByDefault = metric === visibleMetrics[0];
    return toggledMetrics.has(metric) ? !openByDefault : openByDefault;
  }
  function toggleMetric(metric: SourcePriorityMetricKey) {
    setToggledMetrics((prev) => {
      const next = new Set(prev);
      if (next.has(metric)) next.delete(metric);
      else next.add(metric);
      return next;
    });
  }

  // The per-metric expander shows every metric whose ladder has been
  // overridden, plus a hint when none has. Counter lives next to the
  // expander label so the section "asks" for attention proportional
  // to its setting.
  const overriddenMetrics = useMemo(() => {
    if (!priority) return [] as SourcePriorityMetricKey[];
    return SOURCE_PRIORITY_METRIC_KEYS.filter((metric) => {
      const list = priority.metricPriority[metric];
      const defaultList = DEFAULT_SOURCE_PRIORITY[metric];
      if (!list || list.length !== defaultList.length) return true;
      return list.some((s, i) => s !== defaultList[i]);
    });
  }, [priority]);

  // Count distinct overrides the user has set on the device-type axis.
  // `default` counts as one if present; every per-metric override
  // (`WEIGHT`, `ACTIVITY_STEPS`, …) counts as one more. The number drives
  // the expander label so the section is self-explanatory at a glance.
  const deviceTypeOverrideCount = useMemo(() => {
    if (!priority) return 0;
    return Object.keys(priority.deviceTypePriority).length;
  }, [priority]);

  // v1.18.6 — the visible heading + subtitle now come from the shared
  // `<SettingsSectionFrame>` (the off-style muted intro folded into the
  // standard subtitle). The quiet cross-link back to Integrationen — where
  // the sources this ladder ranks are added / removed — stays inside the
  // card, below the ladder.
  return (
    <div className="space-y-6">
      <SettingsCard>
        <SettingsCardHeader
          icon={Layers}
          title={t("settings.sections.sources.cardTitle")}
          description={t("settings.sections.sources.help")}
        />

        <p className="text-sm">{t("settings.sections.sources.helpDetail")}</p>

        {isLoading || !priority ? (
          <SourcesSkeletonList />
        ) : visibleMetrics.length === 0 ? (
          <EmptyState
            variant="plain"
            size="compact"
            data-testid="sources-none-in-use"
            title={t("settings.sections.sources.noneInUse")}
          />
        ) : (
          <div className="space-y-3">
            {visibleMetrics.map((metric) => {
              const list = (
                priority.metricPriority[metric] ??
                DEFAULT_SOURCE_PRIORITY[metric]
              ).filter(isSourceVisible);
              const open = isMetricOpen(metric);
              const panelId = `sources-metric-${metric}`;
              return (
                <div
                  key={metric}
                  data-testid={`sources-metric-${metric}`}
                  className="border-border bg-background/30 rounded-md border"
                >
                  <button
                    type="button"
                    onClick={() => toggleMetric(metric)}
                    aria-expanded={open}
                    aria-controls={panelId}
                    className="hover:bg-muted/40 flex min-h-11 w-full items-center gap-2 rounded-md px-3 py-2 text-left transition-colors"
                  >
                    <ChevronDown
                      aria-hidden="true"
                      className={`text-muted-foreground size-4 shrink-0 transition-transform ${
                        open ? "rotate-180" : ""
                      }`}
                    />
                    <span className="min-w-0 flex-1 text-sm font-medium">
                      {t(METRIC_LABEL_KEYS[metric])}
                    </span>
                    {/* Collapsed, the group still says who wins. */}
                    {!open && list[0] ? (
                      <span
                        data-slot="sources-metric-winner"
                        // `truncate` needs room to give up: a shrink-0 span
                        // never cut, and a long source name squeezed the
                        // metric label at 390 px instead.
                        className="text-muted-foreground max-w-[45%] min-w-0 truncate text-xs"
                      >
                        {t(MEASUREMENT_SOURCE_SETTINGS_LABEL_KEYS[list[0]])}
                      </span>
                    ) : null}
                  </button>
                  {/* The list stays in the tree, empty and hidden, while
                      the group is closed, so the toggle's aria-controls
                      always names an element. */}
                  <ul
                    id={panelId}
                    hidden={!open}
                    className="space-y-1 px-3 pb-3"
                  >
                    {open
                      ? list.map((source, index) => (
                          <li
                            key={`${metric}-${source}`}
                            className="border-border bg-card flex items-center gap-2 rounded-md border px-2 py-1.5"
                          >
                            <span className="text-muted-foreground w-5 text-xs font-medium tabular-nums">
                              {index + 1}.
                            </span>
                            <span className="flex-1 text-sm">
                              {t(
                                MEASUREMENT_SOURCE_SETTINGS_LABEL_KEYS[source],
                              )}
                            </span>
                            {/* Up/down sit side by side at every width: two
                              44 px buttons leave a 390 px row ~170 px for the
                              source name. */}
                            <div className="flex shrink-0 gap-1 sm:gap-2">
                              <Button
                                type="button"
                                variant="ghost"
                                size="icon"
                                className="h-11 w-11"
                                onClick={() => moveSource(metric, source, -1)}
                                disabled={index === 0 || saveMutation.isPending}
                                aria-label={t(
                                  "settings.sections.sources.moveUp",
                                )}
                              >
                                <ArrowUp className="h-4 w-4" />
                              </Button>
                              <Button
                                type="button"
                                variant="ghost"
                                size="icon"
                                className="h-11 w-11"
                                onClick={() => moveSource(metric, source, 1)}
                                disabled={
                                  index === list.length - 1 ||
                                  saveMutation.isPending
                                }
                                aria-label={t(
                                  "settings.sections.sources.moveDown",
                                )}
                              >
                                <ArrowDown className="h-4 w-4" />
                              </Button>
                            </div>
                          </li>
                        ))
                      : null}
                  </ul>
                </div>
              );
            })}
          </div>
        )}

        {/* ── v1.4.25 W8c — per-metric override expander ──
            Collapsed by default. The global ladder above already
            covers every metric; this section lets a power user reset
            a single metric back to the constant default in one click. */}
        {priority && (
          <div className="border-border space-y-2 border-t pt-4">
            <button
              type="button"
              onClick={() => setShowPerMetric((prev) => !prev)}
              aria-expanded={showPerMetric}
              aria-controls="sources-per-metric-panel"
              className="text-foreground hover:text-primary flex items-center gap-2 text-sm font-medium transition-colors"
            >
              <ChevronDown
                className={`h-4 w-4 transition-transform ${
                  showPerMetric ? "rotate-180" : ""
                }`}
              />
              {t("settings.sections.sources.perMetricToggle", {
                count: overriddenMetrics.length,
              })}
            </button>
            <div
              id="sources-per-metric-panel"
              role="region"
              hidden={!showPerMetric}
              className="bg-background/30 border-border space-y-3 rounded-md border p-3"
            >
              {showPerMetric ? (
                <>
                  <p className="text-muted-foreground text-xs">
                    {t("settings.sections.sources.perMetricHelp")}
                  </p>
                  {overriddenMetrics.length === 0 ? (
                    <EmptyState
                      variant="plain"
                      size="compact"
                      title={t("settings.sections.sources.perMetricEmpty")}
                    />
                  ) : (
                    <ul className="space-y-2">
                      {overriddenMetrics.map((metric) => (
                        <li
                          key={metric}
                          className="border-border bg-card flex items-center justify-between gap-3 rounded-md border px-3 py-2"
                        >
                          <span className="text-sm">
                            {t(METRIC_LABEL_KEYS[metric])}
                          </span>
                          <Button
                            type="button"
                            variant="ghost"
                            size="sm"
                            onClick={() => resetMetricToDefault(metric)}
                            disabled={saveMutation.isPending}
                          >
                            {t("settings.sections.sources.resetMetric")}
                          </Button>
                        </li>
                      ))}
                    </ul>
                  )}
                </>
              ) : null}
            </div>
          </div>
        )}

        {/* ── v1.4.25 W8c — device-type override expander ──
            One global ladder ("watch beats phone beats scale"). When
            multiple device-types stream the same source's metric
            (Apple Watch + iPhone → APPLE_HEALTH steps), the higher-
            ranked device-type wins. Collapsed by default. */}
        {priority && (
          <div className="border-border space-y-2 border-t pt-4">
            <button
              type="button"
              onClick={() => setShowDeviceType((prev) => !prev)}
              aria-expanded={showDeviceType}
              aria-controls="sources-device-type-panel"
              className="text-foreground hover:text-primary flex items-center gap-2 text-sm font-medium transition-colors"
            >
              <ChevronDown
                className={`h-4 w-4 transition-transform ${
                  showDeviceType ? "rotate-180" : ""
                }`}
              />
              {t("settings.sections.sources.deviceTypeToggle", {
                count: deviceTypeOverrideCount,
              })}
            </button>
            <div
              id="sources-device-type-panel"
              role="region"
              hidden={!showDeviceType}
              className="bg-background/30 border-border space-y-3 rounded-md border p-3"
            >
              {showDeviceType ? (
                <>
                  <p className="text-muted-foreground text-xs">
                    {t("settings.sections.sources.deviceTypeHelp")}
                  </p>
                  <div className="flex items-center justify-between">
                    <span className="text-sm font-medium">
                      {t("settings.sections.sources.deviceTypeDefault")}
                    </span>
                    <Button
                      type="button"
                      variant="ghost"
                      size="sm"
                      onClick={resetDeviceTypeAxis}
                      disabled={saveMutation.isPending}
                    >
                      <RotateCcw className="h-3 w-3" />
                      {t("settings.sections.sources.resetDeviceTypes")}
                    </Button>
                  </div>
                  <ul className="space-y-1">
                    {(
                      priority.deviceTypePriority.default ??
                      DEFAULT_DEVICE_TYPE_PRIORITY
                    ).map((deviceType, index, list) => (
                      <li
                        key={`device-default-${deviceType}-${index}`}
                        className="border-border bg-card flex items-center gap-2 rounded-md border px-2 py-1.5"
                      >
                        <span className="text-muted-foreground w-5 text-xs font-medium tabular-nums">
                          {index + 1}.
                        </span>
                        <span className="flex-1 text-sm">
                          {t(DEVICE_TYPE_LABEL_KEYS[deviceType])}
                        </span>
                        {/* v1.4.27 — same stacked-on-mobile shape
                          as the metric source rows above. */}
                        <div className="flex flex-col gap-1 sm:flex-row sm:gap-2">
                          <Button
                            type="button"
                            variant="ghost"
                            size="icon"
                            className="h-11 w-11"
                            onClick={() => moveDeviceType(null, index, -1)}
                            disabled={index === 0 || saveMutation.isPending}
                            aria-label={t("settings.sections.sources.moveUp")}
                          >
                            <ArrowUp className="h-4 w-4" />
                          </Button>
                          <Button
                            type="button"
                            variant="ghost"
                            size="icon"
                            className="h-11 w-11"
                            onClick={() => moveDeviceType(null, index, 1)}
                            disabled={
                              index === list.length - 1 ||
                              saveMutation.isPending
                            }
                            aria-label={t("settings.sections.sources.moveDown")}
                          >
                            <ArrowDown className="h-4 w-4" />
                          </Button>
                        </div>
                      </li>
                    ))}
                  </ul>
                </>
              ) : null}
            </div>
          </div>
        )}

        {/* v1.18.6 — quiet pointer back to Integrationen, where the
            sources this ladder ranks are connected / removed. Above the
            action row: nothing follows a card's actions. */}
        <p className="text-muted-foreground border-border border-t pt-3 text-xs">
          {t("settings.sections.sources.integrationsHint")}{" "}
          <Link
            href="/settings/integrations"
            className="text-primary underline underline-offset-2"
            data-slot="sources-integrations-cross-link"
          >
            {t("settings.sections.sources.integrationsHintLink")}
          </Link>
        </p>
        {/* v1.44 (#1204) — the read-only view of what this ladder decides:
            which source delivered what on a day, and two sources side by
            side. Above the action row, like the hint before it. */}
        <p className="text-muted-foreground text-xs">
          {t("sourceProvenance.settingsHint")}{" "}
          <Link
            href="/insights/sources"
            className="text-primary underline underline-offset-2"
            data-slot="sources-provenance-cross-link"
          >
            {t("sourceProvenance.settingsHintLink")}
          </Link>
        </p>

        {/* One action row, last in the card (design standards §12). The
            reset used to ride the header's status slot, which carries
            status, not actions; Cancel + Save join it while a draft is open. */}
        <SettingsCardActions>
          <ConfirmButton
            slot="settings-sources-reset"
            variant="outline"
            size="sm"
            className="min-h-11 sm:min-h-9"
            icon={<RotateCcw className="h-3.5 w-3.5" />}
            label={t("settings.sections.sources.resetDefaults")}
            title={t("settings.sections.sources.resetDefaultsTitle")}
            body={t("settings.sections.sources.resetDefaultsBody")}
            confirmLabel={t("settings.sections.sources.resetDefaultsConfirm")}
            disabled={saveMutation.isPending}
            pending={resetMutation.isPending}
            onConfirm={() => resetMutation.mutate()}
            destructive
          />
          {dirty && priority ? (
            <>
              <Button
                type="button"
                variant="outline"
                size="sm"
                className="min-h-11 sm:min-h-9"
                onClick={() => setDraft(null)}
                disabled={saveMutation.isPending}
              >
                {t("common.cancel")}
              </Button>
              <Button
                type="button"
                size="sm"
                className="min-h-11 sm:min-h-9"
                onClick={() => saveMutation.mutate(priority)}
                disabled={saveMutation.isPending}
              >
                {saveMutation.isPending && (
                  <Loader2 className="h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
                )}
                {t("common.save")}
              </Button>
            </>
          ) : null}
        </SettingsCardActions>
      </SettingsCard>

      {/* v1.28 shipped `<NutrientIntakeCard>` here; the 2026-07-17 UX/IA
          audit (M7) moved it to Settings → Integrations — it is a read-only
          Apple-Health sync inventory, not a which-connection-wins ranking,
          so it never belonged on the "source priority" ladder. See
          `<IntegrationsSection>` for the card's new home. */}
    </div>
  );
}

/**
 * Skeleton placeholder rendered while `/api/auth/me/source-priority`
 * is in flight. Mirrors the loaded shape: the first group open with a
 * couple of rows, the rest collapsed to their header line, so the page does
 * not jump when the ladders swap in. The pulsing animation honours
 * `prefers-reduced-motion` via Tailwind's `motion-reduce:animate-none`.
 */
function SourcesSkeletonList() {
  return (
    <div
      className="space-y-3"
      data-testid="sources-skeleton"
      aria-hidden="true"
    >
      <div className="border-border bg-background/30 space-y-2 rounded-md border p-3">
        <Skeleton className="h-5 w-40" />
        <Skeleton className="h-14 w-full rounded-md" />
        <Skeleton className="h-14 w-full rounded-md" />
      </div>
      {/* One collapsed line per remaining metric: the upper bound, so the
          action row below never jumps down when the ladders arrive. */}
      {SOURCE_PRIORITY_METRIC_KEYS.slice(1).map((metric) => (
        <Skeleton key={metric} className="h-11 w-full rounded-md" />
      ))}
    </div>
  );
}