{% extends 'base.html' %}

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

  <!-- Page Header -->
  <div class="row mb-4">
    <div class="col">
      <h1 class="h2 fw-bold"><i class="fa-solid fa-shield-halved me-2 text-primary"></i>Plagiarism Checker</h1>
      <p class="text-muted">Check your content for potential plagiarism with sentence-level uniqueness analysis.</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>Paste Your Article</h5>

          <div class="mb-3">
            <label for="articleText" class="form-label fw-semibold">Article Text <span class="text-danger">*</span></label>
            <textarea id="articleText" class="form-control" rows="12"
                      placeholder="Paste your article here (minimum 100 words for accurate results)…"></textarea>
            <div class="d-flex justify-content-between mt-1">
              <small class="form-text text-muted">Minimum 100 words recommended.</small>
              <small id="wordCount" class="text-muted">0 words</small>
            </div>
          </div>

          <div class="mb-4">
            <label for="sensitivity" class="form-label fw-semibold">
              Sentence Sensitivity: <span id="sensitivityVal" class="badge bg-primary">5</span> sentences
            </label>
            <input type="range" class="form-range" id="sensitivity" min="1" max="20" value="5">
            <div class="d-flex justify-content-between">
              <small class="text-muted">Fewer (faster)</small>
              <small class="text-muted">More (thorough)</small>
            </div>
            <div class="form-text">How many sentences to check against online sources.</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-shield-halved me-2"></i>Check Plagiarism
            </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-1">Checking for plagiarism…</p>
          <p id="progressMsg" class="text-muted small mb-0">Preparing analysis…</p>
        </div>
      </div>

      <!-- Results -->
      <div id="resultsSection" class="d-none">
        <!-- Score -->
        <div class="card shadow-sm border-0 mb-4">
          <div class="card-body p-4 text-center">
            <div class="mb-2">
              <span id="scoreCircle" class="display-3 fw-bold">—%</span>
            </div>
            <h5 id="scoreLabel" class="fw-semibold mb-1">Uniqueness Score</h5>
            <p id="scoreDesc" class="text-muted mb-0 small"></p>
          </div>
        </div>

        <!-- Sentence Breakdown -->
        <div class="card shadow-sm border-0">
          <div class="card-header fw-semibold">
            <i class="fa-solid fa-list me-2"></i>Sentence-by-Sentence Breakdown
            <small class="text-muted ms-2">
              <span class="text-success">Green = unique</span> ·
              <span class="text-warning">Yellow = similar</span> ·
              <span class="text-danger">Red = likely plagiarized</span>
            </small>
          </div>
          <div class="card-body p-0">
            <div class="table-responsive" style="max-height:400px;overflow-y:auto;">
              <table class="table table-sm mb-0">
                <thead class="table-light sticky-top">
                  <tr>
                    <th style="width:50%">Sentence</th>
                    <th class="text-center">Status</th>
                    <th>Source Hint</th>
                  </tr>
                </thead>
                <tbody id="sentenceTableBody"></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-shield-halved fa-3x mb-3 opacity-25"></i>
          <p class="mb-0">Plagiarism 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 articleText    = document.getElementById('articleText');
  const wordCountEl    = document.getElementById('wordCount');
  const sensitivityEl  = document.getElementById('sensitivity');
  const sensitivityVal = document.getElementById('sensitivityVal');
  const progressMsg    = document.getElementById('progressMsg');

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

  sensitivityEl.addEventListener('input', () => {
    sensitivityVal.textContent = sensitivityEl.value;
  });

  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) {
    const s = (status || '').toLowerCase();
    if (s === 'unique')             return '<span class="badge bg-success">Unique</span>';
    if (s === 'similar')            return '<span class="badge bg-warning text-dark">Similar</span>';
    if (s === 'plagiarized' || s === 'likely plagiarized') return '<span class="badge bg-danger">Likely Plagiarized</span>';
    return `<span class="badge bg-secondary">${escHtml(status)}</span>`;
  }

  function rowClass(status) {
    const s = (status || '').toLowerCase();
    if (s === 'unique')   return 'table-success';
    if (s === 'similar')  return 'table-warning';
    if (s.includes('plagiarized')) return 'table-danger';
    return '';
  }

  submitBtn.addEventListener('click', async () => {
    const text = articleText.value.trim();
    const sensitivity = parseInt(sensitivityEl.value);

    if (!text) { showError('Please paste some text to check.'); return; }
    const wordCount = text.split(/\s+/).filter(Boolean).length;
    if (wordCount < 10) { showError('Please enter at least 10 words for meaningful results.'); return; }

    errorAlert.classList.add('d-none');
    loadingCard.classList.remove('d-none');
    resultsSection.classList.add('d-none');
    placeholder.classList.add('d-none');
    submitBtn.disabled = true;
    progressMsg.textContent = 'Preparing analysis…';

    // Simulate progress messages
    let checkCount = 0;
    const progressInterval = setInterval(() => {
      checkCount++;
      if (checkCount <= sensitivity) {
        progressMsg.textContent = `Checking sentence ${checkCount} of ${sensitivity}…`;
      }
    }, 800);

    try {
      const resp = await fetch('/tools/webtools/plagiarism/check', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ text, sensitivity })
      });

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

      const score = parseInt(data.uniqueness_score) || 0;
      const scoreEl = document.getElementById('scoreCircle');
      scoreEl.textContent = score + '%';
      scoreEl.className = 'display-3 fw-bold ' + (score >= 70 ? 'text-success' : score >= 40 ? 'text-warning' : 'text-danger');
      document.getElementById('scoreLabel').textContent = score >= 70 ? 'Highly Unique' : score >= 40 ? 'Partially Unique' : 'Low Uniqueness';
      document.getElementById('scoreDesc').textContent = data.description || '';

      const tbody = document.getElementById('sentenceTableBody');
      tbody.innerHTML = '';
      const sentences = data.sentences || [];
      if (sentences.length === 0) {
        tbody.innerHTML = '<tr><td colspan="3" class="text-center text-muted py-3">No sentence data available.</td></tr>';
      } else {
        sentences.forEach(s => {
          const tr = document.createElement('tr');
          tr.className = rowClass(s.status);
          tr.innerHTML = `
            <td class="small">${escHtml(s.sentence)}</td>
            <td class="text-center">${statusBadge(s.status)}</td>
            <td class="small text-muted">${escHtml(s.source_hint || '—')}</td>`;
          tbody.appendChild(tr);
        });
      }

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