// ============================================
// 게이지 차트 모듈 (이미지 아이콘 버전)
// 공통 모듈 활용 (ErrorHandler, DOMUtils, EventManager, Utils)
// ============================================

class GaugeChart {
  // 상수 정의
  static CONSTANTS = {
    MIN_PERCENT: 0.14, // 최소 표시 퍼센트 (14%)
    ANIMATION_DURATION: 1400, // 애니메이션 시간 (ms)
    PHASE2_DURATION: 800, // 초과 시 2단계 애니메이션 시간
    ICON_HIDE_THRESHOLD: 0.7, // 아이콘 숨김 임계값 (70%)
  };

  static ICON_CONFIG = {
    rocket: { width: 18, height: 48, offsetX: 9, offsetY: 24, outerOffset: 30 },
    snail: {
      width: 75, // 50 → 75 (1.5배)
      height: 64.5, // 43 → 64.5 (1.5배)
      offsetX: 37.5, // 25 → 37.5 (1.5배)
      offsetY: 32.25, // 21.5 → 32.25 (1.5배)
      outerOffset: 30, // 유지
    },
  };

  constructor(config, dependencies = {}) {
    // 의존성 주입 (폴백 포함)
    this.domUtils = dependencies.domUtils || (typeof DOMUtils !== 'undefined' ? DOMUtils : null);
    this.errorHandler = dependencies.errorHandler || (typeof ErrorHandler !== 'undefined' ? ErrorHandler : null);
    this.eventManager = dependencies.eventManager || (typeof eventManager !== 'undefined' ? eventManager : null);
    this.utils = dependencies.utils || (typeof Utils !== 'undefined' ? Utils : null);
    this.animationUtils = dependencies.animationUtils || (typeof AnimationUtils !== 'undefined' ? AnimationUtils : null);

    // 이벤트 리스너 ID 저장 (정리용)
    this.listenerIds = [];

    try {
      if (!config || typeof config !== 'object') {
        this._handleError(new Error('config가 유효하지 않습니다.'), 'constructor');
        config = {};
      }

      this.config = {
        size: config.size || 832,
        strokeWidth: config.strokeWidth || 31,
        maxValue: config.maxValue || 50,
        padding: config.padding || 20,
        outerTextOffset: config.outerTextOffset || 6,
        innerTextOffset: config.innerTextOffset || 35,
        dotRadius: config.dotRadius || 7,
        // 아이콘 이미지 경로 설정
        rocketIconPath:
          config.rocketIconPath || "/img/ico/icon-rocket.svg",
        snailIconPath:
          config.snailIconPath || "/img/ico/icon-snail.svg",
      };

      this.svg = null;
      this.center = 0;
      this.radius = 0;
      this.animated = false;
    } catch (error) {
      this._handleError(error, 'constructor');
    }
  }

  /**
   * 에러 처리 헬퍼
   * @private
   */
  _handleError(error, context, additionalInfo = {}) {
    if (this.errorHandler) {
      this.errorHandler.handle(error, {
        context: `GaugeChart.${context}`,
        component: 'GaugeChart',
        ...additionalInfo
      }, false);
    } else {
      console.error(`[GaugeChart] ${context}:`, error, additionalInfo);
    }
  }

  // ============================================
  // 초기화
  // ============================================

  init() {
    try {
      this.svg = this.domUtils?.$("#gauge") || document.getElementById("gauge");
      if (!this.svg) {
        this._handleError(new Error('게이지 SVG 요소를 찾을 수 없습니다.'), 'init');
        return;
      }

      this._calculateDimensions();
      this._setupViewBox();
    } catch (error) {
      this._handleError(error, 'init');
    }
  }

  _calculateDimensions() {
    try {
      const { size, strokeWidth, padding } = this.config;
      if (typeof size !== 'number' || typeof strokeWidth !== 'number' || typeof padding !== 'number') {
        this._handleError(new Error('config 값이 유효하지 않습니다.'), '_calculateDimensions');
        return;
      }

      this.center = size / 2;
      this.radius = size / 2 - strokeWidth / 2 - padding;
    } catch (error) {
      this._handleError(error, '_calculateDimensions');
    }
  }

