core/preview_generator.py

"""
Preview Generator for Typography and Color Previews

Generates HTML previews for:
1. Typography - Actual font rendering with detected styles
2. Colors AS-IS - Simple swatches showing extracted colors (Stage 1)
3. Color Ramps - 11 shades (50-950) with AA compliance (Stage 2)
4. Spacing AS-IS - Visual spacing blocks
5. Radius AS-IS - Rounded corner examples
6. Shadows AS-IS - Shadow examples
"""

from typing import Optional
import colorsys
import re


# =============================================================================
# STAGE 1: AS-IS PREVIEWS (No enhancements, just raw extracted values)
# =============================================================================

def generate_colors_asis_preview_html(
    color_tokens: dict,
    background: str = "#FAFAFA"
) -> str:
    """
    Generate HTML preview for AS-IS colors (Stage 1).
    
    Shows simple color swatches without generated ramps.
    
    Args:
        color_tokens: Dict of colors {name: {value: "#hex", ...}}
        background: Background color
    
    Returns:
        HTML string for Gradio HTML component
    """
    
    rows_html = ""
    
    for name, token in list(color_tokens.items())[:20]:  # Limit to 20 colors
        # Get hex value
        if isinstance(token, dict):
            hex_val = token.get("value", "#888888")
            frequency = token.get("frequency", 0)
            contexts = token.get("contexts", [])
            contrast_white = token.get("contrast_white", 0)
        else:
            hex_val = str(token)
            frequency = 0
            contexts = []
            contrast_white = 0
        
        # Clean up hex
        if not hex_val.startswith("#"):
            hex_val = f"#{hex_val}"
        
        # Clean name
        display_name = name.replace("_", " ").replace("-", " ").title()
        if len(display_name) > 20:
            display_name = display_name[:17] + "..."
        
        # AA compliance check
        aa_status = "✓ AA" if contrast_white and contrast_white >= 4.5 else "✗ AA" if contrast_white else ""
        aa_class = "aa-pass" if contrast_white and contrast_white >= 4.5 else "aa-fail"
        
        # Context badges
        context_html = ""
        for ctx in contexts[:2]:
            context_html += f'<span class="context-badge">{ctx}</span>'
        
        rows_html += f'''
        <div class="color-row-asis">
            <div class="color-swatch-large" style="background-color: {hex_val};"></div>
            <div class="color-info-asis">
                <div class="color-name-asis">{display_name}</div>
                <div class="color-hex-asis">{hex_val}</div>
                <div class="color-meta-asis">
                    <span class="frequency">Used {frequency}x</span>
                    {context_html}
                    <span class="{aa_class}">{aa_status}</span>
                </div>
            </div>
        </div>
        '''
    
    html = f'''
    <style>
        .colors-asis-preview {{
            font-family: system-ui, -apple-system, sans-serif;
            background: {background};
            border-radius: 12px;
            padding: 20px;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 16px;
        }}
        
        .color-row-asis {{
            display: flex;
            align-items: center;
            background: #fff;
            border-radius: 8px;
            padding: 12px;
            border: 1px solid #e0e0e0;
        }}
        
        .color-swatch-large {{
            width: 60px;
            height: 60px;
            border-radius: 8px;
            border: 2px solid rgba(0,0,0,0.1);
            margin-right: 16px;
            flex-shrink: 0;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }}
        
        .color-info-asis {{
            flex: 1;
        }}
        
        .color-name-asis {{
            font-weight: 700;
            font-size: 14px;
            color: #1a1a1a;
            margin-bottom: 4px;
        }}
        
        .color-hex-asis {{
            font-size: 13px;
            color: #444;
            font-family: 'SF Mono', Monaco, monospace;
            margin-bottom: 6px;
        }}
        
        .color-meta-asis {{
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            align-items: center;
        }}
        
        .frequency {{
            font-size: 11px;
            color: #666;
        }}
        
        .context-badge {{
            font-size: 10px;
            background: #e8e8e8;
            padding: 2px 6px;
            border-radius: 4px;
            color: #555;
        }}
        
        .aa-pass {{
            font-size: 11px;
            color: #16a34a;
            font-weight: 600;
        }}
        
        .aa-fail {{
            font-size: 11px;
            color: #dc2626;
            font-weight: 600;
        }}
    </style>
    
    <div class="colors-asis-preview">
        {rows_html}
    </div>
    '''
    
    return html


