<div class="clients-page">
  <div class="clients-header">
    <h2><i class="fa-solid fa-building"></i> Klienci</h2>
    <button type="button" class="btn btn-success" onclick="openClientForm()">
      <i class="fa-solid fa-plus mr5"></i>Dodaj klienta
    </button>
  </div>

  <div class="clients-table-wrap">
    <table class="table" id="clients-table">
      <thead>
        <tr>
          <th style="width: 60px;">#ID</th>
          <th>Nazwa klienta</th>
          <th style="width: 120px;">Status</th>
          <th>Google Ads Customer ID</th>
          <th>Facebook Ads Account ID</th>
          <th>Merchant Account ID</th>
          <th>Dane od</th>
          <th style="width: 190px;">Sync</th>
          <th style="width: 250px; text-align: center;">Akcje</th>
        </tr>
      </thead>
      <tbody>
        <?php if ( $this -> clients ): ?>
          <?php foreach ( $this -> clients as $client ): ?>
            <?php $is_client_active = (int) ( $client['active'] ?? 0 ) === 1; ?>
            <tr data-id="<?= $client['id']; ?>" data-active="<?= $is_client_active ? 1 : 0; ?>">
              <td class="client-id"><?= $client['id']; ?></td>
              <td class="client-name"><?= htmlspecialchars( $client['name'] ); ?></td>
              <td data-status-for="<?= $client['id']; ?>">
                <?php if ( $is_client_active ): ?>
                  <span class="text-success"><strong>Aktywny</strong></span>
                <?php else: ?>
                  <span class="text-danger"><strong>Nieaktywny</strong></span>
                <?php endif; ?>
              </td>
              <td>
                <?php if ( $client['google_ads_customer_id'] ): ?>
                  <span class="badge-id"><?= htmlspecialchars( $client['google_ads_customer_id'] ); ?></span>
                <?php else: ?>
                  <span class="text-muted">— brak —</span>
                <?php endif; ?>
              </td>
              <td>
                <?php if ( !empty( $client['facebook_ads_account_id'] ) ): ?>
                  <span class="badge-id"><?= htmlspecialchars( $client['facebook_ads_account_id'] ); ?></span>
                <?php else: ?>
                  <span class="text-muted">— brak —</span>
                <?php endif; ?>
              </td>
              <td>
                <?php if ( !empty( $client['google_merchant_account_id'] ) ): ?>
                  <span class="badge-id"><?= htmlspecialchars( $client['google_merchant_account_id'] ); ?></span>
                <?php else: ?>
                  <span class="text-muted">— brak —</span>
                <?php endif; ?>
              </td>
              <td>
                <?php if ( $client['google_ads_start_date'] ): ?>
                  <?= $client['google_ads_start_date']; ?>
                <?php else: ?>
                  <span class="text-muted">— brak —</span>
                <?php endif; ?>
              </td>
              <td class="client-sync" data-sync-id="<?= $client['id']; ?>"><span class="text-muted">—</span></td>
              <td class="actions-cell">
                <button type="button" class="btn-icon btn-icon-sync" onclick="toggleClientActive(<?= $client['id']; ?>, this)" title="<?= $is_client_active ? 'Dezaktywuj klienta' : 'Aktywuj klienta'; ?>">
                  <i class="fa-solid <?= $is_client_active ? 'fa-toggle-on' : 'fa-toggle-off'; ?>"></i>
                </button>
                <div class="sync-dropdown" data-client-id="<?= $client['id']; ?>">
                  <button type="button" class="btn-icon btn-icon-sync client-sync-action" onclick="toggleSyncMenu(this)" title="Odswiez dane" <?= $is_client_active ? '' : 'disabled'; ?>>
                    <i class="fa-solid fa-arrows-rotate"></i>
                  </button>
                  <div class="sync-dropdown-menu">
                    <?php if ( $client['google_ads_customer_id'] ): ?>
                      <button type="button" onclick="syncFromMenu(<?= $client['id']; ?>, 'campaigns', this)">
                        <i class="fa-solid fa-bullhorn"></i> Kampanie
                      </button>
                      <button type="button" onclick="syncFromMenu(<?= $client['id']; ?>, 'products', this)">
                        <i class="fa-solid fa-box-open"></i> Produkty
                      </button>
                      <?php if ( !empty( $client['google_merchant_account_id'] ) ): ?>
                        <button type="button" onclick="syncFromMenu(<?= $client['id']; ?>, 'campaigns_product_alerts_merchant', this)">
                          <i class="fa-solid fa-store"></i> Walidacja Merchant
                        </button>
                        <button type="button" onclick="syncFromMenu(<?= $client['id']; ?>, 'supplemental_feed', this)">
                          <i class="fa-solid fa-file-csv"></i> Supplemental Feed
                        </button>
                      <?php endif; ?>
                    <?php endif; ?>
                    <?php if ( !empty( $client['facebook_ads_account_id'] ) ): ?>
                      <button type="button" onclick="syncFromMenu(<?= $client['id']; ?>, 'facebook_ads', this)">
                        <i class="fa-brands fa-facebook-f"></i> Facebook Ads
                      </button>
                    <?php endif; ?>
                  </div>
                </div>
                <button type="button" class="btn-icon btn-icon-edit" onclick="editClient(<?= $client['id']; ?>)" title="Edytuj">
                  <i class="fa-solid fa-pen"></i>
                </button>
                <button type="button" class="btn-icon btn-icon-delete" onclick="deleteClient(<?= $client['id']; ?>, '<?= htmlspecialchars( addslashes( $client['name'] ) ); ?>')" title="Usuń">
                  <i class="fa-solid fa-trash"></i>
                </button>
              </td>
            </tr>
          <?php endforeach; ?>
        <?php else: ?>
          <tr>
            <td colspan="9" class="empty-state">
              <i class="fa-solid fa-building"></i>
              <p>Brak klientów. Dodaj pierwszego klienta.</p>
            </td>
          </tr>
        <?php endif; ?>
      </tbody>
    </table>
  </div>
