import gradio as gr

# Function to mock the VLLM interpretation and return structured HTML
def diagnose_router(image):
    # Structured diagnosis and solution
    result = {
        "Issue_Description": "Internet connectivity problem - The Internet LED is blinking amber.",
        "Root_Cause_Analysis": {
            "LED_Analysis": {
                "Color": "Amber",
                "Pattern": "Blinking",
                "Indicates": "The router is unable to establish a connection with the ISP."
            },
            "Error_Code": "WAN PPPoE Timeout",
            "Possible_Cause": "This error suggests the router cannot authenticate with the ISP's server, likely due to incorrect login credentials or an ISP-side issue."
        },
        "Step_by_Step_Troubleshooting": {
            "Step_1": {
                "Action": "Verify Ethernet Cable Connection",
                "Details": "Ensure that the Ethernet cable is securely plugged into the modem's LAN port and the router's WAN port.",
                "Expected Outcome": "Ethernet cable is securely connected, and the LED light remains stable."
            },
            "Step_2": {
                "Action": "Restart Both Modem and Router",
                "Details": "Unplug both the modem and router from their power sources, wait for 30 seconds, then plug them back in starting with the modem.",
                "Expected Outcome": "The router should reattempt to establish a connection with the ISP."
            },
            "Step_3": {
                "Action": "Verify ISP Login Credentials",
                "Details": "Access the router settings through its web interface and check the PPPoE login credentials (username and password) provided by your ISP.",
                "Expected Outcome": "Correct credentials should resolve the authentication issue."
            },
            "Step_4": {
                "Action": "Contact ISP Support",
                "Details": "If the above steps don't work, contact your ISP to check for any issues on their end such as outages or account problems.",
                "Expected Outcome": "ISP support will help resolve server authentication issues or provide further guidance."
            }
        },
        "Recommended_Actions": {
            "Immediate_Action": "Reconnect cables and restart devices.",
            "If_Unresolved": "Check ISP login credentials and contact ISP if needed.",
            "Preventative_Measure": "Ensure router firmware is up-to-date to prevent known issues."
        }
    }
    
    # Generate HTML content for structured display
    html_output = f"""
    <div style="font-family: Arial, sans-serif; color: #333;">
        <h2>Router Diagnosis</h2>
        <h3>Issue Description</h3>
        <p><strong>{result['Issue_Description']}</strong></p>
        
        <h3>Root Cause Analysis</h3>
        <ul>
            <li><strong>LED Color:</strong> {result['Root_Cause_Analysis']['LED_Analysis']['Color']}</li>
            <li><strong>LED Pattern:</strong> {result['Root_Cause_Analysis']['LED_Analysis']['Pattern']}</li>
            <li><strong>Indicates:</strong> {result['Root_Cause_Analysis']['LED_Analysis']['Indicates']}</li>
            <li><strong>Error Code:</strong> {result['Root_Cause_Analysis']['Error_Code']}</li>
            <li><strong>Possible Cause:</strong> {result['Root_Cause_Analysis']['Possible_Cause']}</li>
        </ul>
        
        <h3>Step-by-Step Troubleshooting</h3>
        <ol>
    """

    # Loop through each step in the troubleshooting process
    for step_key, step_data in result["Step_by_Step_Troubleshooting"].items():
        html_output += f"""
            <li><strong>{step_data['Action']}</strong>: {step_data['Details']}<br/>
            <em>Expected Outcome:</em> {step_data['Expected Outcome']}</li>
        """
    
    html_output += """
        </ol>

        <h3>Recommended Actions</h3>
        <ul>
            <li><strong>Immediate Action:</strong> {result['Recommended_Actions']['Immediate_Action']}</li>
            <li><strong>If Unresolved:</strong> {result['Recommended_Actions']['If_Unresolved']}</li>
            <li><strong>Preventative Measure:</strong> {result['Recommended_Actions']['Preventative_Measure']}</li>
        </ul>
    </div>
    """
    
    return html_output

# Gradio UI
interface = gr.Interface(
    fn=diagnose_router,
    inputs=gr.Image(type="pil", label="Upload an image of the faulty router"),
    outputs=gr.HTML(),
    title="Structured Router Diagnosis",
    description="Upload a photo of your router to receive a professional diagnosis and troubleshooting steps displayed in a structured, easy-to-read format."
)

# Launch the UI
interface.launch()