def generate_spacing_asis_preview_html(
    spacing_tokens: dict,
    background: str = "#FAFAFA"
) -> str:
    """
    Generate HTML preview for AS-IS spacing (Stage 1).
    
    Shows visual blocks representing each spacing value.
    """
    
    rows_html = ""
    
    # Sort by pixel value
    sorted_tokens = []
    for name, token in spacing_tokens.items():
        if isinstance(token, dict):
            value_px = token.get("value_px", 0)
            value = token.get("value", "0px")
        else:
            value = str(token)
            value_px = float(re.sub(r'[^0-9.]', '', value) or 0)
        sorted_tokens.append((name, token, value_px, value))
    
    sorted_tokens.sort(key=lambda x: x[2])
    
    for name, token, value_px, value in sorted_tokens[:15]:
        # Cap visual width at 200px
        visual_width = min(value_px, 200)
        
        rows_html += f'''
        <div class="spacing-row-asis">
            <div class="spacing-label">{value}</div>
            <div class="spacing-bar" style="width: {visual_width}px;"></div>
        </div>
        '''
    
    html = f'''
    <style>
        .spacing-asis-preview {{
            font-family: system-ui, -apple-system, sans-serif;
            background: {background};
            border-radius: 12px;
            padding: 20px;
        }}
        
        .spacing-row-asis {{
            display: flex;
            align-items: center;
            margin-bottom: 12px;
        }}
        
        .spacing-label {{
            width: 60px;
            font-size: 13px;
            font-weight: 600;
            color: #333;
            font-family: monospace;
        }}
        
        .spacing-bar {{
            height: 24px;
            background: linear-gradient(90deg, #3b82f6 0%, #60a5fa 100%);
            border-radius: 4px;
            min-width: 4px;
        }}
    </style>
    
    <div class="spacing-asis-preview">
        {rows_html}
    </div>
    '''
    
    return html


def generate_radius_asis_preview_html(
    radius_tokens: dict,
    background: str = "#FAFAFA"
) -> str:
    """
    Generate HTML preview for AS-IS border radius (Stage 1).
    
    Shows boxes with each radius value applied.
    """
    
    rows_html = ""
    
    for name, token in list(radius_tokens.items())[:12]:
        if isinstance(token, dict):
            value = token.get("value", "0px")
        else:
            value = str(token)
        
        rows_html += f'''
        <div class="radius-item">
            <div class="radius-box" style="border-radius: {value};"></div>
            <div class="radius-label">{value}</div>
        </div>
        '''
    
    html = f'''
    <style>
        .radius-asis-preview {{
            font-family: system-ui, -apple-system, sans-serif;
            background: {background};
            border-radius: 12px;
            padding: 20px;
            display: flex;
            flex-wrap: wrap;
            gap: 16px;
        }}
        
        .radius-item {{
            display: flex;
            flex-direction: column;
            align-items: center;
        }}
        
        .radius-box {{
            width: 60px;
            height: 60px;
            background: #3b82f6;
            margin-bottom: 8px;
        }}
        
        .radius-label {{
            font-size: 12px;
            font-weight: 600;
            color: #333;
            font-family: monospace;
        }}
    </style>
    
    <div class="radius-asis-preview">
        {rows_html}
    </div>
    '''
    
    return html