  _setupViewBox() {
    try {
      if (!this.svg) {
        this._handleError(new Error('svg 요소가 없습니다.'), '_setupViewBox');
        return;
      }

      const { size } = this.config;
      if (typeof size !== 'number') {
        this._handleError(new Error('size가 유효하지 않습니다.'), '_setupViewBox');
        return;
      }

      const extraSpace = 100;
      this.svg.setAttribute(
        "viewBox",
        `-50 -50 ${size + 100} ${size + extraSpace}`
      );
      this.svg.setAttribute("preserveAspectRatio", "xMidYMid meet");
    } catch (error) {
      this._handleError(error, '_setupViewBox');
    }
  }

  // ============================================
  // 게이지 업데이트
  // ============================================

  update(value, labelValue = value) {
    try {
      if (!this.svg) {
        console.warn("[GaugeChart] svg 요소가 없습니다.");
        return;
      }

      // 입력값 유효성 검증
      if (typeof value !== 'number' || isNaN(value) || value < 0) {
        this._handleError(new Error(`유효하지 않은 value: ${value}`), 'update');
        return;
      }

      const shouldAnimate = !this.animated;
      this.svg.innerHTML = "";

      const { percent, angle } = this._calculateAngle(value);
      const isOverMax = value > this.config.maxValue;

      this._createTextPaths();
      this._createBackgroundArc(isOverMax);
      this._createFilledArc(angle, isOverMax, shouldAnimate);
      this._addMyLearningText(value, labelValue, percent, angle, shouldAnimate);
      this._addEndIcon(angle, value, shouldAnimate);
      this._addAverageLearningText(value, percent);

      if (shouldAnimate) {
        this.animated = true;
      }
    } catch (error) {
      this._handleError(error, 'update', { value });
    }
  }

  _calculateAngle(value) {
    const { maxValue } = this.config;
    const { MIN_PERCENT } = GaugeChart.CONSTANTS;

    let percent;

    if (value <= maxValue) {
      percent = value / maxValue;
      percent = Math.max(percent, MIN_PERCENT);
    } else {
      percent = 2 - value / maxValue;
      percent = Math.max(percent, 0.1);
    }

    const angle = -180 + percent * 180;

    return { percent, angle };
  }

  // ============================================
  // SVG 생성 메서드
  // ============================================

  _createTextPaths() {
    const defs = this._createSVGElement("defs");

    // 외곽 텍스트 경로
    const outerArc = this._createPathElement(
      "outerArc",
      this._createArcPath(this.radius - this.config.outerTextOffset, -180, 0)
    );
    defs.appendChild(outerArc);

    // 내부 텍스트 경로
    const innerArc = this._createPathElement(
      "innerArc",
      this._createArcPath(this.radius - this.config.innerTextOffset, -180, 0)
    );
    defs.appendChild(innerArc);

    this.svg.appendChild(defs);
  }

  _createBackgroundArc(isOverMax) {
    const bg = this._createPathElement(
      null,
      this._createArcPath(this.radius, -180, 0)
    );

    if (isOverMax) {
      bg.setAttribute("stroke", "#D8823B");
    } else {
      bg.setAttribute("class", "bg-arc");
      bg.setAttribute("stroke", "#72451F");
      bg.setAttribute("stroke-opacity", "0.1");
    }

    bg.setAttribute("stroke-width", this.config.strokeWidth);
    bg.setAttribute("stroke-linecap", "round");
    bg.setAttribute("fill", "none");

    this.svg.appendChild(bg);
  }

  _createFilledArc(angle, isOverMax, shouldAnimate) {
    const gradient = this._createGradient(angle);
    const fg = this._createPathElement(null, "");

    fg.setAttribute("stroke", isOverMax ? "url(#arcSweepGradient)" : "#e89555");
    fg.setAttribute("stroke-width", this.config.strokeWidth);
    fg.setAttribute("stroke-linecap", "round");
    fg.setAttribute("fill", "none");

    this.svg.appendChild(fg);

    if (shouldAnimate) {
      this._animateFilledArc(fg, angle, isOverMax);
    } else {
      fg.setAttribute("d", this._createArcPath(this.radius, -180, angle));
    }
  }

