'use client';

/**
 * StickyDesktopBar — stateless desktop sticky bottom purchase bar.
 *
 * Slides in when the desktop purchase card scrolls out of view
 * (`desktopTopCtaHidden` = true). Owns no state.
 *
 * The IntersectionObserver that drives `desktopTopCtaHidden` remains in
 * DealDetailInner (coordinator) because it observes `desktopCtaRef` which
 * is attached inside DealPurchaseCard; keeping the observer in the coordinator
 * lets us pass the resulting boolean down to both this component and any
 * future consumers without introducing context.
 */

import { cn } from '@/lib/cn';
import { Badge } from '@/components/ui/primitives/Badge';
import { Button } from '@/components/ui/primitives/Button';
import { Icon } from '@/components/ui/icons/Icon';
import { PriceDisplay } from '@/components/ui/domain/PriceDisplay';
import { CountdownTimer } from '@/components/ui/domain/CountdownTimer';
import { AddToCartButton } from '@/components/ui/domain/DealCTA/AddToCartButton';
import { useT } from '@/lib/i18n/react';
import { useDealStock } from '@/features/deals/useDealStock.js';
import { computeGroupProgress } from '@/lib/group-deal/progress';
import type { GroupGroupProp } from '@/features/deal-detail';

const LOW_STOCK_THRESHOLD = 10;

export interface StickyDesktopBarProps {
  dealId: string;
  dealTitle: string;
  originalPrice: number;
  discountedPrice: number;
  windowEnd?: string | null;
  isSoldOut: boolean;
  stockRemaining: number;
  quantityTotal: number;
  group: GroupGroupProp | null;
  selectedSkuId: string | null;
  desktopTopCtaHidden: boolean;
  onBuy: () => void;
}

export function StickyDesktopBar({
  dealId,
  dealTitle,
  originalPrice,
  discountedPrice,
  windowEnd,
  isSoldOut,
  stockRemaining: _stockRemaining,
  quantityTotal: _quantityTotal,
  group,
  selectedSkuId,
  desktopTopCtaHidden,
  onBuy,
}: StickyDesktopBarProps) {
  const t = useT('deal_detail');
  const tCard = useT('deal-card');
  const tg = useT('group_deal');
  const stock = useDealStock(dealId);
  const liveSoldOut = stock.status === 'resolved' ? stock.soldOut : isSoldOut;
  const isGroupFull = group != null && group.currentReservationCount >= group.maxGroupSize;
  const displaySoldOut = liveSoldOut || isGroupFull;
  const stockPending = stock.status === 'loading' || stock.status === 'error';
  const liveRemaining = stock.status === 'resolved' && !stock.soldOut ? stock.stockRemaining : null;
  const isLowStock = liveRemaining != null && liveRemaining <= LOW_STOCK_THRESHOLD;
  const [stockUrgencyPrefix, stockUrgencySuffix] = t('stock_urgency_remaining').split('{count}');

  return (
    <div
      className={cn(
        'border-border-subtle bg-surface-elevated fixed start-0 end-0 bottom-0 z-40 hidden items-center gap-6 border-t px-8 py-3 shadow-lg lg:flex',
        'motion-safe:transition-transform motion-safe:duration-300 motion-safe:ease-in-out',
        !desktopTopCtaHidden && 'motion-safe:translate-y-full',
      )}
      aria-label={t('urgency_banner_aria')}
    >
      {/* Deal title */}
      <p data-user-content className="text-text-primary min-w-0 flex-1 truncate font-semibold">
        {dealTitle}
      </p>

      {/* Price inline */}
      <div className="shrink-0">
        <PriceDisplay
          original={originalPrice}
          discounted={discountedPrice}
          size="sm"
          layout="inline"
        />
      </div>

      {/* Countdown */}
      {windowEnd && !displaySoldOut && (
        <div className="flex shrink-0 items-center gap-1.5">
          <Icon name="Clock" size="sm" color="muted" />
          <CountdownTimer endIso={windowEnd} className="text-sm font-medium" />
        </div>
      )}

      {group
        ? (() => {
            const s = computeGroupProgress(group);
            const tone = s.kind === 'below_min' || s.kind === 'next_tier' ? 'brand' : 'success';
            const label =
              s.kind === 'full'
                ? tg('group_full')
                : s.kind === 'best_price'
                  ? tg('best_price_unlocked')
                  : s.kind === 'threshold_met'
                    ? tg('threshold_met')
                    : s.kind === 'next_tier'
                      ? tg('units_to_next_tier')
                          .replace('{{count}}', String(s.count))
                          .replace('{{percent}}', String(s.percent))
                      : tg('purchased_of')
                          .replace('{{current}}', String(s.current))
                          .replace('{{target}}', String(s.target));
            return (
              <Badge tone={tone} size="sm" className="shrink-0">
                {label}
              </Badge>
            );
          })()
        : !displaySoldOut && (
            <Badge
              tone={isLowStock ? 'warning' : 'neutral'}
              size="sm"
              className="shrink-0"
              aria-live="polite"
              aria-busy={stockPending}
            >
              {stockPending ? (
                <span aria-label={tCard('loadingAvailability')}>
                  {tCard('loadingAvailability')}
                </span>
              ) : isLowStock ? (
                <>
                  {stockUrgencyPrefix}
                  <span className="inline-block min-w-[1.25rem] tabular-nums">{liveRemaining}</span>
                  {stockUrgencySuffix}
                </>
              ) : (
                <>
                  {t('stock_ok')} {t('stock_ok_count')}
                </>
              )}
            </Badge>
          )}

      {/* Buy now + add to cart — aria-hidden: visible duplicate of the main CTA; excluded from a11y tree to avoid strict-mode multiple-match. Every focusable child needs tabIndex={-1} (axe aria-hidden-focus); inert would also block clicks. */}
      <div aria-hidden="true">
        {displaySoldOut ? (
          <Button variant="secondary" size="md" disabled className="shrink-0" tabIndex={-1}>
            {t('sold_out')}
          </Button>
        ) : (
          <div className="flex shrink-0 items-center gap-2">
            <AddToCartButton
              dealSkuId={selectedSkuId}
              size="sm"
              title={dealTitle}
              disabled={!selectedSkuId}
              tabIndex={-1}
            />
            <Button variant="primary" size="md" tabIndex={-1} onClick={onBuy}>
              {t('buy_now')}
            </Button>
          </div>
        )}
      </div>
    </div>
  );
}