import React from 'react';
import { PlugInIcon, CheckCircleIcon, XCircleIcon } from '../../icons';

interface Link {
  anchor_text: string;
  target_content_id: number;
  target_url?: string;
  cluster_match?: boolean; // Stage 3: Cluster match flag
  taxonomy_match?: boolean; // Stage 3: Taxonomy match flag
  relevance_score?: number; // Stage 3: Relevance score
}

interface LinkResultsProps {
  contentId: number;
  links: Link[];
  linksAdded: number;
  linkerVersion: number;
}

export const LinkResults: React.FC<LinkResultsProps> = ({
  contentId,
  links,
  linksAdded,
  linkerVersion,
}) => {
  if (!links || links.length === 0) {
    return (
      <div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
        <div className="flex items-center justify-between mb-4">
          <h3 className="text-lg font-semibold text-gray-900 dark:text-white">Linking Results</h3>
          <div className="flex items-center gap-2">
            <PlugInIcon className="w-5 h-5 text-blue-500" />
            <span className="text-sm text-gray-600 dark:text-gray-400">Version {linkerVersion}</span>
          </div>
        </div>
        <div className="text-center py-8 text-gray-500 dark:text-gray-400">
          <PlugInIcon className="w-12 h-12 mx-auto mb-3 opacity-50" />
          <p className="text-sm">No links found to add</p>
        </div>
      </div>
    );
  }

  return (
    <div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
      <div className="flex items-center justify-between mb-4">
        <h3 className="text-lg font-semibold text-gray-900 dark:text-white">Linking Results</h3>
        <div className="flex items-center gap-2">
          <PlugInIcon className="w-5 h-5 text-blue-500" />
          <span className="text-sm text-gray-600 dark:text-gray-400">Version {linkerVersion}</span>
        </div>
      </div>

      {linksAdded > 0 ? (
        <div className="space-y-4">
          <div className="flex items-center gap-2 text-green-600 dark:text-green-400">
            <CheckCircleIcon className="w-5 h-5" />
            <span className="font-medium">{linksAdded} link{linksAdded !== 1 ? 's' : ''} added</span>
          </div>

          <div className="border-t border-gray-200 dark:border-gray-700 pt-4">
            <h4 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Added Links:</h4>
            {/* Stage 3: Group links by cluster match */}
            {links.some(l => l.cluster_match) && (
              <div className="mb-4">
                <div className="text-xs font-semibold text-blue-600 dark:text-blue-400 mb-2">
                  Cluster Matches (High Priority)
                </div>
                <ul className="space-y-2">
                  {links.filter(l => l.cluster_match).map((link, index) => (
                    <li key={`cluster-${index}`} className="flex items-center gap-2 text-sm pl-2 border-l-2 border-blue-500">
                      <span className="text-gray-600 dark:text-gray-400">"{link.anchor_text || 'Untitled'}"</span>
                      <span className="text-gray-400">→</span>
                      <span className="text-blue-600 dark:text-blue-400">
                        Content #{link.target_content_id || 'N/A'}
                      </span>
                      {link.relevance_score !== undefined && (
                        <span className="text-xs text-gray-500 dark:text-gray-400">
                          (Score: {link.relevance_score.toFixed(1)})
                        </span>
                      )}
                    </li>
                  ))}
                </ul>
              </div>
            )}
            
            {/* Other links */}
            {links.filter(l => !l.cluster_match || l.cluster_match === false).length > 0 && (
              <div>
                <div className="text-xs font-semibold text-gray-600 dark:text-gray-400 mb-2">
                  Other Links
                </div>
                <ul className="space-y-2">
                  {links.filter(l => !l.cluster_match || l.cluster_match === false).map((link, index) => (
                    <li key={`other-${index}`} className="flex items-center gap-2 text-sm">
                      <span className="text-gray-600 dark:text-gray-400">"{link.anchor_text || 'Untitled'}"</span>
                      <span className="text-gray-400">→</span>
                      <span className="text-blue-600 dark:text-blue-400">
                        Content #{link.target_content_id || 'N/A'}
                      </span>
                      {link.relevance_score !== undefined && (
                        <span className="text-xs text-gray-500 dark:text-gray-400">
                          (Score: {link.relevance_score.toFixed(1)})
                        </span>
                      )}
                    </li>
                  ))}
                </ul>
              </div>
            )}
            
            {/* Fallback if no grouping */}
            {!links.some(l => l.cluster_match !== undefined) && (
              <ul className="space-y-2">
                {links.map((link, index) => (
                  <li key={index} className="flex items-center gap-2 text-sm">
                    <span className="text-gray-600 dark:text-gray-400">"{link.anchor_text}"</span>
                    <span className="text-gray-400">→</span>
                    <span className="text-blue-600 dark:text-blue-400">
                      Content #{link.target_content_id}
                    </span>
                  </li>
                ))}
              </ul>
            )}
          </div>
        </div>
      ) : (
        <div className="flex items-center gap-2 text-gray-500 dark:text-gray-400">
          <XCircleIcon className="w-5 h-5" />
          <span>No links were added to this content.</span>
        </div>
      )}
    </div>
  );
};