def generate_shadows_asis_preview_html(
    shadow_tokens: dict,
    background: str = "#FAFAFA"
) -> str:
    """
    Generate HTML preview for AS-IS shadows (Stage 1).
    
    Shows cards with each shadow value applied.
    """
    
    rows_html = ""
    
    for name, token in list(shadow_tokens.items())[:8]:
        if isinstance(token, dict):
            value = token.get("value", "none")
        else:
            value = str(token)
        
        # Clean name for display
        display_name = name.replace("_", " ").replace("-", " ").title()
        if len(display_name) > 15:
            display_name = display_name[:12] + "..."
        
        rows_html += f'''
        <div class="shadow-item">
            <div class="shadow-box" style="box-shadow: {value};"></div>
            <div class="shadow-label">{display_name}</div>
            <div class="shadow-value">{value[:40]}...</div>
        </div>
        '''
    
    html = f'''
    <style>
        .shadows-asis-preview {{
            font-family: system-ui, -apple-system, sans-serif;
            background: {background};
            border-radius: 12px;
            padding: 20px;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            gap: 24px;
        }}
        
        .shadow-item {{
            display: flex;
            flex-direction: column;
            align-items: center;
        }}
        
        .shadow-box {{
            width: 100px;
            height: 100px;
            background: #fff;
            border-radius: 8px;
            margin-bottom: 12px;
        }}
        
        .shadow-label {{
            font-size: 12px;
            font-weight: 600;
            color: #333;
            margin-bottom: 4px;
        }}
        
        .shadow-value {{
            font-size: 10px;
            color: #666;
            font-family: monospace;
            text-align: center;
            word-break: break-all;
        }}
    </style>
    
    <div class="shadows-asis-preview">
        {rows_html}
    </div>
    '''
    
    return html


# =============================================================================
# STAGE 2: TYPOGRAPHY PREVIEW (with rendered font)
# =============================================================================

def generate_typography_preview_html(
    typography_tokens: dict,
    font_family: str = "Open Sans",
    background: str = "#FAFAFA",
    sample_text: str = "The quick brown fox jumps over the lazy dog"
) -> str:
    """
    Generate HTML preview for typography tokens.
    
    Args:
        typography_tokens: Dict of typography styles {name: {font_size, font_weight, line_height, letter_spacing}}
        font_family: Primary font family detected
        background: Background color (neutral)
        sample_text: Text to render for preview
    
    Returns:
        HTML string for Gradio HTML component
    """
    
    # Sort tokens by font size (largest first)
    sorted_tokens = []
    for name, token in typography_tokens.items():
        size_str = str(token.get("font_size", "16px"))
        size_num = float(re.sub(r'[^0-9.]', '', size_str) or 16)
        sorted_tokens.append((name, token, size_num))
    
    sorted_tokens.sort(key=lambda x: -x[2])  # Descending by size
    
    # Generate rows
    rows_html = ""
    for name, token, size_num in sorted_tokens[:15]:  # Limit to 15 styles
        font_size = token.get("font_size", "16px")
        font_weight = token.get("font_weight", "400")
        line_height = token.get("line_height", "1.5")
        letter_spacing = token.get("letter_spacing", "0")
        
        # Convert weight names to numbers
        weight_map = {
            "thin": 100, "extralight": 200, "light": 300, "regular": 400,
            "medium": 500, "semibold": 600, "bold": 700, "extrabold": 800, "black": 900
        }
        if isinstance(font_weight, str) and font_weight.lower() in weight_map:
            font_weight = weight_map[font_weight.lower()]
        
        # Weight label
        weight_labels = {
            100: "Thin", 200: "ExtraLight", 300: "Light", 400: "Regular",
            500: "Medium", 600: "SemiBold", 700: "Bold", 800: "ExtraBold", 900: "Black"
        }
        weight_label = weight_labels.get(int(font_weight) if str(font_weight).isdigit() else 400, "Regular")
        
        # Clean up name for display
        display_name = name.replace("_", " ").replace("-", " ").title()
        if len(display_name) > 15:
            display_name = display_name[:15] + "..."
        
        # Truncate sample text for large sizes
        display_text = sample_text
        if size_num > 48:
            display_text = sample_text[:30] + "..."
        elif size_num > 32:
            display_text = sample_text[:40] + "..."
        
        rows_html += f'''
        <tr class="meta-row">
            <td class="scale-name">
                <div class="scale-label">{display_name}</div>
            </td>
            <td class="meta">{font_family}</td>
            <td class="meta">{weight_label}</td>
            <td class="meta">{int(size_num)}</td>
            <td class="meta">Sentence</td>
            <td class="meta">{letter_spacing}</td>
        </tr>
        <tr>
            <td colspan="6" class="preview-cell">
                <div class="preview-text" style="
                    font-family: '{font_family}', sans-serif;
                    font-size: {font_size};
                    font-weight: {font_weight};
                    line-height: {line_height};
                    letter-spacing: {letter_spacing}px;
                ">{display_text}</div>
            </td>
        </tr>
        '''
    
    html = f'''
    <style>
        @import url('https://fonts.googleapis.com/css2?family={font_family.replace(" ", "+")}:wght@100;200;300;400;500;600;700;800;900&display=swap');
        
        .typography-preview {{
            font-family: system-ui, -apple-system, sans-serif;
            background: {background};
            border-radius: 12px;
            padding: 20px;
            overflow-x: auto;
        }}
        
        .typography-preview table {{
            width: 100%;
            border-collapse: collapse;
        }}
        
        .typography-preview th {{
            text-align: left;
            padding: 12px 16px;
            font-size: 12px;
            font-weight: 600;
            color: #333;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            border-bottom: 2px solid #E0E0E0;
            background: #F5F5F5;
        }}
        
        .typography-preview td {{
            padding: 8px 16px;
            vertical-align: middle;
        }}
        
        .typography-preview .meta-row {{
            background: #F8F8F8;
            border-top: 1px solid #E8E8E8;
        }}
        
        .typography-preview .scale-name {{
            font-weight: 700;
            color: #1A1A1A;
            min-width: 120px;
        }}
        
        .typography-preview .scale-label {{
            font-size: 13px;
            font-weight: 600;
            color: #1A1A1A;
            background: #E8E8E8;
            padding: 4px 8px;
            border-radius: 4px;
            display: inline-block;
        }}
        
        .typography-preview .meta {{
            font-size: 13px;
            color: #444;
            white-space: nowrap;
        }}
        
        .typography-preview .preview-cell {{
            padding: 16px;
            background: #FFFFFF;
            border-bottom: 1px solid #E8E8E8;
        }}
        
        .typography-preview .preview-text {{
            color: #1A1A1A;
            margin: 0;
            word-break: break-word;
        }}
        
        .typography-preview tr:hover .preview-cell {{
            background: #F5F5F5;
        }}
    </style>
    
    <div class="typography-preview">
        <table>
            <thead>
                <tr>
                    <th>Scale Category</th>
                    <th>Typeface</th>
                    <th>Weight</th>
                    <th>Size</th>
                    <th>Case</th>
                    <th>Letter Spacing</th>
                </tr>
            </thead>
            <tbody>
                {rows_html}
            </tbody>
        </table>
    </div>
    '''
    
    return html


