import type {
  BlockPlugin,
  CodeBlock,
  TransformContext,
  TransformResult,
} from "org-press";
import { createBlockId, parseBlockParameters } from "org-press";

/**
 * Check if the block content is JavaScript (has imports or exports)
 */
function isJavaScriptBlock(content: string, language: string): boolean {
  // Explicit JavaScript language
  if (['javascript', 'js', 'typescript', 'ts'].includes(language.toLowerCase())) {
    return true;
  }
  // JSON with import/export statements (user wants JS mode)
  if (content.includes('import ') || content.includes('export ')) {
    return true;
  }
  return false;
}

/**
 * Generate the render function code for ECharts
 */
function generateRenderCode(options: {
  containerId: string;
  height: string;
  theme: string;
  renderer: string;
  dataCode: string;
  isModule: boolean;
  moduleId?: string;
}): string {
  const { height, theme, renderer, dataCode, isModule, moduleId } = options;

  const initCode = isModule
    ? `import('${moduleId}').then((module) => {
        try {
          initChart(module.default);
        } catch (err) {
          showError(err);
        }
      }).catch(showError);`
    : `try {
        const chartOption = ${dataCode};
        initChart(chartOption);
      } catch (err) {
        showError(err);
      }`;

  return `
import * as echarts from 'echarts';

// Track chart instances for cleanup
const chartRegistry = new Map();

// Export render function - exporter will call this with container ID
export default function render(containerId) {
  const container = document.getElementById(containerId);
  if (!container) {
    console.error('[ECharts] Container not found:', containerId);
    return;
  }

  // Style the container
  container.className = 'echarts-wrapper';
  container.style.cssText = 'position: relative; width: 100%; height: ${height};';

  // Create inner container for chart
  const chartContainer = document.createElement('div');
  chartContainer.style.cssText = 'width: 100%; height: 100%;';
  container.appendChild(chartContainer);

  function showError(err) {
    console.error('[ECharts] Failed to render chart:', err);
    container.innerHTML = '<div style="color: red; padding: 1rem; border: 1px solid red;">Error rendering chart: ' + (err.message || err) + '</div>';
  }

  function initChart(chartOption) {
    // Dispose existing chart if any (for HMR)
    if (chartRegistry.has(containerId)) {
      chartRegistry.get(containerId).dispose();
    }

    // Initialize ECharts
    const chart = echarts.init(chartContainer, '${theme}', {
      renderer: '${renderer}',
    });

    // Set option
    chart.setOption(chartOption);

    // Handle resize
    const resizeObserver = new ResizeObserver(() => {
      chart.resize();
    });
    resizeObserver.observe(container);

    // Also handle window resize for containers that don't trigger ResizeObserver
    const handleResize = () => chart.resize();
    window.addEventListener('resize', handleResize);

    // Store for cleanup
    chartRegistry.set(containerId, chart);

    // Cleanup on navigation (for SPA)
    const cleanup = () => {
      resizeObserver.disconnect();
      window.removeEventListener('resize', handleResize);
      chart.dispose();
      chartRegistry.delete(containerId);
    };

    // Watch for container removal (works with most SPA routers)
    const observer = new MutationObserver((mutations) => {
      for (const mutation of mutations) {
        for (const removed of mutation.removedNodes) {
          if (removed === container || (removed instanceof Element && removed.contains(container))) {
            cleanup();
            observer.disconnect();
            return;
          }
        }
      }
    });

    if (container.parentElement) {
      observer.observe(container.parentElement, { childList: true, subtree: true });
    }
  }

  ${initCode}
}
`;
}

/**
 * ECharts block plugin for org-press
 *
 * Supports both JSON (inline data) and JavaScript (imports) modes
 *
 * Preview API compatible:
 * - :use echarts -> renders interactive chart
 * - :use echarts | sourceOnly -> shows source code only
 * - :use echarts | withSourceCode -> shows both code and chart
 */
export const echartsPlugin: BlockPlugin = {
  name: 'echarts',
  defaultExtension: 'js',

  /**
   * Transform returns code that renders the ECharts chart
   * - JSON mode: embeds data directly
   * - JS mode: imports data from a separate virtual module (supports imports)
   */
  async transform(block: CodeBlock, context: TransformContext): Promise<TransformResult> {
    // Create stable ID for this block using utility
    const stableId = createBlockId(context.orgFilePath, context.blockIndex);

    // Parse block parameters
    const params = parseBlockParameters(block.meta || "");

    // Check for mode from :use parameter (e.g., :use echarts | sourceOnly)
    const useValue = params.use || 'echarts';
    const useParts = useValue.split('|').map((s: string) => s.trim());
    const mode = useParts.length > 1 ? useParts[1] : 'preview';

    // Handle sourceOnly mode - just return the source code
    if (mode === 'sourceOnly') {
      return {
        code: `// ECharts configuration source (display only)\nexport default ${JSON.stringify(block.value)};`,
      };
    }

    // Get parameters with defaults
    const height = params.height || '400px';
    const theme = params.theme || 'light';
    const renderer = params.renderer || 'canvas';

    // Check if this is JavaScript mode (has imports)
    const isJsMode = isJavaScriptBlock(block.value, block.language);

    if (isJsMode) {
      // JavaScript mode: import data from a virtual module
      // The virtual-blocks plugin will serve the user's code as a module
      const dataModuleId = params.name
        ? `virtual:org-press:block:echarts-data:${context.orgFilePath}:NAME:${params.name}`
        : `virtual:org-press:block:echarts-data:${context.orgFilePath}:${context.blockIndex}`;

      return {
        code: generateRenderCode({
          containerId: stableId,
          height,
          theme,
          renderer,
          dataCode: '',
          isModule: true,
          moduleId: dataModuleId,
        }),
      };
    } else {
      // JSON mode: embed data directly
      return {
        code: generateRenderCode({
          containerId: stableId,
          height,
          theme,
          renderer,
          dataCode: block.value,
          isModule: false,
        }),
      };
    }
  },
};

// Default export for convenience
export default echartsPlugin;