  _createGradient(angle) {
    try {
      if (!this.svg) {
        this._handleError(new Error('svg 요소가 없습니다.'), '_createGradient');
        return null;
      }

      const defs = this.domUtils?.$("defs", this.svg) || this.svg.querySelector("defs");
      if (!defs) {
        this._handleError(new Error('defs 요소를 찾을 수 없습니다.'), '_createGradient');
        return null;
      }

      let gradient = this.domUtils?.$("#arcSweepGradient", defs) || defs.querySelector("#arcSweepGradient");

      if (!gradient) {
        gradient = this._createSVGElement("linearGradient");
        gradient.setAttribute("id", "arcSweepGradient");
        gradient.setAttribute("x1", "0%");
        gradient.setAttribute("y1", "0%");
        gradient.setAttribute("x2", "100%");
        gradient.setAttribute("y2", "0%");

        const colors = [
          { offset: "0%", color: "#72451F" },
          { offset: "100%", color: "#D8823B" },
        ];

        colors.forEach(({ offset, color }) => {
          const stop = this._createSVGElement("stop");
          stop.setAttribute("offset", offset);
          stop.setAttribute("stop-color", color);
          gradient.appendChild(stop);
        });

        defs.appendChild(gradient);
      }

      gradient.setAttribute(
        "gradientTransform",
        `rotate(${angle - 90}, 0.5, 0.5)`
      );

      return gradient;
    } catch (error) {
      this._handleError(error, '_createGradient', { angle });
      return null;
    }
  }

  // ============================================
  // 애니메이션
  // ============================================

  _animateFilledArc(element, targetAngle, isOverMax) {
    const { MIN_PERCENT, ANIMATION_DURATION, PHASE2_DURATION } =
      GaugeChart.CONSTANTS;
    const startAngle = -180 + MIN_PERCENT * 180;
    const fullAngle = 0;

    element.setAttribute(
      "d",
      this._createArcPath(this.radius, -180, startAngle)
    );

    if (isOverMax) {
      this._animateTwoPhase(
        element,
        startAngle,
        fullAngle,
        targetAngle,
        ANIMATION_DURATION,
        PHASE2_DURATION
      );
    } else {
      this._animateSinglePhase(
        element,
        startAngle,
        targetAngle,
        ANIMATION_DURATION
      );
    }
  }

  _animateSinglePhase(element, startAngle, endAngle, duration) {
    const startTime = performance.now();

    const animate = (currentTime) => {
      const elapsed = currentTime - startTime;
      const progress = Math.min(elapsed / duration, 1);
      const easeOut = this._easeOutCubic(progress);

      const currentAngle = startAngle + (endAngle - startAngle) * easeOut;
      element.setAttribute(
        "d",
        this._createArcPath(this.radius, -180, currentAngle)
      );

      if (progress < 1) {
        requestAnimationFrame(animate);
      }
    };

    requestAnimationFrame(animate);
  }

  _animateTwoPhase(
    element,
    startAngle,
    midAngle,
    endAngle,
    phase1Duration,
    phase2Duration
  ) {
    const startTime = performance.now();

    const animate = (currentTime) => {
      const elapsed = currentTime - startTime;

      if (elapsed < phase1Duration) {
        // Phase 1: 15% → 100%
        const progress = elapsed / phase1Duration;
        const easeOut = this._easeOutCubic(progress);
        const currentAngle = startAngle + (midAngle - startAngle) * easeOut;
        element.setAttribute(
          "d",
          this._createArcPath(this.radius, -180, currentAngle)
        );
        requestAnimationFrame(animate);
      } else if (elapsed < phase1Duration + phase2Duration) {
        // Phase 2: 100% → 최종값
        const progress = (elapsed - phase1Duration) / phase2Duration;
        const easeOut = this._easeOutCubic(progress);
        const currentAngle = midAngle + (endAngle - midAngle) * easeOut;
        element.setAttribute(
          "d",
          this._createArcPath(this.radius, -180, currentAngle)
        );
        requestAnimationFrame(animate);
      } else {
        // 완료
        element.setAttribute(
          "d",
          this._createArcPath(this.radius, -180, endAngle)
        );
      }
    };

    requestAnimationFrame(animate);
  }

  // ============================================
  // 텍스트 및 아이콘
  // ============================================

