/**
 * PatternDetectionSection Component
 *
 * Container section for displaying pattern detection results from PageAnalysis.
 * Shows listing templates, search mechanism, and pagination mechanism detection.
 *
 * Features:
 * - Reliability status badge display
 * - Pattern count summary
 * - Conditional rendering based on available patterns
 * - Empty state for no patterns
 * - Placeholder sections for Phase 4 components
 *
 * @layer Presentation
 */

import * as React from 'react';
import { PageAnalysis } from '@/domain/entities/PageAnalysis';
import { ReliabilityStatusBadge } from '@/components/ui/ReliabilityStatusBadge';
import { ListingTemplateCard } from './ListingTemplateCard';
import { PaginationMechanismCard } from './components/PaginationMechanismCard';
import { ErrorBoundary } from '@/components/ErrorBoundary';
import type { ListingTemplate } from '@archer/domain';

export interface PatternDetectionSectionProps {
  analysis: PageAnalysis;
  onViewTemplate?: (template: ListingTemplate) => void;
  className?: string;
}

export const PatternDetectionSection = React.forwardRef<HTMLElement, PatternDetectionSectionProps>(
  ({ analysis, onViewTemplate, className }, ref) => {
    const hasPatterns = analysis.hasPatterns();
    const listingCount = analysis.getListingCount();

    return (
      <ErrorBoundary
        fallback={
          <div className="p-4 border border-yellow-200 bg-yellow-50 rounded">
            <p className="text-yellow-800">
              Unable to display pattern detection data. This analysis may have been created
              with an older version or contains invalid data.
            </p>
          </div>
        }
      >
        <section ref={ref} className={className} aria-label="Pattern Detection Results">
        {/* Header with reliability status */}
        <div className="flex items-center justify-between mb-4">
          <h3 className="text-lg font-semibold">Pattern Detection</h3>
          {analysis.reliabilityStatus && (
            <ReliabilityStatusBadge status={analysis.reliabilityStatus} />
          )}
        </div>

        {/* Empty state */}
        {!hasPatterns && (
          <div className="rounded-lg border border-dashed border-gray-300 bg-gray-50 p-8 text-center">
            <p className="text-sm text-gray-600">
              No patterns detected for this page.
            </p>
          </div>
        )}

        {/* Pattern sections */}
        {hasPatterns && (
          <div className="space-y-6">
            {/* Listing Templates */}
            {analysis.listingTemplates && analysis.listingTemplates.length > 0 && (
              <div className="space-y-3">
                <h4 className="text-base font-medium text-gray-900">
                  Listing Templates ({listingCount})
                </h4>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                  {analysis.listingTemplates.map((template, idx) => (
                    <ListingTemplateCard
                      key={idx}
                      template={template}
                      onClick={() => onViewTemplate?.(template)}
                    />
                  ))}
                </div>
              </div>
            )}

            {/* Search Mechanism */}
            {analysis.searchMechanism && (
              <div className="space-y-3">
                <h4 className="text-base font-medium text-gray-900">Search Mechanism</h4>
                {/* Phase 4: SearchMechanismCard component will be added here */}
                <div className="rounded-lg border border-gray-200 bg-gray-50 p-6">
                  <p className="text-sm text-gray-600">
                    Search mechanism card will be added in Phase 4.
                  </p>
                  <p className="text-xs text-gray-500 mt-2">
                    Method: {analysis.searchMechanism.method || 'Unknown'}
                  </p>
                </div>
              </div>
            )}

            {/* Pagination Mechanism */}
            {analysis.paginationMechanism && (
              <div className="space-y-2">
                <h4 className="font-medium">Pagination Mechanism</h4>
                <PaginationMechanismCard mechanism={analysis.paginationMechanism} />
              </div>
            )}
          </div>
        )}
        </section>
      </ErrorBoundary>
    );
  }
);

PatternDetectionSection.displayName = 'PatternDetectionSection';