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 ResponsivenessApp(FlaskAppTemplate):
    """
    Responsiveness Check
    """
    
    def __init__(self):
        # Define the hardcoded prompt
        prompt = """You are performing a visual quality-control check on digital content (website, email, or app) to verify its responsiveness across different screen sizes. Your task is to determine whether the design maintains visual and functional consistency between desktop and mobile versions.

RESPONSIVENESS CRITERIA:
1. All content present in desktop should be accessible on mobile
2. Text should be legible on both desktop and mobile
3. Layout should adapt appropriately to screen size
4. Visual hierarchy should be maintained across screen sizes
5. Navigation should be usable on both desktop and mobile
6. No horizontal scrolling should be needed on mobile
7. Touch targets (buttons, links) should be appropriately sized on mobile
8. Brand consistency should be maintained across screen sizes

STEPS TO EVALUATE:
1. Determine if both desktop and mobile versions are visible in the image
2. If both versions are visible, compare:
   a. Content completeness (all key content present on both)
   b. Text legibility
   c. Layout adaptation
   d. Visual hierarchy
   e. Navigation accessibility
   f. Touch target sizing
   g. Brand consistency
3. If only one version is visible, state that "Responsiveness could not be fully assessed from this image."

YOUR OUTPUT:
• State whether both desktop and mobile versions are visible in the image
• If both are visible, evaluate each responsiveness criterion
• State whether the design "passes" or "fails" the responsiveness check
• Include a JSON code block with these fields:
{
  "both_versions_visible": true or false,
  "content_completeness": "Pass" or "Fail" or "Not applicable",
  "text_legibility": "Pass" or "Fail" or "Not applicable",
  "layout_adaptation": "Pass" or "Fail" or "Not applicable",
  "visual_hierarchy_maintained": "Pass" or "Fail" or "Not applicable",
  "responsiveness_check": "Pass" or "Fail" or "Not applicable",
  "issues": ["List specific issues identified, if any, else an empty array"],
  "recommendations": ["List specific recommendations if applicable, else an empty array"]
}"""
        
        # Initialize the Flask app with the prompt
        super().__init__(__name__, prompt)

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