'use client';

import { useEffect } from 'react';
import ApexCharts from 'apexcharts';

declare global {
  interface Window {
    Apex?: any;
  }
}

export default function ApexInitializer() {
  useEffect(() => {
    if (typeof window === 'undefined') return;

    window.Apex = {
      ...(window.Apex || {}),
      colors: ['#4CAF50'],
      stroke: { colors: ['#4CAF50'] },
      markers: { colors: ['#4CAF50'] },
      tooltip: { theme: 'light' },
      theme: {
        mode: 'light',
        palette: 'palette1',
        monochrome: { enabled: false },
      },
    };

    try {
      if (ApexCharts && (ApexCharts as any).prototype) {
        (ApexCharts as any).prototype.defaultOptions =
          (ApexCharts as any).prototype.defaultOptions || {};
        (ApexCharts as any).prototype.defaultOptions.theme = {
          mode: 'light',
          palette: 'palette1',
          monochrome: { enabled: false },
        };
      }
    } catch (err) {
      console.warn('ApexInitializer failed:', err);
    }
  }, []);

  return null;
}