@extends('layouts.app')
@section('title', '編輯紀錄 — ' . $doc->title)

@section('content')
@include('projects._nav')
@php $label = '文件'; @endphp

<div class="container-fluid px-4 py-4">
  <div class="row justify-content-center">
    <div class="col-lg-10">

      <div class="d-flex align-items-center justify-content-between mb-3">
        <div>
          <h5 class="fw-bold mb-0"><i class="bi bi-clock-history me-2"></i>編輯紀錄</h5>
          <small class="text-muted">{{ $doc->title }}</small>
        </div>
        <a href="{{ route("{$routePrefix}.show", [$project, $doc]) }}" class="btn btn-outline-secondary btn-sm">
          <i class="bi bi-arrow-left me-1"></i>返回{{ $label }}
        </a>
      </div>

      @if ($logs->isEmpty())
        <div class="text-center text-muted py-5">
          <i class="bi bi-inbox fs-3 d-block mb-2"></i>尚無編輯紀錄
        </div>
      @else
        <div class="card shadow-sm">
          <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
              <thead class="table-light">
                <tr>
                  <th style="width:160px">時間</th>
                  <th style="width:120px">操作人</th>
                  <th style="width:80px">動作</th>
                  <th>文件標題</th>
                  <th style="width:80px">詳情</th>
                </tr>
              </thead>
              <tbody>
                @foreach ($logs as $log)
                <tr>
                  <td class="text-muted small">{{ $log->created_at->format('Y-m-d H:i') }}</td>
                  <td>{{ $log->user->name ?? '—' }}</td>
                  <td>
                    @if ($log->action === 'created')
                      <span class="badge bg-success">新增</span>
                    @elseif ($log->action === 'updated')
                      <span class="badge bg-primary">編輯</span>
                    @else
                      <span class="badge bg-danger">刪除</span>
                    @endif
                  </td>
                  <td>{{ $log->doc_title }}</td>
                  <td>
                    @if ($log->action === 'updated')
                      <button class="btn btn-outline-secondary btn-sm"
                        data-bs-toggle="modal"
                        data-bs-target="#diffModal"
                        data-before="{{ e($log->content_before) }}"
                        data-after="{{ e($log->content_after) }}"
                        data-time="{{ $log->created_at->format('Y-m-d H:i') }}"
                        data-user="{{ $log->user->name ?? '' }}">
                        <i class="bi bi-eye"></i>
                      </button>
                    @endif
                  </td>
                </tr>
                @endforeach
              </tbody>
            </table>
          </div>
          @if ($logs->hasPages())
            <div class="card-footer">{{ $logs->links() }}</div>
          @endif
        </div>
      @endif

    </div>
  </div>
</div>

{{-- Diff Modal --}}
<div class="modal fade" id="diffModal" tabindex="-1">
  <div class="modal-dialog modal-xl modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header py-2">
        <h5 class="modal-title fs-6"><i class="bi bi-file-diff me-2"></i>內容差異</h5>
        <div class="d-flex align-items-center gap-3 me-3 small">
          <span><span class="legend-del"></span> 刪除</span>
          <span><span class="legend-add"></span> 新增</span>
          <span><span class="legend-chg-del"></span><span class="legend-chg-add"></span> 修改</span>
        </div>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body p-0">
        <div id="diffUnified" class="diff-unified"></div>
      </div>
      <div class="modal-footer py-2">
        <small class="text-muted me-auto" id="diffMeta"></small>
        <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">關閉</button>
      </div>
    </div>
  </div>
</div>

