{% extends "base.html" %}
{% block title %}Zoho CRM{% endblock %}

{% block content %}
<div class="page-header">
  <div>
    <h1>Zoho CRM Sync</h1>
    <p class="text-muted mb-0">Manage contact synchronization to Zoho CRM</p>
  </div>
</div>

{# ── Configuration Status ── #}
<div class="card" style="margin-bottom: 1.5rem;">
  <div class="card-body">
    {% if configured %}
    <div class="zoho-config-status connected">
      <span class="status-badge status-icp">Connected</span>
      <span>Zoho CRM API credentials are configured.</span>
    </div>
    {% else %}
    <div class="zoho-config-status not-connected">
      <span class="status-badge status-noticp">Not Configured</span>
      <span>Set <code>ZOHO_CLIENT_ID</code>, <code>ZOHO_CLIENT_SECRET</code>, and <code>ZOHO_REFRESH_TOKEN</code> environment variables to enable sync.</span>
    </div>
    {% endif %}
  </div>
</div>

{# ── KPI Cards ── #}
<div class="stats-grid">
  <div class="stat-card">
    <div class="stat-content">
      <div class="stat-value">{{ stats.total_icp }}</div>
      <div class="stat-label">Total ICP Contacts</div>
    </div>
  </div>
  <div class="stat-card kpi-icp">
    <div class="stat-content">
      <div class="stat-value">{{ stats.synced }}</div>
      <div class="stat-label">Synced to Zoho</div>
    </div>
  </div>
  <div class="stat-card">
    <div class="stat-content">
      <div class="stat-value">{{ stats.unsynced }}</div>
      <div class="stat-label">Pending Sync</div>
    </div>
  </div>
  <div class="stat-card {% if stats.errors_24h > 0 %}kpi-review{% endif %}">
    <div class="stat-content">
      <div class="stat-value">{{ stats.errors_24h }}</div>
      <div class="stat-label">Errors (24h)</div>
    </div>
  </div>
</div>

{# ── Actions ── #}
{% if configured %}
<div class="card" style="margin-bottom: 1.5rem;">
  <div class="card-header">
    <h3>Actions</h3>
  </div>
  <div class="card-body">
    <p>Push all unsynced ICP contacts to Zoho CRM. This creates new Contacts and Accounts, or updates existing ones.</p>
    <button class="btn btn-primary"
            hx-post="{{ url_for('zoho.sync_all') }}"
            hx-target="#sync-result"
            hx-swap="innerHTML"
            hx-indicator="#sync-spinner">
      Sync All Unsynced ({{ stats.unsynced }})
    </button>
    <span id="sync-spinner" class="htmx-indicator" style="margin-left: 0.5rem;">Syncing...</span>
    <div id="sync-result" style="margin-top: 1rem;"></div>
  </div>
</div>
{% endif %}

{# ── Recent Sync Log ── #}
<div class="card">
  <div class="card-header">
    <h3>Recent Sync Log</h3>
    <button class="btn btn-ghost btn-sm"
            hx-get="{{ url_for('zoho.log_table') }}"
            hx-target="#sync-log-body"
            hx-swap="innerHTML">
      Refresh
    </button>
  </div>
  <div class="card-body">
    {% if recent_log %}
    <div class="data-table">
      <table>
        <thead>
          <tr>
            <th>Time</th>
            <th>Contact</th>
            <th>Action</th>
            <th>Zoho ID</th>
            <th>Details</th>
          </tr>
        </thead>
        <tbody id="sync-log-body">
          {% include "partials/zoho_log_table.html" %}
        </tbody>
      </table>
    </div>
    {% else %}
    <p class="text-muted">No sync activity yet.</p>
    {% endif %}
  </div>
</div>

{% if stats.last_sync %}
<p class="text-muted" style="margin-top: 1rem; font-size: 0.85rem;">
  Last sync: {{ stats.last_sync.strftime('%Y-%m-%d %H:%M') if stats.last_sync else 'Never' }}
</p>
{% endif %}
{% endblock %}