// @design-system: domain/cart/CartDrawer
// Registered at /design-system#cartdrawer-domain

'use client';

/** Stable no-op for optional callbacks — avoids new fn identity per render. */
const NOOP = () => {};

import { cn } from '@/lib/cn';
import {
  Drawer,
  DrawerContent,
  DrawerHeader,
  DrawerTitle,
  DrawerFooter,
} from '@/components/ui/overlays/Drawer';
import { Button } from '@/components/ui/primitives/Button';
import { CartLineItem, type CartLineItemData } from '../CartLineItem/CartLineItem';
import { CartEmptyState } from '../CartEmptyState/CartEmptyState';
import { useT } from '@/lib/i18n/react';
import { formatAgorotShekels } from '@/lib/money';

/** Props for CartDrawer */
export interface CartDrawerProps {
  /** Whether the drawer is open. */
  open: boolean;
  /** Called when open state should change. */
  onOpenChange: (open: boolean) => void;
  /** Cart line items. */
  items: CartLineItemData[];
  /** Subtotal in agorot (integer). Displayed as ₪. */
  subtotal: number;
  /** Called when "View cart" CTA is clicked. */
  onViewCart: () => void;
  /** Called when "Checkout" CTA is clicked. */
  onCheckout: () => void;
  /** When true, shows loading spinner on CTAs. */
  loading?: boolean;
  /** When true, shows stale indicator (data may be outdated). */
  stale?: boolean;
  /** Called when a line item qty changes. */
  onQtyChange?: (dealId: string, qty: number) => void;
  /** Called when a line item is removed. */
  onRemove?: (dealId: string) => void;
}

/**
 * CartDrawer — end-anchored sheet displaying cart items, subtotal, and CTAs.
 *
 * Uses the existing Drawer primitive with side="end" for RTL-safe positioning.
 * Includes focus trap, ESC close, labeled title, and prefers-reduced-motion fade.
 *
 * @example
 * ```tsx
 * <CartDrawer
 *   open={cartOpen}
 *   onOpenChange={setCartOpen}
 *   items={cartItems}
 *   subtotal={subtotalAgorot}
 *   onViewCart={() => navigate('/cart')}
 *   onCheckout={() => navigate('/cart?checkout=1')}
 * />
 * ```
 */
export function CartDrawer({
  open,
  onOpenChange,
  items,
  subtotal,
  onViewCart,
  onCheckout,
  loading = false,
  stale = false,
  onQtyChange,
  onRemove,
}: CartDrawerProps) {
  const t = useT('cart');
  const subtotalILS = formatAgorotShekels(subtotal);
  const isEmpty = items.length === 0;

  return (
    <Drawer side="end" open={open} onOpenChange={onOpenChange}>
      <DrawerContent
        side="end"
        className="bg-surface-raised top-11 flex w-80 flex-col sm:w-96"
        overlayClassName="top-11"
        aria-label={t('title')}
        aria-describedby="cart-drawer-desc"
      >
        <span id="cart-drawer-desc" className="sr-only">
          {t('drawer_desc')}
        </span>
        {/* Header */}
        <DrawerHeader className="pt-4 pb-2">
          <DrawerTitle>{t('title')}</DrawerTitle>
        </DrawerHeader>

        {/* Body */}
        <div className={cn('flex-1 overflow-y-auto px-6', stale && 'opacity-70')}>
          {isEmpty ? (
            <CartEmptyState onBrowse={() => onOpenChange(false)} />
          ) : (
            <ul className="divide-border-subtle divide-y">
              {items.map((item) => (
                <li key={item.dealId}>
                  <CartLineItem
                    item={item}
                    onQtyChange={onQtyChange ?? NOOP}
                    onRemove={onRemove ?? NOOP}
                    loading={loading}
                  />
                </li>
              ))}
            </ul>
          )}
        </div>

        {/* Footer — only shown when cart has items */}
        {!isEmpty && (
          <DrawerFooter>
            {/* Subtotal row */}
            <div className="flex items-center justify-between pb-2 text-sm">
              <span className="text-text-secondary">{t('subtotal')}</span>
              <span className="text-text-primary font-semibold">{subtotalILS}</span>
            </div>

            <Button
              variant="secondary"
              size="md"
              onClick={onViewCart}
              disabled={loading}
              className="w-full"
            >
              {t('viewCart')}
            </Button>

            <Button
              variant="primary"
              size="md"
              onClick={onCheckout}
              disabled={loading}
              loading={loading}
              className="w-full"
            >
              {t('checkout')}
            </Button>
          </DrawerFooter>
        )}
      </DrawerContent>
    </Drawer>
  );
}