// 個人信息管理助手
// 文件名：PersonalInfoManager.ets

import promptAction from '@ohos.promptAction';
import common from '@ohos.app.ability.common';

// 個人信息數據模型
class PersonInfo {
  name: string = '';
  age: number = 0;
  phone: string = '';
  email: string = '';
  address: string = '';
  notes: string = '';
  
  constructor(name: string = '', age: number = 0, phone: string = '', 
              email: string = '', address: string = '', notes: string = '') {
    this.name = name;
    this.age = age;
    this.phone = phone;
    this.email = email;
    this.address = address;
    this.notes = notes;
  }
}

@Entry
@Component
struct PersonalInfoManager {
  // 當前編輯的信息
  @State currentInfo: PersonInfo = new PersonInfo();
  
  // 信息列表
  @State infoList: PersonInfo[] = [
    new PersonInfo('張三', 25, '13800138000', 'zhangsan@example.com', '北京市海淀區', '同事'),
    new PersonInfo('李四', 30, '13900139000', 'lisi@company.com', '上海市浦東新區', '朋友')
  ];
  
  // 控制編輯對話框顯示
  @State showEditDialog: boolean = false;
  @State isEditing: boolean = false;
  @State editIndex: number = -1;

  // 構建UI
  build() {
    Column() {
      // 標題
      Text('個人信息管理助手')
        .fontSize(24)
        .fontWeight(FontWeight.Bold)
        .margin({ top: 20, bottom: 20 });

      // 添加按鈕
      Button('添加新聯繫人')
        .width('90%')
        .height(50)
        .fontSize(18)
        .backgroundColor('#007DFF')
        .margin({ bottom: 20 })
        .onClick(() => {
          this.currentInfo = new PersonInfo();
          this.isEditing = false;
          this.showEditDialog = true;
        });

      // 信息列表
      List({ space: 10 }) {
        ForEach(this.infoList, (item: PersonInfo, index: number) => {
          ListItem() {
            this.infoItem(item, index);
          }
        }, (item: PersonInfo) => item.name + item.phone)
      }
      .width('100%')
      .layoutWeight(1)
      .divider({ strokeWidth: 1, color: '#F1F1F1' })
    }
    .width('100%')
    .height('100%')
    .padding(10)
    .backgroundColor('#F5F5F5')

    // 編輯對話框
    if (this.showEditDialog) {
      this.editDialog();
    }
  }

  // 信息列表項組件
  @Builder
  infoItem(item: PersonInfo, index: number) {
    Column({ space: 5 }) {
      // 姓名和年齡
      Row() {
        Text(item.name)
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
          .layoutWeight(1);
        
        Text(item.age.toString() + '歲')
          .fontSize(16)
          .fontColor('#666');
      }
      .width('100%')
      .padding({ left: 15, right: 15, top: 10 });

      // 電話
      if (item.phone) {
        Row() {
          Image($r('app.media.ic_phone'))
            .width(20)
            .height(20)
            .margin({ right: 10 });
          Text(item.phone)
            .fontSize(16);
        }
        .width('100%')
        .padding({ left: 15, right: 15 });
      }

      // 郵箱
      if (item.email) {
        Row() {
          Image($r('app.media.ic_email'))
            .width(20)
            .height(20)
            .margin({ right: 10 });
          Text(item.email)
            .fontSize(16);
        }
        .width('100%')
        .padding({ left: 15, right: 15 });
      }

      // 操作按鈕
      Row({ space: 10 }) {
        Button('編輯')
          .width(80)
          .height(36)
          .fontSize(14)
          .backgroundColor('#4CAF50')
          .onClick(() => {
            this.currentInfo = { ...item };
            this.editIndex = index;
            this.isEditing = true;
            this.showEditDialog = true;
          });

        Button('刪除')
          .width(80)
          .height(36)
          .fontSize(14)
          .backgroundColor('#FF5722')
          .onClick(() => {
            this.deleteInfo(index);
          });

        Button('詳情')
          .width(80)
          .height(36)
          .fontSize(14)
          .backgroundColor('#2196F3')
          .onClick(() => {
            this.showDetail(item);
          });
      }
      .width('100%')
      .justifyContent(FlexAlign.Center)
      .margin({ top: 10, bottom: 10 });
    }
    .width('100%')
    .backgroundColor('#FFFFFF')
    .borderRadius(10)
    .padding({ bottom: 10 })
    .shadow({ radius: 5, color: '#E0E0E0', offsetX: 2, offsetY: 2 })
  }

