import { Modal, Row, Col, Card, Statistic } from 'antd';
import React, { useEffect, useRef, useState } from 'react';

export type ListFormProps = {
  onClose: (flag?: boolean, formVals?: unknown) => void;
  open: boolean;
  loading: boolean;
  competitivenessData?: API.ManagementList.CompetitivenessData;
};

const Detail: React.FC<ListFormProps> = (props) => {
  const { open, loading, competitivenessData } = props;
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const [currentStep, setCurrentStep] = useState<number>(0);
  const [isStyleInjected, setIsStyleInjected] = useState<boolean>(false);

  const matchingDegree = ['一般', '良好', '优秀', '极好'];

  // 注入进度条样式
  useEffect(() => {
    if (!isStyleInjected) {
      const styleId = 'progress-bar-styles';
      if (!document.getElementById(styleId)) {
        const style = document.createElement('style');
        style.id = styleId;

        // 生成样式
        let styleContent = `
          .progress-container {
            display: flex;
            align-items: center;
            gap: 4px;
            margin-top: 12px;
          }
          
          .progress-text {
            margin-top: 4px;
            display: flex;
            align-items: center;
            gap: 4px;
            justify-content: space-around;
            width: 100%;
            font-weight: 400;
            font-size: 10px;
            color: #999999;
            text-align: center;
          }
          
          .progress-item {
            width: 25%;
            height: 12px;
            background-color: #eee;
            border-radius: 12px;
            overflow: hidden;
            position: relative;
            transition: background-color 0.3s;
          }
          
          .progress-item.active {
            background: linear-gradient(to right, #256bfa, #8c68ff);
          }
        `;

        // 生成半透明进度样式
        for (let i = 0; i <= 100; i++) {
          styleContent += `
            .progress-item.half${i}::before {
              content: '';
              position: absolute;
              left: 0;
              top: 0;
              bottom: 0;
              width: 100%;
              background: linear-gradient(to right, #256bfa ${i}%, #eaeaea ${i}%);
              border-radius: 12px;
            }
          `;
        }

        style.textContent = styleContent;
        document.head.appendChild(style);
      }
      setIsStyleInjected(true);
    }
  }, [isStyleInjected]);

  // 绘制雷达图
  const drawRadarChart = () => {
    if (!canvasRef.current || !competitivenessData?.radarChart) return;

    const canvas = canvasRef.current;
    const ctx = canvas.getContext('2d');
    if (!ctx) return;

    // 清空画布
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    const { skill, experience, education, salary, age, location } = competitivenessData.radarChart;

    //
    const labels = ['学历', '年龄', '工作地', '工作经验', '期望薪资'];
    const data = [education, age, location, experience, salary].map((item) => item * 0.05);

    // 绘制参数
    const width = 120;
    const height = 120;
    const centerX = canvas.width / 2;
    const centerY = canvas.height / 2 + 10;
    const colors = ['#e6e6e6', '#e6e6e6', '#e6e6e6', '#e6e6e6', '#e6e6e6'];
    const maxScore = 5;
    const angleStep = (2 * Math.PI) / labels.length;

    // 1. 绘制背景圆形
    ctx.beginPath();
    ctx.arc(centerX, centerY, width, 0, 2 * Math.PI);
    ctx.fillStyle = '#FFFFFF';
    ctx.fill();
    ctx.closePath();

    // 2. 绘制5层多边形
    ctx.lineWidth = 1;
    for (let i = 5; i > 0; i--) {
      ctx.strokeStyle = colors[i - 1];
      ctx.beginPath();

      labels.forEach((_, index) => {
        const x = centerX + (width / 5) * i * Math.cos(angleStep * index - Math.PI / 2);
        const y = centerY + (height / 5) * i * Math.sin(angleStep * index - Math.PI / 2);
        if (index === 0) {
          ctx.moveTo(x, y);
        } else {
          ctx.lineTo(x, y);
        }
      });

      ctx.closePath();
      ctx.stroke();
    }

    // 3. 绘制坐标轴
    ctx.strokeStyle = '#e6e6e6';
    labels.forEach((_, index) => {
      ctx.beginPath();
      const x1 = centerX + width * 0.6 * Math.cos(angleStep * index - Math.PI / 2);
      const y1 = centerY + height * 0.6 * Math.sin(angleStep * index - Math.PI / 2);
      const x = centerX + width * Math.cos(angleStep * index - Math.PI / 2);
      const y = centerY + height * Math.sin(angleStep * index - Math.PI / 2);
      ctx.moveTo(x1, y1);
      ctx.lineTo(x, y);
      ctx.closePath();
      ctx.stroke();
    });

    // 4. 绘制数据区域
    const pointList: Array<{ x: number; y: number }> = [];
    ctx.strokeStyle = '#256BFA';
    ctx.fillStyle = 'rgba(37,107,250,0.24)';
    ctx.lineWidth = 2;
    ctx.beginPath();

    data.forEach((score, index) => {
      const x = centerX + width * (score / maxScore) * Math.cos(angleStep * index - Math.PI / 2);
      const y = centerY + height * (score / maxScore) * Math.sin(angleStep * index - Math.PI / 2);
      pointList.push({ x, y });

      if (index === 0) {
        ctx.moveTo(x, y);
      } else {
        ctx.lineTo(x, y);
      }
    });

    ctx.closePath();
    ctx.fill();
    ctx.stroke();

    // 5. 绘制数据点
    ctx.fillStyle = '#256BFA';
    pointList.forEach((point) => {
      ctx.beginPath();
      ctx.arc(point.x, point.y, 4, 0, 2 * Math.PI);
      ctx.fill();
    });

    // 6. 绘制标签
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillStyle = '#000';
    ctx.font = 'bold 12px sans-serif';

    labels.forEach((label, index) => {
      const x = centerX + (width + 30) * Math.cos(angleStep * index - Math.PI / 2);
      const y = centerY + (height + 26) * Math.sin(angleStep * index - Math.PI / 2);
      ctx.fillText(label, x, y);
    });
  };

  // 获取进度条类名
  const getProgressClass = (index: number) => {
    if (currentStep === 0) return '';

    const floorIndex = Math.floor(currentStep);

    if (index < floorIndex) {
      return 'active';
    } else if (index === floorIndex) {
      const decimal = currentStep % 1;
      const percent = Math.round(decimal * 100);
      return `half${percent}`;
    } else {
      return '';
    }
  };

  useEffect(() => {
    if (competitivenessData?.matchScore !== undefined) {
      // 计算匹配度
      const score = competitivenessData.matchScore;
      const step = score * 0.04;
      setCurrentStep(step);
    }
  }, [competitivenessData]);

  useEffect(() => {
    if (open && competitivenessData && canvasRef.current) {
      // 初始化Canvas
      const canvas = canvasRef.current;
      canvas.width = 400;
      canvas.height = 320;
      drawRadarChart();
    }
  }, [open, competitivenessData]);

  return (
    <Modal
      title="竞争力分析"
      width={700}
      open={open}
      footer={null}
      onCancel={() => props.onClose()}
      maskClosable={true}
      loading={loading}
      styles={{
        body: {
          minHeight: '600px',
        },
      }}
    >
      <Row gutter={[16, 16]}>
        {/* 统计数据 */}
        <Col span={24}>
          <Row gutter={16}>
            <Col span={6}>
              <Card>
                <Statistic title="总申请人数" value={competitivenessData?.totalApplicants || 0} />
              </Card>
            </Col>
            <Col span={6}>
              <Card>
                <Statistic
                  title="匹配分数"
                  value={competitivenessData?.matchScore || 0}
                  suffix="分"
                />
              </Card>
            </Col>
            <Col span={6}>
              <Card>
                <Statistic title="排名" value={competitivenessData?.rank || 0} suffix="位" />
              </Card>
            </Col>
            <Col span={6}>
              <Card>
                <Statistic
                  title="超过百分比"
                  value={competitivenessData?.percentile || 0}
                  suffix="%"
                />
              </Card>
            </Col>
          </Row>
        </Col>

        {/* 雷达图 */}
        <Col span={24}>
          <Card title="雷达图" size="small">
            {/* 雷达图 */}
            <div style={{ display: 'flex', justifyContent: 'center' }}>
              <canvas
                ref={canvasRef}
                style={{
                  border: 'none',
                }}
              />
            </div>

            {/* 匹配度进度条*/}
            <div style={{ padding: '0 20px', marginTop: '10px' }}>
              <div
                style={{
                  fontWeight: 600,
                  fontSize: '14px',
                  color: '#000000',
                  marginBottom: '10px',
                }}
              >
                职位匹配度
              </div>

              {/* 进度条容器 */}
              <div className="progress-container">
                {matchingDegree.map((_, index) => (
                  <div key={index} className={`progress-item ${getProgressClass(index)}`} />
                ))}
              </div>

              {/* 进度条文字 */}
              <div className="progress-text">
                {matchingDegree.map((text, index) => (
                  <div key={index} style={{ width: '25%' }}>
                    {text}
                  </div>
                ))}
              </div>
            </div>
          </Card>
        </Col>
      </Row>
    </Modal>
  );
};

export default Detail;
