/**
 * PaginationMechanismCard Component
 *
 * Card component for displaying pagination mechanism detection results.
 * Shows pagination type and type-specific selectors for different pagination patterns.
 *
 * Supports:
 * - NUMBERED_PAGES: Page links with optional active page indicator
 * - NEXT_PREV: Next and previous navigation buttons
 * - LOAD_MORE: Load more button for incremental loading
 * - INFINITE_SCROLL: Infinite scroll with container and loading indicator
 *
 * @layer Presentation
 */

import * as React from 'react';
import { List } from 'lucide-react';
import { PaginationMechanism, PaginationType } from '@archer/domain';
import { Badge } from '@/components/ui/badge';
import { formatPaginationType } from '@/lib/pattern-format-utils';

export interface PaginationMechanismCardProps {
  mechanism: PaginationMechanism;
  className?: string;
}

export const PaginationMechanismCard = React.forwardRef<HTMLDivElement, PaginationMechanismCardProps>(
  ({ mechanism, className }, ref) => {
    return (
      <div ref={ref} className={`border rounded-lg p-4 ${className || ''}`}>
        {/* Header with icon and type badge */}
        <div className="flex items-center gap-2 mb-3">
          <List className="w-5 h-5 text-blue-600" />
          <h4 className="font-semibold text-gray-900">Pagination Mechanism</h4>
          <Badge variant="secondary">{formatPaginationType(mechanism.type)}</Badge>
        </div>

        {/* Selectors section - conditional based on type */}
        <div className="space-y-2 text-sm">
          {/* NUMBERED_PAGES */}
          {mechanism.type === PaginationType.NUMBERED_PAGES && (
            <>
              {mechanism.pageNumberSelector && (
                <div>
                  <span className="text-gray-600">Page Links:</span>
                  <code className="ml-2 bg-gray-100 px-2 py-0.5 rounded text-xs font-mono">
                    {mechanism.pageNumberSelector}
                  </code>
                </div>
              )}
              {mechanism.containerSelector && (
                <div>
                  <span className="text-gray-600">Container:</span>
                  <code className="ml-2 bg-gray-100 px-2 py-0.5 rounded text-xs font-mono">
                    {mechanism.containerSelector}
                  </code>
                </div>
              )}
              {mechanism.urlPattern && (
                <div>
                  <span className="text-gray-600">URL Pattern:</span>
                  <code className="ml-2 bg-gray-100 px-2 py-0.5 rounded text-xs font-mono">
                    {mechanism.urlPattern}
                  </code>
                </div>
              )}
            </>
          )}

          {/* NEXT_PREV */}
          {mechanism.type === PaginationType.NEXT_PREV && (
            <>
              {mechanism.nextSelector && (
                <div>
                  <span className="text-gray-600">Next Button:</span>
                  <code className="ml-2 bg-gray-100 px-2 py-0.5 rounded text-xs font-mono">
                    {mechanism.nextSelector}
                  </code>
                </div>
              )}
              {mechanism.prevSelector && (
                <div>
                  <span className="text-gray-600">Previous Button:</span>
                  <code className="ml-2 bg-gray-100 px-2 py-0.5 rounded text-xs font-mono">
                    {mechanism.prevSelector}
                  </code>
                </div>
              )}
              {mechanism.containerSelector && (
                <div>
                  <span className="text-gray-600">Container:</span>
                  <code className="ml-2 bg-gray-100 px-2 py-0.5 rounded text-xs font-mono">
                    {mechanism.containerSelector}
                  </code>
                </div>
              )}
            </>
          )}

          {/* LOAD_MORE */}
          {mechanism.type === PaginationType.LOAD_MORE && (
            <>
              {mechanism.buttonSelector && (
                <div>
                  <span className="text-gray-600">Load More Button:</span>
                  <code className="ml-2 bg-gray-100 px-2 py-0.5 rounded text-xs font-mono">
                    {mechanism.buttonSelector}
                  </code>
                </div>
              )}
              {mechanism.containerSelector && (
                <div>
                  <span className="text-gray-600">Container:</span>
                  <code className="ml-2 bg-gray-100 px-2 py-0.5 rounded text-xs font-mono">
                    {mechanism.containerSelector}
                  </code>
                </div>
              )}
            </>
          )}

          {/* INFINITE_SCROLL */}
          {mechanism.type === PaginationType.INFINITE_SCROLL && (
            <>
              {mechanism.containerSelector && (
                <div>
                  <span className="text-gray-600">Scroll Container:</span>
                  <code className="ml-2 bg-gray-100 px-2 py-0.5 rounded text-xs font-mono">
                    {mechanism.containerSelector}
                  </code>
                </div>
              )}
              {/* Note: loadingIndicatorSelector not in interface, but we check for common alternative fields */}
              {mechanism.nextSelector && (
                <div>
                  <span className="text-gray-600">Loading Trigger:</span>
                  <code className="ml-2 bg-gray-100 px-2 py-0.5 rounded text-xs font-mono">
                    {mechanism.nextSelector}
                  </code>
                </div>
              )}
            </>
          )}

          {/* Fallback if no selectors available */}
          {!hasAnySelectors(mechanism) && (
            <div className="text-gray-500 italic">
              No selector details available
            </div>
          )}
        </div>
      </div>
    );
  }
);

PaginationMechanismCard.displayName = 'PaginationMechanismCard';

/**
 * Checks if pagination mechanism has any selector fields defined
 *
 * @param mechanism - PaginationMechanism to check
 * @returns true if any selector field is defined
 */
function hasAnySelectors(mechanism: PaginationMechanism): boolean {
  return !!(
    mechanism.containerSelector ||
    mechanism.nextSelector ||
    mechanism.prevSelector ||
    mechanism.pageNumberSelector ||
    mechanism.buttonSelector ||
    mechanism.urlPattern
  );
}