</div>

<!-- Modal: Dodaj / Edytuj klienta -->
<div class="default_popup" id="client-modal">
  <div class="popup_content" style="max-width: 520px;">
    <div class="popup_header">
      <div class="title" id="client-modal-title">Dodaj klienta</div>
      <div class="close"><i class="fa-solid fa-xmark"></i></div>
    </div>
    <div class="popup_body">
      <form method="POST" id="client-form" action="/clients/save">
        <input type="hidden" name="id" id="client-id" value="" />
        <div class="settings-field">
          <label for="client-name">Nazwa klienta</label>
          <input type="text" id="client-name" name="name" class="form-control" required placeholder="np. Firma XYZ" />
        </div>
        <div class="settings-field">
          <label for="client-active">Status klienta</label>
          <select id="client-active" name="active" class="form-control">
            <option value="1">Aktywny</option>
            <option value="0">Nieaktywny</option>
          </select>
          <small class="text-muted">Nieaktywny klient nie jest synchronizowany.</small>
        </div>
        <div class="settings-field">
          <label for="client-gads-id">Google Ads Customer ID</label>
          <input type="text" id="client-gads-id" name="google_ads_customer_id" class="form-control" placeholder="np. 123-456-7890 (opcjonalnie)" />
        </div>
        <div class="settings-field">
          <label for="client-fbads-id">Facebook Ads Account ID</label>
          <input type="text" id="client-fbads-id" name="facebook_ads_account_id" class="form-control" placeholder="np. act_123456789012345 (opcjonalnie)" />
          <small class="text-muted">Mozesz podac act_... albo same cyfry</small>
        </div>
        <div class="settings-field">
          <label for="client-gmc-id">Merchant Account ID</label>
          <input type="text" id="client-gmc-id" name="google_merchant_account_id" class="form-control" placeholder="np. 123456789 (opcjonalnie)" />
          <small class="text-muted">ID konta Merchant Center przypisane do klienta</small>
        </div>
        <div class="settings-field">
          <label for="client-gads-start">Pobieraj dane od</label>
          <input type="date" id="client-gads-start" name="google_ads_start_date" class="form-control" />
          <small class="text-muted">Data od której CRON zacznie pobierać dane z Google Ads API</small>
        </div>
        <div style="margin-top: 20px; display: flex; gap: 10px;">
          <button type="submit" class="btn btn-success"><i class="fa-solid fa-check mr5"></i>Zapisz</button>
          <button type="button" class="btn btn-secondary" onclick="closeClientForm()">Anuluj</button>
        </div>
      </form>
    </div>
  </div>
</div>

