<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Antyx</title>

    {css}
    {plotly_js}
</head>

<body class="{'dark' if self.theme == 'dark' else ''}">

    <div class="header">
        <div class="top-bar">
            <div class="title-block">
                <h1>Antyx</h1>
                <span class="subtitle">Exploratory Data Analysis</span>
            </div>

            <div class="utilities-menu">
                <div class="utilities-trigger">Utilities ▾</div>
                <div class="utilities-dropdown">
                    <div class="utility-item" onclick="downloadReport()">Download report</div>
                </div>
            </div>

            <nav class="main-menu">
                <ul>
                    <li class="menu-item active" data-target="overview"><span>Overview</span></li>
                    <li class="menu-item" data-target="desc"><span>Summary</span></li>
                    <li class="menu-item" data-target="corr"><span>Correlations</span></li>
                    <li class="menu-item" data-target="viz"><span>Visualizations</span></li>
                    <li class="menu-item" data-target="prof"><span>Profiles</span></li>

                    <li class="theme-toggle">
                      <button id="theme-toggle" onclick="toggleTheme()">
                        <span id="theme-icon"></span>
                      </button>
                    </li>
                </ul>
            </nav>
        </div>
    </div>

    <div class="container">

        <div id="overview" class="tab-content active">
            {overview(
                self.df,
                file_name=os.path.basename(self.file_path) if self.file_path else "",
                total_records=self.df.shape[0] + self.skipped_lines,
                omitted_records=self.skipped_lines,
                theme=self.theme,
                file_path=self.file_path,
                summary_stats=self._compute_summary_stats()
            )}
        </div>

        <div id="desc" class="tab-content">
            {describe_data(self.df, output_dir=os.getcwd())}
        </div>

        <div id="corr" class="tab-content">
            {correlation_analysis(self.df, theme=self.theme)}
        </div>

        <div id="viz" class="tab-content">
            {visualizations(self.df, theme=self.theme)}
        </div>

        <div id="prof" class="tab-content">
            {variable_profiles(self.df, theme=self.theme)}
        </div>

    </div>

    <!-- Navigation -->
    <script>
    document.addEventListener("DOMContentLoaded", () => {{
        const items = document.querySelectorAll(".menu-item");
        const sections = document.querySelectorAll(".tab-content");

        items.forEach(item => {{
            item.addEventListener("click", () => {{
                const target = item.getAttribute("data-target");

                items.forEach(i => i.classList.remove("active"));
                item.classList.add("active");

                sections.forEach(sec => {{
                    if (sec.id === target) {{
                        sec.classList.add("active");

                        // Redraw Plotly graphs when tab becomes visible
                        setTimeout(() => {{
                            if (window.Plotly) {{
                                sec.querySelectorAll('.plotly-graph-div').forEach(g => {{
                                    try {{
                                        Plotly.Plots.resize(g);
                                    }} catch (e) {{}}
                                }});
                            }}
                        }}, 50);

                    }} else {{
                        sec.classList.remove("active");
                    }}
                }});

                window.scrollTo({{ top: 0, behavior: "instant" }});
            }});
        }});
    }});
    </script>

    <!-- Theme toggle -->
    <script>
    function setThemeIcon(isDark) {{
      const iconSpan = document.getElementById("theme-icon");
      if (!iconSpan) return;

      if (isDark) {{
        iconSpan.innerHTML = `
          <svg class="icon-sun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <circle cx="12" cy="12" r="4" fill="currentColor"/>
            <g stroke="currentColor" stroke-width="2" stroke-linecap="round">
              <line x1="12" y1="2" x2="12" y2="5"/>
              <line x1="12" y1="19" x2="12" y2="22"/>
              <line x1="4.22" y1="4.22" x2="6.34" y2="6.34"/>
              <line x1="17.66" y1="17.66" x2="19.78" y2="19.78"/>
              <line x1="2" y1="12" x2="5" y2="12"/>
              <line x1="19" y1="12" x2="22" y2="12"/>
              <line x1="4.22" y1="19.78" x2="6.34" y2="17.66"/>
              <line x1="17.66" y1="6.34" x2="19.78" y2="4.22"/>
            </g>
          </svg>`;
      }} else {{
        iconSpan.innerHTML = `<svg class="icon-moon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <path d="M15 2a8 8 0 1 0 7 11A6 6 0 1 1 15 2Z"
            fill="currentColor"/>
        </svg>`;
      }}
    }}

    function toggleTheme() {{
      const body = document.body;
      const isDark = body.classList.toggle("dark");
      setThemeIcon(isDark);
    }}

    document.addEventListener("DOMContentLoaded", () => {{
      if ("{self.theme}" === "dark") {{
        document.body.classList.add("dark");
      }}
      const isDark = document.body.classList.contains("dark");
      setThemeIcon(isDark);
    }});
    </script>

    <!-- Utilities -->
    <script>
    document.addEventListener("DOMContentLoaded", () => {{
        const trigger = document.querySelector(".utilities-trigger");
        const dropdown = document.querySelector(".utilities-dropdown");

        trigger.addEventListener("click", () => {{
            dropdown.style.display = dropdown.style.display === "block" ? "none" : "block";
        }});

        document.addEventListener("click", (e) => {{
            if (!trigger.contains(e.target) && !dropdown.contains(e.target)) {{
                dropdown.style.display = "none";
            }}
        }});
    }});

    function downloadReport() {{
        const blob = new Blob([document.documentElement.outerHTML], {{ type: "text/html" }});
        const url = URL.createObjectURL(blob);

        const a = document.createElement("a");
        a.href = url;
        a.download = "antyx_report.html";
        a.click();

        URL.revokeObjectURL(url);
    }}
    </script>

    <!-- {% raw %} -->
    <script>
        document.addEventListener("DOMContentLoaded", () => {
            const items = document.querySelectorAll(".menu-item");
            const sections = document.querySelectorAll(".tab-content");

            items.forEach(item => {
                item.addEventListener("click", () => {
                    // Lógica de tabs
                });
            });
        });
    </script>
    <!-- {% endraw %} -->

</body>
</html>
