{% extends "base.html" %}
{% block title %}File Sync — ICDEV™{% endblock %}

{% block content %}
<div class="page-header">
    <h1>File Sync</h1>
    <p class="text-muted">File & folder synchronization — push/pull/bidirectional with SHA-256 change detection (D-SYNC-1 through D-SYNC-12)</p>
</div>

<!-- Stat Grid -->
<div class="stat-grid" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem;margin-bottom:2rem;">
    <div class="stat-card" style="background:var(--bg-secondary,#f8f9fa);padding:1rem;border-radius:8px;text-align:center;">
        <div class="stat-value" style="font-size:1.8rem;font-weight:700;" id="stat-total-jobs">{{ stats.total_jobs }}</div>
        <div class="stat-label" style="font-size:0.85rem;color:var(--text-muted,#6c757d);">Total Jobs</div>
    </div>
    <div class="stat-card" style="background:var(--bg-secondary,#f8f9fa);padding:1rem;border-radius:8px;text-align:center;">
        <div class="stat-value" style="font-size:1.8rem;font-weight:700;color:#28a745;" id="stat-active-jobs">{{ stats.active_jobs }}</div>
        <div class="stat-label" style="font-size:0.85rem;color:var(--text-muted,#6c757d);">Active</div>
    </div>
    <div class="stat-card" style="background:var(--bg-secondary,#f8f9fa);padding:1rem;border-radius:8px;text-align:center;">
        <div class="stat-value" style="font-size:1.8rem;font-weight:700;color:#17a2b8;" id="stat-watching">{{ stats.watching_jobs }}</div>
        <div class="stat-label" style="font-size:0.85rem;color:var(--text-muted,#6c757d);">Watching</div>
    </div>
    <div class="stat-card" style="background:var(--bg-secondary,#f8f9fa);padding:1rem;border-radius:8px;text-align:center;">
        <div class="stat-value" style="font-size:1.8rem;font-weight:700;color:#007bff;" id="stat-completed">{{ stats.completed_syncs }}</div>
        <div class="stat-label" style="font-size:0.85rem;color:var(--text-muted,#6c757d);">Completed</div>
    </div>
    <div class="stat-card" style="background:var(--bg-secondary,#f8f9fa);padding:1rem;border-radius:8px;text-align:center;">
        <div class="stat-value" style="font-size:1.8rem;font-weight:700;color:#dc3545;" id="stat-failed">{{ stats.failed_syncs }}</div>
        <div class="stat-label" style="font-size:0.85rem;color:var(--text-muted,#6c757d);">Failed</div>
    </div>
    <div class="stat-card" style="background:var(--bg-secondary,#f8f9fa);padding:1rem;border-radius:8px;text-align:center;">
        <div class="stat-value" style="font-size:1.8rem;font-weight:700;color:#ffc107;" id="stat-conflicts">{{ stats.pending_conflicts }}</div>
        <div class="stat-label" style="font-size:0.85rem;color:var(--text-muted,#6c757d);">Conflicts</div>
    </div>
    <div class="stat-card" style="background:var(--bg-secondary,#f8f9fa);padding:1rem;border-radius:8px;text-align:center;">
        <div class="stat-value" style="font-size:1.8rem;font-weight:700;" id="stat-bytes">{{ stats.total_bytes_display }}</div>
        <div class="stat-label" style="font-size:0.85rem;color:var(--text-muted,#6c757d);">Transferred</div>
    </div>
</div>

<!-- Actions -->
<div style="display:flex;gap:0.5rem;margin-bottom:1.5rem;flex-wrap:wrap;">
    <button class="btn btn-primary" onclick="showCreateModal()">New Sync Job</button>
    <button class="btn btn-outline-secondary" onclick="runAllJobs()">Run All</button>
    <button class="btn btn-outline-secondary" onclick="refreshData()">Refresh</button>
</div>

