import React, { useEffect, useState, useRef } from 'react';
import ReactEChartsCore from 'echarts-for-react';
import * as echarts from 'echarts';
import { useChart } from '../api/hooks';
import { useUIStore } from '../store/ui';
import { getChartType } from '../lib/chartTypes';

interface Props {
  cellId: string;
  config: Record<string, any>;
}

export function ChartCellView({ cellId, config }: Props) {
  const [chartSpec, setChartSpec] = useState<Record<string, any> | null>(null);
  const [chartType, setChartType] = useState<string>(config.chartType || '');
  const { create, loading, error } = useChart();
  const { addError } = useUIStore();
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (config.chartType && config.params) {
      loadChart(config.chartType, config.params);
    }
  }, [config]);

  const loadChart = async (type: string, params: Record<string, any>) => {
    const result = await create(type, params);
    if (result) {
      setChartSpec(result.spec);
      setChartType(result.chart_type);
    } else if (error) {
      addError(`Chart error: ${error}`);
    }
  };

  if (!chartSpec && !loading) {
    const ct = getChartType(config.chartType || '');
    return (
      <div className="text-center py-8 text-gray-400">
        <svg className="w-12 h-12 mx-auto mb-2 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z" />
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z" />
        </svg>
        <p className="text-sm">
          {ct ? `${ct.label} — use the Visualize tab to configure` : 'Use the Visualize tab to create charts'}
        </p>
      </div>
    );
  }

  return (
    <div ref={containerRef} className="chart-cell-container">
      {loading && (
        <div className="flex items-center justify-center py-8">
          <div className="animate-spin w-6 h-6 border-2 border-brand-500 border-t-transparent rounded-full mr-2" />
          Computing chart...
        </div>
      )}
      {chartSpec && (
        <div className="w-full min-w-0" style={{ minHeight: 350 }}>
          <ReactEChartsCore
            echarts={echarts}
            option={chartSpec}
            style={{ height: 350, width: '100%' }}
            notMerge={true}
            lazyUpdate={true}
            opts={{ renderer: 'canvas' }}
          />
        </div>
      )}
      {error && <p className="text-red-500 text-sm mt-2">{error}</p>}
    </div>
  );
}