# =============================================================================
# COLOR RAMP PREVIEW
# =============================================================================

def hex_to_rgb(hex_color: str) -> tuple:
    """Convert hex color to RGB tuple."""
    hex_color = hex_color.lstrip('#')
    if len(hex_color) == 3:
        hex_color = ''.join([c*2 for c in hex_color])
    return tuple(int(hex_color[i:i+2], 16) for i in (0, 2, 4))


def rgb_to_hex(rgb: tuple) -> str:
    """Convert RGB tuple to hex string."""
    return '#{:02x}{:02x}{:02x}'.format(int(rgb[0]), int(rgb[1]), int(rgb[2]))


def get_luminance(rgb: tuple) -> float:
    """Calculate relative luminance for contrast ratio."""
    def adjust(c):
        c = c / 255
        return c / 12.92 if c <= 0.03928 else ((c + 0.055) / 1.055) ** 2.4
    
    r, g, b = rgb
    return 0.2126 * adjust(r) + 0.7152 * adjust(g) + 0.0722 * adjust(b)


def get_contrast_ratio(color1: tuple, color2: tuple) -> float:
    """Calculate contrast ratio between two colors."""
    l1 = get_luminance(color1)
    l2 = get_luminance(color2)
    lighter = max(l1, l2)
    darker = min(l1, l2)
    return (lighter + 0.05) / (darker + 0.05)


