{% extends 'base.html' %}

{% block title %}SEO Score 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">SEO Score Checker</li>
    </ol>
  </nav>

  <!-- Page Header -->
  <div class="row mb-4">
    <div class="col">
      <h1 class="h2 fw-bold"><i class="fa-solid fa-chart-bar me-2 text-primary"></i>SEO Score Checker</h1>
      <p class="text-muted">Analyze a single page or audit your entire site for SEO health, issues, and opportunities.</p>
    </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">
          <!-- Mode Toggle -->
          <h5 class="fw-semibold mb-3">Analysis Mode</h5>
          <div class="btn-group w-100 mb-4" role="group" aria-label="Analysis mode">
            <input type="radio" class="btn-check" name="analysisMode" id="modeSingle" value="single" checked autocomplete="off">
            <label class="btn btn-outline-primary" for="modeSingle">
              <i class="fa-solid fa-file me-2"></i>Single Page
            </label>
            <input type="radio" class="btn-check" name="analysisMode" id="modeAudit" value="audit" autocomplete="off">
            <label class="btn btn-outline-primary" for="modeAudit">
              <i class="fa-solid fa-magnifying-glass-chart me-2"></i>Site Audit
            </label>
          </div>

          <div class="mb-3">
            <label for="pageUrl" class="form-label fw-semibold">URL <span class="text-danger">*</span></label>
            <input type="text" id="pageUrl" class="form-control"
                   placeholder="https://example.com/page" required>
          </div>

          <div class="mb-4 d-none" id="maxPagesWrap">
            <label for="maxPages" class="form-label fw-semibold">Max Pages to Audit</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>

          <!-- 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>Analyze
            </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">Analyzing...</span>
          </div>
          <p class="fw-semibold mb-0">Analyzing page…</p>
          <p class="text-muted small">Fetching and parsing your page.</p>
        </div>
      </div>

      <!-- Results -->
      <div id="resultsSection" class="d-none">
        <!-- Score Circle -->
        <div class="card shadow-sm border-0 mb-4">
          <div class="card-body text-center py-4">
            <div class="d-inline-flex align-items-center justify-content-center rounded-circle mb-3"
                 id="scoreCircle"
                 style="width:130px;height:130px;border:8px solid #dee2e6;">
              <div>
                <div class="display-5 fw-bold mb-0" id="scoreNum">—</div>
                <div class="small text-muted">/ 100</div>
              </div>
            </div>
            <h4 class="fw-bold mb-1" id="scoreGrade">—</h4>
            <p class="text-muted mb-0" id="scoreLabel">—</p>
          </div>
        </div>

        <!-- Details Table -->
        <div class="card shadow-sm border-0 mb-4">
          <div class="card-header fw-semibold"><i class="fa-solid fa-circle-info me-2"></i>Page Details</div>
          <div class="card-body p-0">
            <table class="table table-sm mb-0">
              <tbody id="detailsTableBody"></tbody>
            </table>
          </div>
        </div>

        <!-- Passed Checks -->
        <div class="card shadow-sm border-0 mb-4 border-start border-success border-3">
          <div class="card-header fw-semibold text-success">
            <i class="fa-solid fa-circle-check me-2"></i>Passed Checks <span id="passedCount" class="badge bg-success ms-1"></span>
          </div>
          <div class="card-body py-2 px-3">
            <ul id="passedList" class="list-unstyled mb-0"></ul>
          </div>
        </div>

        <!-- Issues -->
        <div class="card shadow-sm border-0 border-start border-danger border-3">
          <div class="card-header fw-semibold text-danger">
            <i class="fa-solid fa-circle-xmark me-2"></i>Issues Found <span id="issuesCount" class="badge bg-danger ms-1"></span>
          </div>
          <div class="card-body py-2 px-3">
            <ul id="issuesList" class="list-unstyled mb-0"></ul>
          </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-chart-bar fa-3x mb-3 opacity-25"></i>
          <p class="mb-0">SEO analysis results 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');

  // Mode toggle shows/hides max pages
  document.querySelectorAll('input[name="analysisMode"]').forEach(radio => {
    radio.addEventListener('change', () => {
      document.getElementById('maxPagesWrap').classList.toggle('d-none', radio.value === 'single');
    });
  });

  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 gradeInfo(score) {
    const s = parseInt(score) || 0;
    if (s >= 90) return { grade: 'A', label: 'Excellent SEO',   color: '#198754', border: '#198754' };
    if (s >= 75) return { grade: 'B', label: 'Good SEO',        color: '#0d6efd', border: '#0d6efd' };
    if (s >= 60) return { grade: 'C', label: 'Needs Work',      color: '#ffc107', border: '#ffc107' };
    if (s >= 40) return { grade: 'D', label: 'Poor SEO',        color: '#fd7e14', border: '#fd7e14' };
    return           { grade: 'F', label: 'Very Poor SEO',   color: '#dc3545', border: '#dc3545' };
  }

  submitBtn.addEventListener('click', async () => {
    const url      = document.getElementById('pageUrl').value.trim();
    const mode     = document.querySelector('input[name="analysisMode"]:checked').value;
    const maxPages = parseInt(document.getElementById('maxPages').value);

    if (!url) { showError('Please enter a URL.'); 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/seo-score/analyze', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ url, mode, max_pages: maxPages })
      });

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

      const score = parseInt(data.score) || 0;
      const info  = gradeInfo(score);

      const circle = document.getElementById('scoreCircle');
      circle.style.borderColor = info.border;
      circle.style.color       = info.color;
      document.getElementById('scoreNum').textContent   = score;
      document.getElementById('scoreGrade').textContent = 'Grade: ' + info.grade;
      document.getElementById('scoreGrade').style.color = info.color;
      document.getElementById('scoreLabel').textContent = info.label;

      // Details table
      const detailsBody = document.getElementById('detailsTableBody');
      detailsBody.innerHTML = '';
      const details = data.details || {};
      const detailRows = [
        ['Title Length',      details.title_length ?? '—',      'chars'],
        ['Meta Desc Length',  details.meta_desc_length ?? '—',  'chars'],
        ['H1 Count',          details.h1_count ?? '—',          ''],
        ['Image Count',       details.image_count ?? '—',       ''],
        ['Load Time',         details.load_time ?? '—',         'ms'],
        ['Word Count',        details.word_count ?? '—',        'words'],
      ];
      detailRows.forEach(([label, val, unit]) => {
        const tr = document.createElement('tr');
        tr.innerHTML = `<td class="text-muted">${escHtml(label)}</td><td class="fw-semibold">${escHtml(String(val))} <small class="text-muted">${unit}</small></td>`;
        detailsBody.appendChild(tr);
      });

      // Passed checks
      const passed = data.passed || [];
      document.getElementById('passedCount').textContent = passed.length;
      const passedList = document.getElementById('passedList');
      passedList.innerHTML = '';
      if (passed.length === 0) {
        passedList.innerHTML = '<li class="text-muted py-1">No passed checks.</li>';
      } else {
        passed.forEach(check => {
          const li = document.createElement('li');
          li.className = 'py-1 small';
          li.innerHTML = `<i class="fa-solid fa-circle-check text-success me-2"></i>${escHtml(check)}`;
          passedList.appendChild(li);
        });
      }

      // Issues
      const issues = data.issues || [];
      document.getElementById('issuesCount').textContent = issues.length;
      const issuesList = document.getElementById('issuesList');
      issuesList.innerHTML = '';
      if (issues.length === 0) {
        issuesList.innerHTML = '<li class="text-muted py-1">No issues found — great job!</li>';
      } else {
        issues.forEach(issue => {
          const li = document.createElement('li');
          li.className = 'py-1 small';
          const label = typeof issue === 'string' ? issue : issue.label;
          const desc  = typeof issue === 'object' && issue.description ? issue.description : '';
          li.innerHTML = `<i class="fa-solid fa-circle-xmark text-danger me-2"></i><strong>${escHtml(label)}</strong>${desc ? ' — ' + escHtml(desc) : ''}`;
          issuesList.appendChild(li);
        });
      }

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