<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="2.0"
                xmlns:html="http://www.w3.org/1999/xhtml"
                xmlns:sitemap="http://www.sitemaps.org/schemas/sitemap/0.9"
                xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:output method="html" version="1.0" encoding="UTF-8" indent="yes"/>
    <xsl:template match="/">
        <html xmlns="http://www.w3.org/1999/xhtml">
            <head>
                <title>XML Sitemap</title>
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
                <style type="text/css">
                    body {
                        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
                        color: #333;
                        background: #f5f5f5;
                        margin: 0;
                        padding: 0;
                    }
                    .header {
                        background: #fff;
                        border-bottom: 1px solid #ddd;
                        padding: 20px 40px;
                        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
                    }
                    .header h1 {
                        margin: 0 0 10px 0;
                        font-size: 24px;
                        font-weight: 600;
                        color: #2271b1;
                    }
                    .header p {
                        margin: 5px 0;
                        color: #666;
                        font-size: 14px;
                    }
                    .content {
                        max-width: 1200px;
                        margin: 30px auto;
                        padding: 0 20px;
                    }
                    .info-box {
                        background: #fff;
                        border: 1px solid #ddd;
                        border-radius: 4px;
                        padding: 20px;
                        margin-bottom: 30px;
                    }
                    .info-box h2 {
                        margin: 0 0 15px 0;
                        font-size: 18px;
                        color: #2271b1;
                    }
                    table {
                        width: 100%;
                        border-collapse: collapse;
                        background: #fff;
                        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
                        border-radius: 4px;
                        overflow: hidden;
                    }
                    th {
                        background: #2271b1;
                        color: #fff;
                        font-weight: 600;
                        text-align: left;
                        padding: 15px;
                        font-size: 14px;
                    }
                    tr {
                        border-bottom: 1px solid #f0f0f0;
                    }
                    tr:hover {
                        background: #f9f9f9;
                    }
                    td {
                        padding: 15px;
                        font-size: 14px;
                    }
                    td a {
                        color: #2271b1;
                        text-decoration: none;
                        word-break: break-all;
                    }
                    td a:hover {
                        text-decoration: underline;
                    }
                    .url-cell {
                        max-width: 600px;
                    }
                    .date-cell {
                        color: #666;
                        white-space: nowrap;
                    }
                    .footer {
                        text-align: center;
                        padding: 30px 20px;
                        color: #666;
                        font-size: 13px;
                    }
                    .badge {
                        display: inline-block;
                        background: #2271b1;
                        color: #fff;
                        padding: 4px 12px;
                        border-radius: 12px;
                        font-size: 12px;
                        font-weight: 600;
                        margin-left: 10px;
                    }
                </style>
            </head>
            <body>
                <div class="header">
                    <h1>XML Sitemap <span class="badge">AISEO</span></h1>
                    <p>This is an XML Sitemap generated by the AISEO plugin to help search engines better index your site.</p>
                    <p><strong>Number of URLs:</strong> <xsl:value-of select="count(sitemap:sitemapindex/sitemap:sitemap) + count(sitemap:urlset/sitemap:url)"/></p>
                </div>
                
                <div class="content">
                    <xsl:apply-templates/>
                </div>
                
                <div class="footer">
                    <p>Generated by <strong>AISEO</strong> - AI-Powered SEO Plugin for WordPress</p>
                </div>
            </body>
        </html>
    </xsl:template>

    <!-- Sitemap Index -->
    <xsl:template match="sitemap:sitemapindex">
        <div class="info-box">
            <h2>📑 Sitemap Index</h2>
            <p>This sitemap index contains links to all sub-sitemaps for this website.</p>
        </div>
        <table>
            <thead>
                <tr>
                    <th>Sitemap URL</th>
                    <th style="width: 200px;">Last Modified</th>
                </tr>
            </thead>
            <tbody>
                <xsl:for-each select="sitemap:sitemap">
                    <tr>
                        <td class="url-cell">
                            <a href="{sitemap:loc}">
                                <xsl:value-of select="sitemap:loc"/>
                            </a>
                        </td>
                        <td class="date-cell">
                            <xsl:value-of select="sitemap:lastmod"/>
                        </td>
                    </tr>
                </xsl:for-each>
            </tbody>
        </table>
    </xsl:template>

    <!-- URL Set -->
    <xsl:template match="sitemap:urlset">
        <div class="info-box">
            <h2>🔗 URLs in this Sitemap</h2>
            <p>This sitemap contains <xsl:value-of select="count(sitemap:url)"/> URLs.</p>
        </div>
        <table>
            <thead>
                <tr>
                    <th>URL</th>
                    <th style="width: 200px;">Last Modified</th>
                    <th style="width: 120px;">Change Freq</th>
                    <th style="width: 100px;">Priority</th>
                </tr>
            </thead>
            <tbody>
                <xsl:for-each select="sitemap:url">
                    <tr>
                        <td class="url-cell">
                            <a href="{sitemap:loc}">
                                <xsl:value-of select="sitemap:loc"/>
                            </a>
                        </td>
                        <td class="date-cell">
                            <xsl:value-of select="sitemap:lastmod"/>
                        </td>
                        <td>
                            <xsl:value-of select="sitemap:changefreq"/>
                        </td>
                        <td>
                            <xsl:value-of select="sitemap:priority"/>
                        </td>
                    </tr>
                </xsl:for-each>
            </tbody>
        </table>
    </xsl:template>
</xsl:stylesheet>
