export {};

type WatchlistStatus = 'watching' | 'completed' | 'plan_to_watch' | 'dropped';

type WatchlistUpdateDisplay =
  | 'Watching'
  | 'Completed'
  | 'Plan to Watch'
  | 'Dropped'
  | 'Add to Watchlist';

const watchlistIds = new Set<number>();
const inflight = new Set<number>();

const getShowToast = (): ((opts: { message: string; duration?: number }) => void) | null => {
  const anyWindow = window as unknown as {
    showToast?: (opts: { message: string; duration?: number }) => void;
  };
  return typeof anyWindow.showToast === 'function' ? anyWindow.showToast : null;
};

const toast = (message: string): void => {
  getShowToast()?.({ message });
};

const toInt = (value: string | undefined): number | null => {
  if (!value) return null;
  const parsed = Number.parseInt(value, 10);
  return Number.isFinite(parsed) ? parsed : null;
};

const withTimeout = async <T>(promise: Promise<T>, ms: number): Promise<T> => {
  let timeoutId: number | undefined;
  const timeout = new Promise<never>((_, reject) => {
    timeoutId = window.setTimeout(() => reject(new Error('timeout')), ms);
  });

  try {
    return await Promise.race([promise, timeout]);
  } finally {
    if (typeof timeoutId === 'number') {
      window.clearTimeout(timeoutId);
    }
  }
};

const requestJson = async (input: string, init: RequestInit): Promise<Response> =>
  withTimeout(fetch(input, init), 12_000);

const syncRemoveButtonVisibility = (id: number): void => {
  const container = document.getElementById(`remove-watchlist-container-${id}`);
  if (!container) return;
  container.classList.toggle('hidden', !watchlistIds.has(id));
};

const syncWatchlistDropdown = (id: number, inWatchlist: boolean): void => {
  const statusDisplay = document.getElementById(`watchlist-status-display-${id}`);
  if (!statusDisplay) return;
  statusDisplay.textContent = inWatchlist ? 'Plan to Watch' : 'Add to Watchlist';
  syncRemoveButtonVisibility(id);
};

const syncIconsForId = (id: number): void => {
  const shouldBeInWatchlist = watchlistIds.has(id);
  document.querySelectorAll<HTMLElement>('[data-watchlist-toggle][data-mal-id]').forEach(button => {
    const malId = toInt(button.dataset.malId);
    if (malId !== id) return;
    button.classList.toggle('in-watchlist', shouldBeInWatchlist);
    button.dataset.watchlistState = shouldBeInWatchlist ? 'in' : 'out';
    button.setAttribute(
      'aria-label',
      shouldBeInWatchlist ? 'Remove from Watchlist' : 'Add to Watchlist'
    );
    button.toggleAttribute('aria-busy', inflight.has(id));
  });
};

const setBusy = (id: number, busy: boolean): void => {
  if (busy) {
    inflight.add(id);
  } else {
    inflight.delete(id);
  }

  document
    .querySelectorAll<HTMLButtonElement>('[data-watchlist-toggle][data-mal-id]')
    .forEach(button => {
      const malId = toInt(button.dataset.malId);
      if (malId !== id) return;
      button.disabled = busy;
      button.toggleAttribute('aria-busy', busy);
    });

  document
    .querySelectorAll<HTMLButtonElement>(
      '[data-watchlist-update][data-mal-id], [data-watchlist-remove][data-mal-id]'
    )
    .forEach(button => {
      const malId = toInt(button.dataset.malId);
      if (malId !== id) return;
      button.disabled = busy;
      button.toggleAttribute('aria-busy', busy);
    });
};

const closeClosestDropdown = (from: HTMLElement): void => {
  requestAnimationFrame(() => {
    const dropdown = from.closest('ui-dropdown') as { close?: () => void } | null;
    dropdown?.close?.();
  });
};

