semantic_analyzer.py

"""
Agent 1C: Semantic Color Analyzer
Design System Extractor v2

Persona: Design System Semanticist

Responsibilities:
- Analyze colors based on their actual CSS usage
- Categorize into semantic roles (brand, text, background, border, feedback)
- Use LLM to understand color relationships and hierarchy
- Provide structured output for Stage 1 UI and Stage 2 analysis
"""

import json
import re
from typing import Optional, Callable
from datetime import datetime

from core.color_utils import (
    parse_color,
    get_contrast_with_white,
    get_contrast_with_black,
    check_wcag_compliance,
)


class SemanticColorAnalyzer:
    """
    Analyzes extracted colors and categorizes them by semantic role.
    
    Uses LLM to understand:
    - Which colors are brand/primary colors (used on buttons, CTAs)
    - Which colors are for text (used with 'color' property)
    - Which colors are backgrounds (used with 'background-color')
    - Which colors are borders (used with 'border-color')
    - Which colors are feedback states (error, success, warning)
    """
    
    def __init__(self, llm_provider=None):
        """
        Initialize the semantic analyzer.
        
        Args:
            llm_provider: Optional LLM provider for AI analysis.
                         If None, uses rule-based fallback.
        """
        self.llm_provider = llm_provider
        self.analysis_result = {}
        self.logs = []
        
    def log(self, message: str):
        """Add timestamped log message."""
        timestamp = datetime.now().strftime("%H:%M:%S")
        self.logs.append(f"[{timestamp}] {message}")
        
    def get_logs(self) -> str:
        """Get all logs as string."""
        return "\n".join(self.logs)
    
    def _prepare_color_data_for_llm(self, colors: dict) -> str:
        """
        Prepare color data in a format optimized for LLM analysis.
        
        Args:
            colors: Dict of color tokens with metadata
            
        Returns:
            Formatted string for LLM prompt
        """
        color_entries = []
        
        for name, token in colors.items():
            # Handle both dict and object formats
            if hasattr(token, 'value'):
                hex_val = token.value
                frequency = token.frequency
                contexts = token.contexts if hasattr(token, 'contexts') else []
                elements = token.elements if hasattr(token, 'elements') else []
                css_props = token.css_properties if hasattr(token, 'css_properties') else []
            else:
                hex_val = token.get('value', '#000000')
                frequency = token.get('frequency', 0)
                contexts = token.get('contexts', [])
                elements = token.get('elements', [])
                css_props = token.get('css_properties', [])
            
            # Calculate color properties
            contrast_white = get_contrast_with_white(hex_val)
            contrast_black = get_contrast_with_black(hex_val)
            
            # Determine luminance
            try:
                r = int(hex_val[1:3], 16)
                g = int(hex_val[3:5], 16)
                b = int(hex_val[5:7], 16)
                luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255
                
                # Calculate saturation
                max_c = max(r, g, b)
                min_c = min(r, g, b)
                saturation = (max_c - min_c) / 255 if max_c > 0 else 0
            except:
                luminance = 0.5
                saturation = 0
            
            entry = {
                "hex": hex_val,
                "name": name,
                "frequency": frequency,
                "css_properties": css_props[:5],  # Limit for prompt size
                "elements": elements[:5],
                "contexts": contexts[:3],
                "luminance": round(luminance, 2),
                "saturation": round(saturation, 2),
                "contrast_on_white": round(contrast_white, 2),
                "contrast_on_black": round(contrast_black, 2),
                "aa_compliant_on_white": contrast_white >= 4.5,
            }
            color_entries.append(entry)
        
        # Sort by frequency for LLM to see most important first
        color_entries.sort(key=lambda x: -x['frequency'])
        
        # Limit to top 50 colors for LLM (avoid token limits)
        return json.dumps(color_entries[:50], indent=2)
    
    def _build_llm_prompt(self, color_data: str) -> str:
        """Build the prompt for LLM semantic analysis."""
        
        return f"""You are a Design System Analyst specializing in color semantics.

TASK: Analyze these extracted colors and categorize them by their semantic role in the UI.

EXTRACTED COLORS (sorted by frequency):
{color_data}

ANALYSIS RULES:
1. BRAND/PRIMARY colors are typically:
   - Used on buttons, links, CTAs (elements: button, a, input[type=submit])
   - Applied via background-color on interactive elements
   - Saturated (saturation > 0.3) and not gray
   - High frequency on interactive elements

2. TEXT colors are typically:
   - Applied via "color" CSS property (not background-color)
   - Used on text elements (p, span, h1-h6, label)
   - Form a hierarchy: primary (darkest), secondary (medium), muted (lightest)
   - Low saturation (grays)

3. BACKGROUND colors are typically:
   - Applied via "background-color" on containers
   - Used on div, section, main, body, card elements
   - Light colors (luminance > 0.8) for light themes
   - May include dark backgrounds for inverse sections

4. BORDER colors are typically:
   - Applied via border-color properties
   - Often gray/neutral
   - Lower frequency than text/background

5. FEEDBACK colors are:
   - Red variants = error
   - Green variants = success  
   - Yellow/orange = warning
   - Blue variants = info
   - Often used with specific class contexts

OUTPUT FORMAT (JSON):
{{
  "brand": {{
    "primary": {{"hex": "#xxx", "confidence": "high|medium|low", "reason": "..."}},
    "secondary": {{"hex": "#xxx", "confidence": "high|medium|low", "reason": "..."}},
    "accent": {{"hex": "#xxx", "confidence": "high|medium|low", "reason": "..."}}
  }},
  "text": {{
    "primary": {{"hex": "#xxx", "confidence": "high|medium|low", "reason": "..."}},
    "secondary": {{"hex": "#xxx", "confidence": "high|medium|low", "reason": "..."}},
    "muted": {{"hex": "#xxx", "confidence": "high|medium|low", "reason": "..."}},
    "inverse": {{"hex": "#xxx", "confidence": "high|medium|low", "reason": "..."}}
  }},
  "background": {{
    "primary": {{"hex": "#xxx", "confidence": "high|medium|low", "reason": "..."}},
    "secondary": {{"hex": "#xxx", "confidence": "high|medium|low", "reason": "..."}},
    "tertiary": {{"hex": "#xxx", "confidence": "high|medium|low", "reason": "..."}},
    "inverse": {{"hex": "#xxx", "confidence": "high|medium|low", "reason": "..."}}
  }},
  "border": {{
    "default": {{"hex": "#xxx", "confidence": "high|medium|low", "reason": "..."}},
    "strong": {{"hex": "#xxx", "confidence": "high|medium|low", "reason": "..."}}
  }},
  "feedback": {{
    "error": {{"hex": "#xxx", "confidence": "high|medium|low", "reason": "..."}},
    "success": {{"hex": "#xxx", "confidence": "high|medium|low", "reason": "..."}},
    "warning": {{"hex": "#xxx", "confidence": "high|medium|low", "reason": "..."}},
    "info": {{"hex": "#xxx", "confidence": "high|medium|low", "reason": "..."}}
  }},
  "summary": {{
    "total_colors_analyzed": 50,
    "brand_colors_found": 2,
    "has_clear_hierarchy": true,
    "accessibility_notes": "..."
  }}
}}

IMPORTANT:
- Only include roles where you found a matching color
- Set confidence based on how certain you are
- Provide brief reasoning for each categorization
- If no color fits a role, omit that key

Return ONLY valid JSON, no other text."""

    def _rule_based_analysis(self, colors: dict) -> dict:
        """
        Fallback rule-based analysis when LLM is not available.
        
        Uses heuristics based on:
        - CSS properties (color vs background-color vs border-color)
        - Element types (button, a, p, div, etc.)
        - Color characteristics (saturation, luminance)
        - Frequency
        """
        self.log("   Using rule-based analysis (no LLM)")
        
        result = {
            "brand": {},
            "text": {},
            "background": {},
            "border": {},
            "feedback": {},
            "summary": {
                "total_colors_analyzed": len(colors),
                "brand_colors_found": 0,
                "has_clear_hierarchy": False,
                "accessibility_notes": "",
                "method": "rule-based"
            }
        }
        
        # Categorize colors
        brand_candidates = []
        text_candidates = []
        background_candidates = []
        border_candidates = []
        feedback_candidates = {"error": [], "success": [], "warning": [], "info": []}
        
        for name, token in colors.items():
            # Extract data
            if hasattr(token, 'value'):
                hex_val = token.value
                frequency = token.frequency
                contexts = token.contexts if hasattr(token, 'contexts') else []
                elements = token.elements if hasattr(token, 'elements') else []
                css_props = token.css_properties if hasattr(token, 'css_properties') else []
            else:
                hex_val = token.get('value', '#000000')
                frequency = token.get('frequency', 0)
                contexts = token.get('contexts', [])
                elements = token.get('elements', [])
                css_props = token.get('css_properties', [])
            
            # Calculate color properties
            try:
                r = int(hex_val[1:3], 16)
                g = int(hex_val[3:5], 16)
                b = int(hex_val[5:7], 16)
                luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255
                max_c = max(r, g, b)
                min_c = min(r, g, b)
                saturation = (max_c - min_c) / 255 if max_c > 0 else 0
                
                # Determine hue for feedback colors
                if max_c == min_c:
                    hue = 0
                elif max_c == r:
                    hue = 60 * ((g - b) / (max_c - min_c) % 6)
                elif max_c == g:
                    hue = 60 * ((b - r) / (max_c - min_c) + 2)
                else:
                    hue = 60 * ((r - g) / (max_c - min_c) + 4)
            except:
                luminance = 0.5
                saturation = 0
                hue = 0
            
            color_info = {
                "hex": hex_val,
                "name": name,
                "frequency": frequency,
                "luminance": luminance,
                "saturation": saturation,
                "hue": hue,
                "css_props": css_props,
                "elements": elements,
                "contexts": contexts,
            }
            
            # --- CATEGORIZATION RULES ---
            
            # BRAND: Saturated colors - multiple detection methods
            interactive_elements = ['button', 'a', 'input', 'select', 'submit', 'btn', 'cta']
            is_interactive = any(el in str(elements).lower() for el in interactive_elements)
            has_bg_prop = any('background' in str(p).lower() for p in css_props)
            
            # Method 1: Interactive elements with background
            if saturation > 0.25 and is_interactive and has_bg_prop:
                brand_candidates.append(color_info)
            # Method 2: Highly saturated + high frequency (works for Firecrawl)
            elif saturation > 0.35 and frequency > 15:
                brand_candidates.append(color_info)
            # Method 3: Very saturated colors regardless of frequency
            elif saturation > 0.5 and frequency > 5:
                brand_candidates.append(color_info)
            # Method 4: Cyan/Teal range (common brand colors)
            elif 160 <= hue <= 200 and saturation > 0.4 and frequency > 10:
                brand_candidates.append(color_info)
            # Method 5: Lime/Green-Yellow (secondary brand colors)
            elif 60 <= hue <= 90 and saturation > 0.5 and frequency > 5:
                brand_candidates.append(color_info)
            
            # TEXT: Low saturation, used with 'color' property
            has_color_prop = any(p == 'color' or (p.endswith('-color') and 'background' not in p and 'border' not in p)
                                for p in css_props)
            text_elements = ['p', 'span', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'label', 'div', 'text']
            is_text_element = any(el in str(elements).lower() for el in text_elements)
            
            # Text detection - low saturation grays
            if saturation < 0.15 and (has_color_prop or 'text' in str(contexts).lower()):
                text_candidates.append(color_info)
            elif saturation < 0.1 and 0.1 < luminance < 0.8:  # Gray range
                text_candidates.append(color_info)
            elif saturation < 0.1 and luminance < 0.5 and frequency > 50:  # Dark grays used a lot
                text_candidates.append(color_info)
            
            if saturation < 0.15 and (has_color_prop or 'text' in str(contexts).lower()):
                text_candidates.append(color_info)
            elif saturation < 0.1 and luminance < 0.7 and is_text_element:
                text_candidates.append(color_info)
            
            # BACKGROUND: Used with background-color on containers
            container_elements = ['div', 'section', 'main', 'body', 'article', 'header', 'footer', 'card']
            is_container = any(el in str(elements).lower() for el in container_elements)
            
            if has_bg_prop and (is_container or 'background' in str(contexts).lower()):
                if saturation < 0.15:  # Mostly neutral backgrounds
                    background_candidates.append(color_info)
            
            # BORDER: Used with border-color properties
            has_border_prop = any('border' in str(p).lower() for p in css_props)
            
            if has_border_prop or 'border' in str(contexts).lower():
                border_candidates.append(color_info)
            
            # FEEDBACK: Based on hue
            if saturation > 0.3:
                if 0 <= hue <= 30 or 330 <= hue <= 360:  # Red
                    feedback_candidates["error"].append(color_info)
                elif 90 <= hue <= 150:  # Green
                    feedback_candidates["success"].append(color_info)
                elif 30 <= hue <= 60:  # Yellow/Orange
                    feedback_candidates["warning"].append(color_info)
                elif 180 <= hue <= 250:  # Blue
                    feedback_candidates["info"].append(color_info)
        
        # --- SELECT BEST CANDIDATES ---
        
        # Brand: Sort by frequency * saturation
        brand_candidates.sort(key=lambda x: -(x['frequency'] * x['saturation']))
        if brand_candidates:
            result["brand"]["primary"] = {
                "hex": brand_candidates[0]["hex"],
                "confidence": "high" if brand_candidates[0]["frequency"] > 20 else "medium",
                "reason": f"Most frequent saturated color on interactive elements (freq: {brand_candidates[0]['frequency']})"
            }
            result["summary"]["brand_colors_found"] += 1
        if len(brand_candidates) > 1:
            result["brand"]["secondary"] = {
                "hex": brand_candidates[1]["hex"],
                "confidence": "medium",
                "reason": f"Second most frequent brand color (freq: {brand_candidates[1]['frequency']})"
            }
            result["summary"]["brand_colors_found"] += 1
        
        # Text: Sort by luminance (darkest first for primary)
        text_candidates.sort(key=lambda x: x['luminance'])
        if text_candidates:
            result["text"]["primary"] = {
                "hex": text_candidates[0]["hex"],
                "confidence": "high" if text_candidates[0]["luminance"] < 0.3 else "medium",
                "reason": f"Darkest text color (luminance: {text_candidates[0]['luminance']:.2f})"
            }
        if len(text_candidates) > 1:
            # Find secondary (mid-luminance)
            mid_idx = len(text_candidates) // 2
            result["text"]["secondary"] = {
                "hex": text_candidates[mid_idx]["hex"],
                "confidence": "medium",
                "reason": f"Mid-tone text color (luminance: {text_candidates[mid_idx]['luminance']:.2f})"
            }
        if len(text_candidates) > 2:
            result["text"]["muted"] = {
                "hex": text_candidates[-1]["hex"],
                "confidence": "medium",
                "reason": f"Lightest text color (luminance: {text_candidates[-1]['luminance']:.2f})"
            }
        
        # Check for text hierarchy
        if len(text_candidates) >= 3:
            result["summary"]["has_clear_hierarchy"] = True
        
        # Background: Sort by luminance (lightest first for primary)
        background_candidates.sort(key=lambda x: -x['luminance'])
        if background_candidates:
            result["background"]["primary"] = {
                "hex": background_candidates[0]["hex"],
                "confidence": "high" if background_candidates[0]["luminance"] > 0.9 else "medium",
                "reason": f"Lightest background (luminance: {background_candidates[0]['luminance']:.2f})"
            }
        if len(background_candidates) > 1:
            result["background"]["secondary"] = {
                "hex": background_candidates[1]["hex"],
                "confidence": "medium",
                "reason": f"Secondary background (luminance: {background_candidates[1]['luminance']:.2f})"
            }
        # Find dark background for inverse
        dark_bgs = [c for c in background_candidates if c['luminance'] < 0.2]
        if dark_bgs:
            result["background"]["inverse"] = {
                "hex": dark_bgs[0]["hex"],
                "confidence": "medium",
                "reason": f"Dark background for inverse sections (luminance: {dark_bgs[0]['luminance']:.2f})"
            }
        
        # Border: Sort by frequency
        border_candidates.sort(key=lambda x: -x['frequency'])
        if border_candidates:
            result["border"]["default"] = {
                "hex": border_candidates[0]["hex"],
                "confidence": "medium",
                "reason": f"Most common border color (freq: {border_candidates[0]['frequency']})"
            }
        
        # Feedback: Pick highest frequency for each
        for feedback_type, candidates in feedback_candidates.items():
            if candidates:
                candidates.sort(key=lambda x: -x['frequency'])
                result["feedback"][feedback_type] = {
                    "hex": candidates[0]["hex"],
                    "confidence": "medium",
                    "reason": f"Detected {feedback_type} color by hue analysis"
                }
        
        return result
    
    async def analyze_with_llm(self, colors: dict, log_callback: Optional[Callable] = None) -> dict:
        """
        Analyze colors using LLM for semantic categorization.
        
        Args:
            colors: Dict of color tokens
            log_callback: Optional callback for logging
            
        Returns:
            Semantic analysis result
        """
        def log(msg):
            self.log(msg)
            if log_callback:
                log_callback(msg)
        
        log("")
        log("=" * 60)
        log("🧠 SEMANTIC COLOR ANALYSIS (LLM)")
        log("=" * 60)
        log("")
        
        # Prepare data for LLM
        log("   📊 Preparing color data for analysis...")
        color_data = self._prepare_color_data_for_llm(colors)
        log(f"   ✅ Prepared {min(50, len(colors))} colors for analysis")
        
        # Check if LLM provider is available
        if self.llm_provider is None:
            log("   ⚠️ No LLM provider configured, using rule-based analysis")
            self.analysis_result = self._rule_based_analysis(colors)
        else:
            try:
                log("   🤖 Calling LLM for semantic analysis...")
                
                prompt = self._build_llm_prompt(color_data)
                
                # Call LLM
                response = await self.llm_provider.generate(
                    prompt=prompt,
                    max_tokens=2000,
                    temperature=0.3,  # Low temperature for consistent categorization
                )
                
                log("   ✅ LLM response received")
                
                # Parse JSON response
                try:
                    # Extract JSON from response
                    json_match = re.search(r'\{[\s\S]*\}', response)
                    if json_match:
                        self.analysis_result = json.loads(json_match.group())
                        self.analysis_result["summary"]["method"] = "llm"
                        log("   ✅ Successfully parsed LLM analysis")
                    else:
                        raise ValueError("No JSON found in response")
                        
                except json.JSONDecodeError as e:
                    log(f"   ⚠️ Failed to parse LLM response: {e}")
                    log("   🔄 Falling back to rule-based analysis")
                    self.analysis_result = self._rule_based_analysis(colors)
                    
            except Exception as e:
                log(f"   ❌ LLM analysis failed: {str(e)}")
                log("   🔄 Falling back to rule-based analysis")
                self.analysis_result = self._rule_based_analysis(colors)
        
        # Log results
        self._log_analysis_results(log)
        
        return self.analysis_result
    
    def analyze_sync(self, colors: dict, log_callback: Optional[Callable] = None) -> dict:
        """
        Synchronous analysis using rule-based approach.
        
        Args:
            colors: Dict of color tokens
            log_callback: Optional callback for logging
            
        Returns:
            Semantic analysis result
        """
        def log(msg):
            self.log(msg)
            if log_callback:
                log_callback(msg)
        
        log("")
        log("=" * 60)
        log("🧠 SEMANTIC COLOR ANALYSIS")
        log("=" * 60)
        log("")
        
        log(f"   📊 Analyzing {len(colors)} colors...")
        
        self.analysis_result = self._rule_based_analysis(colors)
        
        # Log results
        self._log_analysis_results(log)
        
        return self.analysis_result
    
    def _log_analysis_results(self, log: Callable):
        """Log the analysis results in a formatted way."""
        
        result = self.analysis_result
        
        log("")
        log("📊 SEMANTIC ANALYSIS RESULTS:")
        log("")
        
        # Brand colors
        if result.get("brand"):
            log("   🎨 BRAND COLORS:")
            for role, data in result["brand"].items():
                if data:
                    log(f"      {role}: {data['hex']} ({data['confidence']})")
                    log(f"         └─ {data['reason']}")
        
        # Text colors
        if result.get("text"):
            log("")
            log("   📝 TEXT COLORS:")
            for role, data in result["text"].items():
                if data:
                    log(f"      {role}: {data['hex']} ({data['confidence']})")
        
        # Background colors
        if result.get("background"):
            log("")
            log("   🖼️ BACKGROUND COLORS:")
            for role, data in result["background"].items():
                if data:
                    log(f"      {role}: {data['hex']} ({data['confidence']})")
        
        # Border colors
        if result.get("border"):
            log("")
            log("   📏 BORDER COLORS:")
            for role, data in result["border"].items():
                if data:
                    log(f"      {role}: {data['hex']} ({data['confidence']})")
        
        # Feedback colors
        if result.get("feedback"):
            log("")
            log("   🚨 FEEDBACK COLORS:")
            for role, data in result["feedback"].items():
                if data:
                    log(f"      {role}: {data['hex']} ({data['confidence']})")
        
        # Summary
        summary = result.get("summary", {})
        log("")
        log("   📈 SUMMARY:")
        log(f"      Total colors analyzed: {summary.get('total_colors_analyzed', 0)}")
        log(f"      Brand colors found: {summary.get('brand_colors_found', 0)}")
        log(f"      Clear hierarchy: {'Yes' if summary.get('has_clear_hierarchy') else 'No'}")
        log(f"      Analysis method: {summary.get('method', 'unknown')}")
        log("")