def generate_color_ramp(base_hex: str) -> list[dict]:
    """
    Generate 11 shades (50-950) from a base color.
    
    Uses OKLCH-like approach for perceptually uniform steps.
    """
    try:
        rgb = hex_to_rgb(base_hex)
    except:
        return []
    
    # Convert to HLS for easier manipulation
    r, g, b = [x / 255 for x in rgb]
    h, l, s = colorsys.rgb_to_hls(r, g, b)
    
    # Define lightness levels for each shade
    # 50 = very light (0.95), 500 = base, 950 = very dark (0.05)
    shade_lightness = {
        50: 0.95,
        100: 0.90,
        200: 0.80,
        300: 0.70,
        400: 0.60,
        500: l,  # Keep original lightness for 500
        600: 0.45,
        700: 0.35,
        800: 0.25,
        900: 0.15,
        950: 0.08,
    }
    
    # Adjust saturation for light/dark shades
    ramp = []
    for shade, target_l in shade_lightness.items():
        # Reduce saturation for very light colors
        if target_l > 0.8:
            adjusted_s = s * 0.6
        elif target_l < 0.2:
            adjusted_s = s * 0.8
        else:
            adjusted_s = s
        
        # Generate new RGB
        new_r, new_g, new_b = colorsys.hls_to_rgb(h, target_l, adjusted_s)
        new_rgb = (int(new_r * 255), int(new_g * 255), int(new_b * 255))
        new_hex = rgb_to_hex(new_rgb)
        
        # Check AA compliance
        white = (255, 255, 255)
        black = (0, 0, 0)
        contrast_white = get_contrast_ratio(new_rgb, white)
        contrast_black = get_contrast_ratio(new_rgb, black)
        
        # AA requires 4.5:1 for normal text
        aa_on_white = contrast_white >= 4.5
        aa_on_black = contrast_black >= 4.5
        
        ramp.append({
            "shade": shade,
            "hex": new_hex,
            "rgb": new_rgb,
            "contrast_white": round(contrast_white, 2),
            "contrast_black": round(contrast_black, 2),
            "aa_on_white": aa_on_white,
            "aa_on_black": aa_on_black,
        })
    
    return ramp


