{% extends 'base.html' %}

{% block title %}Sitemap Generator — Free Online Tool{% endblock %}

{% block content %}
<div class="container py-5">

  <!-- Breadcrumb -->
  <nav aria-label="breadcrumb" class="mb-4">
    <ol class="breadcrumb">
      <li class="breadcrumb-item"><a href="{{ url_for('main.index') }}">Home</a></li>
      <li class="breadcrumb-item"><a href="{{ url_for('main.index') }}#webtools">Web Tools</a></li>
      <li class="breadcrumb-item active" aria-current="page">Sitemap Generator</li>
    </ol>
  </nav>

  <!-- Page Header -->
  <div class="row mb-4">
    <div class="col">
      <h1 class="h2 fw-bold"><i class="fa-solid fa-sitemap me-2 text-primary"></i>Sitemap Generator</h1>
      <p class="text-muted">Generate an XML sitemap manually or by automatically crawling your website.</p>
    </div>
  </div>

  <!-- Tabs -->
  <ul class="nav nav-tabs mb-4" id="sitemapTabs" role="tablist">
    <li class="nav-item" role="presentation">
      <button class="nav-link active" id="manualTab" data-bs-toggle="tab" data-bs-target="#manualPane" type="button" role="tab">
        <i class="fa-solid fa-pencil me-2"></i>Manual Entry
      </button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link" id="crawlTab" data-bs-toggle="tab" data-bs-target="#crawlPane" type="button" role="tab">
        <i class="fa-solid fa-spider me-2"></i>Auto Crawl
      </button>
    </li>
  </ul>

  <div class="tab-content">
    <!-- Manual Tab -->
    <div class="tab-pane fade show active" id="manualPane" role="tabpanel">
      <div class="row g-4">
        <div class="col-lg-7">
          <div class="card shadow-sm border-0">
            <div class="card-body p-4">
              <div class="mb-4">
                <label for="manualDomain" class="form-label fw-semibold">Base Domain <span class="text-danger">*</span></label>
                <input type="text" id="manualDomain" class="form-control"
                       placeholder="https://example.com" required>
              </div>

              <h6 class="fw-semibold mb-3">URLs <button id="addUrlRow" type="button" class="btn btn-sm btn-outline-primary ms-2"><i class="fa-solid fa-plus me-1"></i>Add URL</button></h6>
              <div id="urlListContainer">
                <!-- URL rows injected by JS -->
              </div>

              <!-- Error Alert -->
              <div id="errorAlertManual" class="alert alert-danger d-none mt-3" role="alert">
                <i class="fa-solid fa-circle-xmark me-2"></i><span id="errorMsgManual"></span>
              </div>

              <div class="d-grid mt-4">
                <button id="submitManualBtn" type="button" class="btn btn-primary btn-lg">
                  <i class="fa-solid fa-sitemap me-2"></i>Generate Sitemap
                </button>
              </div>
            </div>
          </div>
        </div>
        <div class="col-lg-5" id="manualResultsCol">
          <div id="loadingManual" class="card shadow-sm border-0 d-none">
            <div class="card-body p-5 text-center">
              <div class="spinner-border text-primary mb-3" style="width:3rem;height:3rem;" role="status"><span class="visually-hidden">Generating...</span></div>
              <p class="fw-semibold mb-0">Generating sitemap…</p>
            </div>
          </div>
          <div id="resultsManual" class="d-none">
            <div class="card shadow-sm border-0">
              <div class="card-header fw-semibold d-flex justify-content-between align-items-center">
                <span><i class="fa-solid fa-code me-2"></i>XML Sitemap</span>
                <div class="btn-group btn-group-sm">
                  <button id="copyXmlManual" class="btn btn-outline-secondary"><i class="fa-solid fa-copy me-1"></i>Copy</button>
                  <button id="downloadXmlManual" class="btn btn-outline-primary"><i class="fa-solid fa-download me-1"></i>Download</button>
                </div>
              </div>
              <div class="card-body p-0">
                <pre id="xmlOutputManual" class="mb-0 p-3 small bg-dark text-light rounded-bottom" style="max-height:450px;overflow-y:auto;white-space:pre-wrap;word-break:break-all;"></pre>
              </div>
            </div>
          </div>
          <div id="placeholderManual" class="card border-0 bg-light">
            <div class="card-body p-5 text-center text-muted">
              <i class="fa-solid fa-sitemap fa-3x mb-3 opacity-25"></i>
              <p class="mb-0">Your sitemap XML will appear here.</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Auto Crawl Tab -->
    <div class="tab-pane fade" id="crawlPane" role="tabpanel">
      <div class="row g-4">
        <div class="col-lg-5">
          <div class="card shadow-sm border-0">
            <div class="card-body p-4">
              <div class="mb-3">
                <label for="crawlDomain" class="form-label fw-semibold">Website URL <span class="text-danger">*</span></label>
                <input type="text" id="crawlDomain" class="form-control"
                       placeholder="https://example.com" required>
                <div class="form-text">The crawler will start from this URL.</div>
              </div>
              <div class="mb-4">
                <label for="maxPages" class="form-label fw-semibold">Max Pages to Crawl</label>
                <select id="maxPages" class="form-select">
                  <option value="10" selected>10 pages</option>
                  <option value="25">25 pages</option>
                  <option value="50">50 pages</option>
                </select>
              </div>

              <div id="errorAlertCrawl" class="alert alert-danger d-none" role="alert">
                <i class="fa-solid fa-circle-xmark me-2"></i><span id="errorMsgCrawl"></span>
              </div>

              <div class="d-grid">
                <button id="submitCrawlBtn" type="button" class="btn btn-primary btn-lg">
                  <i class="fa-solid fa-spider me-2"></i>Generate Sitemap
                </button>
              </div>
            </div>
          </div>
        </div>
        <div class="col-lg-7">
          <div id="loadingCrawl" class="card shadow-sm border-0 d-none">
            <div class="card-body p-5 text-center">
              <div class="spinner-border text-primary mb-3" style="width:3rem;height:3rem;" role="status"><span class="visually-hidden">Crawling...</span></div>
              <p class="fw-semibold mb-0">Crawling website…</p>
              <p class="text-muted small">This may take a moment.</p>
            </div>
          </div>
          <div id="resultsCrawl" class="d-none">
            <div class="card shadow-sm border-0">
              <div class="card-header fw-semibold d-flex justify-content-between align-items-center">
                <span><i class="fa-solid fa-code me-2"></i>XML Sitemap</span>
                <div class="btn-group btn-group-sm">
                  <button id="copyXmlCrawl" class="btn btn-outline-secondary"><i class="fa-solid fa-copy me-1"></i>Copy</button>
                  <button id="downloadXmlCrawl" class="btn btn-outline-primary"><i class="fa-solid fa-download me-1"></i>Download</button>
                </div>
              </div>
              <div class="card-body p-0">
                <pre id="xmlOutputCrawl" class="mb-0 p-3 small bg-dark text-light rounded-bottom" style="max-height:450px;overflow-y:auto;white-space:pre-wrap;word-break:break-all;"></pre>
              </div>
            </div>
          </div>
          <div id="placeholderCrawl" class="card border-0 bg-light">
            <div class="card-body p-5 text-center text-muted">
              <i class="fa-solid fa-sitemap fa-3x mb-3 opacity-25"></i>
              <p class="mb-0">Crawl results and XML will appear here.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