const toggleWatchlist = async (
  id: number,
  title: string,
  renderedState: string | undefined
): Promise<void> => {
  if (inflight.has(id)) return;
  if (renderedState === 'in') {
    watchlistIds.add(id);
  } else if (renderedState === 'out') {
    watchlistIds.delete(id);
  }

  const isInWatchlist = watchlistIds.has(id);

  setBusy(id, true);

  const optimisticNext = !isInWatchlist;
  if (optimisticNext) {
    watchlistIds.add(id);
  } else {
    watchlistIds.delete(id);
  }
  syncIconsForId(id);
  syncWatchlistDropdown(id, optimisticNext);

  const url = isInWatchlist ? `/api/watchlist/${id}` : '/api/watchlist';
  const method: 'DELETE' | 'POST' = isInWatchlist ? 'DELETE' : 'POST';
  const body = isInWatchlist
    ? null
    : JSON.stringify({ animeId: id, status: 'plan_to_watch' satisfies WatchlistStatus });

  try {
    const response = await requestJson(url, {
      method,
      headers: body ? { 'Content-Type': 'application/json' } : {},
      body: body ?? undefined,
    });

    if (!response.ok) {
      throw new Error('not ok');
    }

    toast(optimisticNext ? `Added ${title} to watchlist` : `Removed ${title} from watchlist`);
  } catch {
    if (optimisticNext) {
      watchlistIds.delete(id);
    } else {
      watchlistIds.add(id);
    }
    syncIconsForId(id);
    syncWatchlistDropdown(id, watchlistIds.has(id));
    toast('Failed to update watchlist');
  } finally {
    setBusy(id, false);
    syncIconsForId(id);
    syncRemoveButtonVisibility(id);
  }
};

type WatchlistSort = 'date' | 'title';