<style>
/* legend */
.legend-del, .legend-add, .legend-chg-del, .legend-chg-add {
  display:inline-block; width:12px; height:12px; border-radius:2px; vertical-align:middle;
}
.legend-del     { background:#ffeef0; border:1px solid #ffd7dc; }
.legend-add     { background:#e6ffed; border:1px solid #ccffd8; }
.legend-chg-del { background:#fff5b1; border:1px solid #ffe07a; border-radius:2px 0 0 2px; }
.legend-chg-add { background:#dbedff; border:1px solid #b0d4ff; border-radius:0 2px 2px 0; }

/* unified diff panel */
.diff-unified {
  font-family: 'Menlo','Consolas',monospace;
  font-size: .8rem;
  line-height: 1.65;
  max-height: 68vh;
  overflow-y: auto;
}
.diff-row {
  display: flex;
  align-items: baseline;
  padding: .05rem .5rem;
  word-break: break-word;
}
.diff-row:hover { filter: brightness(.97); }
.diff-gutter {
  flex-shrink: 0;
  width: 1.4rem;
  text-align: center;
  font-size: .75rem;
  padding-right: .3rem;
  user-select: none;
  color: #888;
}
.diff-num {
  flex-shrink: 0;
  width: 2.6rem;
  text-align: right;
  padding-right: .5rem;
  font-size: .72rem;
  color: #aaa;
  user-select: none;
}
.diff-text { flex: 1; white-space: pre-wrap; }

/* row types */
.diff-row-del  { background: #ffeef0; }
.diff-row-del .diff-gutter { color: #b31d28; }
.diff-row-del .diff-num    { background: #ffd7dc; color: #b31d28; }
.diff-row-del .diff-text   { color: #b31d28; }

.diff-row-add  { background: #e6ffed; }
.diff-row-add .diff-gutter { color: #22863a; }
.diff-row-add .diff-num    { background: #ccffd8; color: #22863a; }
.diff-row-add .diff-text   { color: #22863a; }

.diff-row-ctx { background: #fff; }
.diff-row-ctx .diff-num { background: #f6f8fa; }

/* inline word highlights (modified lines) */
.diff-row-mod-del { background: #fff5b1; }
.diff-row-mod-del .diff-gutter { color: #735c0f; }
.diff-row-mod-del .diff-num    { background: #ffe07a; color: #735c0f; }
.diff-row-mod-del .diff-text   { color: #533810; }
.w-del { background: #f97583; border-radius: 2px; padding: 0 1px; }

.diff-row-mod-add { background: #dbedff; }
.diff-row-mod-add .diff-gutter { color: #0366d6; }
.diff-row-mod-add .diff-num    { background: #b0d4ff; color: #0366d6; }
.diff-row-mod-add .diff-text   { color: #032f62; }
.w-add { background: #79b8ff; border-radius: 2px; padding: 0 1px; }

/* separator between hunks */
.diff-hunk-sep {
  background: #f1f8ff;
  color: #586069;
  padding: .15rem .75rem;
  font-size: .72rem;
  border-top: 1px solid #dfe2e5;
  border-bottom: 1px solid #dfe2e5;
}
</style>
@endsection

@push('scripts')
<script>
// ── helpers ──────────────────────────────────────────────────────────────────

function htmlToLines(html) {
  return html
    .replace(/<\/(p|div|li|h[1-6]|tr|td|th|blockquote|pre)>/gi, '\n')
    .replace(/<br\s*\/?>/gi, '\n')
    .replace(/<[^>]+>/g, '')
    .replace(/&nbsp;/g, ' ')
    .replace(/&amp;/g, '&')
    .replace(/&lt;/g, '<')
    .replace(/&gt;/g, '>')
    .replace(/&quot;/g, '"')
    .replace(/&#39;/g, "'")
    .split('\n')
    .map(l => l.trim())
    .filter(l => l.length > 0);
}

function esc(s) {
  return String(s)
    .replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
}

// LCS on arbitrary arrays
function lcsOps(a, b) {
  const m = a.length, n = b.length;
  // cap to avoid quadratic blowup
  if (m * n > 500000) return a.map(v=>({t:'del',v})).concat(b.map(v=>({t:'ins',v})));
  const dp = Array.from({length: m+1}, () => new Uint32Array(n+1));
  for (let i=1;i<=m;i++)
    for (let j=1;j<=n;j++)
      dp[i][j] = a[i-1]===b[j-1] ? dp[i-1][j-1]+1 : Math.max(dp[i-1][j],dp[i][j-1]);
  const ops = [];
  let i=m, j=n;
  while (i>0||j>0) {
    if (i>0&&j>0&&a[i-1]===b[j-1]) { ops.push({t:'eq',v:a[i-1]}); i--;j--; }
    else if (j>0&&(i===0||dp[i][j-1]>=dp[i-1][j])) { ops.push({t:'ins',v:b[j-1]}); j--; }
    else { ops.push({t:'del',v:a[i-1]}); i--; }
  }
  return ops.reverse();
}

// word-level inline diff → returns [beforeHTML, afterHTML]
function wordDiff(lineA, lineB) {
  const tokA = lineA.match(/\S+|\s+/g) || [];
  const tokB = lineB.match(/\S+|\s+/g) || [];
  const ops  = lcsOps(tokA, tokB);
  let bHtml = '', aHtml = '';
  for (const op of ops) {
    const v = esc(op.v);
    if      (op.t==='eq')  { bHtml += v; aHtml += v; }
    else if (op.t==='del') { bHtml += `<span class="w-del">${v}</span>`; }
    else                   { aHtml += `<span class="w-add">${v}</span>`; }
  }
  return [bHtml, aHtml];
}

// ── main render ───────────────────────────────────────────────────────────────

const CONTEXT = 3; // lines of context around each hunk

function renderDiff(beforeHtml, afterHtml) {
  const a = htmlToLines(beforeHtml);
  const b = htmlToLines(afterHtml);
  const ops = lcsOps(a, b);

  // expand ops into flat diff rows: {type, lnum, rnum, text, pairIdx?}
  const rows = [];
  let ln = 1, rn = 1, pairIdx = 0;

  for (let k = 0; k < ops.length; k++) {
    const op = ops[k];
    // detect adjacent del+ins pair (modified line)
    if (op.t === 'del' && k+1 < ops.length && ops[k+1].t === 'ins') {
      const pi = pairIdx++;
      rows.push({type:'mod-del', lnum:ln++, rnum:null, text:op.v,         pair:pi, other:ops[k+1].v});
      rows.push({type:'mod-add', lnum:null, rnum:rn++, text:ops[k+1].v,   pair:pi, other:op.v});
      k++; // skip ins
    } else if (op.t === 'del') {
      rows.push({type:'del', lnum:ln++, rnum:null, text:op.v});
    } else if (op.t === 'ins') {
      rows.push({type:'add', lnum:null, rnum:rn++, text:op.v});
    } else {
      rows.push({type:'ctx', lnum:ln++, rnum:rn++, text:op.v});
    }
  }

  // find which ctx rows to show (within CONTEXT of any change)
  const changed = new Set(rows.map((r,i) => r.type!=='ctx' ? i : -1).filter(i=>i>=0));
  const visible = new Set();
  for (const ci of changed) {
    for (let d=-CONTEXT; d<=CONTEXT; d++) {
      const idx = ci+d;
      if (idx>=0 && idx<rows.length) visible.add(idx);
    }
  }

  // if nothing changed
  if (changed.size === 0) {
    document.getElementById('diffUnified').innerHTML =
      '<div class="p-4 text-center text-muted small">內容無差異</div>';
    return;
  }

  // pre-compute word diffs for mod pairs
  const wdCache = {};
  for (const r of rows) {
    if (r.type === 'mod-del' && !(r.pair in wdCache)) {
      wdCache[r.pair] = wordDiff(r.text, r.other);
    }
  }

  // build HTML
  const parts = [];
  let prevVisible = true;

  for (let i = 0; i < rows.length; i++) {
    const r = rows[i];
    const show = visible.has(i);

    if (!show) { prevVisible = false; continue; }
    if (!prevVisible && i > 0) {
      parts.push(`<div class="diff-hunk-sep">⋯⋯</div>`);
    }
    prevVisible = true;

    const lnStr  = r.lnum != null ? r.lnum : '';
    const rnStr  = r.rnum != null ? r.rnum : '';

    if (r.type === 'ctx') {
      parts.push(`<div class="diff-row diff-row-ctx">
        <span class="diff-num">${lnStr}</span>
        <span class="diff-num">${rnStr}</span>
        <span class="diff-gutter"> </span>
        <span class="diff-text">${esc(r.text)}</span>
      </div>`);
    } else if (r.type === 'del') {
      parts.push(`<div class="diff-row diff-row-del">
        <span class="diff-num">${lnStr}</span>
        <span class="diff-num"></span>
        <span class="diff-gutter">−</span>
        <span class="diff-text">${esc(r.text)}</span>
      </div>`);
    } else if (r.type === 'add') {
      parts.push(`<div class="diff-row diff-row-add">
        <span class="diff-num"></span>
        <span class="diff-num">${rnStr}</span>
        <span class="diff-gutter">+</span>
        <span class="diff-text">${esc(r.text)}</span>
      </div>`);
    } else if (r.type === 'mod-del') {
      const [bHtml] = wdCache[r.pair];
      parts.push(`<div class="diff-row diff-row-mod-del">
        <span class="diff-num">${lnStr}</span>
        <span class="diff-num"></span>
        <span class="diff-gutter">~</span>
        <span class="diff-text">${bHtml}</span>
      </div>`);
    } else if (r.type === 'mod-add') {
      const [, aHtml] = wdCache[r.pair];
      parts.push(`<div class="diff-row diff-row-mod-add">
        <span class="diff-num"></span>
        <span class="diff-num">${rnStr}</span>
        <span class="diff-gutter">~</span>
        <span class="diff-text">${aHtml}</span>
      </div>`);
    }
  }

  document.getElementById('diffUnified').innerHTML = parts.join('');
}

document.getElementById('diffModal').addEventListener('show.bs.modal', function (e) {
  const btn = e.relatedTarget;
  document.getElementById('diffUnified').innerHTML =
    '<div class="p-4 text-center text-muted small"><i class="bi bi-hourglass-split me-1"></i>計算差異中…</div>';
  document.getElementById('diffMeta').textContent = btn.dataset.user + '　' + btn.dataset.time;
  // defer so modal has time to paint
  setTimeout(() => renderDiff(btn.dataset.before, btn.dataset.after), 30);
});
</script>
@endpush