import re

def highlight_common_words(common_words, sentences, title):
    color_map = {}
    color_index = 0
    highlighted_html = []
    
    for idx, sentence in enumerate(sentences, start=1):
        sentence_with_idx = f"{idx}. {sentence}"
        highlighted_sentence = sentence_with_idx
        
        for index, word in common_words:
            if word not in color_map:
                color_map[word] = f'hsl({color_index * 60 % 360}, 70%, 80%)'
                color_index += 1
            escaped_word = re.escape(word)
            pattern = rf'\b{escaped_word}\b'
            highlighted_sentence = re.sub(
                pattern,
                lambda m, idx=index, color=color_map[word]: (
                    f'<span style="background-color: {color}; font-weight: bold;'
                    f' padding: 2px 4px; border-radius: 2px; position: relative;">'
                    f'<span style="background-color: black; color: white; border-radius: 50%;'
                    f' padding: 2px 5px; margin-right: 5px;">{idx}</span>'
                    f'{m.group(0)}'
                    f'</span>'
                ),
                highlighted_sentence,
                flags=re.IGNORECASE
            )
        highlighted_html.append(highlighted_sentence)
    
    final_html = "<br><br>".join(highlighted_html)
    return f'''
    <div style="border: solid 1px #; padding: 16px; background-color: #FFFFFF; color: #374151; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); border-radius: 8px;">
    <h3 style="margin-top: 0; font-size: 1em; color: #111827;">{title}</h3>
    <div style="background-color: #F5F5F5; line-height: 1.6; padding: 15px; border-radius: 8px;">{final_html}</div>
    </div>
    '''

# import re

# def highlight_common_words_dict(common_words, sentences, title, bg_color):
#     color_map = {}
#     color_index = 0
#     highlighted_html = []
    
#     for idx, (sentence, score) in enumerate(sentences.items(), start=1):
#         sentence_with_idx = f"{idx}. {sentence}"
#         highlighted_sentence = sentence_with_idx
        
#         for index, word in common_words:
#             if word not in color_map:
#                 color_map[word] = f'hsl({color_index * 60 % 360}, 70%, 80%)'
#                 color_index += 1
#             escaped_word = re.escape(word)
#             pattern = rf'\b{escaped_word}\b'
#             highlighted_sentence = re.sub(
#                 pattern,
#                 lambda m, idx=index, color=color_map[word]: (
#                     f'<span style="background-color: {color}; font-weight: bold;'
#                     f' padding: 1px 2px; border-radius: 2px; position: relative;">'
#                     f'<span style="background-color: black; color: white; border-radius: 50%;'
#                     f' padding: 1px 3px; margin-right: 3px; font-size: 0.8em;">{idx}</span>'
#                     f'{m.group(0)}'
#                     f'</span>'
#                 ),
#                 highlighted_sentence,
#                 flags=re.IGNORECASE
#             )
#         highlighted_html.append(
#             f'<div style="margin-bottom: 5px;">'
#             f'{highlighted_sentence}'
#             f'<div style="display: inline-block; margin-left: 5px; border: 1px solid #ddd; padding: 3px 5px; border-radius: 3px; background-color: white; font-size: 0.9em;">'
#             f'Entailment Score: {score}</div></div>'
#         )
    
#     final_html = "<br>".join(highlighted_html)
#     return f'''
#     <div style="border: solid 1px #; padding: 16px; background-color: {bg_color}; color: #374151; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); border-radius: 8px;">
#     <h3 style="margin-top: 0; font-size: 1em; color: #111827;">{title}</h3>
#     <div style="background-color: #F5F5F5; line-height: 1.6; padding: 15px; border-radius: 8px;">{final_html}</div>
#     </div>
#     '''

import re

def highlight_common_words_dict(common_words, selected_sentences, discarded_sentences, title):
    color_map = {}
    color_index = 0
    highlighted_html = []
    
    def highlight_sentences(sentences, start_idx, section_title):
        nonlocal color_index
        nonlocal color_map
        highlighted_sentences = [f'<h4 style="color: #374151; margin-bottom: 5px;">{section_title}</h4>']
        
        for idx, (sentence, score) in enumerate(sentences.items(), start=start_idx):
            sentence_with_idx = f"{idx}. {sentence}"
            highlighted_sentence = sentence_with_idx

            for index, word in common_words:
                if word not in color_map:
                    color_map[word] = f'hsl({color_index * 60 % 360}, 70%, 80%)'
                    color_index += 1
                escaped_word = re.escape(word)
                pattern = rf'\b{escaped_word}\b'
                highlighted_sentence = re.sub(
                    pattern,
                    lambda m, idx=index, color=color_map[word]: (
                        f'<span style="background-color: {color}; font-weight: bold;'
                        f' padding: 1px 2px; border-radius: 2px; position: relative;">'
                        f'<span style="background-color: black; color: white; border-radius: 50%;'
                        f' padding: 1px 3px; margin-right: 3px; font-size: 0.8em;">{idx}</span>'
                        f'{m.group(0)}'
                        f'</span>'
                    ),
                    highlighted_sentence,
                    flags=re.IGNORECASE
                )
            highlighted_sentences.append(
                f'<div style="margin-bottom: 5px;">'
                f'{highlighted_sentence}'
                f'<div style="display: inline-block; margin-left: 5px; border: 1px solid #ddd; padding: 3px 5px; border-radius: 3px; background-color: white; font-size: 0.9em;">'
                f'Entailment Score: {score}</div></div>'
            )
        
        return highlighted_sentences
    
    selected_html = highlight_sentences(selected_sentences, 1, "Selected Sentences")
    discarded_html = highlight_sentences(discarded_sentences, 1, "Discarded Sentences")
    
    final_html = "<br>".join(selected_html + discarded_html)
    return f'''
    <div style="border: solid 1px #; padding: 16px; background-color: #FFFFFF; color: #374151; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); border-radius: 8px;">
    <h3 style="margin-top: 0; font-size: 1em; color: #111827; margin-bottom: 10px;">{title}</h3>
    <div style="background-color: #F5F5F5; line-height: 1.6; padding: 15px; border-radius: 8px;">{final_html}</div>
    </div>
    '''