{% extends 'base.html' %}

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

  <!-- Page Header -->
  <div class="row mb-4">
    <div class="col">
      <h1 class="h2 fw-bold"><i class="fa-solid fa-link-slash me-2 text-danger"></i>Broken Links Checker</h1>
      <p class="text-muted">Scan any webpage for broken links (404s) and report their status codes and link types.</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">
          <h5 class="fw-semibold mb-4"><i class="fa-solid fa-sliders me-2 text-primary"></i>Check Options</h5>

          <div class="mb-3">
            <label for="pageUrl" class="form-label fw-semibold">Page URL <span class="text-danger">*</span></label>
            <input type="text" id="pageUrl" class="form-control"
                   placeholder="https://example.com/page" required>
            <div class="form-text">The tool will scan all links found on this page.</div>
          </div>

          <div class="mb-3">
            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="includeExternal" checked>
              <label class="form-check-label" for="includeExternal">
                Include external links
              </label>
            </div>
          </div>

          <div class="mb-4">
            <label for="timeout" class="form-label fw-semibold">Timeout per Link</label>
            <select id="timeout" class="form-select">
              <option value="5" selected>5 seconds</option>
              <option value="10">10 seconds</option>
              <option value="15">15 seconds</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-danger btn-lg">
              <i class="fa-solid fa-magnifying-glass me-2"></i>Check Links
            </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-danger mb-3" style="width:3rem;height:3rem;" role="status">
            <span class="visually-hidden">Checking links...</span>
          </div>
          <p class="fw-semibold mb-0">Checking links…</p>
          <p class="text-muted small">This may take a while depending on the number of links.</p>
        </div>
      </div>

      <!-- Results -->
      <div id="resultsSection" class="d-none">
        <!-- Summary -->
        <div class="row g-3 mb-4">
          <div class="col-4 text-center">
            <div class="card border-0 bg-light p-3">
              <div class="h4 fw-bold text-primary mb-0" id="totalCount">—</div>
              <small class="text-muted">Total Links</small>
            </div>
          </div>
          <div class="col-4 text-center">
            <div class="card border-0 bg-light p-3">
              <div class="h4 fw-bold text-success mb-0" id="workingCount">—</div>
              <small class="text-muted">Working</small>
            </div>
          </div>
          <div class="col-4 text-center">
            <div class="card border-0 bg-light p-3">
              <div class="h4 fw-bold text-danger mb-0" id="brokenCount">—</div>
              <small class="text-muted">Broken</small>
            </div>
          </div>
        </div>

        <!-- Table -->
        <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-table me-2"></i>Link Report</span>
            <button id="exportBrokenBtn" class="btn btn-sm btn-outline-danger">
              <i class="fa-solid fa-download me-1"></i>Export Broken Links
            </button>
          </div>
          <div class="card-body p-0">
            <div class="table-responsive" style="max-height:450px;overflow-y:auto;">
              <table class="table table-hover table-sm mb-0 align-middle">
                <thead class="table-dark sticky-top">
                  <tr>
                    <th style="min-width:200px;">URL</th>
                    <th class="text-center">Status Code</th>
                    <th class="text-center">Type</th>
                    <th class="text-center">Status</th>
                  </tr>
                </thead>
                <tbody id="linksTableBody"></tbody>
              </table>
            </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-link-slash fa-3x mb-3 opacity-25"></i>
          <p class="mb-0">Link check results will appear here after scanning.</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');
  const exportBtn      = document.getElementById('exportBrokenBtn');

  let allLinks = [];

  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 statusBadge(status, code) {
    const s = (status || '').toLowerCase();
    if (s === 'ok' || s === 'working') {
      return `<span class="badge bg-success">OK</span>`;
    }
    if (s === 'broken' || s.includes('broken') || s.includes('error')) {
      return `<span class="badge bg-danger">Broken</span>`;
    }
    return `<span class="badge bg-warning text-dark">${escHtml(status)}</span>`;
  }

  function codeBadge(code) {
    const c = parseInt(code) || 0;
    if (c >= 200 && c < 300) return `<span class="badge bg-success">${c}</span>`;
    if (c >= 300 && c < 400) return `<span class="badge bg-info">${c}</span>`;
    if (c >= 400)             return `<span class="badge bg-danger">${c}</span>`;
    return `<span class="badge bg-secondary">${code || '—'}</span>`;
  }

  submitBtn.addEventListener('click', async () => {
    const url             = document.getElementById('pageUrl').value.trim();
    const includeExternal = document.getElementById('includeExternal').checked;
    const timeout         = parseInt(document.getElementById('timeout').value);

    if (!url) { showError('Please enter a page 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/broken-links/check', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ url, include_external: includeExternal, timeout })
      });

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

      allLinks = data.links || [];
      const total   = allLinks.length;
      const broken  = allLinks.filter(l => (l.status || '').toLowerCase().includes('broken') || parseInt(l.status_code) >= 400).length;
      const working = total - broken;

      document.getElementById('totalCount').textContent   = total;
      document.getElementById('workingCount').textContent = working;
      document.getElementById('brokenCount').textContent  = broken;

      const tbody = document.getElementById('linksTableBody');
      tbody.innerHTML = '';

      if (allLinks.length === 0) {
        tbody.innerHTML = '<tr><td colspan="4" class="text-center text-muted py-4">No links found on this page.</td></tr>';
      } else {
        allLinks.forEach(link => {
          const isBroken = (link.status || '').toLowerCase().includes('broken') || parseInt(link.status_code) >= 400;
          const tr = document.createElement('tr');
          if (isBroken) tr.className = 'table-danger';
          tr.innerHTML = `
            <td class="small text-break" style="max-width:220px;">
              <a href="${escHtml(link.url || '#')}" target="_blank" rel="noopener" class="text-decoration-none">${escHtml(link.url || '—')}</a>
            </td>
            <td class="text-center">${codeBadge(link.status_code)}</td>
            <td class="text-center"><span class="badge bg-${link.type === 'external' ? 'info' : 'secondary'}">${escHtml(link.type || 'internal')}</span></td>
            <td class="text-center">${statusBadge(link.status, link.status_code)}</td>`;
          tbody.appendChild(tr);
        });
      }

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

  exportBtn.addEventListener('click', () => {
    const broken = allLinks.filter(l => (l.status || '').toLowerCase().includes('broken') || parseInt(l.status_code) >= 400);
    if (!broken.length) { alert('No broken links to export.'); return; }
    const rows = [['URL', 'Status Code', 'Type', 'Status']];
    broken.forEach(l => rows.push([l.url || '', l.status_code || '', l.type || '', l.status || '']));
    const csv  = rows.map(r => r.map(c => `"${String(c).replace(/"/g,'""')}"`).join(',')).join('\n');
    const blob = new Blob([csv], { type: 'text/csv' });
    const url  = URL.createObjectURL(blob);
    const a    = document.createElement('a');
    a.href = url; a.download = 'broken-links.csv'; a.click();
    URL.revokeObjectURL(url);
  });
})();
</script>
{% endblock %}