const util = require('../../utils/util')

Component({
  properties: {
    duration: { type: Number, value: 60 },
    remaining: { type: Number, value: 60 },
    size: { type: Number, value: 280 },
    ringWidth: { type: Number, value: 14 },
    status: { type: String, value: 'idle' },
    primaryColor: { type: String, value: '#FF6B35' },
    primaryLightColor: { type: String, value: '#FF8C5A' },
    // Track (background ring) color. Caller passes a darker shade in dark mode
    // so the ring isn't an eye-searing light circle on a dark background.
    trackColor: { type: String, value: '#EEEEEE' },
    // Total elapsed seconds (since start). Shown in the ring center once the
    // countdown hits 0 (overtime mode) - replaces the old +Xs badge.
    elapsed: { type: Number, value: 0 },
    // Tick count. Caller passes the duration (one tick per second, capped at
    // 60 to avoid clutter). 0 = no ticks drawn. Quarter ticks are emphasized.
    ticks: { type: Number, value: 0 },
    // Small secondary label under the big time (e.g. "目标 30 秒"). Empty = hidden.
    subText: { type: String, value: '' },
    // ---- Circuit (循环训练) set progress ----
    // An outer band of arc segments, one per set, wrapped around the countdown
    // ring. sets <= 0 (default) disables the band entirely so single/free mode
    // renders exactly as before (zero extra draw cost).
    sets: { type: Number, value: 0 },
    // 1-based index of the set the CircuitTimer is currently on. While resting it
    // still points at the just-finished set (same contract as the old dots panel):
    // working -> sets before it are done, itself is active;
    // resting -> itself is done, the next set is highlighted green.
    currentSet: { type: Number, value: 0 },
    resting: { type: Boolean, value: false },
    // Highlight color for the "next set" preview during rest.
    successColor: { type: String, value: '#00B578' }
  },

  data: {
    displayTime: '00:00'
  },

  observers: {
    'remaining, status, duration, elapsed'() {
      // 倒计时阶段显示剩余;达标后 remaining 归零,改显总训练时长(overtime 模式)
      const shown = this.data.remaining > 0 ? this.data.remaining : (this.data.elapsed || 0)
      this.setData({
        displayTime: util.formatTime(shown)
      })
    },

    'remaining, duration, size, ringWidth, primaryColor, primaryLightColor, trackColor, ticks'() {
      this._draw()
    },

    // Set-progress band: re-render and (re)arm / stop the breathing loop.
    'sets, currentSet, resting, status'() {
      this._syncSetPulse()
    }
  },

  lifetimes: {
    ready() {
      const query = this.createSelectorQuery()
      query.select('#ringCanvas')
        .fields({ node: true, size: true })
        .exec((res) => {
          if (!res || !res[0] || !res[0].node) return
          const canvas = res[0].node
          const dpr = wx.getWindowInfo().pixelRatio || 2
          const displaySize = this.data.size
          canvas.width = displaySize * dpr
          canvas.height = displaySize * dpr
          this._ctx = canvas.getContext('2d')
          this._dpr = dpr
          this._canvas = canvas
          this._draw()
          this._syncSetPulse()
        })
    },

    detached() {
      this._stopSetPulse()
    }
  },

  methods: {
    // '#FF6B35' -> [255, 107, 53]
    _hexToRgb(hex) {
      const m = /^#?([0-9a-f]{6})$/i.exec(hex || '')
      if (!m) return [255, 107, 53]
      const n = parseInt(m[1], 16)
      return [(n >> 16) & 255, (n >> 8) & 255, n & 255]
    },

    _draw() {
      const ctx = this._ctx
      if (!ctx) return

      const { size, ringWidth, duration, remaining, primaryColor, primaryLightColor, trackColor, ticks } = this.data
      const dpr = this._dpr

      const w = size * dpr
      const h = size * dpr
      ctx.clearRect(0, 0, w, h)

      const cx = w / 2
      const cy = h / 2
      // Reserve room for the glowing end dot's shadow AND the outer set-progress
      // band (circuit mode). _drawSetArcs derives its band radius from this same
      // pad, so increasing it here also widens the gap between the countdown
      // arc and the set band. 18dpr gives a ~10dpr visible gap (size=420).
      const glowPad = 18 * dpr
      const radius = (size - ringWidth) / 2 * dpr - glowPad
      const lw = ringWidth * dpr

      // track ring
      ctx.beginPath()
      ctx.arc(cx, cy, radius, 0, Math.PI * 2)
      ctx.strokeStyle = trackColor
      ctx.lineWidth = lw
      ctx.lineCap = 'round'
      ctx.stroke()

      // ---- tick marks (inside the band) ----
      if (ticks > 0) {
        const innerR = radius - lw / 2 - (4 * dpr)   // just inside the band
        const shortLen = 6 * dpr
        const longLen = 12 * dpr
        const stepDeg = 360 / ticks
        // 短刻度:均匀铺满;但跳过靠近四方位(12/3/6/9 点)的,让位给长刻度,避免双线重叠
        for (let i = 0; i < ticks; i++) {
          const deg = (i / ticks) * 360
          const nearestQuarter = Math.round(deg / 90) * 90
          if (Math.abs(deg - nearestQuarter) < stepDeg) continue
          const ang = -Math.PI / 2 + (deg * Math.PI) / 180
          const cos = Math.cos(ang)
          const sin = Math.sin(ang)
          ctx.beginPath()
          ctx.moveTo(cx + innerR * cos, cy + innerR * sin)
          ctx.lineTo(cx + (innerR - shortLen) * cos, cy + (innerR - shortLen) * sin)
          ctx.lineWidth = 1.5 * dpr
          ctx.lineCap = 'round'
          ctx.strokeStyle = 'rgba(0,0,0,0.12)'
          ctx.stroke()
        }
        // 四分位长刻度:精确落在 12/3/6/9 点(无论 ticks 是否整除 4,都对齐正中)
        for (let k = 0; k < 4; k++) {
          const ang = -Math.PI / 2 + k * (Math.PI / 2)
          const cos = Math.cos(ang)
          const sin = Math.sin(ang)
          ctx.beginPath()
          ctx.moveTo(cx + innerR * cos, cy + innerR * sin)
          ctx.lineTo(cx + (innerR - longLen) * cos, cy + (innerR - longLen) * sin)
          ctx.lineWidth = 3 * dpr
          ctx.lineCap = 'round'
          ctx.strokeStyle = 'rgba(0,0,0,0.28)'
          ctx.stroke()
        }
      }

      // progress arc (clockwise from 12 o'clock)
      const ratio = duration > 0 ? Math.max(0, Math.min(1, remaining / duration)) : 0
      if (ratio > 0.001) {
        const startAngle = -Math.PI / 2
        const sweep = ratio * Math.PI * 2
        const [r1, g1, b1] = this._hexToRgb(primaryColor)
        const [r2, g2, b2] = this._hexToRgb(primaryLightColor || primaryColor)

        // Conic gradient along the arc (light -> primary), drawn as small
        // arc segments. Segment count is bounded so per-frame redraws stay cheap.
        const segs = Math.max(16, Math.min(120, Math.ceil(sweep / 0.06)))
        for (let i = 0; i < segs; i++) {
          const a0 = startAngle + (sweep * i) / segs
          const a1 = startAngle + (sweep * (i + 1)) / segs + 0.004 // tiny overlap to hide seams
          const t = 1 - i / (segs - 1) // head (i=0, oldest remaining) is primary, tail is light
          const r = Math.round(r1 + (r2 - r1) * t)
          const g = Math.round(g1 + (g2 - g1) * t)
          const b = Math.round(b1 + (b2 - b1) * t)
          ctx.beginPath()
          ctx.arc(cx, cy, radius, a0, a1)
          ctx.strokeStyle = `rgb(${r},${g},${b})`
          ctx.lineWidth = lw
          ctx.lineCap = 'butt'
          ctx.stroke()
        }

        // round cap at the tail (12 o'clock side)
        ctx.beginPath()
        ctx.arc(cx + radius * Math.cos(startAngle), cy + radius * Math.sin(startAngle), lw / 2, 0, Math.PI * 2)
        ctx.fillStyle = `rgb(${r2},${g2},${b2})`
        ctx.fill()

        // glowing dot at the leading end
        const endAngle = startAngle + sweep
        const ex = cx + radius * Math.cos(endAngle)
        const ey = cy + radius * Math.sin(endAngle)
        ctx.save()
        ctx.shadowColor = primaryColor
        ctx.shadowBlur = 12 * dpr
        ctx.beginPath()
        ctx.arc(ex, ey, lw / 2, 0, Math.PI * 2)
        ctx.fillStyle = primaryColor
        ctx.fill()
        // white core for a "light bulb" feel
        ctx.shadowBlur = 0
        ctx.beginPath()
        ctx.arc(ex, ey, lw / 4, 0, Math.PI * 2)
        ctx.fillStyle = 'rgba(255,255,255,0.9)'
        ctx.fill()
        ctx.restore()
      }

      // set-progress band (circuit mode only; no-op when sets <= 0)
      this._drawSetArcs(this._setPulsePhase || 0.6)
    },

    /**
     * Map currentSet/resting onto the three segment states, mirroring the old
     * dots panel's contract (see the property doc for the semantics).
     */
    _setArcState() {
      const { sets, currentSet, resting } = this.data
      let done = 0
      let active = 0
      let next = 0
      if (sets > 0 && currentSet > 0) {
        if (resting) {
          done = Math.min(currentSet, sets)
          if (currentSet < sets) next = currentSet + 1
        } else {
          done = Math.max(0, currentSet - 1)
          active = currentSet
        }
      }
      return { done, active, next }
    },

    /**
     * Draw (or re-draw) the outer set-progress band. `pulse` is the breathing
     * phase 0..1 used for the active / next segment; pass a fixed value for a
     * static render (idle / paused).
     *
     * Only the band itself is cleared (clipped to a ring) so the inner
     * countdown arc is never touched — the rAF loop below re-renders this
     * band every frame without interfering with the per-second _draw().
     */
    _drawSetArcs(pulse) {
      const ctx = this._ctx
      if (!ctx) return
      const { size, ringWidth, sets, primaryColor, trackColor, successColor, status } = this.data
      if (!sets || sets <= 0) return

      const dpr = this._dpr
      const cx = (size / 2) * dpr
      const cy = (size / 2) * dpr
      // Same radius math as _draw(): the countdown arc sits at `radius`; the
      // set band wraps just outside it so the two read as concentric layers.
      // NOTE: the -18*dpr pad MUST stay in sync with glowPad in _draw().
      const radius = ((size - ringWidth) / 2) * dpr - 18 * dpr
      const arcR = radius + (ringWidth / 2) * dpr + 14 * dpr
      const arcW = 8 * dpr
      const band = arcW / 2 + 3 * dpr

      const { done, active, next } = this._setArcState()

      // Clear only the outer band (ring clip -> inner arc untouched).
      ctx.save()
      ctx.beginPath()
      ctx.arc(cx, cy, arcR + band, 0, Math.PI * 2)
      ctx.arc(cx, cy, arcR - band, 0, Math.PI * 2, true)
      ctx.clip()
      ctx.clearRect(cx - arcR - band, cy - arcR - band, (arcR + band) * 2, (arcR + band) * 2)
      ctx.restore()

      const p = pulse == null ? 0.6 : Math.max(0, Math.min(1, pulse))
      const paused = status === 'paused'
      const segAngle = (Math.PI * 2) / sets
      const gap = (2.5 * Math.PI) / 180
      const startAngle = -Math.PI / 2

      // Pass 1: draw every segment arc. Breathing dots are collected and painted
      // in pass 2, AFTER all arcs, so a dot always floats ON TOP of its segment
      // instead of being partially buried under neighbouring round caps.
      const dots = []
      for (let i = 1; i <= sets; i++) {
        const a0 = startAngle + (i - 1) * segAngle + gap / 2
        const a1 = startAngle + i * segAngle - gap / 2

        let color = trackColor
        if (i <= done || i === active) color = primaryColor
        else if (i === next) color = successColor

        const emphasized = i === active || i === next
        const alpha = emphasized ? (paused ? 0.7 : 0.45 + 0.55 * p) : 1

        ctx.globalAlpha = alpha
        ctx.beginPath()
        ctx.arc(cx, cy, arcR, a0, a1)
        ctx.strokeStyle = color
        ctx.lineWidth = arcW
        ctx.lineCap = 'round'
        ctx.stroke()
        ctx.globalAlpha = 1

        if (emphasized) {
          const am = (a0 + a1) / 2
          dots.push({
            x: cx + arcR * Math.cos(am),
            y: cy + arcR * Math.sin(am),
            color: i === active ? primaryColor : successColor
          })
        }
      }

      // Pass 2: glowing dot on each emphasized segment, drawn over every arc.
      // Placed at the segment MIDDLE (not the a1 end): a dot pinned to the
      // trailing end made that end look visibly thicker than the round-cap
      // start, so both ends of the arc stay symmetric. Slightly larger than
      // the band width so it reads as a bead riding on top of the arc.
      for (const dot of dots) {
        const dotR = (arcW / 2) * (paused ? 1.3 : 1.15 + 0.25 * p)
        ctx.save()
        ctx.shadowColor = dot.color
        ctx.shadowBlur = 8 * dpr
        ctx.globalAlpha = paused ? 0.95 : 0.7 + 0.3 * p
        ctx.beginPath()
        ctx.arc(dot.x, dot.y, dotR, 0, Math.PI * 2)
        ctx.fillStyle = dot.color
        ctx.fill()
        ctx.restore()
        // white core for a "light bulb" feel
        ctx.beginPath()
        ctx.arc(dot.x, dot.y, dotR * 0.45, 0, Math.PI * 2)
        ctx.fillStyle = 'rgba(255,255,255,0.9)'
        ctx.fill()
      }
    },

    _startSetPulse() {
      if (this._setPulseRAF != null) return
      const canvas = this._canvas
      if (!canvas || typeof canvas.requestAnimationFrame !== 'function') {
        // Older canvas implementations without rAF: render one static frame.
        this._drawSetArcs(0.6)
        return
      }
      const loop = () => {
        if (!this._ctx) return
        const t = Date.now() / 1000
        this._setPulsePhase = 0.5 + 0.5 * Math.sin((t * Math.PI * 2) / 1.6)
        this._drawSetArcs(this._setPulsePhase)
        this._setPulseRAF = canvas.requestAnimationFrame(loop)
      }
      this._setPulseRAF = canvas.requestAnimationFrame(loop)
    },

    _stopSetPulse() {
      if (this._setPulseRAF == null) return
      const canvas = this._canvas
      if (canvas && typeof canvas.cancelAnimationFrame === 'function') {
        canvas.cancelAnimationFrame(this._setPulseRAF)
      }
      this._setPulseRAF = null
    },

    /**
     * (Re)arm or stop the breathing loop based on the current state.
     * - sets <= 0          -> nothing to draw (single/free mode)
     * - idle / completed   -> static render (no active/next segment)
     * - paused             -> static render (pausing freezes all motion)
     * - working / resting  -> breathe the active / next segment
     */
    _syncSetPulse() {
      if (!this._ctx) return
      const { sets, status } = this.data
      if (sets <= 0) {
        this._stopSetPulse()
        return
      }
      const state = this._setArcState()
      const wantsPulse = (state.active > 0 || state.next > 0) && status !== 'paused'
      if (wantsPulse) {
        this._startSetPulse()
      } else {
        this._stopSetPulse()
        this._setPulsePhase = 0.6
        this._drawSetArcs(0.6)
      }
    }
  }
})