// # Clone by Brendan McGrath of:
// # "Pyscript Snake" by Brendan McGrath
// # https://ancientbrain.com/world.php?world=2687112041
// # Please leave this clone trail here.



// # Clone by Brendan McGrath of:
// # "Hello Pyscript" by Brendan McGrath
// # https://ancientbrain.com/world.php?world=5833407984
// # Please leave this clone trail here.



// # Clone by Brendan McGrath of:
// # "Python demo (customisable)" by Starter user
// # https://ancientbrain.com/world.php?world=4219533706
// # Please leave this clone trail here.


// The rule for how this API handles Python 'print' output: 
// If we have an element with id="ab-python-console" then 'print' appends to it.
// If such an element does not exist, 'print' writes to the console.

// choose one of:
// <script type="py"> 
// <script type="mpy"> 



document.write(`
  <py-config> packages = ["pandas", "matplotlib", "ipython"] </py-config>

  <style>
    #pandas-container {
      margin: 2em auto;
      width: 60%;
      padding: 1em;
      background-color: #222;
      color: #ffd54f;
      border-radius: 8px;
      font-family: 'Fira Mono', monospace;
      font-size: 1em;
      overflow-x: auto;
      box-shadow: 0 2px 8px #0006;
    }
    .dataframe-table {
      border-collapse: collapse;
      width: 100%;
      color: #ffd54f;
    }
    .dataframe-table th, .dataframe-table td {
      border: 1px solid #444;
      padding: 8px;
      text-align: center;
    }
    .dataframe-table th {
      background-color: #333;
    }
    .dataframe-table tr:nth-child(even) {
      background-color: #2b2b2b;
    }
  </style>

  <h1 style="text-align: center; margin-top: 1em; color: #ffd54f">
      Pandas + Matplotlib
  </h1>

  <!-- Spinner -->
  <div id="loading-spinner" style="
      text-align:center; 
      font-size:1.5em; 
      margin-top:2em;
      color: #ffd54f;
  ">
      ⏳ Loading Pandas...
  </div>

  <div id="pandas-container">
      <div id="pandas-output"></div>
  </div>

  <div id="plot-output" style="margin: 2em auto; width: 60%;"></div>

  <script type="py">
    import pandas as pd  # type: ignore
    from pyscript import document

    # Spinner: Pandas loaded
    document.querySelector("#loading-spinner").innerHTML = "⏳ Loading Matplotlib..."

    # Create DataFrame
    df = pd.DataFrame({
        "A": [1, 2, 3, 4, 5],
        "B": [2, 3, 5, 7, 11]
    })

    # Display styled DataFrame
    html_table = df.to_html(classes="dataframe-table", border=0)
    document.querySelector("#pandas-output").innerHTML = html_table
  </script>

  <script type="py">
    import pandas as pd  # type: ignore
    import matplotlib.pyplot as plt  # type: ignore
    from pyscript import display, document
    
    plt.style.use("ggplot")

    # Create plot
    fig, ax = plt.subplots(figsize=(6,4))
    df.plot(x="A", y="B", kind="line", marker="o", markersize=8, linewidth=2, ax=ax, legend=False)
    ax.axhline(y=6, color='red', linestyle='--', linewidth=2, label='Limit = 6')
    ax.text(x=4, y=6.2, s='Limit = 6', color='red', fontsize=12)
    ax.set_title("Pandas Line Plot with Limit", fontsize=16, color="#ffd54f")
    ax.set_xlabel("A values", fontsize=12, color="#81c784")
    ax.set_ylabel("B values", fontsize=12, color="#81c784")
    
    plt.tight_layout()

    display(fig, target="plot-output")
    plt.close(fig)

    # Hide spinner once everything is done
    document.querySelector("#loading-spinner").style.display = "none"
  </script>
`);