  _addMyLearningText(value, labelValue, percent, angle, shouldAnimate) {
    try {
      if (!this.svg) {
        this._handleError(new Error('svg 요소가 없습니다.'), '_addMyLearningText');
        return;
      }

      const text = this._createTextElement(
        "나의 학습",
        labelValue,
        percent,
        this.config.maxValue
      );

      if (!text) {
        this._handleError(new Error('text 요소를 생성할 수 없습니다.'), '_addMyLearningText');
        return;
      }

      this.svg.appendChild(text);

      const textPath = this.domUtils?.$("textPath", text) || text.querySelector("textPath");
      if (!textPath) {
        this._handleError(new Error('textPath 요소를 찾을 수 없습니다.'), '_addMyLearningText');
        return;
      }

      const finalOffset = this._calculateTextOffset(value, percent);

      if (shouldAnimate) {
        this._animateText(
          textPath,
          15,
          finalOffset,
          GaugeChart.CONSTANTS.ANIMATION_DURATION
        );
      } else {
        textPath.setAttribute("startOffset", `${finalOffset}%`);
      }

      // 클릭 이벤트 추가: mypage.html로 이동
      if (this.domUtils) {
        this.domUtils.setStyles(text, { cursor: "pointer" });
      } else {
        text.style.cursor = "pointer";
      }

      const clickHandler = () => {
        try {
          window.location.href = "mypage.php";
        } catch (error) {
          this._handleError(error, '_addMyLearningText.clickHandler');
        }
      };

      if (this.eventManager) {
        const listenerId = this.eventManager.on(text, "click", clickHandler);
        this.listenerIds.push({ element: text, id: listenerId, type: 'click' });
      } else {
        text.addEventListener("click", clickHandler);
      }
    } catch (error) {
      this._handleError(error, '_addMyLearningText', { value, labelValue, percent, angle, shouldAnimate });
    }
  }

  _createTextElement(label, value, percent, maxValue) {
    const text = this._createSVGElement("text");
    text.setAttribute("class", "my-learning-text");
    text.setAttribute("font-size", "16");
    text.setAttribute("font-weight", "700");
    text.setAttribute("fill", "#FFF");
    text.setAttribute("stroke", "rgba(0, 0, 0, 0.30)");
    text.setAttribute("stroke-width", "2");
    text.setAttribute("paint-order", "stroke fill");

    const textPath = this._createSVGElement("textPath");
    textPath.setAttributeNS(
      "http://www.w3.org/1999/xlink",
      "xlink:href",
      "#outerArc"
    );
    textPath.setAttribute("text-anchor", "middle");
    textPath.textContent = `${label} : ${value}분 ＞`;

    text.appendChild(textPath);
    return text;
  }

  _calculateTextOffset(value, percent) {
    if (value > this.config.maxValue) {
      return 95;
    }
    return Math.max(10, percent * 100 - 4.5);
  }

  _animateText(element, startOffset, endOffset, duration) {
    const startTime = performance.now();

    const animate = (currentTime) => {
      const elapsed = currentTime - startTime;
      const progress = Math.min(elapsed / duration, 1);
      const easeOut = this._easeOutCubic(progress);
      const currentOffset = startOffset + (endOffset - startOffset) * easeOut;

      element.setAttribute("startOffset", `${currentOffset}%`);

      if (progress < 1) {
        requestAnimationFrame(animate);
      }
    };

    requestAnimationFrame(animate);
  }

  _addEndIcon(angle, value, shouldAnimate) {
    const { ICON_HIDE_THRESHOLD } = GaugeChart.CONSTANTS;

    // 70%~100% 사이에는 아이콘 표시하지 않음
    if (
      value >= this.config.maxValue * ICON_HIDE_THRESHOLD &&
      value <= this.config.maxValue
    ) {
      return;
    }

    const isOverMax = value > this.config.maxValue;
    const iconType = isOverMax ? "rocket" : "snail";
    const iconConfig = GaugeChart.ICON_CONFIG[iconType];

    const icon = this._createIconElement(iconType);
    this.svg.appendChild(icon);

    if (shouldAnimate) {
      this._animateIcon(icon, angle, iconConfig, isOverMax);
    } else {
      this._positionIcon(icon, angle, iconConfig, 0);
    }
  }

  _createIconElement(type) {
    const icon = this._createSVGElement("g");

    // image 요소 생성
    const image = this._createSVGElement("image");
    const iconConfig = GaugeChart.ICON_CONFIG[type];

    // 이미지 경로 설정
    const imagePath =
      type === "rocket"
        ? this.config.rocketIconPath
        : this.config.snailIconPath;

    image.setAttributeNS(
      "http://www.w3.org/1999/xlink",
      "xlink:href",
      imagePath
    );
    image.setAttribute("width", iconConfig.width);
    image.setAttribute("height", iconConfig.height);

    icon.appendChild(image);
    return icon;
  }

