/**
 * Pathway Viewer Alpine.js Component
 *
 * Provides reactive status management and polling for pathway predictions.
 * Handles status updates, change detection, and update notices.
 */

document.addEventListener('alpine:init', () => {
  /**
   * Pathway Viewer Component
   *
   * Usage:
   * <div x-data="pathwayViewer({
   *   status: 'running',
   *   modified: '2024-01-01T00:00:00Z',
   *   statusUrl: '/pathway/123?status=true'
   * })" x-init="init()">
   *   ...
   * </div>
   */
  Alpine.data('pathwayViewer', (config) => ({
    status: config.status,
    modified: config.modified,
    statusUrl: config.statusUrl,
    showUpdateNotice: false,
    updateMessage: '',
    pollInterval: null,

    get statusTooltip() {
      const tooltips = {
        'completed': 'Pathway prediction complete.',
        'failed': 'Pathway prediction failed.',
        'running': 'Pathway prediction running.'
      };
      return tooltips[this.status] || '';
    },

    init() {
      if (this.status === 'running') {
        this.startPolling();
      }
    },

    startPolling() {
      this.pollInterval = setInterval(() => this.checkStatus(), 5000);
    },

    async checkStatus() {
      try {
        const response = await fetch(this.statusUrl);
        const data = await response.json();

        if (data.modified > this.modified) {
          this.showUpdateNotice = true;
          this.updateMessage = this.getUpdateMessage(data.status);
        }

        if (data.status !== 'running') {
          this.status = data.status;
          if (this.pollInterval) {
            clearInterval(this.pollInterval);
            this.pollInterval = null;
          }
        }
      } catch (err) {
        console.error('Polling error:', err);
      }
    },

    getUpdateMessage(status) {
      let msg = 'Prediction ';

      if (status === 'running') {
        msg += 'is still running. But the Pathway was updated.';
      } else if (status === 'completed') {
        msg += 'is completed. Reload the page to see the updated Pathway.';
      } else if (status === 'failed') {
        msg += 'failed. Reload the page to see the current shape.';
      }

      return msg;
    },

    reloadPage() {
      location.reload();
    }
  }));
});