{ setSavedSuccessfully(false); setName(e.target.value); }} />

{
            setSavedSuccessfully(false);
            setDesc(e.target.value);
          }}
        />
      </FormField>
      <Button
        variant="primary"
        size="sm"
        loading={mutation.isPending}
        onClick={() =>
          void mutation
            .mutateAsync({ businessName: name, description: desc })
            .then(() => setSavedSuccessfully(true))
            .catch((err) => {
              captureCaught(err, { scope: 'features.vendor-settings.ShopSection.save' });
              notify.error(t('shop_save_error'));
            })
        }
        className="self-start"
      >
        {savedSuccessfully && !isDirty ? t('saved') : t('save')}
      </Button>
    </div>
  );
}

// ─── Pickup Section mutation ──────────────────────────────────────────────────

// ─── Pickup Section ───────────────────────────────────────────────────────────

useEffect(() => {
    if (profile) {
      void Promise.resolve().then(() => setSelfPickup(profile.selfPickup ?? false));
    }
  }, [profile]);

async function handleDelete(addr: VendorAddress) {
    setDeletingId(addr.id);
    try {
      const result = await deleteVendorAddress(addr.id);
      if (!result.ok) {
        if (result.code === 'ADDRESS_IN_USE') {
          toast({ title: t('pickup_address_in_use'), tone: 'danger' });
        } else {
          toast({ title: t('pickup_address_delete_error'), tone: 'danger' });
        }
        return;
      }
      await invalidate();
      if (selfPickup && addresses.length <= 1) {
        setSelfPickup(false);
        void mutation.mutateAsync({ selfPickup: false });
        toast({ title: t('pickup_disabled_no_addresses'), tone: 'warning' });
      }
    } finally {
      setDeletingId(null);
    }
  }

async function handleToggle(value: boolean) {
    setSelfPickup(value);
    await mutation.mutateAsync({ selfPickup: value });
    toast({ title: t('pickup_toggle_saved'), tone: 'success' });
  }

return (
    <div className="flex flex-col gap-4">
      <div className="flex items-center justify-between gap-3">
        <div className="min-w-0 flex-1">
          <Label htmlFor="pickup-toggle">{t('pickup_toggle_label')}</Label>
          <p className="text-text-muted mt-0.5 text-xs">{t('pickup_toggle_description')}</p>
        </div>
        <Switch
          id="pickup-toggle"
          checked={selfPickup}
          onCheckedChange={(v) =>
            void handleToggle(v).catch((err) => {
              captureCaught(err, { scope: 'features.vendor-settings.PickupSection.toggle' });
              notify.error(t('pickup_save_error'));
            })
          }
        />
      </div>

{selfPickup && !isLoading && addresses.length === 0 && (
        <InlineNotice tone="warning" description={t('pickup_required_callout')} />
      )}

<div className="flex flex-col gap-2">
        <p className="text-sm font-medium">{t('pickup_address_book_title')}</p>
        {isLoading ? null : addresses.length === 0 ? (
          <p className="text-text-muted text-sm">{t('pickup_address_empty')}</p>
        ) : (
          addresses.map((addr) => (
            <div key={addr.id} className="flex items-center gap-2">
              <div className="flex-1">
                <AddressCard label={addr.label} address={addr.fullAddress} />
              </div>
              <Button
                type="button"
                variant="ghost"
                size="sm"
                aria-label={t('pickup_address_delete')}
                loading={deletingId === addr.id}
                onClick={() => setAddressToDelete(addr)}
              >
                <Trash2 size={16} />
              </Button>
            </div>
          ))
        )}
      </div>

<AlertDialog
        open={!!addressToDelete}
        onOpenChange={(open) => {
          if (!open) setAddressToDelete(null);
        }}
      >
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>{t('pickup_address_delete')}</AlertDialogTitle>
            <AlertDialogDescription>{t('pickup_address_delete_confirm')}</AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>{tCommon('cancel')}</AlertDialogCancel>
            <AlertDialogAction
              onClick={() => {
                if (addressToDelete) {
                  void handleDelete(addressToDelete);
                  setAddressToDelete(null);
                }
              }}
            >
              {t('pickup_address_delete')}
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>

<Button
        type="button"
        variant="secondary"
        size="sm"
        className="self-start"
        onClick={() => setAddPickerOpen(true)}
      >
        {t('pickup_add_address')}
      </Button>

{addPickerOpen && (
        <PickupAddressSelector
          value=""
          onChange={() => {
            void invalidate();
            setAddPickerOpen(false);
          }}
        />
      )}
    </div>
  );
}