<script type="text/javascript">
function openClientForm()
{
  $( '#client-modal-title' ).text( 'Dodaj klienta' );
  $( '#client-id' ).val( '' );
  $( '#client-name' ).val( '' );
  $( '#client-active' ).val( '1' );
  $( '#client-gads-id' ).val( '' );
  $( '#client-fbads-id' ).val( '' );
  $( '#client-gmc-id' ).val( '' );
  $( '#client-gads-start' ).val( '' );
  $( '#client-modal' ).fadeIn();
}

function closeClientForm()
{
  $( '#client-modal' ).fadeOut();
}

function editClient( id )
{
  $.getJSON( '/clients/get/id=' + id, function( data ) {
    $( '#client-modal-title' ).text( 'Edytuj klienta' );
    $( '#client-id' ).val( data.id );
    $( '#client-name' ).val( data.name );
    $( '#client-active' ).val( parseInt( data.active, 10 ) === 0 ? '0' : '1' );
    $( '#client-gads-id' ).val( data.google_ads_customer_id || '' );
    $( '#client-fbads-id' ).val( data.facebook_ads_account_id || '' );
    $( '#client-gmc-id' ).val( data.google_merchant_account_id || '' );
    $( '#client-gads-start' ).val( data.google_ads_start_date || '' );
    $( '#client-modal' ).fadeIn();
  } );
}

function updateClientStatusUI( id, active, $btn )
{
  var isActive = parseInt( active, 10 ) === 1;
  var statusHtml = isActive
    ? '<span class="text-success"><strong>Aktywny</strong></span>'
    : '<span class="text-danger"><strong>Nieaktywny</strong></span>';

  $( 'tr[data-id="' + id + '"]' ).attr( 'data-active', isActive ? '1' : '0' );
  $( 'td[data-status-for="' + id + '"]' ).html( statusHtml );

  if ( $btn && $btn.length )
  {
    $btn.attr( 'title', isActive ? 'Dezaktywuj klienta' : 'Aktywuj klienta' );
    $btn.find( 'i' ).attr( 'class', 'fa-solid ' + ( isActive ? 'fa-toggle-on' : 'fa-toggle-off' ) );
  }

  $( 'tr[data-id="' + id + '"] .client-sync-action' ).prop( 'disabled', !isActive );

  var $syncCell = $( '.client-sync[data-sync-id="' + id + '"]' );
  if ( !isActive )
  {
    $syncCell.html( '<span class="text-muted">nieaktywny</span>' );
  }
  else
  {
    loadSyncStatus();
  }
}

function toggleClientActive( id, btn )
{
  var $row = $( 'tr[data-id="' + id + '"]' );
  var currentActive = parseInt( $row.attr( 'data-active' ), 10 ) === 1 ? 1 : 0;
  var nextActive = currentActive === 1 ? 0 : 1;
  var $btn = $( btn );
  var $icon = $btn.find( 'i' );
  var originalClass = $icon.attr( 'class' );

  $btn.prop( 'disabled', true );
  $icon.attr( 'class', 'fa-solid fa-spinner fa-spin' );

  $.post( '/clients/set_active', { id: id, active: nextActive }, function( response ) {
    var data = JSON.parse( response || '{}' );

    $btn.prop( 'disabled', false );
    $icon.attr( 'class', originalClass );

    if ( data.success )
    {
      updateClientStatusUI( id, data.active, $btn );
      return;
    }

    $.alert( {
      title: 'Blad',
      content: data.message || 'Nie udalo sie zmienic statusu klienta.',
      type: 'red'
    } );
  } );
}

// --- Sync dropdown menu ---
function toggleSyncMenu( btn )
{
  var $dropdown = $( btn ).closest( '.sync-dropdown' );
  var wasOpen = $dropdown.hasClass( 'is-open' );
  $( '.sync-dropdown.is-open' ).removeClass( 'is-open' );
  if ( !wasOpen ) $dropdown.addClass( 'is-open' );
}

$( document ).on( 'click', function( e ) {
  if ( !$( e.target ).closest( '.sync-dropdown' ).length )
  {
    $( '.sync-dropdown.is-open' ).removeClass( 'is-open' );
  }
});

