import { useRef, useEffect } from 'react';
import * as echarts from 'echarts';
import { ContentPage } from './ContentPage';
import type { RiskIndicator } from '../types/data';

interface RiskPieProps {
  label: string;
  value: number;
}

const RiskPie = ({ label, value }: RiskPieProps) => {
  const chartRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!chartRef.current) return;
    const myChart = echarts.init(chartRef.current);

    const option: echarts.EChartsOption = {
      animation: false,
      silent: true,
      series: [
        {
          type: 'pie',
          radius: ['35%', '65%'],
          center: ['50%', '48%'],
          startAngle: 90,
          label: {
            show: true,
            position: 'outside',
            formatter: '{b}\n{d}%',
            fontSize: 9,
            color: '#666'
          },
          labelLine: {
            show: true,
            length: 8,
            length2: 5,
            lineStyle: { color: '#ccc' }
          },
          itemStyle: {
            borderColor: '#fff',
            borderWidth: 1
          },
          data: [
            {
              value: value,
              name: label,
              itemStyle: { color: '#36CBCB' }
            },
            {
              value: 100 - value,
              name: '其他',
              itemStyle: { color: '#40A9FF' }
            }
          ]
        }
      ]
    };

    myChart.setOption(option);
    return () => myChart.dispose();
  }, [value, label]);

  return (
    <div className="echarts-canvas-container relative w-full h-full">
      <div ref={chartRef} className="echarts-inner w-full h-full" />
      <img className="echarts-export-image absolute inset-0 w-full h-full object-contain hidden" />
    </div>
  );
};

interface RiskPiePairProps {
  title: string;
  description?: string;
  indicator: RiskIndicator;
}

const RiskPiePair = ({ title, description, indicator }: RiskPiePairProps) => {
  return (
    <div className="flex flex-col w-full break-inside-avoid">
      <div className="subtitle-container mb-1">
        <span className="blue-bar-subtitle h-[12px]"></span>
        <h4 className="text-[16px] font-semibold text-[#333]">{title}</h4>
      </div>
      {description && (
        <div className="bg-gray-50 border border-gray-200 rounded-md px-3 py-1.5 mb-1">
          <p className="text-[11px] text-gray-600 leading-relaxed">{description}</p>
        </div>
      )}
      <div className="flex gap-4">
        <div className="flex-1 flex flex-col items-center">
          <div className="w-full bg-white border-[0.5px] border-gray-100 rounded-lg p-2" style={{ height: '150px' }}>
            <RiskPie label={indicator.label} value={indicator.value} />
          </div>
          <span className="text-[10px] font-semibold text-black mt-1">本机构</span>
        </div>
        <div className="flex-1 flex flex-col items-center">
          <div className="w-full bg-white border-[0.5px] border-gray-100 rounded-lg p-2" style={{ height: '150px' }}>
            <RiskPie label={indicator.label} value={indicator.marketValue} />
          </div>
          <span className="text-[10px] font-semibold text-black mt-1">全量大盘数据</span>
        </div>
      </div>
    </div>
  );
};

interface RiskIndicatorWithDesc extends RiskIndicator {
  description?: string;
}

interface Page05RiskProps {
  riskData: {
    invoiceRisk: RiskIndicatorWithDesc;
    highTech: RiskIndicatorWithDesc;
    importExport: RiskIndicatorWithDesc;
    prepaidTax: RiskIndicatorWithDesc;
  };
}

export const Page05Risk = ({ riskData }: Page05RiskProps) => {
  return (
    <ContentPage pageNumber={5} hidePageNumber={true}>
      <div className="flex flex-col space-y-3 -mx-[20px] px-[20px]">
        <div className="title-container mb-0">
          <span className="blue-bar-title h-[20px]"></span>
          <h3 className="text-[20px] font-semibold text-[#333333] tracking-tight">税务与进出口情况分析</h3>
        </div>

        <RiskPiePair title="发票高风险企业占比" description={riskData.invoiceRisk.description} indicator={riskData.invoiceRisk} />
        <RiskPiePair title="高新技术企业占比" description={riskData.highTech.description} indicator={riskData.highTech} />
        <RiskPiePair title="进出口企业占比" description={riskData.importExport.description} indicator={riskData.importExport} />
        <RiskPiePair title="预缴税款企业占比" description={riskData.prepaidTax.description} indicator={riskData.prepaidTax} />
      </div>
    </ContentPage>
  );
};
