/**
 * ListingTemplateCard Component
 *
 * Summary card component for displaying a single listing template.
 * Shows template overview with listing type, slot count, structure info, and item actions.
 *
 * Features:
 * - Listing type display with formatted label
 * - Item selector (primary) with code styling
 * - Structure metadata (layout, itemsPerRow)
 * - Slot badges (max 5 visible with overflow indicator)
 * - Action badges for item actions
 * - Clickable card with hover effect
 *
 * @layer Presentation
 */

import * as React from 'react';
import { ListingTemplate } from '@archer/domain';
import { Badge } from '@/components/ui/badge';
import { cn } from '@/lib/utils';
import { formatListingType, formatDataRole, formatActionType } from '@/lib/pattern-format-utils';

export interface ListingTemplateCardProps {
  template: ListingTemplate;
  onClick?: () => void;
  className?: string;
}

export const ListingTemplateCard = React.forwardRef<HTMLDivElement, ListingTemplateCardProps>(
  ({ template, onClick, className }, ref) => {
    // Convert slots Record to array for rendering
    const slotsArray = Object.entries(template.slots).map(([key, slot]) => ({
      key,
      ...slot,
    }));
    const slotCount = slotsArray.length;
    const visibleSlots = slotsArray.slice(0, 5);
    const remainingSlots = slotCount - 5;

    return (
      <div
        ref={ref}
        className={cn(
          'border rounded-lg p-4 transition-shadow cursor-pointer',
          'hover:shadow-md hover:border-cyan-400',
          className
        )}
        onClick={onClick}
        role="button"
        tabIndex={0}
        onKeyDown={(e) => {
          if (e.key === 'Enter' || e.key === ' ') {
            e.preventDefault();
            onClick?.();
          }
        }}
        aria-label={`View details for ${formatListingType(template.listingType)} template`}
      >
        {/* Header: Listing Type + Slot Count */}
        <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between mb-2">
          <h4 className="font-semibold text-gray-900">
            {formatListingType(template.listingType)}
          </h4>
          <Badge variant="default" size="sm" className="mt-2 sm:mt-0">
            {slotCount} slot{slotCount !== 1 ? 's' : ''}
          </Badge>
        </div>

        {/* Metadata: Item Selector + Structure */}
        <div className="text-sm text-gray-600 mb-3 space-y-1">
          <div className="flex items-start gap-2">
            <span className="font-medium shrink-0">Item Selector:</span>
            <code className="bg-gray-100 px-1 py-0.5 rounded text-xs font-mono break-all">
              {template.itemSelector.primary}
            </code>
          </div>
          {template.structure && (
            <div>
              <span className="font-medium">Layout:</span> {template.structure.layout}
              {template.structure.itemsPerRow && (
                <span> ({template.structure.itemsPerRow} per row)</span>
              )}
            </div>
          )}
        </div>

        {/* Slots: Show first 5 with overflow indicator */}
        <div className="flex gap-2 flex-wrap mb-2">
          {visibleSlots.map((slot) => (
            <Badge key={slot.key} variant="outline" size="sm">
              {formatDataRole(slot.role)}
            </Badge>
          ))}
          {remainingSlots > 0 && (
            <Badge variant="outline" size="sm">
              +{remainingSlots} more
            </Badge>
          )}
        </div>

        {/* Actions: Show all item actions */}
        {template.itemActions && template.itemActions.length > 0 && (
          <div className="mt-2 text-sm">
            <span className="text-gray-600 font-medium">Actions:</span>
            <div className="flex gap-1 flex-wrap mt-1">
              {template.itemActions.map((action, idx) => (
                <Badge key={idx} variant="secondary" size="sm">
                  {formatActionType(action.actionType)}
                </Badge>
              ))}
            </div>
          </div>
        )}
      </div>
    );
  }
);

ListingTemplateCard.displayName = 'ListingTemplateCard';