{% extends 'base.html' %}

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

  <!-- Page Header -->
  <div class="row mb-4">
    <div class="col">
      <h1 class="h2 fw-bold"><i class="fa-solid fa-spell-check me-2 text-primary"></i>Grammar Checker</h1>
      <p class="text-muted">Check your text for grammar, punctuation, and spelling errors with contextual suggestions.</p>
    </div>
  </div>

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

          <div class="mb-3">
            <label for="inputText" class="form-label fw-semibold">Text to Check <span class="text-danger">*</span></label>
            <textarea id="inputText" class="form-control" rows="10"
                      placeholder="Paste or type your text here to check for grammar errors…" required></textarea>
            <div class="d-flex justify-content-between mt-1">
              <small class="form-text text-muted">Supports up to ~5,000 words.</small>
              <small id="wordCount" class="text-muted">0 words</small>
            </div>
          </div>

          <div class="mb-3">
            <label for="language" class="form-label fw-semibold">Language</label>
            <select id="language" class="form-select">
              <option value="en-US" selected>English (US)</option>
              <option value="en-GB">English (UK)</option>
            </select>
          </div>

          <div class="mb-4">
            <label class="form-label fw-semibold">Check Level</label>
            <div class="d-flex gap-3">
              <div class="form-check">
                <input class="form-check-input" type="radio" name="checkLevel" id="levelBasic" value="basic">
                <label class="form-check-label" for="levelBasic">Basic</label>
              </div>
              <div class="form-check">
                <input class="form-check-input" type="radio" name="checkLevel" id="levelStandard" value="standard" checked>
                <label class="form-check-label" for="levelStandard">Standard</label>
              </div>
            </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-spell-check me-2"></i>Check Grammar
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- Results -->
    <div class="col-lg-7">
      <!-- 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">Checking grammar…</p>
          <p class="text-muted small">Analyzing your text for errors.</p>
        </div>
      </div>

      <!-- Results -->
      <div id="resultsSection" class="d-none">
        <!-- Error Count -->
        <div class="d-flex align-items-center gap-3 mb-4">
          <span class="badge bg-danger fs-5 px-3 py-2" id="errorCountBadge">0 Errors</span>
          <span class="text-muted small" id="errSummary"></span>
        </div>

        <!-- Annotated Text -->
        <div class="card shadow-sm border-0 mb-4">
          <div class="card-header fw-semibold">
            <i class="fa-solid fa-highlighter me-2"></i>Annotated Text
            <small class="text-muted ms-2"><span class="text-decoration-underline text-danger">Red underline</span> = error</small>
          </div>
          <div class="card-body p-3">
            <div id="annotatedText" class="p-2 border rounded bg-light small lh-lg"
                 style="min-height:100px;max-height:250px;overflow-y:auto;white-space:pre-wrap;word-break:break-word;"></div>
          </div>
        </div>

        <!-- Suggestions Table -->
        <div class="card shadow-sm border-0 mb-4">
          <div class="card-header fw-semibold">
            <i class="fa-solid fa-list-check me-2"></i>Suggestions
          </div>
          <div class="card-body p-0">
            <div class="table-responsive" style="max-height:250px;overflow-y:auto;">
              <table class="table table-sm table-hover mb-0">
                <thead class="table-light sticky-top">
                  <tr>
                    <th>Error</th>
                    <th>Suggestion</th>
                    <th>Explanation</th>
                  </tr>
                </thead>
                <tbody id="suggestionsBody"></tbody>
              </table>
            </div>
          </div>
        </div>

        <!-- Corrected Version -->
        <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-circle-check text-success me-2"></i>Corrected Version</span>
            <button id="copyCorrectedBtn" class="btn btn-sm btn-outline-secondary">
              <i class="fa-solid fa-copy me-1"></i>Copy
            </button>
          </div>
          <div class="card-body p-3">
            <textarea id="correctedText" class="form-control small" rows="6" readonly></textarea>
          </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-spell-check fa-3x mb-3 opacity-25"></i>
          <p class="mb-0">Grammar check results will appear here after analysis.</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 inputText      = document.getElementById('inputText');
  const wordCountEl    = document.getElementById('wordCount');

  inputText.addEventListener('input', () => {
    const words = inputText.value.trim().split(/\s+/).filter(Boolean).length;
    wordCountEl.textContent = words + ' words';
  });

  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 buildAnnotated(text, errors) {
    if (!errors || errors.length === 0) return escHtml(text);
    // Sort errors by offset descending to inject HTML without shifting positions
    const sorted = [...errors].sort((a, b) => (b.offset || 0) - (a.offset || 0));
    let result = text;
    sorted.forEach(err => {
      const start  = err.offset || 0;
      const length = err.length || (err.error || '').length || 1;
      const before = result.substring(0, start);
      const match  = result.substring(start, start + length);
      const after  = result.substring(start + length);
      result = before +
        `<span class="text-danger fw-semibold" style="text-decoration:underline wavy red;text-underline-offset:3px;" title="${escHtml(err.message || 'Error')}">${escHtml(match)}</span>` +
        after;
    });
    // The text has mixed HTML so return as-is (we built it safely above)
    return result;
  }

  document.getElementById('copyCorrectedBtn').addEventListener('click', () => {
    const ta = document.getElementById('correctedText');
    ta.select();
    navigator.clipboard.writeText(ta.value).then(() => {
      const btn = document.getElementById('copyCorrectedBtn');
      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);
    });
  });

  submitBtn.addEventListener('click', async () => {
    const text       = inputText.value.trim();
    const language   = document.getElementById('language').value;
    const checkLevel = document.querySelector('input[name="checkLevel"]:checked').value;

    if (!text) { showError('Please enter some text to check.'); 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/grammar-checker/check', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ text, language, check_level: checkLevel })
      });

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

      const errors = data.errors || [];
      const count  = errors.length;

      const badge = document.getElementById('errorCountBadge');
      badge.textContent = count + ' Error' + (count !== 1 ? 's' : '');
      badge.className   = `badge fs-5 px-3 py-2 ${count === 0 ? 'bg-success' : 'bg-danger'}`;
      document.getElementById('errSummary').textContent = count === 0
        ? 'No errors found — great writing!'
        : `Found ${count} issue${count !== 1 ? 's' : ''} in your text.`;

      // Annotated text
      const annotatedDiv = document.getElementById('annotatedText');
      annotatedDiv.innerHTML = buildAnnotated(text, errors);

      // Suggestions table
      const tbody = document.getElementById('suggestionsBody');
      tbody.innerHTML = '';
      if (errors.length === 0) {
        tbody.innerHTML = '<tr><td colspan="3" class="text-center text-muted py-3">No errors found!</td></tr>';
      } else {
        errors.forEach(err => {
          const tr = document.createElement('tr');
          tr.innerHTML = `
            <td class="small text-danger fw-semibold">${escHtml(err.error || '—')}</td>
            <td class="small text-success fw-semibold">${escHtml(err.suggestion || '—')}</td>
            <td class="small text-muted">${escHtml(err.message || err.explanation || '—')}</td>`;
          tbody.appendChild(tr);
        });
      }

      // Corrected version
      document.getElementById('correctedText').value = data.corrected_text || text;

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