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):
    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;  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="background-color: #ffffff; color: #374151;">
    <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>
    '''

def reparaphrased_sentences_html(sentences):
    
    formatted_sentences = []
    
    for idx, sentence in enumerate(sentences, start=1):
        # Add index to each sentence
        sentence_with_idx = f"{idx}. {sentence}"
        formatted_sentences.append(sentence_with_idx)
    
    final_html = "<br><br>".join(formatted_sentences)
    
    return f'''
    <div style="border: solid 1px #ccc; padding: 16px; background-color: #FFFFFF; color: #374151; 
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); border-radius: 8px;">
        <div style="background-color: #F5F5F5; line-height: 1.6; padding: 15px; border-radius: 8px;">{final_html}</div>
    </div>
    '''