(function () {
  'use strict';

  // ─── URL Row Builder ────────────────────────────────────────────────────────
  const container = document.getElementById('urlListContainer');
  const addBtn    = document.getElementById('addUrlRow');
  let rowIndex    = 0;

  function addRow(url = '', priority = '0.5', changefreq = 'weekly') {
    const row = document.createElement('div');
    row.className = 'row g-2 mb-2 align-items-center url-row';
    row.dataset.idx = rowIndex++;
    row.innerHTML = `
      <div class="col-12 col-sm-5">
        <input type="text" class="form-control form-control-sm url-input" placeholder="/page-slug" value="${escHtml(url)}">
      </div>
      <div class="col-6 col-sm-3">
        <select class="form-select form-select-sm priority-input">
          ${['1.0','0.9','0.8','0.7','0.6','0.5','0.4','0.3','0.2','0.1'].map(p =>
            `<option value="${p}" ${p === priority ? 'selected' : ''}>${p}</option>`).join('')}
        </select>
      </div>
      <div class="col-6 col-sm-3">
        <select class="form-select form-select-sm freq-input">
          ${['always','hourly','daily','weekly','monthly','yearly','never'].map(f =>
            `<option value="${f}" ${f === changefreq ? 'selected' : ''}>${f}</option>`).join('')}
        </select>
      </div>
      <div class="col-auto">
        <button type="button" class="btn btn-sm btn-outline-danger remove-row"><i class="fa-solid fa-trash-can"></i></button>
      </div>`;
    container.appendChild(row);
  }

  addRow('/', '1.0', 'daily');
  addRow('/about', '0.7', 'monthly');

  addBtn.addEventListener('click', () => addRow());

  container.addEventListener('click', e => {
    if (e.target.closest('.remove-row')) {
      const row = e.target.closest('.url-row');
      if (container.querySelectorAll('.url-row').length > 1) row.remove();
    }
  });

  function escHtml(str) {
    return String(str).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
  }

  function copyXml(outputId, btnId) {
    const xml = document.getElementById(outputId).textContent;
    navigator.clipboard.writeText(xml).then(() => {
      const btn = document.getElementById(btnId);
      const orig = btn.innerHTML;
      btn.innerHTML = '<i class="fa-solid fa-check text-success me-1"></i>Copied!';
      setTimeout(() => { btn.innerHTML = orig; }, 2000);
    });
  }

  function downloadXml(outputId) {
    const xml  = document.getElementById(outputId).textContent;
    const blob = new Blob([xml], { type: 'application/xml' });
    const url  = URL.createObjectURL(blob);
    const a    = document.createElement('a');
    a.href = url; a.download = 'sitemap.xml'; a.click();
    URL.revokeObjectURL(url);
  }

  document.getElementById('copyXmlManual').addEventListener('click',    () => copyXml('xmlOutputManual', 'copyXmlManual'));
  document.getElementById('downloadXmlManual').addEventListener('click', () => downloadXml('xmlOutputManual'));
  document.getElementById('copyXmlCrawl').addEventListener('click',    () => copyXml('xmlOutputCrawl', 'copyXmlCrawl'));
  document.getElementById('downloadXmlCrawl').addEventListener('click', () => downloadXml('xmlOutputCrawl'));

  // ─── Manual Submit ───────────────────────────────────────────────────────────
  document.getElementById('submitManualBtn').addEventListener('click', async () => {
    const domain = document.getElementById('manualDomain').value.trim();
    if (!domain) { showErr('errorMsgManual', 'errorAlertManual', 'Please enter a base domain.'); return; }

    const urls = [];
    document.querySelectorAll('.url-row').forEach(row => {
      const u = row.querySelector('.url-input').value.trim();
      const p = row.querySelector('.priority-input').value;
      const f = row.querySelector('.freq-input').value;
      if (u) urls.push({ url: u, priority: p, changefreq: f });
    });
    if (!urls.length) { showErr('errorMsgManual', 'errorAlertManual', 'Please add at least one URL.'); return; }

    await submitSitemap('manual', { domain, urls });
  });

  // ─── Crawl Submit ────────────────────────────────────────────────────────────
  document.getElementById('submitCrawlBtn').addEventListener('click', async () => {
    const domain   = document.getElementById('crawlDomain').value.trim();
    const maxPages = parseInt(document.getElementById('maxPages').value);
    if (!domain) { showErr('errorMsgCrawl', 'errorAlertCrawl', 'Please enter a website URL.'); return; }
    await submitSitemap('crawl', { domain, max_pages: maxPages });
  });

  function showErr(msgId, alertId, msg) {
    document.getElementById(msgId).textContent = msg;
    document.getElementById(alertId).classList.remove('d-none');
  }

  async function submitSitemap(mode, payload) {
    const isManual = mode === 'manual';
    const loading     = document.getElementById(isManual ? 'loadingManual'   : 'loadingCrawl');
    const results     = document.getElementById(isManual ? 'resultsManual'   : 'resultsCrawl');
    const placeholder = document.getElementById(isManual ? 'placeholderManual': 'placeholderCrawl');
    const xmlOutput   = document.getElementById(isManual ? 'xmlOutputManual' : 'xmlOutputCrawl');
    const submitBtn   = document.getElementById(isManual ? 'submitManualBtn' : 'submitCrawlBtn');
    const errorAlert  = document.getElementById(isManual ? 'errorAlertManual': 'errorAlertCrawl');
    const errorMsgEl  = document.getElementById(isManual ? 'errorMsgManual'  : 'errorMsgCrawl');

    errorAlert.classList.add('d-none');
    loading.classList.remove('d-none');
    results.classList.add('d-none');
    placeholder.classList.add('d-none');
    submitBtn.disabled = true;

    try {
      const endpoint = isManual ? '/tools/webtools/sitemap/generate' : '/tools/webtools/sitemap/crawl';
      const resp = await fetch(endpoint, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload)
      });
      const data = await resp.json();
      if (!resp.ok) throw new Error(data.error || 'Server error ' + resp.status);
      xmlOutput.textContent = data.xml || '<!-- No XML generated -->';
      loading.classList.add('d-none');
      results.classList.remove('d-none');
    } catch (err) {
      loading.classList.add('d-none');
      placeholder.classList.remove('d-none');
      errorMsgEl.textContent = err.message;
      errorAlert.classList.remove('d-none');
    } finally {
      submitBtn.disabled = false;
    }
  }
})();
</script>
{% endblock %}