/* ECharts React 封装 + 主题化 option 生成器 */
const C_PALETTE = ['#4ea3dd','#5fcfa0','#f5a35e','#9b8cf0','#5cc7d6','#ee8aa0'];
const C_INK3='#93a1b0', C_LINE='#eaf0f5', C_INK2='#5b6b7b';
const C_FONT = "'Noto Sans SC','PingFang SC',sans-serif";
const baseGrid = { left:6, right:14, top:18, bottom:4, containLabel:true };
const axisLabel = { color:C_INK3, fontSize:12, fontFamily:C_FONT };
const splitLine = { lineStyle:{ color:C_LINE, type:'dashed' } };
function tip(extra) {
  return Object.assign({ trigger:'axis', backgroundColor:'rgba(31,45,61,0.92)', borderWidth:0,
    textStyle:{color:'#fff',fontFamily:C_FONT,fontSize:12}, padding:[8,12],
    extraCssText:'border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.18);' }, extra||{});
}

const ChartOpt = {
  trend(months, lines, min=60, max=100, legend=false) {
    return { animation:false, color:C_PALETTE, grid:baseGrid, tooltip:tip(),
      legend:{ show:legend, top:0, right:0, icon:'roundRect', itemWidth:11, itemHeight:11, itemGap:14, textStyle:{color:C_INK2,fontFamily:C_FONT,fontSize:12} },
      xAxis:{ type:'category', data:months, boundaryGap:false, axisLine:{lineStyle:{color:C_LINE}}, axisTick:{show:false}, axisLabel },
      yAxis:{ type:'value', min, max, splitLine, axisLabel },
      series: lines.map(ln=>({ name:ln.name, type:'line', smooth:0.4, data:ln.data, symbol:'circle', symbolSize:7,
        lineStyle:{width:3,color:ln.color}, itemStyle:{color:ln.color,borderWidth:2,borderColor:'#fff'}, connectNulls:true,
        areaStyle: ln.area ? { color:{type:'linear',x:0,y:0,x2:0,y2:1,colorStops:[{offset:0,color:ln.color+'33'},{offset:1,color:ln.color+'00'}]} } : undefined })) };
  },
  ring(value, color1='#4ea3dd', color2='#5fcfa0') {
    return { animation:false, series:[{ type:'pie', radius:['78%','100%'], silent:true, label:{show:false}, labelLine:{show:false},
      data:[{value, itemStyle:{color:{type:'linear',x:0,y:0,x2:1,y2:1,colorStops:[{offset:0,color:color1},{offset:1,color:color2}]}}},
            {value:100-value, itemStyle:{color:'#eaf0f5'}}] }] };
  },
  barH(cats, vals, colors) {
    return { animation:false, grid:{left:6,right:30,top:6,bottom:4,containLabel:true}, tooltip:tip({trigger:'item'}),
      xAxis:{ type:'value', max:100, splitLine, axisLabel:{show:false}, axisLine:{show:false} },
      yAxis:{ type:'category', data:cats, axisLine:{show:false}, axisTick:{show:false}, axisLabel:{color:C_INK2,fontSize:13,fontFamily:C_FONT,fontWeight:600} },
      series:[{ type:'bar', data:vals.map((v,i)=>({value:v, itemStyle:{color:colors[i],borderRadius:[0,6,6,0]}})), barWidth:13,
        label:{show:true,position:'right',color:C_INK2,fontFamily:"'Outfit',sans-serif",fontWeight:700,fontSize:12,formatter:'{c}%'} }] };
  },
  barGroup(cats, groups, min=60, max=100) {
    return { animation:false, color:['#4ea3dd','#5fcfa0','#f5a35e'], grid:baseGrid, tooltip:tip({axisPointer:{type:'shadow'}}),
      legend:{ top:0, right:0, icon:'roundRect', itemWidth:11, itemHeight:11, textStyle:{color:C_INK2,fontFamily:C_FONT,fontSize:12} },
      xAxis:{ type:'category', data:cats, axisLine:{lineStyle:{color:C_LINE}}, axisTick:{show:false}, axisLabel },
      yAxis:{ type:'value', min, max, splitLine, axisLabel },
      series: groups.map(g=>({ name:g.name, type:'bar', data:g.data, barWidth:13, itemStyle:{borderRadius:[4,4,0,0]} })) };
  },
  donut(data) {
    return { animation:false, color:data.map(d=>d.color),
      tooltip:{ trigger:'item', backgroundColor:'rgba(31,45,61,0.92)', borderWidth:0, textStyle:{color:'#fff',fontFamily:C_FONT,fontSize:12}, padding:[8,12], extraCssText:'border-radius:10px;', formatter:'{b}：{c}（{d}%）' },
      legend:{ orient:'vertical', right:4, top:'center', icon:'circle', itemGap:11, textStyle:{color:C_INK2,fontFamily:C_FONT,fontSize:12.5} },
      series:[{ type:'pie', radius:['52%','78%'], center:['32%','50%'], avoidLabelOverlap:true, itemStyle:{borderColor:'#fff',borderWidth:3}, label:{show:false}, labelLine:{show:false}, data }] };
  },
  radar(indicators, series) {
    return { animation:false,
      tooltip:{ backgroundColor:'rgba(31,45,61,0.92)', borderWidth:0, textStyle:{color:'#fff',fontFamily:C_FONT,fontSize:12}, padding:[8,12], extraCssText:'border-radius:10px;' },
      legend:{ show:series.length>1, bottom:0, icon:'roundRect', itemWidth:11, itemHeight:11, textStyle:{color:C_INK2,fontFamily:C_FONT,fontSize:12} },
      radar:{ indicator:indicators, radius:'64%', center:['50%','50%'], axisName:{color:C_INK2,fontSize:12.5,fontFamily:C_FONT,fontWeight:600},
        splitLine:{lineStyle:{color:C_LINE}}, splitArea:{areaStyle:{color:['#fff','#f7fafc']}}, axisLine:{lineStyle:{color:C_LINE}} },
      series:[{ type:'radar', data:series.map((s,i)=>({ value:s.data, name:s.name, lineStyle:{width:2.5,color:s.color}, itemStyle:{color:s.color}, areaStyle:{color:(s.color||C_PALETTE[i])+'2e'}, symbol:'circle', symbolSize:5 })) }] };
  },
  pointsBar(days, vals) {
    return { animation:false, grid:{left:0,right:0,top:12,bottom:0,containLabel:true}, tooltip:tip({axisPointer:{type:'shadow'}}),
      xAxis:{ type:'category', data:days, axisLine:{show:false}, axisTick:{show:false}, axisLabel },
      yAxis:{ type:'value', splitLine, axisLabel:{show:false} },
      series:[{ type:'bar', data:vals, barWidth:'46%', itemStyle:{borderRadius:[6,6,0,0], color:{type:'linear',x:0,y:0,x2:0,y2:1,colorStops:[{offset:0,color:'#f5a35e'},{offset:1,color:'#f5c84b'}]}} }] };
  },
};

function EChart({ option, height=260, style }) {
  const ref = React.useRef(null);
  const inst = React.useRef(null);
  React.useEffect(()=>{
    inst.current = echarts.init(ref.current, null, { renderer:'svg' });
    const onR = ()=> inst.current && inst.current.resize();
    window.addEventListener('resize', onR);
    return ()=>{ window.removeEventListener('resize', onR); inst.current && inst.current.dispose(); };
  }, []);
  React.useEffect(()=>{ if (inst.current) inst.current.setOption(option, true); }, [JSON.stringify(option)]);
  return <div ref={ref} style={{width:'100%', height, ...style}}></div>;
}

Object.assign(window, { ChartOpt, EChart, C_PALETTE });