'use client';

/**
 * DealCTA — stateless CTA button group.
 *
 * Rendered in 3 slots by DealDetailInner:
 *  1. Mobile inline (inside mobileCtaRef div)
 *  2. Desktop purchase card (inside desktopCtaRef div)
 *  3. Mobile StickyCTA (aria-hidden duplicate)
 *
 * All state lives in the coordinator; this component is purely presentational.
 */

import { Icon } from '@/components/ui/icons/Icon';
import { Button } from '@/components/ui/primitives/Button';
import { NotifyMeButton } from '@/features/stock-watch/NotifyMeButton';
import { AddToCartButton } from '@/components/ui/domain/DealCTA/AddToCartButton';
import { BuyButton } from '@/components/ui/domain/DealCTA/BuyButton';
import { useT } from '@/lib/i18n/react';
import { VariantPicker } from './VariantPicker';
import type { DealWithSkus } from '@/server/domain/variants/read';
import type { DealType } from '@/lib/deal-types';
import type { CheckoutModalPreview } from '@/features/checkout-modal/checkoutModalStore';

export type PersonalRequestState =
  | 'idle'
  | 'pending'
  | 'sent'
  | 'accepted'
  | 'rejected'
  | 'expired'
  | 'error';

export interface DealCTAProps {
  dealId: string;
  heSlug: string;
  dealType?: DealType;
  dealTitle: string;
  isSoldOut: boolean;
  isPaused: boolean;
  isGuest: boolean;
  hasVariants: boolean;
  selectedSkuId: string | null;
  isSelectedSkuOOS: boolean;
  notifySkuId: string | null;
  personalRequestState: PersonalRequestState;
  variantData: DealWithSkus;
  onSelectSku: (skuId: string | null) => void;
  onNotifyOosSku: (skuId: string) => void;
  onDismissNotify: () => void;
  onRequestPersonalDeal: () => void;
  preview?: CheckoutModalPreview;
}

export function DealCTA({
  dealId,
  heSlug,
  dealType,
  dealTitle,
  isSoldOut,
  isPaused,
  isGuest,
  hasVariants,
  selectedSkuId,
  isSelectedSkuOOS,
  notifySkuId,
  personalRequestState,
  variantData,
  onSelectSku,
  onNotifyOosSku,
  onDismissNotify,
  onRequestPersonalDeal,
  preview,
}: DealCTAProps) {
  const t = useT('deal_detail');

  if (isPaused) {
    return (
      <div className="flex flex-col gap-3">
        <Button variant="secondary" size="lg" disabled className="w-full">
          {t('deal_unavailable')}
        </Button>
      </div>
    );
  }

  if (isSoldOut) {
    return (
      <div className="flex flex-col gap-3">
        <Button
          variant="secondary"
          size="lg"
          disabled
          className="w-full"
          data-testid="sold-out-badge"
        >
          {t('sold_out')}
        </Button>
        {personalRequestState === 'sent' ||
        personalRequestState === 'accepted' ||
        personalRequestState === 'rejected' ||
        personalRequestState === 'expired' ? (
          <p className="text-text-secondary text-center text-sm">
            {t(
              personalRequestState === 'sent'
                ? 'personal_deal_sent'
                : personalRequestState === 'accepted'
                  ? 'personal_deal_accepted'
                  : personalRequestState === 'rejected'
                    ? 'personal_deal_rejected'
                    : 'personal_deal_expired',
            )}
          </p>
        ) : (
          <Button
            variant="ghost"
            size="md"
            className="w-full"
            iconStart={<Icon name="Phone" size="sm" />}
            disabled={personalRequestState === 'pending'}
            onClick={() => {
              onRequestPersonalDeal();
            }}
          >
            {personalRequestState === 'pending'
              ? t('personal_deal_sending')
              : t('request_personal_deal')}
          </Button>
        )}
        {personalRequestState === 'error' && (
          <p className="text-danger-600 text-center text-xs">{t('personal_deal_error')}</p>
        )}
        <NotifyMeButton dealId={dealId} dealSlug={dealId} isGuest={isGuest} variant="deal" />
      </div>
    );
  }

  return (
    <div className="flex flex-col gap-3">
      {hasVariants && (
        <VariantPicker
          axes={variantData.axes}
          skus={variantData.skus}
          onSelect={onSelectSku}
          onNotifyOosSku={onNotifyOosSku}
        />
      )}
      <div className="flex gap-2">
        <BuyButton
          dealId={dealId}
          size="lg"
          className="flex-1"
          skuId={selectedSkuId ?? null}
          heSlug={heSlug}
          dealType={dealType}
          preview={preview}
        />
        <AddToCartButton
          dealSkuId={selectedSkuId}
          size="lg"
          title={dealTitle}
          disabled={!selectedSkuId}
        />
      </div>
      {selectedSkuId && isSelectedSkuOOS && (
        <NotifyMeButton
          dealId={dealId}
          skuId={selectedSkuId}
          dealSlug={dealId}
          isGuest={isGuest}
          variant="sku"
        />
      )}
      {notifySkuId && (
        <NotifyMeButton
          dealId={dealId}
          skuId={notifySkuId}
          dealSlug={dealId}
          isGuest={isGuest}
          variant="sku"
          onDismiss={onDismissNotify}
        />
      )}
    </div>
  );
}