const csvEscape = (value: unknown): string => {
  const str = String(value ?? '');
  if (/[",\r\n]/.test(str)) {
    return `"${str.replace(/"/g, '""')}"`;
  }
  return str;
};

const watchlistItems = (): HTMLElement[] =>
  Array.from(document.querySelectorAll<HTMLElement>('.watchlist-item'));

const sortVisibleWatchlistItems = (sortBy: WatchlistSort, desc: boolean): void => {
  const grids: HTMLElement[] = [];

  const singleGrid = document.getElementById('watchlist-items');
  if (singleGrid) {
    grids.push(singleGrid);
  }

  document
    .querySelectorAll<HTMLElement>('.watchlist-section .grid')
    .forEach(grid => grids.push(grid));

  const sortItemsInGrid = (grid: HTMLElement): void => {
    const items = Array.from(grid.querySelectorAll<HTMLElement>('.watchlist-item'));
    items.sort((a, b) => {
      let comparison = 0;
      if (sortBy === 'title') {
        const titleA = (a.querySelector('h3')?.textContent ?? '').toLowerCase().trim();
        const titleB = (b.querySelector('h3')?.textContent ?? '').toLowerCase().trim();
        comparison = titleA.localeCompare(titleB);
      } else {
        const dateA = Number.parseInt(a.dataset.updatedAt ?? '0', 10) || 0;
        const dateB = Number.parseInt(b.dataset.updatedAt ?? '0', 10) || 0;
        comparison = dateA - dateB;
      }
      return desc ? -comparison : comparison;
    });
    items.forEach(item => grid.appendChild(item));
  };

  grids.forEach(sortItemsInGrid);
};

const setActiveFilterButton = (clicked: HTMLButtonElement): void => {
  const parent = clicked.parentElement;
  if (!parent) return;
  parent.querySelectorAll('button').forEach(b => {
    b.classList.remove('text-foreground');
    b.classList.add('text-foreground-muted');
    b.classList.remove('border-accent');
    b.classList.add('border-transparent');
  });
  clicked.classList.remove('text-foreground-muted');
  clicked.classList.add('text-foreground');
  clicked.classList.remove('border-transparent');
  clicked.classList.add('border-accent');
};

const applyWatchlistFilter = (status: string): void => {
  const sections = Array.from(document.querySelectorAll<HTMLElement>('.watchlist-section'));
  if (sections.length) {
    sections.forEach(section => {
      if (status === 'all') {
        section.style.display = 'block';
        return;
      }
      section.style.display = section.dataset.status === status ? 'block' : 'none';
    });
    return;
  }

  watchlistItems().forEach(item => {
    if (status === 'all') {
      item.style.display = 'flex';
      return;
    }
    item.style.display = item.dataset.status === status ? 'flex' : 'none';
  });
};

const exportWatchlistCsv = (): void => {
  const rows = watchlistItems()
    .slice()
    .sort((a, b) => {
      const dateA = Number.parseInt(a.dataset.updatedAt ?? '0', 10) || 0;
      const dateB = Number.parseInt(b.dataset.updatedAt ?? '0', 10) || 0;
      return dateB - dateA;
    })
    .map(item => {
      const updatedAt = Number.parseInt(item.dataset.updatedAt ?? '0', 10) || 0;
      const updatedAtISO = updatedAt > 0 ? new Date(updatedAt * 1000).toISOString() : '';
      const title = item.dataset.title || item.querySelector('h3')?.textContent?.trim() || '';
      return [item.dataset.malId || '', title, item.dataset.status || '', updatedAtISO];
    });

  const csv = [['mal_id', 'title', 'status', 'updated_at'], ...rows]
    .map(row => row.map(csvEscape).join(','))
    .join('\r\n');

  const blob = new Blob([csv], { type: 'text/csv;charset=utf-8' });
  const url = URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = url;
  link.download = 'watchlist.csv';
  document.body.appendChild(link);
  link.click();
  link.remove();
  URL.revokeObjectURL(url);
};

const initWatchlistPage = (): void => {
  let currentSortBy: WatchlistSort = 'date';
  let sortOrderDesc = true;

  sortVisibleWatchlistItems(currentSortBy, sortOrderDesc);

  document.addEventListener('click', e => {
    const target = e.target;
    if (!(target instanceof Element)) return;

    const filterBtn = target.closest<HTMLButtonElement>('button[data-watchlist-filter]');
    if (filterBtn) {
      const status = filterBtn.dataset.watchlistFilter ?? 'all';
      setActiveFilterButton(filterBtn);
      applyWatchlistFilter(status);
      sortVisibleWatchlistItems(currentSortBy, sortOrderDesc);
      return;
    }

    const sortBtn = target.closest<HTMLButtonElement>('button[data-watchlist-sort]');
    if (sortBtn) {
      const sortBy = sortBtn.dataset.watchlistSort === 'title' ? 'title' : 'date';
      currentSortBy = sortBy;
      const display = document.getElementById('sort-by-display');
      if (display) {
        display.textContent = currentSortBy === 'date' ? 'Date Added' : 'Title';
      }

      const dropdownContent = sortBtn.closest('[data-content]');
      dropdownContent?.querySelectorAll('button').forEach(b => {
        b.classList.remove('text-foreground');
        b.classList.add('text-foreground-muted');
      });
      sortBtn.classList.remove('text-foreground-muted');
      sortBtn.classList.add('text-foreground');

      sortVisibleWatchlistItems(currentSortBy, sortOrderDesc);

      const parentDropdown = sortBtn.closest('ui-dropdown') as { close?: () => void } | null;
      parentDropdown?.close?.();
      return;
    }

    const sortOrderBtn = target.closest<HTMLButtonElement>('button[data-watchlist-sort-order]');
    if (sortOrderBtn) {
      sortOrderDesc = !sortOrderDesc;
      const icon = sortOrderBtn.querySelector('svg');
      icon?.classList.toggle('rotate-180', !sortOrderDesc);
      sortVisibleWatchlistItems(currentSortBy, sortOrderDesc);
      return;
    }

    const exportBtn = target.closest<HTMLButtonElement>('button[data-watchlist-export]');
    if (exportBtn) {
      exportWatchlistCsv();
      return;
    }
  });
};

const updateWatchlist = async (
  id: number,
  status: WatchlistStatus,
  display: WatchlistUpdateDisplay,
  title: string,
  source: HTMLElement
): Promise<void> => {
  if (inflight.has(id)) return;
  setBusy(id, true);

  const wasInWatchlist = watchlistIds.has(id);
  watchlistIds.add(id);
  syncIconsForId(id);
  syncRemoveButtonVisibility(id);

  try {
    const response = await requestJson('/api/watchlist', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ animeId: id, status }),
    });

    if (!response.ok) {
      throw new Error('not ok');
    }

    const statusDisplay = document.getElementById(`watchlist-status-display-${id}`);
    if (statusDisplay) {
      statusDisplay.textContent = display;
    }

    closeClosestDropdown(source);
    toast(`Marked ${title} as ${display}`);
  } catch {
    if (!wasInWatchlist) {
      watchlistIds.delete(id);
    }
    syncIconsForId(id);
    syncRemoveButtonVisibility(id);
    toast('Failed to update watchlist');
  } finally {
    setBusy(id, false);
  }
};

