<template>
  <div ref="chartEl" :class="containerClass" :style="containerStyle"></div>
</template>

<script setup>
import { onMounted, onBeforeUnmount, ref, watch, computed } from 'vue'
import * as echarts from 'echarts'

const props = defineProps({
  // Required data
  data: {
    type: Array,
    required: true,
    default: () => []
  },
  labels: {
    type: Array,
    required: true,
    default: () => []
  },

  // Optional configuration
  title: {
    type: String,
    default: ''
  },
  height: {
    type: [String, Number],
    default: '256px'
  },
  width: {
    type: [String, Number],
    default: '100%'
  },
  color: {
    type: String,
    default: '#3b82f6'
  },
  smooth: {
    type: Boolean,
    default: true
  },
  showArea: {
    type: Boolean,
    default: true
  },
  showSymbol: {
    type: Boolean,
    default: true
  },
  symbolSize: {
    type: Number,
    default: 6
  },
  lineWidth: {
    type: Number,
    default: 3
  },
  areaOpacity: {
    type: Number,
    default: 0.1
  },

  // Advanced configuration override
  chartConfig: {
    type: Object,
    default: () => ({})
  }
})

const chartEl = ref(null)
let chart = null

// Computed styles
const containerClass = computed(() => 'w-full')
const containerStyle = computed(() => ({
  height: typeof props.height === 'number' ? `${props.height}px` : props.height,
  width: typeof props.width === 'number' ? `${props.width}px` : props.width
}))

// Generate chart options from props
const chartOptions = computed(() => {
  const baseOptions = {
    title: props.title ? {
      text: props.title,
      left: 'center',
      textStyle: {
        fontSize: 16,
        fontWeight: 'normal',
        color: '#374151'
      }
    } : undefined,
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(255, 255, 255, 0.95)',
      borderColor: '#e5e7eb',
      borderWidth: 1,
      textStyle: {
        color: '#374151'
      }
    },
    grid: {
      left: 24,
      right: 24,
      top: props.title ? 60 : 24,
      bottom: 24,
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: props.labels,
      axisLine: {
        lineStyle: {
          color: '#e5e7eb'
        }
      },
      axisLabel: {
        color: '#6b7280'
      }
    },
    yAxis: {
      type: 'value',
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        color: '#6b7280'
      },
      splitLine: {
        lineStyle: {
          color: '#f3f4f6'
        }
      }
    },
    series: [
      {
        name: props.title || 'Data',
        type: 'line',
        data: props.data,
        smooth: props.smooth,
        symbol: props.showSymbol ? 'circle' : 'none',
        symbolSize: props.symbolSize,
        lineStyle: {
          width: props.lineWidth,
          color: props.color
        },
        itemStyle: {
          color: props.color
        },
        areaStyle: props.showArea ? {
          opacity: props.areaOpacity,
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: props.color
              },
              {
                offset: 1,
                color: 'transparent'
              }
            ]
          }
        } : undefined
      }
    ]
  }

  // Merge with custom config
  return {
    ...baseOptions,
    ...props.chartConfig
  }
})

function initChart() {
  if (!chartEl.value) return

  chart = echarts.init(chartEl.value)
  chart.setOption(chartOptions.value)
}

function resize() {
  if (chart) {
    chart.resize()
  }
}

// Watch for data changes
watch(() => [props.data, props.labels], () => {
  if (chart) {
    chart.setOption(chartOptions.value, true)
  }
}, { deep: true })

// Watch for config changes
watch(() => chartOptions.value, (newOptions) => {
  if (chart) {
    chart.setOption(newOptions, true)
  }
}, { deep: true })

onMounted(() => {
  initChart()
  window.addEventListener('resize', resize)
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', resize)
  if (chart) {
    chart.dispose()
    chart = null
  }
})
</script>

