import pickle
import pandas as pd
from bokeh.plotting import figure
from bokeh.models import ColumnDataSource, HoverTool, Div
from bokeh.layouts import column
import logging

# Configure logging
logging.basicConfig(level=logging.INFO)
logger = logging.getLogger(__name__)

def create_plot():
    # Load preprocessed data
    logger.info("Loading preprocessed data...")
    with open('processed_data.pkl', 'rb') as f:
        df = pickle.load(f)
    with open('contour_data.pkl', 'rb') as f:
        contour_data = pickle.load(f)
    logger.info("Data loaded successfully.")
    
    logger.info("Creating Bokeh plot...")
    
    p = figure(width=1280, height=800, title="UMAP projection of embeddings")

    # Load contour data
    contour_source = ColumnDataSource(data=dict(xs=contour_data['xs'], 
                                                ys=contour_data['ys'], 
                                                color=contour_data['color']))
    contour_renderer = p.patches(xs="xs", ys="ys", source=contour_source, fill_alpha=0.3, line_color=None, fill_color="color")

    # Scatter plot
    source = ColumnDataSource(df)
    scatter_renderer = p.scatter('x', 'y', size=3, source=source, fill_alpha=0.2, line_alpha=0.1)

    # Configure hover tool to display images
    hover = HoverTool(renderers=[scatter_renderer])
    hover.tooltips = """
        <div>
            <div>
                <strong>Image ID:</strong> @id
            </div>
            <div>
                <strong>Cap_ref:</strong> @caption
            </div>
            <div>
                <strong>URL:</strong> @url
            </div>
            <div>
                <img
                    src="data:image/jpeg;base64,@image_b64" height="200" alt="Image"
                    style="float: left; margin: 0px 15px 15px 0px;"
                    border="2"
                ></img>
            </div>
        </div>
    """
    p.add_tools(hover)

    return p