from jinja2 import Environment, FileSystemLoader
import markdown

def img_left_overlay(src):
    """Render an image with overlay."""
    return f'''
    <div class="img-left-overlay">
        <img src="{src}" alt="Overlay Image">
        <div class="overlay-text">Overlay Text</div>
    </div>
    '''

def box(title, content):
    """Render a box component."""
    return f'''
    <div class="box">
        <strong>{title}</strong>
        <p>{content}</p>
    </div>
    '''

def note(content):
    """Render a note component."""
    return f'''
    <div class="note">
        <p>{content}</p>
    </div>
    '''

def warning(content):
    """Render a warning component."""
    return f'''
    <div class="warning">
        ⚠️ <p>{content}</p>
    </div>
    '''

def create_jinja_environment(template_dir="templates"):
    """Set up Jinja2 environment and register custom components."""
    env = Environment(loader=FileSystemLoader(template_dir))
    env.globals.update({
        "img_left_overlay": img_left_overlay,
        "box": box,
        "note": note,
        "warning": warning,
    })
    return env

def render_markdown_with_jinja(markdown_content, template_data=None):
    """Process Markdown first, then inject Jinja2 components."""
    # Step 1: Convert Markdown to HTML
    md_html = markdown.markdown(markdown_content, extensions=['extra', 'nl2br'])

    # Step 2: Use Jinja2 to inject components into the already-rendered HTML
    env = create_jinja_environment()
    template = env.from_string(md_html)
    rendered_html = template.render(template_data or {})

    return rendered_html