// @design-system: domain/cart/GlobalCartDrawer
// Registered at /design-system#globalcartdrawer-domain

'use client';

/**
 * GlobalCartDrawer — self-contained cart drawer for any customer page.
 *
 * Bundles its own QueryClient so it can be mounted on pages that don't
 * already have QueryClientProvider (e.g. Search). Reads open/close state
 * from cartDrawerStore (shared with CartNavButton / BottomNav cart item).
 *
 * Usage:
 * ```tsx
 * <GlobalCartDrawer />
 * ```
 */

import { QueryClient, QueryClientProvider } from '@/features/query/react-query';
import { CartDrawer } from '../CartDrawer/CartDrawer';
import { useCart } from '@/features/cart/useCart';
import { useCartDrawerStore } from '@/features/cart/cartDrawerStore';
import type { CartLineItemData } from '../CartLineItem/CartLineItem';
import type { CartItem } from '@/features/cart/useCart';
import {
  Toast,
  ToastAction,
  ToastClose,
  ToastProvider,
  ToastTitle,
  ToastViewport,
  useToast,
} from '@/components/ui/overlays/Toast';
import { mountToastBridge } from '@/lib/query/toast-bridge';
import { useEffect } from 'react';
import { useT } from '@/lib/i18n/react';

function toLineItemData(item: CartItem): CartLineItemData {
  return {
    // Lines are keyed by SKU — useCart.updateQty/remove match on dealSkuId.
    dealId: item.dealSkuId,
    imageId: item.imageId,
    title: item.title,
    vendorName: item.vendorName,
    unitPrice: item.unitPrice,
    qty: item.qty,
    maxQty: item.maxQty,
    qtyTiers: item.qtyTiers ?? [],
  };
}

function GlobalCartDrawerInner() {
  const t = useT('cart');
  const open = useCartDrawerStore((s) => s.open);
  const setOpen = useCartDrawerStore((s) => s.setOpen);
  const { toasts, toast, dismiss } = useToast();
  const {
    items,
    subtotal,
    isLoading,
    updateQty,
    remove,
    pendingUndo,
    undoPendingChange,
    dismissPendingUndo,
  } = useCart();

  useEffect(() => {
    mountToastBridge(toast);
  }, [toast]);

  const lineItems = items.map(toLineItemData);

  return (
    <ToastProvider swipeDirection="left">
      <CartDrawer
        open={open}
        onOpenChange={setOpen}
        items={lineItems}
        subtotal={subtotal}
        onViewCart={() => {
          setOpen(false);
          window.location.href = '/cart';
        }}
        onCheckout={() => {
          setOpen(false);
          window.location.href = '/cart';
        }}
        onQtyChange={(dealId, qty) => updateQty(dealId, qty)}
        onRemove={(dealId) => remove(dealId)}
        loading={isLoading}
      />
      <ToastViewport />
      {pendingUndo && (
        <Toast
          key={pendingUndo.id}
          tone="neutral"
          duration={pendingUndo.duration}
          open
          onOpenChange={(open) => {
            if (!open) dismissPendingUndo();
          }}
        >
          <div className="flex w-full items-start justify-between gap-3">
            <ToastTitle>
              {(pendingUndo.nextQty <= 0 ? t('undo_remove_toast') : t('undo_qty_toast'))
                .replace('{item}', pendingUndo.itemLabel)
                .replace('{qty}', String(pendingUndo.previousQty))}
            </ToastTitle>
            <div className="flex items-center gap-2">
              <ToastAction altText={t('undo_action')} onClick={undoPendingChange}>
                {t('undo_action')}
              </ToastAction>
              <ToastClose />
            </div>
          </div>
        </Toast>
      )}
      {toasts.map((item) => (
        <Toast
          key={item.id}
          tone={item.tone}
          duration={item.duration}
          open
          onOpenChange={() => dismiss(item.id)}
        >
          <div className="flex w-full items-start justify-between gap-2">
            <ToastTitle>{item.title}</ToastTitle>
            <ToastClose />
          </div>
        </Toast>
      ))}
    </ToastProvider>
  );
}

const queryClient = new QueryClient({ defaultOptions: { queries: { retry: 1 } } });

export function GlobalCartDrawer() {
  return (
    <QueryClientProvider client={queryClient}>
      <GlobalCartDrawerInner />
    </QueryClientProvider>
  );
}