{% extends 'base.html' %}

{% block title %}Robots.txt 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">Robots.txt Generator</li>
    </ol>
  </nav>

  <!-- Page Header -->
  <div class="row mb-4">
    <div class="col">
      <h1 class="h2 fw-bold"><i class="fa-solid fa-robot me-2 text-primary"></i>Robots.txt Generator</h1>
      <p class="text-muted">Create a valid robots.txt file with custom rules for crawlers, disallow paths, and sitemap URLs.</p>
    </div>
  </div>

  <div class="row g-4">
    <!-- Form -->
    <div class="col-lg-6">
      <div class="card shadow-sm border-0">
        <div class="card-body p-4">
          <h5 class="fw-semibold mb-4"><i class="fa-solid fa-sliders me-2 text-primary"></i>Configuration</h5>

          <div class="mb-3">
            <label for="domain" class="form-label fw-semibold">Website Domain</label>
            <input type="text" id="domain" class="form-control" placeholder="https://example.com">
          </div>

          <!-- User Agent -->
          <div class="mb-3">
            <label class="form-label fw-semibold">User-Agent</label>
            <div class="row g-2 align-items-center">
              <div class="col">
                <select id="userAgentSelect" class="form-select">
                  <option value="*" selected>* (All bots)</option>
                  <option value="Googlebot">Googlebot</option>
                  <option value="Bingbot">Bingbot</option>
                  <option value="Slurp">Yahoo Slurp</option>
                  <option value="DuckDuckBot">DuckDuckBot</option>
                  <option value="custom">Custom…</option>
                </select>
              </div>
            </div>
            <input type="text" id="userAgentCustom" class="form-control mt-2 d-none" placeholder="Enter custom bot name">
          </div>

          <!-- Crawl Delay -->
          <div class="mb-3">
            <label for="crawlDelay" class="form-label fw-semibold">Crawl Delay <span class="text-muted small">(optional)</span></label>
            <input type="number" id="crawlDelay" class="form-control" min="0" max="120"
                   placeholder="e.g. 10 (seconds)">
          </div>

          <!-- Disallow Paths -->
          <div class="mb-3">
            <label class="form-label fw-semibold">
              Disallow Paths
              <button type="button" id="addDisallow" class="btn btn-sm btn-outline-danger ms-2">
                <i class="fa-solid fa-plus me-1"></i>Add
              </button>
            </label>
            <div id="disallowContainer"></div>
          </div>

          <!-- Allow Paths -->
          <div class="mb-3">
            <label class="form-label fw-semibold">
              Allow Paths
              <button type="button" id="addAllow" class="btn btn-sm btn-outline-success ms-2">
                <i class="fa-solid fa-plus me-1"></i>Add
              </button>
            </label>
            <div id="allowContainer"></div>
          </div>

          <!-- Sitemap URL -->
          <div class="mb-4">
            <label for="sitemapUrl" class="form-label fw-semibold">Sitemap URL <span class="text-muted small">(optional)</span></label>
            <input type="text" id="sitemapUrl" class="form-control"
                   placeholder="https://example.com/sitemap.xml">
          </div>

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

          <div class="d-grid">
            <button id="submitBtn" type="button" class="btn btn-primary btn-lg">
              <i class="fa-solid fa-robot me-2"></i>Generate robots.txt
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- Results -->
    <div class="col-lg-6">
      <!-- Loading -->
      <div id="loadingCard" 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 robots.txt…</p>
        </div>
      </div>

      <!-- Results -->
      <div id="resultsSection" 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-robot me-2"></i>Generated robots.txt</span>
            <div class="btn-group btn-group-sm">
              <button id="copyRobotsBtn" class="btn btn-outline-secondary">
                <i class="fa-solid fa-copy me-1"></i>Copy
              </button>
              <button id="downloadRobotsBtn" 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="robotsOutput" class="mb-0 p-3 bg-dark text-light rounded-bottom font-monospace small"
                 style="min-height:200px;max-height:500px;overflow-y:auto;white-space:pre;"></pre>
          </div>
        </div>
      </div>

      <!-- Placeholder -->
      <div id="placeholderCard" class="card border-0 bg-light">
        <div class="card-body p-5 text-center text-muted">
          <i class="fa-solid fa-robot fa-3x mb-3 opacity-25"></i>
          <p class="mb-0">Your robots.txt content will appear here.</p>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}

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

  const submitBtn      = document.getElementById('submitBtn');
  const errorAlert     = document.getElementById('errorAlert');
  const errorMsg       = document.getElementById('errorMsg');
  const loadingCard    = document.getElementById('loadingCard');
  const resultsSection = document.getElementById('resultsSection');
  const placeholder    = document.getElementById('placeholderCard');

  // Path row builder
  function makePathRow(containerId, placeholder, colorClass) {
    const container = document.getElementById(containerId);
    const row = document.createElement('div');
    row.className = 'input-group input-group-sm mb-2 path-row';
    row.innerHTML = `
      <input type="text" class="form-control path-input" placeholder="${placeholder}">
      <button type="button" class="btn btn-outline-${colorClass} remove-path">
        <i class="fa-solid fa-trash-can"></i>
      </button>`;
    container.appendChild(row);
  }

  makePathRow('disallowContainer', '/admin/', 'danger');
  makePathRow('allowContainer',    '/',       'success');

  document.getElementById('addDisallow').addEventListener('click', () => makePathRow('disallowContainer', '/path-to-disallow/', 'danger'));
  document.getElementById('addAllow').addEventListener('click',    () => makePathRow('allowContainer', '/path-to-allow/', 'success'));

  document.addEventListener('click', e => {
    if (e.target.closest('.remove-path')) e.target.closest('.path-row').remove();
  });

  // Custom user-agent toggle
  document.getElementById('userAgentSelect').addEventListener('change', function () {
    document.getElementById('userAgentCustom').classList.toggle('d-none', this.value !== 'custom');
  });

  function showError(msg) {
    errorMsg.textContent = msg;
    errorAlert.classList.remove('d-none');
    loadingCard.classList.add('d-none');
    placeholder.classList.remove('d-none');
    resultsSection.classList.add('d-none');
  }

  function getPathValues(containerId) {
    return Array.from(document.querySelectorAll(`#${containerId} .path-input`))
      .map(el => el.value.trim())
      .filter(Boolean);
  }

  document.getElementById('copyRobotsBtn').addEventListener('click', () => {
    const text = document.getElementById('robotsOutput').textContent;
    navigator.clipboard.writeText(text).then(() => {
      const btn = document.getElementById('copyRobotsBtn');
      btn.innerHTML = '<i class="fa-solid fa-check text-success me-1"></i>Copied!';
      setTimeout(() => { btn.innerHTML = '<i class="fa-solid fa-copy me-1"></i>Copy'; }, 2000);
    });
  });

  document.getElementById('downloadRobotsBtn').addEventListener('click', () => {
    const text = document.getElementById('robotsOutput').textContent;
    const blob = new Blob([text], { type: 'text/plain' });
    const url  = URL.createObjectURL(blob);
    const a    = document.createElement('a');
    a.href = url; a.download = 'robots.txt'; a.click();
    URL.revokeObjectURL(url);
  });

  submitBtn.addEventListener('click', async () => {
    const domain      = document.getElementById('domain').value.trim();
    const uaSelect    = document.getElementById('userAgentSelect').value;
    const userAgent   = uaSelect === 'custom' ? document.getElementById('userAgentCustom').value.trim() || '*' : uaSelect;
    const crawlDelay  = document.getElementById('crawlDelay').value.trim();
    const disallowPaths = getPathValues('disallowContainer');
    const allowPaths    = getPathValues('allowContainer');
    const sitemapUrl  = document.getElementById('sitemapUrl').value.trim();

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

    try {
      const resp = await fetch('/tools/webtools/robots-generator/generate', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          domain,
          user_agent: userAgent,
          crawl_delay: crawlDelay ? parseInt(crawlDelay) : null,
          disallow_paths: disallowPaths,
          allow_paths: allowPaths,
          sitemap_url: sitemapUrl
        })
      });

      const data = await resp.json();
      if (!resp.ok) throw new Error(data.error || 'Server error ' + resp.status);

      document.getElementById('robotsOutput').textContent = data.robots_txt || '';
      loadingCard.classList.add('d-none');
      resultsSection.classList.remove('d-none');
    } catch (err) {
      showError(err.message);
    } finally {
      submitBtn.disabled = false;
    }
  });
})();
</script>
{% endblock %}