import { router } from '@kit.ArkUI';
import { preferences } from '@kit.ArkData';
import { common } from '@kit.AbilityKit';
//todo 重要 后续 刷新按钮要求固定显示
@Entry
@Component
struct WidgetSettings {
  @State selectedStyle: string = 'classic';
  @State showTime: boolean = true;
  @State showWeather: boolean = false;
  @State showQuote: boolean = false;
  @State quoteText: string = '床前明月光，疑是地上霜。';
  @State authorText: string = '李白《静夜思》';
  private preference: preferences.Preferences | null = null;

  async aboutToAppear() {
    await this.loadSettings();
  }

  async loadSettings() {
    try {
      const context = getContext(this);
      this.preference = await preferences.getPreferences(context, 'widget_settings');
      this.selectedStyle = await this.preference.get('style', 'classic') as string;
      
      const showTimeVal = await this.preference.get('showTime', true);
      this.showTime = Boolean(showTimeVal);
      console.info('[WidgetSettings] showTime raw value: ' + showTimeVal + ', type: ' + typeof showTimeVal + ', parsed: ' + this.showTime);
      
      const showWeatherVal = await this.preference.get('showWeather', false);
      this.showWeather = Boolean(showWeatherVal);
      console.info('[WidgetSettings] showWeather raw value: ' + showWeatherVal + ', type: ' + typeof showWeatherVal + ', parsed: ' + this.showWeather);
      
      const showQuoteVal = await this.preference.get('showQuote', false);
      this.showQuote = Boolean(showQuoteVal);
      
      this.quoteText = await this.preference.get('quote', '床前明月光，疑是地上霜。') as string;
      this.authorText = await this.preference.get('author', '李白《静夜思》') as string;
      
      console.info('[WidgetSettings] Settings loaded - showTime: ' + this.showTime + ', showWeather: ' + this.showWeather);
    } catch (error) {
      console.error('[WidgetSettings] loadSettings error: ' + JSON.stringify(error));
    }
  }

  async saveSettings() {
    try {
      if (!this.preference) {
        const context = getContext(this) as common.UIAbilityContext;
        this.preference = await preferences.getPreferences(context, 'widget_settings');
      }
      console.info('[WidgetSettings] Saving settings - showTime: ' + this.showTime + ', showWeather: ' + this.showWeather);
      await this.preference.put('style', this.selectedStyle);
      await this.preference.put('showTime', Boolean(this.showTime));
      await this.preference.put('showWeather', Boolean(this.showWeather));
      await this.preference.put('showQuote', Boolean(this.showQuote));
      await this.preference.put('quote', this.quoteText);
      await this.preference.put('author', this.authorText);
      await this.preference.flush();
      console.info('[WidgetSettings] Settings saved successfully');
    } catch (error) {
      console.error('[WidgetSettings] saveSettings error: ' + JSON.stringify(error));
    }
  }

  private isDarkText(): boolean {
    return this.selectedStyle === 'transparent' || this.selectedStyle === 'frosted' || this.selectedStyle === 'liquid' || this.selectedStyle === 'immersive';
  }

  build() {
    Navigation() {
      Scroll() {
        Column({ space: 16 }) {
          Text('卡片设置')
            .fontSize(24)
            .fontWeight(FontWeight.Bold)
            .fontColor('#1A1A1A')
            .margin({ top: 16, bottom: 8 })

          this.buildPreview()

          this.buildStyleSelector()

          this.buildDisplayOptions()

          this.buildContentSettings()

          Button('保存设置')
            .width('100%')
            .height(48)
            .fontSize(16)
            .fontWeight(FontWeight.Medium)
            .backgroundColor('#007AFF')
            .borderRadius(12)
            .margin({ top: 24, bottom: 32 })
            .onClick(() => {
              this.saveSettings();
            })
        }
        .width('100%')
        .padding(16)
      }
      .width('100%')
      .height('100%')
    }
    .title('卡片配置')
    .titleMode(NavigationTitleMode.Mini)
    .mode(NavigationMode.Stack)
  }

  @Builder
  buildPreview() {
    Column() {
      Text('预览')
        .fontSize(14)
        .fontColor('#666666')
        .margin({ bottom: 8 })
        .alignSelf(ItemAlign.Start)

      if (this.selectedStyle === 'frosted') {
        this.buildPreviewCardFrosted()
      } else if (this.selectedStyle === 'liquid') {
        this.buildPreviewCardLiquid()
      } else if (this.selectedStyle === 'immersive') {
        this.buildPreviewCardImmersive()
      } else if (this.selectedStyle === 'transparent') {
        this.buildPreviewCardTransparent()
      } else {
        this.buildPreviewCardGradient()
      }
    }
    .width('100%')
    .padding(16)
    .backgroundColor('#F5F5F5')
    .borderRadius(12)
  }