<!-- Jobs Table -->
<div class="table-container">
    <h3>Sync Jobs</h3>
    <table class="table" id="jobs-table">
        <thead>
            <tr>
                <th>Name</th>
                <th>Source</th>
                <th>Dest</th>
                <th>Mode</th>
                <th>Status</th>
                <th>Last Run</th>
                <th>Files</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            {% for job in jobs %}
            <tr>
                <td><strong>{{ job.name }}</strong><br><small class="text-muted">{{ job.id[:12] }}...</small></td>
                <td><span class="badge badge-info">{{ job.source_provider }}</span><br><small>{{ job.source_path }}</small></td>
                <td><span class="badge badge-info">{{ job.dest_provider }}</span><br><small>{{ job.dest_path }}</small></td>
                <td>
                    <span class="badge {% if job.sync_mode == 'push' %}badge-primary{% elif job.sync_mode == 'pull' %}badge-warning{% else %}badge-success{% endif %}">
                        {{ job.sync_mode }}
                    </span>
                </td>
                <td>
                    <span class="badge {% if job.status == 'completed' %}badge-success{% elif job.status == 'failed' %}badge-danger{% elif job.status in ['scanning', 'syncing'] %}badge-warning{% elif job.status == 'watching' %}badge-info{% else %}badge-secondary{% endif %}">
                        {{ job.status }}
                    </span>
                </td>
                <td>{{ job.last_run_at or 'Never' }}</td>
                <td>{{ job.files_synced or 0 }} synced / {{ job.files_skipped or 0 }} skipped</td>
                <td>
                    <button class="btn btn-sm btn-primary" onclick="runJob('{{ job.id }}')">Run</button>
                    {% if job.status == 'watching' %}
                    <button class="btn btn-sm btn-warning" onclick="stopWatch('{{ job.id }}', '{{ job.name }}')" title="Stop watching for changes">Stop Watch</button>
                    {% else %}
                    <button class="btn btn-sm btn-outline-success" onclick="startWatch('{{ job.id }}', '{{ job.name }}')" title="Watch source for changes &amp; auto-sync">Watch</button>
                    {% endif %}
                    <button class="btn btn-sm btn-outline-info" onclick="fimCheck('{{ job.id }}', '{{ job.name }}')" title="File Integrity Monitor">FIM</button>
                    <button class="btn btn-sm btn-outline-danger" onclick="deleteJob('{{ job.id }}', '{{ job.name }}')">Delete</button>
                </td>
            </tr>
            {% endfor %}
            {% if not jobs %}
            <tr><td colspan="8" style="text-align:center;color:var(--text-muted,#6c757d);">No sync jobs configured. Click "New Sync Job" to create one.</td></tr>
            {% endif %}
        </tbody>
    </table>
</div>

<!-- Recent Log -->
<div class="table-container" style="margin-top:2rem;">
    <h3>Recent Sync Activity</h3>
    <table class="table" id="log-table">
        <thead>
            <tr>
                <th>Time</th>
                <th>Job</th>
                <th>Action</th>
                <th>Path</th>
                <th>Bytes</th>
                <th>Duration</th>
                <th>Detail</th>
            </tr>
        </thead>
        <tbody>
            {% for entry in log_entries %}
            <tr>
                <td>{{ entry.created_at }}</td>
                <td><small>{{ (entry.job_id or '')[:12] }}</small></td>
                <td>
                    <span class="badge {% if entry.action == 'error' %}badge-danger{% elif entry.action == 'sync_completed' %}badge-success{% elif entry.action == 'conflict_resolved' %}badge-warning{% else %}badge-secondary{% endif %}">
                        {{ entry.action }}
                    </span>
                </td>
                <td><small>{{ entry.relative_path or '' }}</small></td>
                <td>{{ entry.bytes_transferred or '' }}</td>
                <td>{% if entry.duration_ms %}{{ entry.duration_ms }}ms{% endif %}</td>
                <td><small>{{ entry.error_detail or entry.resolution or '' }}</small></td>
            </tr>
            {% endfor %}
            {% if not log_entries %}
            <tr><td colspan="7" style="text-align:center;color:var(--text-muted,#6c757d);">No sync activity yet.</td></tr>
            {% endif %}
        </tbody>
    </table>
</div>

<!-- Create Job Modal -->
<div id="create-modal" style="display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:1000;justify-content:center;align-items:center;">
    <div style="background:var(--bg-primary,#fff);border-radius:12px;padding:2rem;max-width:500px;width:90%;max-height:80vh;overflow-y:auto;">
        <h3>Create Sync Job</h3>
        <form id="create-form" onsubmit="createJob(event)">
            <div style="margin-bottom:1rem;">
                <label><strong>Job Name</strong></label>
                <input type="text" name="name" class="form-control" required placeholder="e.g., Backup Documents">
            </div>
            <div style="margin-bottom:1rem;">
                <label><strong>Source Path</strong></label>
                <input type="text" name="source_path" class="form-control" required placeholder="/path/to/source">
            </div>
            <div style="margin-bottom:1rem;">
                <label><strong>Source Provider</strong></label>
                <select name="source_provider" class="form-control">
                    <option value="local">Local</option>
                    <option value="sftp">SFTP</option>
                    <option value="s3">AWS S3</option>
                    <option value="azure_blob">Azure Blob</option>
                    <option value="gcs">GCS</option>
                </select>
            </div>
            <div style="margin-bottom:1rem;">
                <label><strong>Destination Path</strong></label>
                <input type="text" name="dest_path" class="form-control" required placeholder="/path/to/dest">
            </div>
            <div style="margin-bottom:1rem;">
                <label><strong>Destination Provider</strong></label>
                <select name="dest_provider" class="form-control">
                    <option value="local">Local</option>
                    <option value="sftp">SFTP</option>
                    <option value="s3">AWS S3</option>
                    <option value="azure_blob">Azure Blob</option>
                    <option value="gcs">GCS</option>
                </select>
            </div>
            <div style="margin-bottom:1rem;">
                <label><strong>Sync Mode</strong></label>
                <select name="sync_mode" class="form-control">
                    <option value="push">Push (source → dest)</option>
                    <option value="pull">Pull (dest → source)</option>
                    <option value="bidirectional">Bidirectional</option>
                </select>
            </div>
            <div style="margin-bottom:1rem;">
                <label><strong>Conflict Strategy</strong></label>
                <select name="conflict_strategy" class="form-control">
                    <option value="last_write_wins">Last Write Wins</option>
                    <option value="source_wins">Source Wins</option>
                    <option value="rename_both">Rename Both</option>
                    <option value="skip">Skip</option>
                </select>
            </div>
            <div style="display:flex;gap:0.5rem;justify-content:flex-end;">
                <button type="button" class="btn btn-secondary" onclick="hideCreateModal()">Cancel</button>
                <button type="submit" class="btn btn-primary">Create</button>
            </div>
        </form>
    </div>
