import os
import sys

# Add parent directory to path to import shared modules
sys.path.append(os.path.dirname(os.path.dirname(os.path.dirname(os.path.abspath(__file__)))))

from visual_qc_apps.flask_app_template import FlaskAppTemplate

class VisualHierarchyApp(FlaskAppTemplate):
    """
    Visual Hierarchy Check
    """
    
    def __init__(self):
        # Define the hardcoded prompt
        prompt = """You are performing a visual quality-control check on a Point of Sale (POS) advertisement. Your task is to determine whether the visual hierarchy is simple and clear. Follow the criteria below to evaluate and validate the visual layout:

IMPORTANT: This check requires a reference asset (brand guideline document or image) to properly evaluate brand-specific hierarchy requirements and visual flow standards. The reference asset will provide brand-specific layout guidelines and hierarchy expectations.

MEASUREMENT DATA:
If OCR LAYOUT MEASUREMENTS are provided at the end of this prompt, use the computed character heights and element positions to verify size hierarchy between text elements. Larger character height = more prominent element. Use these measurements to confirm whether elements are correctly sized relative to each other.

CRITERIA FOR EVALUATION:
Clear Order: The advertisement must present a clear order for all communication elements. The eye should flow naturally in this order:

1. Core Image
2. Brand/Variant
3. Headline (Win, New, etc.)
4. Primary Message
5. Element Differentiation: Differentiate elements by size, shape, boldness, or color to guide the viewer's attention.

Basic Test:
Is the core visual & brand logo the largest elements on the design?
Does the text vary in size and color to avoid uniformity?
3MVAS Test: Ensure the gaze sequence touches upon:

Brand logo
Main visual
Product
Core message

STEPS TO EVALUATE:
1. Examine the advertisement's layout. Identify each element and check its prominence according to the criteria above.
2. Assess if the elements provide a clear path for the viewer's eye to follow in the prescribed order.
3. Evaluate text differentiation in size and color. Ensure the brand logo and core visual stand out as the largest elements.
4. Confirm whether the gaze sequence naturally flows to the key elements outlined in the 3MVAS Test.

YOUR OUTPUT:
State whether the visual hierarchy is "Pass" or "Fail."
If it fails, provide 1–2 concise recommendations for improving visual hierarchy clarity.
Provide a JSON code block with these fields:
{
  "visual_hierarchy": "Pass" or "Fail",
  "recommendations": ["If fail, list recommendations here"]
}"""
        
        # Initialize the Flask app with the prompt
        super().__init__(__name__, prompt)

# Run the app if executed directly
if __name__ == "__main__":
    app = VisualHierarchyApp()
    app.run(debug=True)