// Bip Max custom watchface — digital time, date+weekday, heart rate + SpO2,
// battery, and steps. Uses hmUI.widget.TEXT (system font) since custom
// TEXT_FONT + bundled .ttf failed to render on this device/firmware.

const WHITE = 0xffffff
const GRAY = 0xaaaaaa
const CORAL = 0xff6b5c
const CYAN = 0x5cc8ff
const MINT = 0x6ee6aa
const SILVER = 0xaaaaaa

const W = 432
const WEEKDAYS = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT']

function pad(n) {
  return n < 10 ? '0' + n : '' + n
}

Page({
  build() {
    hmUI.createWidget(hmUI.widget.FILL_RECT, {
      x: 0, y: 0, w: W, h: 514,
      color: 0x000000,
    })

    // ---- Row 1: Time (24-hour, fills width) ----
    this.timeText = hmUI.createWidget(hmUI.widget.TEXT, {
      x: 0, y: 10, w: W, h: 155,
      text_size: 150,
      color: WHITE,
      align_h: hmUI.align.CENTER_H,
      align_v: hmUI.align.CENTER_V,
      text_style: hmUI.text_style.NONE,
      text: '00:00',
    })

    // ---- Row 2: Date + weekday — big, priority 1 ----
    this.dateText = hmUI.createWidget(hmUI.widget.TEXT, {
      x: 0, y: 205, w: W, h: 57,
      text_size: 78,
      color: GRAY,
      align_h: hmUI.align.CENTER_H,
      align_v: hmUI.align.CENTER_V,
      text_style: hmUI.text_style.NONE,
      text: '01/01 SUN',
    })

    // ---- Row 3: Heart rate (left) + SpO2 (right) — priority 2 ----
    this.hrText = hmUI.createWidget(hmUI.widget.TEXT, {
      x: 0, y: 272, w: 250, h: 60,
      text_size: 78,
      color: CORAL,
      align_h: hmUI.align.RIGHT,
      align_v: hmUI.align.CENTER_V,
      text_style: hmUI.text_style.NONE,
      text: '--HR',
    })
    this.spo2Text = hmUI.createWidget(hmUI.widget.TEXT, {
      x: 248, y: 272, w: 184, h: 60,
      text_size: 78,
      color: CYAN,
      align_h: hmUI.align.LEFT,
      align_v: hmUI.align.CENTER_V,
      text_style: hmUI.text_style.NONE,
      text: '--%',
    })

    // ---- Row 4: Battery (left) + Steps (right) — priority 3 ----
    this.battText = hmUI.createWidget(hmUI.widget.TEXT, {
      x: 0, y: 352, w: 140, h: 58,
      text_size: 68,
      color: MINT,
      align_h: hmUI.align.LEFT,
      align_v: hmUI.align.CENTER_V,
      text_style: hmUI.text_style.NONE,
      text: '--%',
    })
    this.stepsText = hmUI.createWidget(hmUI.widget.TEXT, {
      x: 140, y: 352, w: 292, h: 58,
      text_size: 68,
      color: SILVER,
      align_h: hmUI.align.RIGHT,
      align_v: hmUI.align.CENTER_V,
      text_style: hmUI.text_style.NONE,
      text: '0 S',
    })

    this.setupSensors()
    this.updateTime()
    this.timer = setInterval(() => this.updateTime(), 15000)
  },

  setupSensors() {
    this.heart = hmSensor.createSensor(hmSensor.id.HEART)
    this.updateHeart = () => {
      const v = this.heart.current || 0
      this.hrText.setProperty(hmUI.prop.MORE, { text: v + 'HR' })
    }
    this.updateHeart()
    // Heart rate is special-cased by Zepp: it does NOT use hmSensor.event.CHANGE
    // like every other sensor. It has its own event.CURRENT.
    this.heart.addEventListener(this.heart.event.CURRENT, this.updateHeart)

    this.spo2 = hmSensor.createSensor(hmSensor.id.SPO2)
    this.updateSpo2 = () => {
      const v = this.spo2.current || 0
      this.spo2Text.setProperty(hmUI.prop.MORE, { text: v + '%' })
    }
    this.updateSpo2()
    this.spo2.addEventListener(hmSensor.event.CHANGE, this.updateSpo2)

    this.battery = hmSensor.createSensor(hmSensor.id.BATTERY)
    this.updateBattery = () => {
      const v = this.battery.current || 0
      this.battText.setProperty(hmUI.prop.MORE, { text: v + '%' })
    }
    this.updateBattery()
    this.battery.addEventListener(hmSensor.event.CHANGE, this.updateBattery)

    this.step = hmSensor.createSensor(hmSensor.id.STEP)
    this.updateSteps = () => {
      const v = this.step.current || 0
      this.stepsText.setProperty(hmUI.prop.MORE, {
        text: v.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') + ' S',
      })
    }
    this.updateSteps()
    this.step.addEventListener(hmSensor.event.CHANGE, this.updateSteps)
  },

  updateTime() {
    const now = new Date()
    const hh = pad(now.getHours())
    const mm = pad(now.getMinutes())
    this.timeText.setProperty(hmUI.prop.MORE, { text: hh + ':' + mm })

    const mo = pad(now.getMonth() + 1)
    const day = pad(now.getDate())
    const wd = WEEKDAYS[now.getDay()]
    this.dateText.setProperty(hmUI.prop.MORE, { text: mo + '/' + day + ' ' + wd })
  },

  onResume() {
    // The watchface's JS is paused while another app (like Blood Oxygen)
    // is in the foreground, so live sensor events taken during that time
    // are missed. Re-check everything as soon as we're back on screen.
    if (this.updateHeart) this.updateHeart()
    if (this.updateSpo2) this.updateSpo2()
    if (this.updateBattery) this.updateBattery()
    if (this.updateSteps) this.updateSteps()
    this.updateTime()
  },

  onDestroy() {
    if (this.timer) clearInterval(this.timer)
    if (this.heart) this.heart.removeEventListener(this.heart.event.CURRENT, this.updateHeart)
    if (this.spo2) this.spo2.removeEventListener(hmSensor.event.CHANGE, this.updateSpo2)
    if (this.battery) this.battery.removeEventListener(hmSensor.event.CHANGE, this.updateBattery)
    if (this.step) this.step.removeEventListener(hmSensor.event.CHANGE, this.updateSteps)
  },
})