def generate_color_ramps_preview_html(
    color_tokens: dict,
    background: str = "#FAFAFA"
) -> str:
    """
    Generate HTML preview for color ramps.
    
    Args:
        color_tokens: Dict of colors {name: {value: "#hex", ...}}
        background: Background color
    
    Returns:
        HTML string for Gradio HTML component
    """
    
    rows_html = ""
    
    for name, token in list(color_tokens.items())[:10]:  # Limit to 10 colors
        # Get hex value
        if isinstance(token, dict):
            hex_val = token.get("value", "#888888")
        else:
            hex_val = str(token)
        
        # Clean up hex
        if not hex_val.startswith("#"):
            hex_val = f"#{hex_val}"
        
        # Generate ramp
        ramp = generate_color_ramp(hex_val)
        if not ramp:
            continue
        
        # Clean name
        display_name = name.replace("_", " ").replace("-", " ").title()
        if len(display_name) > 15:
            display_name = display_name[:12] + "..."
        
        # Generate shade cells
        shades_html = ""
        for shade_info in ramp:
            shade = shade_info["shade"]
            hex_color = shade_info["hex"]
            aa_white = shade_info["aa_on_white"]
            aa_black = shade_info["aa_on_black"]
            
            # Determine text color for label
            text_color = "#000" if shade < 500 else "#FFF"
            
            # AA indicator
            if aa_white or aa_black:
                aa_indicator = "✓"
                aa_class = "aa-pass"
            else:
                aa_indicator = "✗"
                aa_class = "aa-fail"
            
            shades_html += f'''
            <div class="shade-cell" style="background-color: {hex_color};" title="{hex_color} | AA: {'Pass' if aa_white or aa_black else 'Fail'}">
                <span class="shade-label" style="color: {text_color};">{shade}</span>
                <span class="aa-badge {aa_class}">{aa_indicator}</span>
            </div>
            '''
        
        rows_html += f'''
        <div class="color-row">
            <div class="color-info">
                <div class="color-swatch" style="background-color: {hex_val};"></div>
                <div class="color-meta">
                    <div class="color-name">{display_name}</div>
                    <div class="color-hex">{hex_val}</div>
                </div>
            </div>
            <div class="color-ramp">
                {shades_html}
            </div>
        </div>
        '''
    
    html = f'''
    <style>
        .color-ramps-preview {{
            font-family: system-ui, -apple-system, sans-serif;
            background: {background};
            border-radius: 12px;
            padding: 20px;
            overflow-x: auto;
        }}
        
        .color-row {{
            display: flex;
            align-items: center;
            margin-bottom: 16px;
            padding-bottom: 16px;
            border-bottom: 1px solid #E8E8E8;
        }}
        
        .color-row:last-child {{
            border-bottom: none;
            margin-bottom: 0;
            padding-bottom: 0;
        }}
        
        .color-info {{
            display: flex;
            align-items: center;
            min-width: 140px;
            margin-right: 20px;
        }}
        
        .color-swatch {{
            width: 40px;
            height: 40px;
            border-radius: 8px;
            border: 2px solid rgba(0,0,0,0.15);
            margin-right: 12px;
            flex-shrink: 0;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }}
        
        .color-meta {{
            flex: 1;
            min-width: 100px;
        }}
        
        .color-name {{
            font-weight: 700;
            font-size: 13px;
            color: #1A1A1A;
            margin-bottom: 2px;
            background: #E8E8E8;
            padding: 3px 8px;
            border-radius: 4px;
            display: inline-block;
        }}
        
        .color-hex {{
            font-size: 11px;
            color: #444;
            font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
            margin-top: 4px;
        }}
        
        .color-ramp {{
            display: flex;
            gap: 4px;
            flex: 1;
        }}
        
        .shade-cell {{
            width: 48px;
            height: 48px;
            border-radius: 6px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: relative;
            cursor: pointer;
            transition: transform 0.15s;
            border: 1px solid rgba(0,0,0,0.1);
        }}
        
        .shade-cell:hover {{
            transform: scale(1.1);
            z-index: 10;
            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
        }}
        
        .shade-label {{
            font-size: 10px;
            font-weight: 700;
        }}
        
        .aa-badge {{
            font-size: 12px;
            margin-top: 2px;
            font-weight: 700;
        }}
        
        .aa-pass {{
            color: #16A34A;
        }}
        
        .aa-fail {{
            color: #DC2626;
        }}
        
        .shade-cell:hover .shade-label,
        .shade-cell:hover .aa-badge {{
            opacity: 1;
        }}
        
        /* Header row */
        .ramp-header {{
            display: flex;
            margin-bottom: 12px;
            padding-left: 160px;
        }}
        
        .ramp-header-label {{
            width: 48px;
            text-align: center;
            font-size: 11px;
            font-weight: 600;
            color: #666;
            margin-right: 4px;
        }}
    </style>
    
    <div class="color-ramps-preview">
        <div class="ramp-header">
            <span class="ramp-header-label">50</span>
            <span class="ramp-header-label">100</span>
            <span class="ramp-header-label">200</span>
            <span class="ramp-header-label">300</span>
            <span class="ramp-header-label">400</span>
            <span class="ramp-header-label">500</span>
            <span class="ramp-header-label">600</span>
            <span class="ramp-header-label">700</span>
            <span class="ramp-header-label">800</span>
            <span class="ramp-header-label">900</span>
            <span class="ramp-header-label">950</span>
        </div>
        {rows_html}
    </div>
    '''
    
    return html


# =============================================================================
# COMBINED PREVIEW
# =============================================================================

def generate_design_system_preview_html(
    typography_tokens: dict,
    color_tokens: dict,
    font_family: str = "Open Sans",
    sample_text: str = "The quick brown fox jumps over the lazy dog"
) -> tuple[str, str]:
    """
    Generate both typography and color ramp previews.
    
    Returns:
        Tuple of (typography_html, color_ramps_html)
    """
    typography_html = generate_typography_preview_html(
        typography_tokens=typography_tokens,
        font_family=font_family,
        sample_text=sample_text,
    )
    
    color_ramps_html = generate_color_ramps_preview_html(
        color_tokens=color_tokens,
    )
    
    return typography_html, color_ramps_html