{% extends 'base.html' %}

{% block title %}Domain Authority Checker — 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">Domain Authority Checker</li>
    </ol>
  </nav>

  <!-- Page Header -->
  <div class="row mb-4">
    <div class="col">
      <h1 class="h2 fw-bold"><i class="fa-solid fa-globe me-2 text-primary"></i>Domain Authority Checker</h1>
      <p class="text-muted">Check the estimated authority score, domain age, and DNS information for any domain.</p>
    </div>
  </div>

  <!-- Disclaimer & Rate Limit -->
  <div class="row g-3 mb-4">
    <div class="col-md-6">
      <div class="alert alert-info d-flex align-items-start mb-0" role="alert">
        <i class="fa-solid fa-circle-info me-3 mt-1 fs-5"></i>
        <div><strong>Disclaimer:</strong> This is an <em>estimated</em> score based on publicly available data such as domain age, DNS records, and backlink signals. It is not the official Moz Domain Authority metric.</div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="alert alert-warning d-flex align-items-start mb-0" role="alert">
        <i class="fa-solid fa-gauge-high me-3 mt-1 fs-5"></i>
        <div><strong>Rate Limit:</strong> This tool is limited to a certain number of checks per hour per IP address to prevent abuse.</div>
      </div>
    </div>
  </div>

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

          <div class="mb-4">
            <label for="domain" class="form-label fw-semibold">Domain / URL <span class="text-danger">*</span></label>
            <input type="text" id="domain" class="form-control form-control-lg"
                   placeholder="example.com" required>
            <div class="form-text">Enter a domain name (with or without https://).</div>
          </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-magnifying-glass me-2"></i>Check Domain
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- Results -->
    <div class="col-lg-8">
      <!-- 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">Checking...</span>
          </div>
          <p class="fw-semibold mb-0">Looking up domain data…</p>
          <p class="text-muted small">Checking DNS, WHOIS, and backlink signals.</p>
        </div>
      </div>

      <!-- Results -->
      <div id="resultsSection" class="d-none">
        <!-- Authority Score -->
        <div class="card shadow-sm border-0 mb-4">
          <div class="card-body">
            <div class="row align-items-center">
              <div class="col-auto">
                <div class="d-flex align-items-center justify-content-center rounded-circle border"
                     id="scoreCircle"
                     style="width:110px;height:110px;border-width:8px!important;">
                  <div class="text-center">
                    <div class="h3 fw-bold mb-0" id="scoreNum">—</div>
                    <small class="text-muted">/ 100</small>
                  </div>
                </div>
              </div>
              <div class="col">
                <h4 class="fw-bold mb-1" id="scoreLabel">—</h4>
                <p class="text-muted mb-2" id="scoreDesc"></p>
                <div class="progress" style="height:10px;">
                  <div id="scoreBar" class="progress-bar" role="progressbar" style="width:0%;"></div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Info Cards -->
        <div class="row g-3 mb-4">
          <div class="col-sm-6">
            <div class="card border-0 bg-light h-100">
              <div class="card-body p-3">
                <h6 class="fw-semibold text-muted mb-2"><i class="fa-solid fa-calendar me-2"></i>Domain Age</h6>
                <p class="h5 fw-bold mb-1" id="domainAge">—</p>
                <small class="text-muted" id="domainCreated"></small>
              </div>
            </div>
          </div>
          <div class="col-sm-6">
            <div class="card border-0 bg-light h-100">
              <div class="card-body p-3">
                <h6 class="fw-semibold text-muted mb-2"><i class="fa-solid fa-server me-2"></i>DNS / Hosting</h6>
                <p class="fw-semibold mb-1" id="dnsInfo">—</p>
                <small class="text-muted" id="ipAddress"></small>
              </div>
            </div>
          </div>
        </div>

        <!-- Score Breakdown -->
        <div class="card shadow-sm border-0">
          <div class="card-header fw-semibold"><i class="fa-solid fa-chart-pie me-2"></i>Estimated Score Breakdown</div>
          <div class="card-body p-3">
            <div id="breakdownList"></div>
          </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-globe fa-3x mb-3 opacity-25"></i>
          <p class="mb-0">Domain authority data will appear here after checking.</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');

  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 escHtml(str) {
    return String(str).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
  }

  function scoreStyle(score) {
    const s = parseInt(score) || 0;
    if (s >= 70) return { color: '#198754', label: 'High Authority',   barClass: 'bg-success' };
    if (s >= 40) return { color: '#ffc107', label: 'Medium Authority', barClass: 'bg-warning' };
    return           { color: '#dc3545', label: 'Low Authority',    barClass: 'bg-danger' };
  }

  submitBtn.addEventListener('click', async () => {
    const domain = document.getElementById('domain').value.trim();
    if (!domain) { showError('Please enter a domain name.'); return; }

    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/domain-authority/check', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ domain })
      });

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

      const score = parseInt(data.authority_score) || 0;
      const style = scoreStyle(score);

      const circle = document.getElementById('scoreCircle');
      circle.style.borderColor = style.color;
      circle.style.color       = style.color;
      document.getElementById('scoreNum').textContent   = score;
      document.getElementById('scoreLabel').textContent = style.label;
      document.getElementById('scoreDesc').textContent  = data.score_description || '';
      const bar = document.getElementById('scoreBar');
      bar.className = `progress-bar ${style.barClass}`;
      bar.style.width = score + '%';

      document.getElementById('domainAge').textContent     = data.domain_age || '—';
      document.getElementById('domainCreated').textContent = data.created_date ? 'Created: ' + data.created_date : '';
      document.getElementById('dnsInfo').textContent        = data.nameservers || '—';
      document.getElementById('ipAddress').textContent      = data.ip_address ? 'IP: ' + data.ip_address : '';

      const breakdownList = document.getElementById('breakdownList');
      breakdownList.innerHTML = '';
      const breakdown = data.breakdown || [];
      if (breakdown.length === 0) {
        breakdownList.innerHTML = '<p class="text-muted mb-0 small">No breakdown data available.</p>';
      } else {
        breakdown.forEach(item => {
          const label = escHtml(item.factor || '—');
          const val   = parseInt(item.score) || 0;
          const max   = parseInt(item.max)   || 100;
          const pct   = Math.round((val / max) * 100);
          breakdownList.innerHTML += `
            <div class="mb-2">
              <div class="d-flex justify-content-between small mb-1">
                <span>${label}</span>
                <span class="fw-semibold">${val} / ${max}</span>
              </div>
              <div class="progress" style="height:6px;">
                <div class="progress-bar bg-primary" style="width:${pct}%"></div>
              </div>
            </div>`;
        });
      }

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