import { completedIcon, pendingIcon, processingIcon } from './constants.js';
import { apiBaseUrl, clientId, estTimeStep1, estTimeStep2 } from './main.js';

const statusFaceCheckElement = document.getElementById('status-face-check');
const initData = [
  {
    id: 1,
    name: 'Geolocation',
    displayName: 'Location Analysis',
    status: 'pending',
    percent: 0,
  },
  {
    id: 2,
    name: 'Timestamp',
    displayName: 'Time Analysis',
    status: 'pending',
    percent: 0,
  },
  {
    id: 3,
    name: 'AIGVDetection',
    displayName: 'AI-Generated Content Detection',
    status: 'pending',
    percent: 0,
  },
  {
    id: 4,
    name: 'Report',
    displayName: 'Comprehensive Report',
    status: 'pending',
    percent: 0,
  },
];
export let statusStep1 = 'pending';
export let statusStep2 = 'pending';
let _estTimeStep1 = 0;
let _estTimeStep2 = 0;

let data = {};
Object.defineProperty(data, 'value', {
  set(newValue) {
    const countItem = newValue.length;
    const countItemCompleted = newValue.filter(
      (item) => item.status === 'completed'
    ).length;
    statusStep1 = 'pending';
    statusStep2 = newValue.find((i) => i.name === 'Report').status;
    if (
      ['Geolocation', 'Timestamp', 'AIGVDetection'].every((item) => {
        return newValue.find((i) => i.name === item).status === 'completed';
      })
    ) {
      statusStep1 = 'completed';
    } else if (
      ['Geolocation', 'Timestamp', 'AIGVDetection'].some((item) => {
        return newValue.find((i) => i.name === item).status === 'processing';
      })
    ) {
      statusStep1 = 'processing';
    }

    const content = `<div class="status-face-check">
                <div class="header-status-face-check">
                  <div class="title-status-face-check">
                    <p>${countItemCompleted}/${countItem} completed</p>
                    <p>${Math.round(
                      (countItemCompleted / countItem) * 100
                    )}%</p>
                  </div>
                  <div class="wrapper-processing">
                    <div class="processing" style="width: ${Math.round(
                      (countItemCompleted / countItem) * 100
                    )}%;"></div>
                  </div>
                </div>
                <div class="body-status-face-check">
                  ${newValue
                    .map((item, index) => {
                      return `
                      ${
                        index === 0
                          ? `<div class="step">Step 1: ${
                              statusStep1 === 'pending'
                                ? `Waiting - ${
                                    _estTimeStep1 === 0
                                      ? 'Calculating...'
                                      : `${_estTimeStep1} minutes remaining.`
                                  }`
                                : statusStep1 === 'processing'
                                ? `Processing - Estimated time: ${_estTimeStep1} minutes.`
                                : `Completed`
                            }</div>`
                          : ''
                      }
                      ${
                        index === 3
                          ? `<div class="step">Step 2: ${
                              statusStep2 === 'pending'
                                ? `Waiting - ${
                                    _estTimeStep2 === 0
                                      ? 'Calculating...'
                                      : `Begins after Step 1 is completed (Estimated time: ${_estTimeStep2} minutes).`
                                  }`
                                : statusStep2 === 'processing'
                                ? `Processing - Estimated time: ${_estTimeStep2} minutes.`
                                : `Completed`
                            } </div>`
                          : ''
                      }
                      <div class="item-status-face-check">
                    <span
                      >${
                        item.status === 'completed'
                          ? completedIcon
                          : item.status === 'processing'
                          ? processingIcon
                          : pendingIcon
                      }
                    </span>
                    <div class="content-status-face-check">
                      <p class="name-service">Service ${
                        index + 1
                      }/${countItem}: ${item.displayName}</p>
                      <p class="status-service ${
                        item.status === 'pending'
                          ? 'display-none'
                          : item.status === 'processing'
                          ? 'processing-dots'
                          : ''
                      }">${
                        item.status === 'processing'
                          ? 'Processing'
                          : item.status === 'completed'
                          ? 'Completed'
                          : 'Pending'
                      }<span class="dots "></span></p>
                    </div>
                  </div>`;
                    })
                    .join('')}
                </div>
              </div>`;
    statusFaceCheckElement.innerHTML = content;
    this._value = newValue;
  },
  get() {
    return this._value;
  },
});
data.value = initData;

export function initValueData() {
  console.log('test...');
}

let isLoading = {};
Object.defineProperty(isLoading, 'value', {
  set(newValue) {
    if (newValue) {
      // statusFaceCheckElement.classList.remove('display-none');
      data.value = initData;
    } else {
      statusFaceCheckElement.classList.add('display-none');
      data.value = initData;
    }
    this._value = newValue;
  },
  get() {
    return this._value;
  },
});

const source = new EventSource(apiBaseUrl + `v1/sse?client_id=${clientId}`);

source.onopen = () => console.log('✅ SSE connected');

let _interval;
source.onmessage = (event) => {
  try {
    const _data = JSON.parse(event.data);

    console.log(_data);

    if (_data?.status) {
      if (_data.status === 'start') {
        isLoading.value = true;
        _estTimeStep1 = estTimeStep1;
        _estTimeStep2 = estTimeStep2;
        _interval = setInterval(() => {
          if (statusStep1 === 'processing' && _estTimeStep1 > 1) {
            _estTimeStep1 -= 1;
          }
          if (statusStep2 === 'processing' && _estTimeStep2 > 1) {
            _estTimeStep2 -= 1;
          }
          data.value = data.value;
        }, 60000);
      } else {
        setTimeout(() => {
          isLoading.value = false;
          _estTimeStep1 = 0;
          _estTimeStep2 = 0;
          data.value = initData;
          clearInterval(_interval);
        }, 2500);
      }
    }
    if (_data?.status_service) {
      const updatedData = data.value?.map((item) => {
        if (_data.service === item.name) {
          if (_data.status_service === 'completed') {
            return { ...item, status: _data.status_service, percent: 100 };
          }
          return { ...item, status: _data.status_service };
        }
        return item;
      });
      data.value = updatedData;
    }
  } catch (err) {
    console.log('err', err);
  }
};

source.onerror = (err) => {
  console.error('❌ SSE error:', err);
};