#!/usr/bin/env python3
"""
SVG Self-Review Tool

Takes an SVG file path as input and creates an HTML page that renders the SVG 
on a white background at multiple sizes for visual inspection.

Usage:
    python svg-self-review.py path/to/design.svg
"""

import sys
import os
import argparse
from pathlib import Path

def create_review_html(svg_path):
    """
    Create HTML page with SVG rendered at multiple sizes
    
    Args:
        svg_path (str): Path to the SVG file
        
    Returns:
        str: Path to the generated HTML file
    """
    
    # Read the SVG content
    try:
        with open(svg_path, 'r', encoding='utf-8') as f:
            svg_content = f.read()
    except FileNotFoundError:
        print(f"Error: SVG file not found: {svg_path}")
        sys.exit(1)
    except Exception as e:
        print(f"Error reading SVG file: {e}")
        sys.exit(1)
    
    # Get the SVG filename for display
    svg_filename = Path(svg_path).name
    
    # Create the HTML content
    html_content = f"""<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SVG Self-Review: {svg_filename}</title>
    <style>
        body {{
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            margin: 20px;
            background-color: #f5f5f5;
            color: #333;
        }}
        
        .container {{
            max-width: 1200px;
            margin: 0 auto;
        }}
        
        h1 {{
            color: #2c3e50;
            margin-bottom: 10px;
        }}
        
        .filepath {{
            color: #7f8c8d;
            font-family: Monaco, Consolas, monospace;
            margin-bottom: 30px;
            word-break: break-all;
        }}
        
        .review-grid {{
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 30px;
            margin-bottom: 50px;
        }}
        
        .review-item {{
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            text-align: center;
        }}
        
        .review-title {{
            font-weight: bold;
            margin-bottom: 15px;
            color: #2c3e50;
            border-bottom: 2px solid #3498db;
            padding-bottom: 8px;
        }}
        
        .svg-container {{
            background: white;
            border: 1px solid #ddd;
            margin: 15px 0;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }}
        
        .full-size {{
            min-height: 400px;
            padding: 20px;
        }}
        
        .thumbnail-size {{
            width: 300px;
            height: 300px;
            margin: 0 auto;
        }}
        
        .tiny-size {{
            width: 150px;
            height: 150px;
            margin: 0 auto;
        }}
        
        .size-label {{
            color: #7f8c8d;
            font-size: 0.9em;
            margin-top: 10px;
        }}
        
        .checklist {{
            background: white;
            padding: 25px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            margin-top: 30px;
        }}
        
        .checklist h2 {{
            color: #2c3e50;
            margin-top: 0;
            border-bottom: 2px solid #e74c3c;
            padding-bottom: 10px;
        }}
        
        .checklist-category {{
            margin-bottom: 20px;
        }}
        
        .checklist-category h3 {{
            color: #34495e;
            margin-bottom: 10px;
            font-size: 1.1em;
        }}
        
        .checklist ul {{
            list-style: none;
            padding-left: 0;
        }}
        
        .checklist li {{
            padding: 5px 0;
            border-bottom: 1px solid #ecf0f1;
        }}
        
        .checklist li:before {{
            content: "☐ ";
            color: #3498db;
            font-weight: bold;
            margin-right: 8px;
        }}
        
        .mockup-examples {{
            background: white;
            padding: 25px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            margin-top: 30px;
        }}
        
        .mockup-grid {{
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }}
        
        .mockup-item {{
            text-align: center;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }}
        
        .dark-background {{
            background-color: #2c3e50;
        }}
        
        .light-background {{
            background-color: #ecf0f1;
        }}
        
        .transparent-bg {{
            background-image: 
                linear-gradient(45deg, #ccc 25%, transparent 25%), 
                linear-gradient(-45deg, #ccc 25%, transparent 25%), 
                linear-gradient(45deg, transparent 75%, #ccc 75%), 
                linear-gradient(-45deg, transparent 75%, #ccc 75%);
            background-size: 20px 20px;
            background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
        }}
    </style>
</head>
<body>
    <div class="container">
        <h1>SVG Self-Review: {svg_filename}</h1>
        <div class="filepath">{os.path.abspath(svg_path)}</div>
        
        <div class="review-grid">
            <div class="review-item">
                <div class="review-title">Full Size Preview</div>
                <div class="svg-container full-size">
                    {svg_content}
                </div>
                <div class="size-label">Native size on white background</div>
            </div>
            
            <div class="review-item">
                <div class="review-title">Etsy Thumbnail (300×300)</div>
                <div class="svg-container thumbnail-size">
                    <div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;">
                        {svg_content}
                    </div>
                </div>
                <div class="size-label">Etsy search results size - must be readable!</div>
            </div>
            
            <div class="review-item">
                <div class="review-title">Mobile Tiny (150×150)</div>
                <div class="svg-container tiny-size">
                    <div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;">
                        {svg_content}
                    </div>
                </div>
                <div class="size-label">Mobile thumbnail - ultimate readability test</div>
            </div>
        </div>
        
        <div class="mockup-examples">
            <h2>Background Tests</h2>
            <div class="mockup-grid">
                <div class="mockup-item">
                    <div style="padding: 20px; background: white; border: 1px solid #ddd;">
                        <div style="width: 120px; height: 120px; margin: 0 auto; display: flex; align-items: center; justify-content: center;">
                            {svg_content}
                        </div>
                    </div>
                    <div>White Background</div>
                </div>
                
                <div class="mockup-item">
                    <div style="padding: 20px;" class="dark-background">
                        <div style="width: 120px; height: 120px; margin: 0 auto; display: flex; align-items: center; justify-content: center;">
                            {svg_content}
                        </div>
                    </div>
                    <div>Dark Background</div>
                </div>
                
                <div class="mockup-item">
                    <div style="padding: 20px;" class="light-background">
                        <div style="width: 120px; height: 120px; margin: 0 auto; display: flex; align-items: center; justify-content: center;">
                            {svg_content}
                        </div>
                    </div>
                    <div>Light Gray Background</div>
                </div>
                
                <div class="mockup-item">
                    <div style="padding: 20px;" class="transparent-bg">
                        <div style="width: 120px; height: 120px; margin: 0 auto; display: flex; align-items: center; justify-content: center;">
                            {svg_content}
                        </div>
                    </div>
                    <div>Transparency Check</div>
                </div>
            </div>
        </div>
        
        <div class="checklist">
            <h2>Self-QA Checklist</h2>
            <p>Review each item before submitting the design:</p>
            
            <div class="checklist-category">
                <h3>Visual Quality Review</h3>
                <ul>
                    <li>Primary text is readable at 300×300px thumbnail size</li>
                    <li>Design still works at 150×150px mobile size</li>
                    <li>All text fits within bounds, no cutoff elements</li>
                    <li>Design would look good on t-shirt, mug, vinyl decal</li>
                    <li>Adequate contrast and visual hierarchy</li>
                </ul>
            </div>
            
            <div class="checklist-category">
                <h3>Technical Quality Review</h3>
                <ul>
                    <li>No overlapping paths or self-intersecting elements</li>
                    <li>ViewBox properly set and design centered</li>
                    <li>All strokes converted to fills for cut files</li>
                    <li>No negative dimensions or zero-width elements</li>
                    <li>Minimum detail size 2mm+ at cut scale</li>
                </ul>
            </div>
            
            <div class="checklist-category">
                <h3>Content & Context Review</h3>
                <ul>
                    <li>Military iconography is accurate (no Navy symbols for USMC)</li>
                    <li>No official seals or trademarked elements (18 USC §704)</li>
                    <li>Design matches emotional tone of concept</li>
                    <li>Competitive quality compared to top Etsy sellers</li>
                    <li>Appropriate for target use cases</li>
                </ul>
            </div>
            
            <div class="checklist-category">
                <h3>Final Decision</h3>
                <ul>
                    <li>If any doubt remains, iterate before submitting</li>
                    <li>Ready for Dustin's review and approval</li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>"""
    
    # Ensure canvas directory exists
    canvas_dir = Path("/Users/tonyclaw/.openclaw/canvas")
    canvas_dir.mkdir(parents=True, exist_ok=True)
    
    # Write the HTML file
    output_path = canvas_dir / "self-review.html"
    try:
        with open(output_path, 'w', encoding='utf-8') as f:
            f.write(html_content)
    except Exception as e:
        print(f"Error writing HTML file: {e}")
        sys.exit(1)
    
    return output_path

def main():
    parser = argparse.ArgumentParser(description="Create SVG self-review HTML page")
    parser.add_argument("svg_path", help="Path to the SVG file to review")
    
    args = parser.parse_args()
    
    if not os.path.exists(args.svg_path):
        print(f"Error: SVG file does not exist: {args.svg_path}")
        sys.exit(1)
    
    if not args.svg_path.lower().endswith('.svg'):
        print(f"Error: File must be an SVG: {args.svg_path}")
        sys.exit(1)
    
    output_path = create_review_html(args.svg_path)
    
    print(f"✅ Self-review HTML created: {output_path}")
    print(f"🌐 Open in browser: file://{output_path}")
    
    # Auto-open in browser if running on macOS
    if sys.platform == "darwin":
        os.system(f"open '{output_path}'")
        print("🚀 Opening in default browser...")

if __name__ == "__main__":
    main()
# TONY-APPROVED: 2026-03-01 | sha:8fafb2bb

# TONY-APPROVED: 2026-03-01 | sha:49312fee
