@Component
export struct MechanicClock {
  @Prop timezone: string = 'Europe/Istanbul';
  @State private currentTime: Date = new Date();
  private timerID: number = 0;
  private settings: RenderingContextSettings = new RenderingContextSettings(true);
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);

  private updateTime() {
    const options: Intl.DateTimeFormatOptions = {
      timeZone: this.timezone,
      hour12: false
    };
    const timeParts = new Date().toLocaleTimeString('tr-TR', options).split(':');
    this.currentTime.setHours(Number(timeParts[0]), Number(timeParts[1]), Number(timeParts[2]));
  }

  private drawHand(angle: number, length: number, width: number, color: string) {
    const centerX = 95;
    const centerY = 95;

    this.context.beginPath();
    this.context.moveTo(centerX, centerY);
    this.context.lineTo(
      centerX + length * Math.sin(angle),
      centerY - length * Math.cos(angle)
    );
    this.context.lineWidth = width;
    this.context.strokeStyle = color;
    this.context.lineCap = 'round';
    this.context.stroke();
  }

  private drawClockFace() {
    this.context.clearRect(0, 0, 190, 190);

    this.context.beginPath();
    this.context.arc(95, 95, 85.5, 0, 2 * Math.PI);
    this.context.fillStyle = '#fff';
    this.context.fill();
    this.context.lineWidth = 3.8;
    this.context.strokeStyle = '#333';
    this.context.stroke();

    for (let i = 0; i < 60; i++) {
      const angle = (i * 6) * Math.PI / 180;
      const isHourMark = i % 5 === 0;
      const length = isHourMark ? 11.4 : 5.7;
      const startX = 95 + (85.5 - length) * Math.sin(angle);
      const startY = 95 - (85.5 - length) * Math.cos(angle);
      const endX = 95 + 85.5 * Math.sin(angle);
      const endY = 95 - 85.5 * Math.cos(angle);

      this.context.beginPath();
      this.context.moveTo(startX, startY);
      this.context.lineTo(endX, endY);
      this.context.lineWidth = isHourMark ? 2.85 : 0.95;
      this.context.strokeStyle = isHourMark ? '#333' : '#999';
      this.context.stroke();
    }

    this.context.font = 'bold 38px Arial';
    this.context.textAlign = 'center';
    this.context.textBaseline = 'middle';
    this.context.fillStyle = '#333';

    for (let i = 1; i <= 12; i++) {
      const angle = (i * 30) * Math.PI / 180;
      const x = 95 + 66.5 * Math.sin(angle);
      const y = 95 - 66.5 * Math.cos(angle);
      this.context.fillText(i.toString(), x, y);
    }
  }

  private drawFullClock() {
    this.drawClockFace();

    const hours = this.currentTime.getHours();
    const minutes = this.currentTime.getMinutes();
    const seconds = this.currentTime.getSeconds();

    const hourAngle = (hours % 12 * 30 + minutes * 0.5) * Math.PI / 180;
    const minuteAngle = minutes * 6 * Math.PI / 180;
    const secondAngle = seconds * 6 * Math.PI / 180;

    this.drawHand(hourAngle, 47.5, 5.7, '#222');
    this.drawHand(minuteAngle, 66.5, 2.85, '#444');
    this.drawHand(secondAngle, 76, 0.95, '#e74c3c');

    this.context.beginPath();
    this.context.arc(95, 95, 3.8, 0, 2 * Math.PI);
    this.context.fillStyle = '#e74c3c';
    this.context.fill();
  }

  aboutToAppear() {
    this.updateTime();
    this.timerID = setInterval(() => {
      this.updateTime();
      this.drawFullClock();
    }, 1000);
  }

  aboutToDisappear() {
    clearInterval(this.timerID);
  }

  build() {
    Column() {
      Canvas(this.context)
        .width(190)
        .height(190)
        .onReady(() => {
          this.drawFullClock();
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
  }
}

@Component
export struct CapitalClocks {
  @State cities: City[] = topCapitals
  @State clockTypes: boolean[] = Array(topCapitals.length).fill(false)

  build() {
    Column() {
      Grid() {
        ForEach(this.cities, (item: City, index?: number) => {
          GridItem() {
            Column() {
              Text(item.name)
                .fontSize(18)
                .fontWeight(FontWeight.Bold)
              MechanicClock({ timezone: item.timezone })
            }
            .padding(8)
          }
          .backgroundColor(Color.White)
          .border({
            width: 2,
            color: '#e0e0e0',
            radius: 12
          })
          .shadow({
            radius: 4,
            color: '#20000000',
            offsetX: 1,
            offsetY: 1
          })
        })
      }
      .columnsTemplate('1fr 1fr')
      .rowsTemplate('1fr 1fr 1fr')
      .width('100%')
      .height('100%')
      .layoutWeight(1)
    }
    .height('100%')
    .width('100%')
  }
}