  // 編輯對話框組件
  @Builder
  editDialog() {
    Column() {
      // 對話框標題
      Text(this.isEditing ? '編輯信息' : '添加信息')
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
        .margin({ top: 20, bottom: 20 });

      // 輸入表單
      TextInput({ text: this.currentInfo.name, placeholder: '請輸入姓名' })
        .width('90%')
        .height(50)
        .fontSize(16)
        .margin({ bottom: 10 })
        .onChange((value: string) => {
          this.currentInfo.name = value;
        });

      TextInput({ text: this.currentInfo.age.toString(), placeholder: '請輸入年齡' })
        .width('90%')
        .height(50)
        .fontSize(16)
        .margin({ bottom: 10 })
        .type(InputType.Number)
        .onChange((value: string) => {
          this.currentInfo.age = parseInt(value) || 0;
        });

      TextInput({ text: this.currentInfo.phone, placeholder: '請輸入電話' })
        .width('90%')
        .height(50)
        .fontSize(16)
        .margin({ bottom: 10 })
        .onChange((value: string) => {
          this.currentInfo.phone = value;
        });

      TextInput({ text: this.currentInfo.email, placeholder: '請輸入郵箱' })
        .width('90%')
        .height(50)
        .fontSize(16)
        .margin({ bottom: 10 })
        .onChange((value: string) => {
          this.currentInfo.email = value;
        });

      TextInput({ text: this.currentInfo.address, placeholder: '請輸入地址' })
        .width('90%')
        .height(50)
        .fontSize(16)
        .margin({ bottom: 10 })
        .onChange((value: string) => {
          this.currentInfo.address = value;
        });

      TextInput({ text: this.currentInfo.notes, placeholder: '備註信息' })
        .width('90%')
        .height(60)
        .fontSize(16)
        .margin({ bottom: 20 })
        .onChange((value: string) => {
          this.currentInfo.notes = value;
        });

      // 操作按鈕
      Row({ space: 20 }) {
        Button('取消')
          .width(120)
          .height(45)
          .fontSize(16)
          .backgroundColor('#9E9E9E')
          .onClick(() => {
            this.showEditDialog = false;
          });

        Button(this.isEditing ? '保存' : '添加')
          .width(120)
          .height(45)
          .fontSize(16)
          .backgroundColor('#007DFF')
          .onClick(() => {
            this.saveInfo();
          });
      }
      .margin({ bottom: 20 });
    }
    .width('90%')
    .backgroundColor('#FFFFFF')
    .borderRadius(15)
    .shadow({ radius: 20, color: '#CCCCCC' })
    .position({ x: '5%', y: '5%' })
  }

  // 保存信息
  saveInfo() {
    if (!this.currentInfo.name.trim()) {
      promptAction.showToast({ message: '請輸入姓名', duration: 2000 });
      return;
    }

    if (this.isEditing && this.editIndex >= 0) {
      // 更新現有信息
      this.infoList[this.editIndex] = { ...this.currentInfo };
      promptAction.showToast({ message: '信息更新成功', duration: 2000 });
    } else {
      // 添加新信息
      this.infoList.push({ ...this.currentInfo });
      promptAction.showToast({ message: '信息添加成功', duration: 2000 });
    }

    this.showEditDialog = false;
  }

  // 刪除信息
  deleteInfo(index: number) {
    promptAction.showDialog({
      title: '確認刪除',
      message: '確定要刪除這條信息嗎？',
      buttons: [
        { text: '取消', color: '#666666' },
        { text: '確定', color: '#FF5722' }
      ]
    }).then((result) => {
      if (result.index === 1) {
        this.infoList.splice(index, 1);
        promptAction.showToast({ message: '刪除成功', duration: 2000 });
      }
    });
  }

  // 顯示詳細信息
  showDetail(item: PersonInfo) {
    let detail = `姓名：${item.name}\n`;
    detail += `年齡：${item.age}歲\n`;
    detail += `電話：${item.phone}\n`;
    detail += `郵箱：${item.email}\n`;
    detail += `地址：${item.address}\n`;
    detail += `備註：${item.notes}`;

    promptAction.showDialog({
      title: '詳細信息',
      message: detail,
      buttons: [{ text: '關閉', color: '#007DFF' }]
    });
  }
}