</div>

<script>
function showCreateModal() {
    document.getElementById('create-modal').style.display = 'flex';
}
function hideCreateModal() {
    document.getElementById('create-modal').style.display = 'none';
}
function createJob(e) {
    e.preventDefault();
    const form = document.getElementById('create-form');
    const data = {};
    new FormData(form).forEach((v, k) => data[k] = v);
    fetch('/api/filesync/jobs', {method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify(data)})
        .then(r => r.json())
        .then(d => { hideCreateModal(); location.reload(); })
        .catch(err => alert('Error: ' + err));
}
function runJob(jobId) {
    fetch('/api/filesync/jobs/' + jobId + '/run', {method:'POST', headers:{'Content-Type':'application/json'}, body:'{}'})
        .then(r => r.json())
        .then(d => { alert(d.status === 'ok' ? 'Sync completed!' : 'Error: ' + (d.error || d.status)); location.reload(); })
        .catch(err => alert('Error: ' + err));
}
function deleteJob(jobId, name) {
    if (!confirm('Delete sync job "' + name + '"?')) return;
    fetch('/api/filesync/jobs/' + jobId, {method:'DELETE'})
        .then(r => r.json())
        .then(d => location.reload())
        .catch(err => alert('Error: ' + err));
}
function runAllJobs() {
    fetch('/api/filesync/run-all', {method:'POST', headers:{'Content-Type':'application/json'}, body:'{}'})
        .then(r => r.json())
        .then(d => { alert('Ran ' + (d.total_jobs || 0) + ' jobs'); location.reload(); })
        .catch(err => alert('Error: ' + err));
}
function refreshData() { location.reload(); }
function startWatch(jobId, name) {
    if (!confirm('Start watching "' + name + '" for changes? Auto-sync will trigger on file modifications.')) return;
    fetch('/api/filesync/jobs/' + jobId + '/watch', {method:'POST', headers:{'Content-Type':'application/json'}, body:'{}'})
        .then(r => r.json())
        .then(d => {
            if (d.status === 'watching') {
                alert('Now watching "' + name + '" via ' + (d.backend || 'polling') + '. Changes will auto-sync.');
            } else {
                alert(d.error || d.message || 'Watch started.');
            }
            location.reload();
        })
        .catch(err => alert('Error: ' + err));
}
function stopWatch(jobId, name) {
    if (!confirm('Stop watching "' + name + '"?')) return;
    fetch('/api/filesync/jobs/' + jobId + '/watch', {method:'DELETE'})
        .then(r => r.json())
        .then(d => { alert('Stopped watching "' + name + '".'); location.reload(); })
        .catch(err => alert('Error: ' + err));
}
function fimCheck(jobId, name) {
    if (!confirm('Run File Integrity Monitor check on "' + name + '"?')) return;
    fetch('/api/filesync/jobs/' + jobId + '/fim', {method:'POST', headers:{'Content-Type':'application/json'}, body:'{}'})
        .then(r => r.json())
        .then(d => {
            if (d.status === 'checked') {
                alert('FIM Check: ' + d.total_files + ' files scanned, ' + d.mismatches + ' mismatch(es) found.');
            } else if (d.status === 'disabled') {
                alert('FIM is not enabled. Set fim.enabled: true in args/filesync_config.yaml');
            } else {
                alert(d.message || d.error || 'FIM check completed.');
            }
        })
        .catch(err => alert('Error: ' + err));
}
</script>
{% endblock %}