import { state } from '../state';

export const completeAnime = async (episodeNumber: number): Promise<void> => {
  if (state.completionSent || !state.malID || !episodeNumber) return;
  state.completionSent = true;

  try {
    const res = await fetch('/api/watch-complete', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      keepalive: true,
      body: JSON.stringify({ mal_id: state.malID, episode: episodeNumber }),
    });

    if (!res.ok) {
      state.completionSent = false;
      if (state.completionAttempts < 2) {
        state.completionAttempts++;
        setTimeout(() => completeAnime(episodeNumber), 1000);
      }
      return;
    }

    const trigger = document.querySelector('[data-dropdown-trigger]') as HTMLButtonElement | null;
    if (trigger) {
      trigger.textContent = 'Completed ';
      const caret = document.createElement('span');
      caret.className = 'text-xs';
      caret.textContent = '▾';
      trigger.appendChild(caret);
    }
  } catch {
    state.completionSent = false;
    if (state.completionAttempts < 2) {
      state.completionAttempts++;
      setTimeout(() => completeAnime(episodeNumber), 1000);
    }
  }
};