  _animateIcon(icon, targetAngle, iconConfig, isOverMax) {
    const { MIN_PERCENT, ANIMATION_DURATION } = GaugeChart.CONSTANTS;
    const startAngle = -180 + MIN_PERCENT * 180;
    const fullAngle = 0;
    const angleOffset = -3;

    this._positionIcon(icon, startAngle, iconConfig, angleOffset);

    if (isOverMax) {
      // 초과 시: 100%까지만
      this._animateIconPosition(
        icon,
        startAngle,
        fullAngle,
        iconConfig,
        angleOffset,
        ANIMATION_DURATION
      );
    } else {
      // 정상 범위: 최종 각도까지
      this._animateIconPosition(
        icon,
        startAngle,
        targetAngle,
        iconConfig,
        angleOffset,
        ANIMATION_DURATION
      );
    }
  }

  _animateIconPosition(
    icon,
    startAngle,
    endAngle,
    iconConfig,
    angleOffset,
    duration
  ) {
    const startTime = performance.now();

    const animate = (currentTime) => {
      const elapsed = currentTime - startTime;
      const progress = Math.min(elapsed / duration, 1);
      const easeOut = this._easeOutCubic(progress);

      const currentAngle = startAngle + (endAngle - startAngle) * easeOut;
      this._positionIcon(icon, currentAngle, iconConfig, angleOffset);

      if (progress < 1) {
        requestAnimationFrame(animate);
      }
    };

    requestAnimationFrame(animate);
  }

  _positionIcon(icon, angle, iconConfig, angleOffset = 0) {
    const { offsetX, offsetY, outerOffset } = iconConfig;
    const position = this._polarToCartesian(
      this.center,
      this.center,
      this.radius + outerOffset,
      angle + angleOffset
    );

    const rotation =
      angle + (iconConfig === GaugeChart.ICON_CONFIG.snail ? 90 : 0);

    icon.setAttribute(
      "transform",
      `translate(${position.x - offsetX}, ${position.y - offsetY}) rotate(${rotation}, ${offsetX}, ${offsetY})`
    );
  }

  _addAverageLearningText(value, percent) {
    const text = this._createSVGElement("text");
    text.setAttribute("font-size", "13");
    text.setAttribute("font-weight", "400");
    text.setAttribute("fill", "#4A4947");

    const textPath = this._createSVGElement("textPath");
    textPath.setAttributeNS(
      "http://www.w3.org/1999/xlink",
      "xlink:href",
      "#innerArc"
    );

    const offset =
      value > this.config.maxValue ? Math.max(10, percent * 100) : 100;
    const avgMinutes = Math.max(0, Math.round(Number(this.config.maxValue) || 0));

    textPath.setAttribute("startOffset", `${offset}%`);
    textPath.setAttribute("text-anchor", "end");
    textPath.textContent = `전체 평균 학습 : ${avgMinutes.toLocaleString("ko-KR")}분`;

    text.appendChild(textPath);
    this.svg.appendChild(text);
  }

  // ============================================
  // 유틸리티 메서드
  // ============================================

  _createSVGElement(type) {
    return document.createElementNS("http://www.w3.org/2000/svg", type);
  }

  _createPathElement(id, d) {
    const path = this._createSVGElement("path");
    if (id) path.setAttribute("id", id);
    if (d) path.setAttribute("d", d);
    return path;
  }

  _polarToCartesian(cx, cy, r, angle) {
    const rad = (angle * Math.PI) / 180;
    return {
      x: cx + r * Math.cos(rad),
      y: cy + r * Math.sin(rad),
    };
  }

  _createArcPath(r, startAngle, endAngle) {
    const start = this._polarToCartesian(
      this.center,
      this.center,
      r,
      startAngle
    );
    const end = this._polarToCartesian(this.center, this.center, r, endAngle);
    return `M ${start.x} ${start.y} A ${r} ${r} 0 0 1 ${end.x} ${end.y}`;
  }

  _easeOutCubic(t) {
    return 1 - Math.pow(1 - t, 3);
  }

  /**
   * 리소스 정리 (이벤트 리스너 제거)
   */
  destroy() {
    try {
      // 이벤트 리스너 제거
      if (this.eventManager && this.listenerIds.length > 0) {
        this.listenerIds.forEach(({ element, id }) => {
          this.eventManager.off(element, id);
        });
        this.listenerIds = [];
      }

      // 참조 정리
      this.svg = null;
      this.config = null;
      this.center = 0;
      this.radius = 0;
      this.animated = false;
    } catch (error) {
      this._handleError(error, 'destroy');
    }
  }
}