  @Builder
  buildPreviewCardFrosted() {
    Column() {
      this.buildPreviewCardContent()
    }
    .width('100%')
    .height(160)
    .padding(16)
    .borderRadius(16)
    .backgroundColor('rgba(255,255,255,0.25)')
    .backdropBlur(20)
    .border({
      width: 1,
      color: 'rgba(255,255,255,0.4)'
    })
  }

  @Builder
  buildPreviewCardLiquid() {
    Column() {
      this.buildPreviewCardContent()
    }
    .width('100%')
    .height(160)
    .padding(16)
    .borderRadius(16)
    .linearGradient({
      angle: 135,
      colors: [['rgba(100,181,246,0.6)', 0.0], ['rgba(255,255,255,0.3)', 0.5], ['rgba(255,138,128,0.4)', 1.0]]
    })
    .backdropBlur(15)
  }

  @Builder
  buildPreviewCardImmersive() {
    Column() {
      this.buildPreviewCardContent()
    }
    .width('100%')
    .height(160)
    .padding(16)
    .borderRadius(16)
    .linearGradient({
      angle: 180,
      colors: [['rgba(0,0,0,0.4)', 0.0], ['rgba(0,0,0,0.1)', 0.5], ['rgba(0,0,0,0.3)', 1.0]]
    })
    .backdropBlur(10)
  }

  @Builder
  buildPreviewCardTransparent() {
    Column() {
      this.buildPreviewCardContent()
    }
    .width('100%')
    .height(160)
    .padding(16)
    .borderRadius(16)
    .backgroundColor('transparent')
    .border({
      width: 1,
      color: '#E0E0E0',
      style: BorderStyle.Dashed
    })
  }

  @Builder
  buildPreviewCardGradient() {
    Column() {
      this.buildPreviewCardContent()
    }
    .width('100%')
    .height(160)
    .padding(16)
    .borderRadius(16)
    .linearGradient({
      angle: 135,
      colors: this.getGradientColors()
    })
  }

