/**
 * SearchMechanismCard Component
 *
 * Displays search mechanism detection results from PageAnalysis.
 * Shows form-based or URL pattern search implementations with selectors.
 *
 * Features:
 * - Conditional rendering based on method type (FORM_SUBMIT or URL_PATTERN)
 * - Code formatting for selectors
 * - Method badge display
 * - Empty state handling
 *
 * @layer Presentation
 */

import * as React from 'react';
import { Search } from 'lucide-react';
import { SearchMechanism, SearchMethod } from '@archer/domain';
import { cn } from '@/lib/utils';

export interface SearchMechanismCardProps {
  mechanism: SearchMechanism;
  className?: string;
}

/**
 * Simple Badge component for method type display
 */
const Badge: React.FC<{ children: React.ReactNode; className?: string }> = ({
  children,
  className,
}) => {
  return (
    <span
      className={cn(
        'inline-flex items-center px-2 py-0.5 rounded text-xs font-medium',
        'bg-blue-100 text-blue-700 border border-blue-200',
        className
      )}
    >
      {children}
    </span>
  );
};

/**
 * Code display component for selectors
 */
const Code: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  return (
    <code className="ml-2 bg-gray-100 px-2 py-0.5 rounded text-xs font-mono text-gray-800">
      {children}
    </code>
  );
};

export const SearchMechanismCard = React.forwardRef<HTMLDivElement, SearchMechanismCardProps>(
  ({ mechanism, className }, ref) => {
    const isFormSubmit = mechanism.method === SearchMethod.FORM_SUBMIT;
    const isUrlPattern = mechanism.method === SearchMethod.URL_PATTERN;

    return (
      <div ref={ref} className={cn('border rounded-lg p-4', className)}>
        {/* Header */}
        <div className="flex items-center gap-2 mb-3">
          <Search className="w-5 h-5 text-gray-600" aria-hidden="true" />
          <h4 className="font-semibold text-gray-900">Search Mechanism</h4>
          <Badge>
            {isFormSubmit ? 'Form' : isUrlPattern ? 'URL Pattern' : mechanism.method}
          </Badge>
        </div>

        {/* Form Submit Method */}
        {isFormSubmit && mechanism.formSelector && (
          <div className="space-y-2 text-sm">
            <div className="flex items-start">
              <span className="text-gray-600 min-w-[80px]">Form:</span>
              <Code>{mechanism.formSelector}</Code>
            </div>

            {mechanism.inputSelector && (
              <div className="flex items-start">
                <span className="text-gray-600 min-w-[80px]">Input:</span>
                <Code>{mechanism.inputSelector}</Code>
              </div>
            )}

            {mechanism.submitSelector && (
              <div className="flex items-start">
                <span className="text-gray-600 min-w-[80px]">Submit:</span>
                <Code>{mechanism.submitSelector}</Code>
              </div>
            )}
          </div>
        )}

        {/* URL Pattern Method */}
        {isUrlPattern && mechanism.urlPattern && (
          <div className="space-y-2 text-sm">
            <div className="flex items-start">
              <span className="text-gray-600 min-w-[80px]">URL Pattern:</span>
              <Code>{mechanism.urlPattern}</Code>
            </div>

            {mechanism.paramName && (
              <div className="flex items-start">
                <span className="text-gray-600 min-w-[80px]">Param Name:</span>
                <Code>{mechanism.paramName}</Code>
              </div>
            )}
          </div>
        )}

        {/* Fallback for unknown method or missing data */}
        {!isFormSubmit && !isUrlPattern && (
          <div className="text-sm text-gray-500">
            Search mechanism detected but method details are not available.
          </div>
        )}
      </div>
    );
  }
);

SearchMechanismCard.displayName = 'SearchMechanismCard';