function syncFromMenu( id, pipeline, btn )
{
  $( '.sync-dropdown.is-open' ).removeClass( 'is-open' );
  var $btn = $( btn );
  var $icon = $btn.find( 'i' );
  var origClass = $icon.attr( 'class' );

  $btn.prop( 'disabled', true );
  $icon.attr( 'class', 'fa-solid fa-spinner fa-spin' );

  var labels = {
    campaigns: 'kampanii',
    products: 'produktow',
    campaigns_product_alerts_merchant: 'walidacji Merchant',
    supplemental_feed: 'supplemental feed',
    facebook_ads: 'Facebook Ads'
  };

  $.post( '/clients/force_sync', { id: id, pipeline: pipeline }, function( response )
  {
    var data = JSON.parse( response );

    $btn.prop( 'disabled', false );
    $icon.attr( 'class', origClass );

    if ( data.success )
    {
      var msg = data.immediate
        ? 'Supplemental feed wygenerowany pomyslnie.'
        : 'Synchronizacja ' + labels[ pipeline ] + ' zostala zakolejkowana. Dane zostana pobrane przy najblizszym uruchomieniu CRON.';

      $.alert({
        title: data.immediate ? 'Gotowe' : 'Zakolejkowano',
        content: msg,
        type: 'green',
        autoClose: 'ok|3000'
      });

      loadSyncStatus();
    }
    else
    {
      $.alert({
        title: 'Blad',
        content: data.message || 'Nie udalo sie oznaczyc klienta.',
        type: 'red'
      });
    }
  });
}

function deleteClient( id, name )
{
  $.confirm( {
    title: 'Potwierdzenie',
    content: 'Czy na pewno chcesz usunąć klienta <strong>' + name + '</strong>?',
    type: 'red',
    onContentReady: function() {
      if ( this['$$confirm'] && this['$$confirm'].length )
      {
        this['$$confirm'].trigger( 'focus' );
      }
    },
    buttons: {
      confirm: {
        text: 'Usuń',
        btnClass: 'btn-red',
        keys: [ 'enter' ],
        action: function() {
          $.post( '/clients/delete', { id: id }, function( response ) {
            var data = JSON.parse( response );
            if ( data.success ) {
              $( 'tr[data-id="' + id + '"]' ).fadeOut( 300, function() { $( this ).remove(); } );
            }
          } );
        }
      },
      cancel: {
        text: 'Anuluj'
      }
    }
  } );
}

// Zamknij modal klawiszem Escape
$( document ).on( 'keydown', function( e ) {
  if ( e.key === 'Escape' ) closeClientForm();
} );

// Zamknij modal kliknięciem w tło
$( '#client-modal' ).on( 'click', function( e ) {
  if ( e.target === this ) closeClientForm();
} );

// --- Sync status bars ---
function renderSyncBar( label, done, total )
{
  var pct = total > 0 ? Math.round( done / total * 100 ) : 0;
  var cls = pct >= 100 ? 'is-done' : ( pct > 0 ? 'is-active' : '' );

  return '<div class="client-sync-row">' +
    '<span class="client-sync-label">' + label + '</span>' +
    '<div class="client-sync-track"><div class="client-sync-fill ' + cls + '" style="width:' + pct + '%"></div></div>' +
    '<span class="client-sync-pct">' + pct + '%</span>' +
  '</div>';
}

function loadSyncStatus()
{
  $.getJSON( '/clients/sync_status', function( resp )
  {
    if ( resp.status !== 'ok' ) return;

    $( '.client-sync' ).each( function()
    {
      var $cell = $( this );
      var isActive = parseInt( $cell.closest( 'tr' ).attr( 'data-active' ), 10 ) === 1;
      if ( !isActive )
      {
        $cell.html( '<span class="text-muted">nieaktywny</span>' );
        return;
      }

      var id = $cell.data( 'sync-id' );
      var info = resp.data[ id ];

      if ( !info )
      {
        $cell.html( '<span class="text-muted">—</span>' );
        return;
      }

      var html = '<div class="client-sync-bars">';
      if ( info.campaigns ) html += renderSyncBar( 'K:', info.campaigns[0], info.campaigns[1] );
      if ( info.products )  html += renderSyncBar( 'P:', info.products[0], info.products[1] );
      if ( info.merchant )  html += renderSyncBar( 'M:', info.merchant[0], info.merchant[1] );
      if ( info.feed )      html += renderSyncBar( 'F:', info.feed[0], info.feed[1] );
      if ( info.facebook_ads ) html += renderSyncBar( 'FB:', info.facebook_ads[0], info.facebook_ads[1] );
      html += '</div>';

      $cell.html( html );
    } );
  } );
}

$( document ).ready( function() {
  loadSyncStatus();
  setInterval( loadSyncStatus, 15000 );
} );
</script>