const removeWatchlist = async (id: number, title: string, source: HTMLElement): Promise<void> => {
  if (inflight.has(id)) return;
  setBusy(id, true);

  const wasInWatchlist = watchlistIds.has(id);
  watchlistIds.delete(id);
  syncIconsForId(id);
  syncWatchlistDropdown(id, false);

  try {
    const response = await requestJson(`/api/watchlist/${id}`, { method: 'DELETE' });
    if (!response.ok) {
      throw new Error('not ok');
    }

    closeClosestDropdown(source);
    toast(`Removed ${title} from watchlist`);

    const card = source.closest('.watchlist-item');
    if (card instanceof HTMLElement) {
      card.remove();
      const remaining = document.querySelectorAll('.watchlist-item').length;
      if (remaining === 0) {
        window.setTimeout(() => window.location.reload(), 50);
      }
    }
  } catch {
    if (wasInWatchlist) {
      watchlistIds.add(id);
    }
    syncIconsForId(id);
    syncWatchlistDropdown(id, watchlistIds.has(id));
    toast('Failed to update watchlist');
  } finally {
    setBusy(id, false);
    syncRemoveButtonVisibility(id);
  }
};

if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', initWatchlistPage);
} else {
  initWatchlistPage();
}

const initWatchlist = (ids: number[]): void => {
  ids.forEach(id => watchlistIds.add(id));
  ids.forEach(id => {
    syncRemoveButtonVisibility(id);
    syncIconsForId(id);
  });
};

const getRenderedWatchlistIds = (): number[] => {
  const ids = new Set<number>();

  document
    .querySelectorAll<HTMLElement>(
      '[data-watchlist-toggle][data-watchlist-state="in"][data-mal-id]'
    )
    .forEach(button => {
      const id = toInt(button.dataset.malId);
      if (id === null) return;
      ids.add(id);
    });

  return Array.from(ids);
};

const onReady = (fn: () => void): void => {
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', fn, { once: true });
    return;
  }

  fn();
};

const installDelegatedHandlers = (): void => {
  document.addEventListener('click', event => {
    const target = event.target;
    if (!(target instanceof Element)) return;

    const toggleButton = target.closest('[data-watchlist-toggle]') as HTMLElement | null;
    if (toggleButton) {
      event.preventDefault();
      event.stopPropagation();

      const id = toInt(toggleButton.getAttribute('data-mal-id') ?? undefined);
      if (id === null) return;
      const title = toggleButton.getAttribute('data-watchlist-title') ?? 'anime';
      void toggleWatchlist(id, title, toggleButton.dataset.watchlistState);
      return;
    }

    const updateButton = target.closest('[data-watchlist-update]') as HTMLElement | null;
    if (updateButton) {
      event.preventDefault();
      event.stopPropagation();
      const id = toInt(updateButton.getAttribute('data-mal-id') ?? undefined);
      if (id === null) return;
      const status = updateButton.getAttribute('data-watchlist-status') as WatchlistStatus | null;
      const display = updateButton.getAttribute(
        'data-watchlist-display'
      ) as WatchlistUpdateDisplay | null;
      const title = updateButton.getAttribute('data-watchlist-title') ?? 'anime';
      if (!status || !display) return;
      void updateWatchlist(id, status, display, title, updateButton);
      return;
    }

    const removeButton = target.closest('[data-watchlist-remove]') as HTMLElement | null;
    if (removeButton) {
      event.preventDefault();
      event.stopPropagation();
      const id = toInt(removeButton.getAttribute('data-mal-id') ?? undefined);
      if (id === null) return;
      const title = removeButton.getAttribute('data-watchlist-title') ?? 'anime';
      void removeWatchlist(id, title, removeButton);
    }
  });
};

declare global {
  interface Window {
    initWatchlist: (ids: number[]) => void;
    __WATCHLIST_IDS__?: unknown;
  }
}

window.initWatchlist = initWatchlist;

onReady(() => {
  const raw = window.__WATCHLIST_IDS__;
  if (Array.isArray(raw)) {
    const ids: number[] = raw.filter((entry): entry is number => typeof entry === 'number');
    if (ids.length > 0) {
      initWatchlist(ids);
    }
  }

  const renderedWatchlistIds = getRenderedWatchlistIds();
  if (renderedWatchlistIds.length > 0) {
    initWatchlist(renderedWatchlistIds);
  }

  installDelegatedHandlers();
});