// @design-system: domain/DealCard
'use client';

import { useContext } from 'react';
import { BuyButton } from '@/components/ui/domain/DealCTA/BuyButton';
import { AddToCartButton } from '@/components/ui/domain/DealCTA/AddToCartButton';
import { WishlistButton } from '@/components/ui/domain/WishlistButton/WishlistButton';
import { WishlistContext } from '@/features/wishlist/WishlistContext.js';
import { useCartDrawerStore } from '@/features/cart/cartDrawerStore';
import { cn } from '@/lib/cn';
import type { DealType } from '@/lib/deal-types';

export interface DealCardCornerCtaProps {
  dealId: string;
  defaultSkuId: string | null;
  hasAxes: boolean;
  isSoldOut: boolean;
  variant: 'grid' | 'scroll' | 'feed-row' | 'draft' | undefined;
  title: string;
  imageUrl: string;
  onAuthRequired?: () => void;
  dealType?: DealType;
  heSlug?: string;
}

/**
 * DealCardCornerCta — unified glassmorphism pill at top-end corner (top-left in RTL).
 * Pill visibility: always when saved, hover-only when unsaved, null for feed-row/draft unless saved.
 * All three buttons (heart, plus, cart) share the same icon size and transparent-on-pill style.
 */
export function DealCardCornerCta({
  dealId,
  defaultSkuId,
  hasAxes,
  isSoldOut,
  variant,
  title,
  imageUrl,
  onAuthRequired,
  dealType,
  heSlug,
}: DealCardCornerCtaProps) {
  const ctx = useContext(WishlistContext);
  const isSaved = ctx?.wishlistedDealIds.has(dealId) ?? false;

  const isFeedOrDraft = variant === 'feed-row' || variant === 'draft';
  const showBuyButton = !isSoldOut && !isFeedOrDraft;
  const showAddToCart = !hasAxes && !isSoldOut && !isFeedOrDraft;

  // feed-row/draft: only render when saved (mirrors old saved-only behaviour)
  if (isFeedOrDraft && !isSaved) return null;

  // saved deals: pill always visible; unsaved: hover-reveal only
  const alwaysVisible = isSaved;

  return (
    <div
      className={cn(
        'absolute end-2 top-2 z-20',
        !alwaysVisible && [
          'lg-hover-only',
          'pointer-events-none opacity-0',
          'motion-safe:transition-opacity motion-safe:duration-150',
          'group-hover:pointer-events-auto group-hover:opacity-100',
          'group-focus-within:pointer-events-auto group-focus-within:opacity-100',
        ],
      )}
    >
      {/* Unified pill — provides bg, blur, shadow for all three buttons */}
      <div className="bg-surface-default/85 flex items-center gap-0 rounded-full p-0.5 shadow-md backdrop-blur">
        {showAddToCart && (
          <AddToCartButton
            dealSkuId={defaultSkuId}
            size="sm"
            title={title}
            imageUrl={imageUrl}
            disabled={!defaultSkuId}
            onAdded={() => useCartDrawerStore.getState().setOpen(true)}
            className="text-muted hover:bg-surface-subtle hover:text-foreground h-auto rounded-full border-0 bg-transparent p-1.5 shadow-none"
          />
        )}
        {showBuyButton && (
          <BuyButton
            dealId={dealId}
            size="sm"
            hasAxes={hasAxes}
            defaultSkuId={defaultSkuId}
            dealType={dealType}
            heSlug={heSlug}
            className="text-muted hover:bg-surface-subtle hover:text-foreground h-auto rounded-full bg-transparent p-1.5 shadow-none"
          />
        )}

        {/* Heart — WishlistButton manages its own red-when-saved text colour */}
        <WishlistButton
          dealId={dealId}
          appearance="always"
          onAuthRequired={onAuthRequired}
          className="hover:bg-surface-subtle rounded-full bg-transparent p-1.5 shadow-none"
        />
      </div>
    </div>
  );
}