<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
  xmlns:sitemap="http://www.sitemaps.org/schemas/sitemap/0.9"
  exclude-result-prefixes="sitemap">

  <xsl:output method="html" indent="yes" encoding="UTF-8"/>

  <xsl:template match="/">
    <html>
      <head>
        <title>XML Sitemap</title>
        <style>
          body { font-family: -apple-system, BlinkMacSystemFont, sans-serif; margin: 2rem; background: #f8fafc; color: #1e293b; }
          h1 { font-size: 1.5rem; margin-bottom: 1rem; }
          .info { color: #64748b; margin-bottom: 1.5rem; }
          table { width: 100%; border-collapse: collapse; background: white; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
          th { background: #f1f5f9; padding: 12px; text-align: left; font-size: 12px; text-transform: uppercase; color: #64748b; }
          td { padding: 12px; border-bottom: 1px solid #e2e8f0; }
          tr:last-child td { border-bottom: none; }
          tr:hover td { background: #f8fafc; }
          a { color: #3b82f6; text-decoration: none; word-break: break-all; }
          a:hover { text-decoration: underline; }
          .high { color: #22c55e; font-weight: 600; }
          .med { color: #f59e0b; }
          .low { color: #94a3b8; }
          @media (prefers-color-scheme: dark) {
            body { background: #0f172a; color: #f1f5f9; }
            table { background: #1e293b; }
            th { background: #334155; color: #94a3b8; }
            td { border-color: #334155; }
            tr:hover td { background: #334155; }
          }
        </style>
      </head>
      <body>
        <h1>XML Sitemap</h1>
        <p class="info">
          This sitemap contains <strong><xsl:value-of select="count(sitemap:urlset/sitemap:url)"/></strong> URLs
        </p>
        <table>
          <thead>
            <tr>
              <th>URL</th>
              <th>Last Modified</th>
              <th>Frequency</th>
              <th>Priority</th>
            </tr>
          </thead>
          <tbody>
            <xsl:for-each select="sitemap:urlset/sitemap:url">
              <xsl:sort select="sitemap:loc"/>
              <tr>
                <td>
                  <a href="{sitemap:loc}"><xsl:value-of select="sitemap:loc"/></a>
                </td>
                <td><xsl:value-of select="sitemap:lastmod"/></td>
                <td><xsl:value-of select="sitemap:changefreq"/></td>
                <td>
                  <xsl:attribute name="class">
                    <xsl:choose>
                      <xsl:when test="sitemap:priority &gt;= 0.8">high</xsl:when>
                      <xsl:when test="sitemap:priority &gt;= 0.5">med</xsl:when>
                      <xsl:otherwise>low</xsl:otherwise>
                    </xsl:choose>
                  </xsl:attribute>
                  <xsl:value-of select="sitemap:priority"/>
                </td>
              </tr>
            </xsl:for-each>
          </tbody>
        </table>
        <p style="margin-top: 2rem; text-align: center; color: #94a3b8; font-size: 12px;">
          Generated by PhoenixKit
        </p>
        <script>
          // Auto-reload on style change
          (function() {
            var currentStyle = 'table';
            var prefix = window.location.pathname.replace('/sitemap.xml', '');
            var checkUrl = prefix + '/sitemap/version';

            function checkVersion() {
              fetch(checkUrl, { cache: 'no-store' })
                .then(function(r) { return r.json(); })
                .then(function(data) {
                  if (data.style &amp;&amp; data.style !== currentStyle) {
                    window.location.reload();
                  }
                })
                .catch(function() {});
            }

            setInterval(checkVersion, 3000);
          })();
        </script>
      </body>
    </html>
  </xsl:template>

</xsl:stylesheet>