// ─── Notifications Section ────────────────────────────────────────────────────

function NotificationsSection() {
  const t = useT('vendor_settings_full');
  const queryClient = useQueryClient();
  const { toast } = useToast();
  const { data: prefs, isLoading: prefsLoading, isError: prefsIsError } = useNotifPrefs();

const [items, setItems] = useState<NotificationItem[]>([] as NotificationItem[]);

const buildItems = useCallback(
    (p: NotifPrefs): NotificationItem[] => {
      return [
        {
          key: 'alertEverySale',
          label: t('alert_every_sale_label'),
          description: t('alert_every_sale_desc'),
          enabled: p.alertEverySale,
          onChange: (v) => updatePref('alertEverySale', v),
        },
        {
          key: 'alertStockOut',
          label: t('alert_stock_out_label'),
          description: t('alert_stock_out_desc'),
          enabled: p.alertStockOut,
          onChange: (v) => updatePref('alertStockOut', v),
        },
        {
          key: 'alertPersonalDeal',
          label: t('alert_personal_deal_label'),
          description: t('alert_personal_deal_desc'),
          enabled: p.alertPersonalDeal,
          onChange: (v) => updatePref('alertPersonalDeal', v),
        },
      ];
    },
    [t, updatePref],
  );

useEffect(() => {
    if (!prefs) return;

void Promise.resolve().then(() => setItems(buildItems(prefs)));
  }, [buildItems, prefs]);

async function handleSilentChange(silent: boolean) {
    const previous = queryClient.getQueryData<NotifPrefs>(['vendor-notif-prefs']);
    queryClient.setQueryData<NotifPrefs>(['vendor-notif-prefs'], (prev) =>
      prev ? { ...prev, silentMode: silent } : prev,
    );
    try {
      const csrf = getCsrfToken();
      const res = await fetch('/api/vendor/notifications/settings', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'x-csrf-token': csrf },
        body: JSON.stringify({ silentMode: silent }),
      });
      if (!res.ok) throw new Error(`POST failed: ${res.status}`);
    } catch (err) {
      captureCaught(err, {
        scope: 'features.vendor-settings.NotificationsSection.handleSilentChange',
      });
      if (previous) queryClient.setQueryData(['vendor-notif-prefs'], previous);
      toast({ title: t('notif_update_error'), tone: 'danger' });
    }
  }

if (prefsIsError) {
    return <InlineNotice tone="danger" description={t('notif_load_error')} />;
  }

if (prefsLoading && !prefs) {
    return (
      <div aria-busy="true" className="flex flex-col gap-3 py-1" role="status">
        <span className="sr-only">{t('loading')}</span>
        {Array.from({ length: 4 }, (_, i) => (
          <div key={i} className="flex items-center justify-between gap-3 py-3">
            <div className="min-w-0 flex-1 space-y-2">
              <Skeleton className="h-4 w-1/3" />
              <Skeleton variant="text" className="w-2/3" />
            </div>
            <Skeleton className="h-6 w-11 rounded-full" />
          </div>
        ))}
      </div>
    );
  }

const displayItems = items.length > 0 || !prefs ? items : buildItems(prefs);

return (
    <NotificationsToggleList
      items={displayItems}
      silentMode={prefs?.silentMode ?? false}
      onSilentModeChange={(v) => void handleSilentChange(v)}
    />
  );
}

// ─── Exported wrapper ─────────────────────────────────────────────────────────

export function VendorSettings({ panel }: { panel?: VendorSettingsPanel } = {}) {
  return (
    <HydratedIsland>
      <VendorSettingsInner panel={panel} />
    </HydratedIsland>
  );
}