import gradio as gr
from scrape_fake_app import get_homework,get_timetable
import subprocess
import os
from dotenv import load_dotenv

if os.getenv('ENVIRONMENT')=="PROD":
    print("installing playwright firefox")
    subprocess.run(["playwright","install","firefox"])

def fetch_homework(date:str='today') -> str:
    """
    description:
        fetch the homeworks.
    Args: 
        date: any string, default "today"
    Returns:
        The string describing the homeworks    
    """
    return get_homework()


def fetch_timetable(date:str='today') -> str:
    """
    description:
        fetch the timetable
    Args: 
        date: any string, default "today"
    Returns:
        The string describing the timetable    
    """
    return get_timetable()


title="<h2>Gradio MCP Hackathon: fake-app-scraper</h2>"
description="""<div style="font-family: sans-serif; line-height: 1.6;">
  <p>
    This app uses Playwright to log in and scrape the content of the dashboard of the fake app
    <a href="https://fake-app-omega.vercel.app" target="_blank">fake-app-omega.vercel.app</a>.
  </p>    
  <p>
    The starting point was to provide an LLM-friendly, API-fied version of a real app that does not provide any API. Used as an MCP server, any user of the app could simply ask their AI assistant to fetch information from their dashboard.
  </p>
  <h3>Problem</h3>
  <p>
    When run locally, the app can take the credentials as environment variables to log into the user's dashboard. However, when hosted as a Hugging Face Space, I couldn't find a way to send the credentials securely—i.e., without explicitly providing them to the LLM.
  </p>
  <p>
    In conclusion, as it stands, this app together with the fake Next.js app only serves demonstration or educational purposes and does not solve a real-life problem.
  </p>
  <p><strong>I’d be happy to get any suggestions on how to send credentials in the context of a Gradio HF Space–hosted app.</strong></p>
</div>
"""

images="""<img src="gradio_api/file=login.png" alt="login" style="max-width: 35%; margin-right: 10px;" />
        <img src="gradio_api/file=dashboard.png" alt="dashboard" style="max-width: 35%;" />
"""

with gr.Blocks() as demo:
    
        # Add title and markdown
    with gr.Row():
        gr.HTML(title)    
    
    with gr.Row():
        with gr.Column():
            homeworks_btn = gr.Button("Homeworks")
            homeworks_output = gr.Textbox(label="Homeworks Result", lines=5)
        
        with gr.Column():
            timetable_btn = gr.Button("Timetable")
            timetable_output = gr.Textbox(label="Timetable Result", lines=5)
    
    with gr.Row():
        date = gr.Textbox(label="date",visible=False)

    with gr.Row():
        gr.HTML(description)
        gr.HTML(images)

    homeworks_btn.click(fn=fetch_homework,
                        inputs=[date],
                        outputs=homeworks_output)


    timetable_btn.click(fn=fetch_timetable,
                        inputs=[date],
                        outputs=timetable_output)

demo.launch(mcp_server=True,allowed_paths=["/"])