// @design-system: domain/DealRow

'use client';

import type { VariantProps } from 'class-variance-authority';
import { cn } from '@/lib/cn';
import { Image } from '@/components/ui/primitives/Image';
import { Icon } from '@/components/ui/icons/Icon';
import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
} from '@/components/ui/overlays/DropdownMenu';
import { useT } from '@/lib/i18n/react';
import { useLocale } from '@/lib/i18n/react';
import { formatTime } from '@/lib/format';
import { StatusPill } from '../StatusPill';
import type { DealState } from '../StatusPill';
import { dealRowVariants } from './variants';

/** Deal row data shape */
export interface DealRowDeal {
  id: string;
  title: string;
  vendorName: string;
  imageSrc: string;
  imageAlt: string;
  state: DealState;
  stockRemaining: number;
  stockTotal: number;
  windowEnd: string;
}

/** State key for DealRow CVA (lowercase variant of DealState) */
type DealRowState = VariantProps<typeof dealRowVariants>['state'];

const stateMap: Record<DealState, DealRowState> = {
  ACTIVE: 'active',
  UNDER_REVIEW: 'pending',
  PENDING_APPROVAL: 'pending',
  REJECTED: 'rejected',
  EXPIRED: 'expired',
  SOLD_OUT: 'soldOut',
  PAUSED: 'expired',
};

/** Props for DealRow */
export interface DealRowProps {
  deal: DealRowDeal;
  onPause?: () => void;
  onAddQuantity?: () => void;
  onChangeImage?: () => void;
  onChangeHours?: () => void;
  onEditInstructions?: () => void;
  onDuplicate?: () => void;
  className?: string;
}

/**
 * DealRow - vendor dashboard row for a single deal.
 * Shows image, title, inline counters, state pill, and 3-dot action menu.
 *
 * @example
 * ```tsx
 * <DealRow deal={deal} onPause={handlePause} onDuplicate={handleDuplicate} />
 * ```
 */
export function DealRow({
  deal,
  onPause,
  onAddQuantity,
  onChangeImage,
  onChangeHours,
  onEditInstructions,
  onDuplicate,
  className,
}: DealRowProps) {
  const t = useT('domain_deal_row');
  const { locale } = useLocale();

  const endTime = formatTime(deal.windowEnd, locale);
  const rowState = stateMap[deal.state] ?? 'active';

  return (
    <div
      className={cn(dealRowVariants({ state: rowState }), className)}
      /* gold shimmer keyframe defined in globals.css */
    >
      {/* Thumbnail */}
      <div className="h-14 w-14 shrink-0 overflow-hidden rounded-md">
        <Image
          src={deal.imageSrc}
          alt={deal.imageAlt}
          variant="thumb"
          loading="lazy"
          fetchpriority="auto"
          className="h-full w-full object-cover"
        />
      </div>

      {/* Info */}
      <div className="min-w-0 flex-1">
        <p className="text-text-primary truncate text-sm font-medium">{deal.title}</p>
        <p className="text-text-secondary mt-0.5 text-xs">
          {'\u05e0\u05d5\u05ea\u05e8\u05d5'} {deal.stockRemaining} {'\u05de\u05ea\u05d5\u05da'}{' '}
          {deal.stockTotal} &middot; {'\u05e2\u05d3'} {endTime}
        </p>
      </div>

      {/* State pill */}
      <StatusPill state={deal.state} size="sm" />

      {/* 3-dot menu */}
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <button
            type="button"
            className={cn(
              'flex h-8 w-8 shrink-0 items-center justify-center rounded-md',
              'text-neutral-500 transition-colors hover:bg-neutral-100',
              'focus-visible:ring-brand-primary-500 focus-visible:ring-2 focus-visible:outline-none',
            )}
            aria-label={t('actions')}
          >
            <Icon name="MoreVertical" size="sm" />
          </button>
        </DropdownMenuTrigger>
        <DropdownMenuContent>
          {onPause && (
            <DropdownMenuItem onSelect={onPause}>
              <Icon name="Clock" size="sm" />
              {t('pause')}
            </DropdownMenuItem>
          )}
          {onAddQuantity && (
            <DropdownMenuItem onSelect={onAddQuantity}>
              <Icon name="Plus" size="sm" />
              {t('add_quantity')}
            </DropdownMenuItem>
          )}
          {onChangeImage && (
            <DropdownMenuItem onSelect={onChangeImage}>
              <Icon name="Camera" size="sm" />
              {t('change_image')}
            </DropdownMenuItem>
          )}
          {onChangeHours && (
            <DropdownMenuItem onSelect={onChangeHours}>
              <Icon name="Calendar" size="sm" />
              {t('change_hours')}
            </DropdownMenuItem>
          )}
          {onEditInstructions && (
            <DropdownMenuItem onSelect={onEditInstructions}>
              <Icon name="Settings" size="sm" />
              {t('edit_instructions')}
            </DropdownMenuItem>
          )}
          {onDuplicate && (
            <DropdownMenuItem onSelect={onDuplicate}>
              <Icon name="Plus" size="sm" />
              {t('duplicate')}
            </DropdownMenuItem>
          )}
        </DropdownMenuContent>
      </DropdownMenu>
    </div>
  );
}