  @Builder
  buildPreviewCardContent() {
    if (this.showTime) {
      Row() {
        Text('12:00')
          .fontSize(15)
          .fontColor(this.isDarkText() ? '#1A1A1A' : '#FFFFFF')
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
      .justifyContent(FlexAlign.End)
    }

    if (this.showQuote) {
      Column() {
        Text(this.quoteText)
          .fontSize(18)
          .fontColor(this.isDarkText() ? '#1A1A1A' : '#FFFFFF')
          .fontWeight(FontWeight.Bold)
          .margin({ bottom: 4 })
        Text(this.authorText)
          .fontSize(14)
          .fontColor(this.isDarkText() ? '#666666' : '#FFFFFFCC')
          .fontWeight(FontWeight.Medium)
      }
      .alignItems(HorizontalAlign.Start)
      .margin({ top: 12, bottom: 12 })
    }

    if (this.showWeather) {
      Row() {
        Text('☀️')
          .fontSize(18)
        Text('25°C')
          .fontSize(15)
          .fontColor(this.isDarkText() ? '#1A1A1A' : '#FFFFFF')
          .fontWeight(FontWeight.Medium)
          .margin({ left: 4 })
      }
      .width('100%')
      .justifyContent(FlexAlign.End)
    }
  }

  @Builder
  buildStyleSelector() {
    Column({ space: 12 }) {
      Text('卡片样式')
        .fontSize(16)
        .fontWeight(FontWeight.Medium)
        .fontColor('#1A1A1A')
        .alignSelf(ItemAlign.Start)

      Column({ space: 8 }) {
        Row({ space: 8 }) {
          this.buildStyleOption('classic', '经典', ['#7B1FA2', '#9C27B0'], 'gradient')
          this.buildStyleOption('modern', '护眼', ['#2E7D32', '#4CAF50'], 'gradient')
          this.buildStyleOption('minimal', '极简', ['#424242', '#757575'], 'gradient')
          this.buildStyleOption('elegant', '优雅', ['#FF6B6B', '#FF8E53'], 'gradient')
        }
        .width('100%')
        .justifyContent(FlexAlign.SpaceBetween)

        Row({ space: 8 }) {
          this.buildStyleOption('frosted', '毛玻璃', ['rgba(255,255,255,0.25)', 'rgba(255,255,255,0.1)'], 'frosted')
          this.buildStyleOption('liquid', '柔光', ['rgba(100,181,246,0.4)', 'rgba(255,255,255,0.2)'], 'liquid')
          this.buildStyleOption('immersive', '沉浸式', ['rgba(0,0,0,0.3)', 'rgba(0,0,0,0.1)'], 'immersive')
          this.buildStyleOption('transparent', '纯白', ['transparent', 'transparent'], 'transparent')
        }
        .width('100%')
        .justifyContent(FlexAlign.SpaceBetween)
      }
    }
    .width('100%')
    .padding(16)
    .backgroundColor('#F5F5F5')
    .borderRadius(12)
  }

  @Builder
  buildStyleOption(style: string, label: string, colors: string[], type: string) {
    Column() {
      if (type === 'frosted') {
        Column()
          .width(40)
          .height(40)
          .borderRadius(20)
          .backgroundColor('rgba(0,0,0,0.3)')
          .backdropBlur(20)
          .border({
            width: 1,
            color: 'rgba(255,255,255,0.2)'
          })
      } else if (type === 'liquid') {
        Column()
          .width(40)
          .height(40)
          .borderRadius(20)
          .linearGradient({
            angle: 135,
            colors: [['rgba(100,181,246,0.6)', 0.0], ['rgba(255,255,255,0.3)', 0.5], ['rgba(255,138,128,0.4)', 1.0]]
          })
          .backdropBlur(15)
      } else if (type === 'immersive') {
        Column()
          .width(40)
          .height(40)
          .borderRadius(20)
          .linearGradient({
            angle: 180,
            colors: [['rgba(0,0,0,0.4)', 0.0], ['rgba(0,0,0,0.1)', 0.5], ['rgba(0,0,0,0.3)', 1.0]]
          })
          .backdropBlur(10)
      } else if (type === 'transparent') {
        Column()
          .width(40)
          .height(40)
          .borderRadius(20)
          .border({
            width: 2,
            color: '#E0E0E0',
            style: BorderStyle.Dashed
          })
      } else {
        Column()
          .width(40)
          .height(40)
          .borderRadius(20)
          .linearGradient({
            angle: 135,
            colors: [[colors[0], 0.0], [colors[1], 1.0]]
          })
      }

      Text(label)
        .fontSize(12)
        .fontColor(this.selectedStyle === style ? '#007AFF' : '#666666')
        .margin({ top: 4 })
    }
    .padding(8)
    .borderRadius(12)
    .border({
      width: this.selectedStyle === style ? 2 : 0,
      color: '#007AFF'
    })
    .backgroundColor(this.selectedStyle === style ? '#E3F2FD' : 'transparent')
    .onClick(() => {
      this.selectedStyle = style;
    })
  }

  @Builder
  buildDisplayOptions() {
    Column({ space: 12 }) {
      Text('显示选项（内测功能）')
        .fontSize(16)
        .fontWeight(FontWeight.Medium)
        .fontColor('#1A1A1A')
        .alignSelf(ItemAlign.Start)

      this.buildToggle('显示时间', this.showTime, (value) => { this.showTime = value; })
      this.buildToggle('显示天气', this.showWeather, (value) => { this.showWeather = value; })
      this.buildToggle('显示诗词', this.showQuote, (value) => { this.showQuote = value; })
    }
    .width('100%')
    .padding(16)
    .backgroundColor('#F5F5F5')
    .borderRadius(12)
  }

  @Builder
  buildToggle(label: string, value: boolean, onChange: (value: boolean) => void) {
    Row() {
      Text(label)
        .fontSize(14)
        .fontColor('#1A1A1A')

      Toggle({ type: ToggleType.Switch, isOn: value })
        .selectedColor('#007AFF')
        .onChange(onChange)
    }
    .width('100%')
    .justifyContent(FlexAlign.SpaceBetween)
  }

  @Builder
  buildContentSettings() {
    Column({ space: 12 }) {
      Text('内容设置')
        .fontSize(16)
        .fontWeight(FontWeight.Medium)
        .fontColor('#1A1A1A')
        .alignSelf(ItemAlign.Start)

      Column({ space: 8 }) {
        Text('诗词内容')
          .fontSize(14)
          .fontColor('#666666')
          .alignSelf(ItemAlign.Start)

        TextArea({ text: $$this.quoteText })
          .width('100%')
          .height(80)
          .fontSize(14)
          .backgroundColor('#FFFFFF')
          .borderRadius(8)
          .padding(12)
      }

      Column({ space: 8 }) {
        Text('作者信息')
          .fontSize(14)
          .fontColor('#666666')
          .alignSelf(ItemAlign.Start)

        TextInput({ text: $$this.authorText })
          .width('100%')
          .height(44)
          .fontSize(14)
          .backgroundColor('#FFFFFF')
          .borderRadius(8)
          .padding({ left: 12, right: 12 })
      }
    }
    .width('100%')
    .padding(16)
    .backgroundColor('#F5F5F5')
    .borderRadius(12)
  }

  getGradientColors(): Array<[ResourceColor, number]> {
    switch (this.selectedStyle) {
      case 'classic':
        return [['#7B1FA2', 0.0], ['#9C27B0', 1.0]];
      case 'modern':
        return [['#2E7D32', 0.0], ['#4CAF50', 1.0]];
      case 'minimal':
        return [['#424242', 0.0], ['#757575', 1.0]];
      case 'elegant':
        return [['#FF6B6B', 0.0], ['#FF8E53', 1.0]];
      default:
        return [['#7B1FA2', 0.0], ['#9C27B0', 1.0]];
    }
  }
}