// Import conversion library for Simplified-Traditional Chinese conversion
import { transverter, TransverterType, TransverterLanguage } from "@nutpi/chinese_transverter";
// Import clipboard service for system clipboard operations
import { pasteboard } from '@kit.BasicServicesKit';
// Import prompt service for user notifications
import { promptAction } from '@kit.ArkUI';

// Mark component as application entry point
@Entry
// Define SimplifiedTraditionalConverter component
@Component
struct SimplifiedTraditionalConverter {
  // State variable for user input with watcher
  @State @Watch('onInputTextChanged') inputText: string = '';
  @State simplifiedResult: string = ''; // Simplified conversion result
  @State traditionalResult: string = ''; // Traditional conversion result
  @State isInputFocused: boolean = false; // Input field focus state
  @State private themeColor: string = '#439fff'; // Primary theme color
  @State private textColor: string = "#2e2e2e"; // Main text color
  @State private basePadding: number = 30; // Base padding value
  @State private minTextAreaHeight: number = 50; // Minimum text area height
  @State private maxTextAreaHeight: number = 300; // Maximum text area height

  // Handle input text changes
  onInputTextChanged() {
    this.simplifiedResult = transverter({
      type: TransverterType.SIMPLIFIED,
      str: this.inputText,
      language: TransverterLanguage.ZH_CN
    });

    this.traditionalResult = transverter({
      type: TransverterType.TRADITIONAL,
      str: this.inputText,
      language: TransverterLanguage.ZH_CN
    });
  }

  // Copy text to system clipboard
  private copyToClipboard(text: string): void {
    const clipboardData = pasteboard.createData(pasteboard.MIMETYPE_TEXT_PLAIN, text);
    const systemClipboard = pasteboard.getSystemPasteboard();
    systemClipboard.setData(clipboardData);
    promptAction.showToast({ message: 'Copied to clipboard' });
  }

  // Build UI components
  build() {
    Scroll() {
      Column() {
        // Application title
        Text("Simplified-Traditional Converter")
          .width('100%')
          .height(54)
          .fontSize(18)
          .fontWeight(600)
          .backgroundColor(Color.White)
          .textAlign(TextAlign.Center)
          .fontColor(this.textColor);

        // Input section
        Column() {
          TextArea({ text: $$this.inputText, placeholder: 'Enter Simplified/Traditional text (mixed input supported)' })
            .fontSize(18)
            .placeholderColor(this.isInputFocused ? this.themeColor : Color.Gray)
            .fontColor(this.isInputFocused ? this.themeColor : this.textColor)
            .borderColor(this.isInputFocused ? this.themeColor : Color.Gray)
            .caretColor(this.themeColor)
            .onBlur(() => this.isInputFocused = false)
            .onFocus(() => this.isInputFocused = true)
            .borderWidth(1)
            .borderRadius(10)
            .backgroundColor(Color.White)
            .constraintSize({ minHeight: this.minTextAreaHeight, maxHeight: this.maxTextAreaHeight });

          // Clear button
          Text('Clear')
            .borderWidth(1)
            .borderColor(this.themeColor)
            .fontColor(this.themeColor)
            .height(50)
            .textAlign(TextAlign.Center)
            .borderRadius(10)
            .fontSize(18)
            .width(`${650 - this.basePadding * 2}lpx`)
            .margin({ top: `${this.basePadding}lpx` })
            .clickEffect({ level: ClickEffectLevel.HEAVY, scale: 0.8 })
            .onClick(() => this.inputText = "");
        }
        // ... (Other UI components follow similar pattern)
      }
    }
    .width('100%')
    .height('100%')
    .backgroundColor("#f2f3f5")
    .align(Alignment.Top)
    .padding({ bottom: `${this.basePadding}lpx` );
  }
}