def generate_semantic_preview_html(analysis_result: dict) -> str:
    """
    Generate HTML preview showing colors organized by semantic role.
    
    Args:
        analysis_result: Output from SemanticColorAnalyzer
        
    Returns:
        HTML string for Gradio HTML component
    """
    
    # Handle empty or invalid result
    if not analysis_result:
        return '''
        <div class="sem-warning-box" style="padding: 40px; text-align: center; background: #fff3cd; border-radius: 8px; border: 1px solid #ffc107;">
            <p style="color: #856404; font-size: 14px; margin: 0;">
                ⚠️ Semantic analysis did not produce results. Check the logs for errors.
            </p>
        </div>
        <style>
            .dark .sem-warning-box { background: #422006 !important; border-color: #b45309 !important; }
            .dark .sem-warning-box p { color: #fde68a !important; }
        </style>
        '''
    
    def color_card(hex_val: str, role: str, confidence: str, reason: str = "") -> str:
        """Generate HTML for a single color card."""
        # Determine text color based on luminance
        try:
            r = int(hex_val[1:3], 16)
            g = int(hex_val[3:5], 16)
            b = int(hex_val[5:7], 16)
            luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255
            text_color = "#1a1a1a" if luminance > 0.5 else "#ffffff"
        except:
            text_color = "#1a1a1a"
        
        confidence_badge = {
            "high": '<span class="confidence high">High</span>',
            "medium": '<span class="confidence medium">Medium</span>',
            "low": '<span class="confidence low">Low</span>',
        }.get(confidence, "")
        
        return f'''
        <div class="sem-color-card">
            <div class="sem-color-swatch" style="background-color: {hex_val};">
                <span class="sem-hex-label" style="color: {text_color};">{hex_val}</span>
            </div>
            <div class="sem-color-details">
                <div class="sem-role-name">{role.replace("_", " ").title()}</div>
                {confidence_badge}
            </div>
        </div>
        '''
    
    def category_section(title: str, icon: str, colors: dict) -> str:
        """Generate HTML for a category section."""
        if not colors:
            return ""
        
        cards_html = ""
        for role, data in colors.items():
            if data and isinstance(data, dict) and "hex" in data:
                cards_html += color_card(
                    data["hex"],
                    role,
                    data.get("confidence", "medium"),
                    data.get("reason", "")
                )
        
        if not cards_html:
            return ""
        
        return f'''
        <div class="sem-category-section">
            <h3 class="sem-category-title">{icon} {title}</h3>
            <div class="sem-color-grid">
                {cards_html}
            </div>
        </div>
        '''
    
    # Build sections
    sections_html = ""
    sections_html += category_section("Brand Colors", "🎨", analysis_result.get("brand", {}))
    sections_html += category_section("Text Colors", "📝", analysis_result.get("text", {}))
    sections_html += category_section("Background Colors", "🖼️", analysis_result.get("background", {}))
    sections_html += category_section("Border Colors", "📏", analysis_result.get("border", {}))
    sections_html += category_section("Feedback Colors", "🚨", analysis_result.get("feedback", {}))
    
    # Check if any sections were created
    if not sections_html.strip():
        return '''
        <div class="sem-warning-box" style="padding: 40px; text-align: center; background: #fff3cd; border-radius: 8px; border: 1px solid #ffc107;">
            <p style="color: #856404; font-size: 14px; margin: 0;">
                ⚠️ No semantic color categories were detected. The colors may not have enough context data (elements, CSS properties) for classification.
            </p>
        </div>
        <style>
            .dark .sem-warning-box { background: #422006 !important; border-color: #b45309 !important; }
            .dark .sem-warning-box p { color: #fde68a !important; }
        </style>
        '''
    
    # Summary
    summary = analysis_result.get("summary", {})
    summary_html = f'''
    <div class="sem-summary-section">
        <h3 class="sem-summary-title">📈 Analysis Summary</h3>
        <div class="sem-summary-stats">
            <div class="sem-stat">
                <span class="sem-stat-value">{summary.get("total_colors_analyzed", 0)}</span>
                <span class="sem-stat-label">Colors Analyzed</span>
            </div>
            <div class="sem-stat">
                <span class="sem-stat-value">{summary.get("brand_colors_found", 0)}</span>
                <span class="sem-stat-label">Brand Colors</span>
            </div>
            <div class="sem-stat">
                <span class="sem-stat-value">{"✓" if summary.get("has_clear_hierarchy") else "✗"}</span>
                <span class="sem-stat-label">Clear Hierarchy</span>
            </div>
            <div class="sem-stat">
                <span class="sem-stat-value">{summary.get("method", "rule-based").upper()}</span>
                <span class="sem-stat-label">Analysis Method</span>
            </div>
        </div>
    </div>
    '''
    
    html = f'''
    <style>
        .sem-preview {{
            font-family: system-ui, -apple-system, sans-serif;
            padding: 20px;
            background: #f5f5f5 !important;
            border-radius: 12px;
        }}
        
        .sem-category-section {{
            margin-bottom: 24px;
            background: #ffffff !important;
            border-radius: 8px;
            padding: 16px;
            border: 1px solid #d0d0d0 !important;
        }}
        
        .sem-category-title {{
            font-size: 16px;
            font-weight: 700;
            color: #1a1a1a !important;
            margin: 0 0 16px 0;
            padding-bottom: 8px;
            border-bottom: 2px solid #e0e0e0 !important;
        }}
        
        .sem-color-grid {{
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
            gap: 12px;
        }}
        
        .sem-color-card {{
            background: #f0f0f0 !important;
            border-radius: 8px;
            overflow: hidden;
            border: 1px solid #d0d0d0 !important;
        }}
        
        .sem-color-swatch {{
            height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
        }}
        
        .sem-hex-label {{
            font-family: 'SF Mono', Monaco, monospace;
            font-size: 12px;
            font-weight: 600;
            text-shadow: 0 1px 2px rgba(0,0,0,0.3);
        }}
        
        .sem-color-details {{
            padding: 10px;
            text-align: center;
            background: #ffffff !important;
        }}
        
        .sem-role-name {{
            font-size: 12px;
            font-weight: 600;
            color: #1a1a1a !important;
            margin-bottom: 4px;
        }}
        
        .sem-preview .confidence {{
            font-size: 10px;
            padding: 2px 8px;
            border-radius: 10px;
            font-weight: 500;
            display: inline-block;
        }}
        
        .sem-preview .confidence.high {{
            background: #dcfce7 !important;
            color: #166534 !important;
        }}
        
        .sem-preview .confidence.medium {{
            background: #fef9c3 !important;
            color: #854d0e !important;
        }}
        
        .sem-preview .confidence.low {{
            background: #fee2e2 !important;
            color: #991b1b !important;
        }}
        
        .sem-summary-section {{
            background: #ffffff !important;
            border-radius: 8px;
            padding: 16px;
            border: 1px solid #d0d0d0 !important;
        }}
        
        .sem-summary-title {{
            font-size: 16px;
            font-weight: 700;
            color: #1a1a1a !important;
            margin: 0 0 16px 0;
        }}
        
        .sem-summary-stats {{
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 16px;
        }}
        
        .sem-stat {{
            text-align: center;
            padding: 12px;
            background: #f0f0f0 !important;
            border-radius: 8px;
        }}
        
        .sem-stat-value {{
            display: block;
            font-size: 24px;
            font-weight: 700;
            color: #1a1a1a !important;
        }}
        
        .sem-stat-label {{
            display: block;
            font-size: 11px;
            color: #555 !important;
            margin-top: 4px;
        }}

        /* Dark mode */
        .dark .sem-preview {{ background: #0f172a !important; }}
        .dark .sem-category-section {{ background: #1e293b !important; border-color: #475569 !important; }}
        .dark .sem-category-title {{ color: #f1f5f9 !important; border-bottom-color: #475569 !important; }}
        .dark .sem-color-card {{ background: #334155 !important; border-color: #475569 !important; }}
        .dark .sem-color-details {{ background: #1e293b !important; }}
        .dark .sem-role-name {{ color: #f1f5f9 !important; }}
        .dark .sem-preview .confidence.high {{ background: #14532d !important; color: #86efac !important; }}
        .dark .sem-preview .confidence.medium {{ background: #422006 !important; color: #fde68a !important; }}
        .dark .sem-preview .confidence.low {{ background: #450a0a !important; color: #fca5a5 !important; }}
        .dark .sem-summary-section {{ background: #1e293b !important; border-color: #475569 !important; }}
        .dark .sem-summary-title {{ color: #f1f5f9 !important; }}
        .dark .sem-stat {{ background: #334155 !important; }}
        .dark .sem-stat-value {{ color: #f1f5f9 !important; }}
        .dark .sem-stat-label {{ color: #94a3b8 !important; }}
    </style>
    
    <div class="sem-preview">
        {sections_html}
        {summary_html}
    </div>
    '''
    
    return html