'use client';

import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import { toJS } from 'mobx';
import { useCallback, useEffect, useState } from 'react';

import { useStores } from '@/app/(root)/AppProviders';
import { toast } from '@/components/toast/Toast';
import { enableDevTools, isDev } from '@/utils/environment';

const DEVTOOLS_TOGGLE_EVENT = 'suno-devtools-toggle';

/**
 * Harness the super secret dev tools
 */
const SunoDevTools: React.FC = () => {
  const rootStore = useStores();
  const [showDevTools, setShowDevTools] = useState<boolean>(() => {
    if (typeof window === 'undefined') {
      return false;
    }
    return Boolean((window as any).__SUNO_DEV__?.devToolsVisible);
  });

  const toggleDevTools = useCallback(() => {
    setShowDevTools((prev) => !prev);
  }, []);

  // Super secret developer tools
  useEffect(() => {
    if (isDev && typeof window !== 'undefined') {
      (window as any).__SUNO_DEV__ = {
        ...(window as any).__SUNO_DEV__,
        rootStore,
        toJS,
        toggleDevTools,
        toast,
      };
    }
  }, [rootStore, toggleDevTools]);

  useEffect(() => {
    if (!isDev || typeof window === 'undefined') {
      return;
    }
    const devApi = ((window as any).__SUNO_DEV__ ?? {}) as Record<string, any>;
    devApi.devToolsVisible = showDevTools;
    (window as any).__SUNO_DEV__ = devApi;
    window.dispatchEvent(
      new CustomEvent(DEVTOOLS_TOGGLE_EVENT, {
        detail: { visible: showDevTools },
      })
    );
  }, [showDevTools]);

  if (!enableDevTools) {
    return null;
  }

  return (
    <>
      {showDevTools && (
        <ReactQueryDevtools buttonPosition='top-right' position='top' />
      )}
    </>
  );
};

export default SunoDevTools;