FamilyBook_harmonyos/entry/src/main/ets/pages/home/FbHomePage.ets

/**
 * 家书 FamilyBook · 首页（鸿蒙端）
 *
 * 对应 Web 端 `templates/home.php`。版面照搬它的三段：
 *   ① hero（家庭名 + 格言 + 我的资料/家谱两个快捷入口）
 *   ② 信息面板（问候 + 日期/星期/农历 + 日子标记 ｜ 右侧天气）
 *   ② 今天的日程 + 近期任务（两块并排；窄屏上下堆叠）
 *   ④ 「往年的今天」回忆条
 *   ⑤ 模块入口卡片（12 个模块的关键数字）
 *
 * ⚠️ 只做**界面**，不做交互实现：卡片点了切模块（前端状态），不发请求。
 */

import { FbColors, FbMetric, fbPalette } from '../../common/Theme';
import { FbAppState, fbAppState } from '../../common/Store';
import { FbModuleCard, FbCalEvent, FbTaskItem, FbKinChip } from '../../model/Types';
import {
  FB_DEMO_EVENTS_TODAY, FB_DEMO_EVENTS_SOON, FB_DEMO_KIN, FB_DEMO_MARKS,
  FB_DEMO_MODULE_CARDS, FB_DEMO_TASKS, FB_DEMO_WEATHER, FB_DEMO_WEEK_STAT
} from '../../model/DemoData';
import { FbAvatar, FbDot, FbDotLine, FbSectionTitle, FbStatTriple, FbTag } from '../../components/Widgets';

@ComponentV2
export struct FbHomePage {

  /**
   * 顶栏插槽：由 Index.ets 传入，放在本页滚动流最前面 ⇒ 随页面一起滚走。
   * 🔴 用户要求「向上滑动时标题栏跟着一起滑走」。
   */
  @BuilderParam topBar: () => void;
  @Param app: FbAppState = fbAppState();

  private cards: FbModuleCard[] = FB_DEMO_MODULE_CARDS;
  private todayEvents: FbCalEvent[] = FB_DEMO_EVENTS_TODAY;
  private soonEvents: FbCalEvent[] = FB_DEMO_EVENTS_SOON;
  private tasks: FbTaskItem[] = FB_DEMO_TASKS;

  /** 问候语时段（与 Web 端 home.php 里那段 PHP 同口径） */
  private hello(): string {
    const h: number = new Date().getHours();
    if (h < 5) {
      return '夜深了';
    }
    if (h < 11) {
      return '早上好';
    }
    if (h < 13) {
      return '中午好';
    }
    if (h < 18) {
      return '下午好';
    }
    return '晚上好';
  }

  /** 今天的日期与星期 */
  private dateLine(): string {
    const d: Date = new Date();
    const week: string[] = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
    return (d.getMonth() + 1).toString() + ' 月 ' + d.getDate().toString() + ' 日 · '
      + week[d.getDay()];
  }

  /** 天气图标（按文案粗略映射到已有的几个图标上，不引外部图） */
  private weatherIcon(): Resource {
    // TODO(接口)：真实天气码 → 图标映射。现在只区分「有太阳/没太阳」两种。
    return this.weather().text.indexOf('晴') >= 0
      ? $r('app.media.fb_ic_days')
      : $r('app.media.fb_ic_calendar');
  }

  private weather() {
    return FB_DEMO_WEATHER;
  }

  build() {
    Scroll() {
      Column({ space: 0 }) {
        this.topBar()


        // ==================== ① 个人信息卡（问候 + 今天 + 天气）====================
        // 🔴 用户 2026-10-12 定的：这一块**要白色卡片**（"这样显得好看"）。
        //    ⚠️ 曾一度做成"不套卡片的页面头部"，理由是省首屏高度；
        //    用户看了实机后仍要求套白卡 ⇒ **以用户观感为准**，别再改回去。
        //    注意与顶栏的区别：顶栏**不能**有自己的背景色（否则与状态栏割裂），
        //    而这张卡在顶栏**下面**、与状态栏不相邻，套白卡没有这个问题。
        Column({ space: 10 }) {
          // 第一行：问候 + 名字（左） / 温度（右）
          Row() {
            Column({ space: 5 }) {
              Row({ space: 4 }) {
                Text(this.hello())
                  .fontSize(22)
                  .fontWeight(FontWeight.Medium)
                  .fontColor(FbColors.ink)
                Text('，' + this.app.session.me.name)
                  .fontSize(22)
                  .fontWeight(FontWeight.Medium)
                  .fontColor(FbColors.ink)
              }
              .alignItems(VerticalAlign.Bottom)

              // 日期 · 星期 · 农历（一行排开，手机上一行读得完）
              Row({ space: 8 }) {
                Text(this.dateLine())
                  .fontSize(FbMetric.fontSmall)
                  .fontColor(FbColors.muted)
                Text('八月廿二')
                  .fontSize(FbMetric.fontSmall)
                  .fontColor(FbColors.faint)
              }
            }
            .alignItems(HorizontalAlign.Start)
            .layoutWeight(1)

            // 天气：靠右，温度大字 + 文案小字
            Row({ space: 6 }) {
              Image(this.weatherIcon())
                .width(26)
                .height(26)
                .renderMode(ImageRenderMode.Template)
                .fillColor(FbColors.brand2)
              Column({ space: 0 }) {
                Text(this.weather().temp.toString() + '°')
                  .fontSize(24)
                  .fontWeight(FontWeight.Medium)
                  .fontColor(FbColors.ink)
                Text(this.weather().text)
                  .fontSize(FbMetric.fontTiny)
                  .fontColor(FbColors.muted)
                  .maxLines(1)
              }
              .alignItems(HorizontalAlign.End)
            }
            .alignItems(VerticalAlign.Center)
          }
          .width('100%')
          .alignItems(VerticalAlign.Top)

          // 第二行：天气地点 + 日子标记（节气 / 节日 / 生日）
          Column({ space: 6 }) {
            Text(this.weather().place + ' · ' + this.weather().wind)
              .fontSize(FbMetric.fontTiny)
              .fontColor(FbColors.faint)
              .maxLines(1)
              .width('100%')

            Flex({ wrap: FlexWrap.Wrap }) {
              ForEach(FB_DEMO_MARKS, (mk: string, idx: number) => {
                FbTag({ text: mk, tone: idx === 0 ? 'green' : 'brand' })
                  .margin({ right: 6, top: 2 })
              }, (mk: string, idx: number): string => 'mk_' + idx.toString() + '_' + mk)
            }
            .width('100%')
          }
          .width('100%')
          .alignItems(HorizontalAlign.Start)

          // 第三行：三个数字（未来七天日程 / 待办 / 逾期）——
          // 贴在卡片底部，作为"今天要不要操心的快速判断"
          // （卡片内用浅分隔线分开，视觉上比留白更"有层次"）
          Divider().color(FbColors.line2)
          FbStatTriple({
            labelA: '未来七天',
            valueA: FB_DEMO_WEEK_STAT.events.toString(),
            labelB: '待办',
            valueB: FB_DEMO_WEEK_STAT.todos.toString(),
            labelC: '逾期',
            valueC: FB_DEMO_WEEK_STAT.overdue.toString(),
            cAlarm: FB_DEMO_WEEK_STAT.overdue > 0
          })
        }
        .width('100%')
        .padding(FbMetric.cardPad)
        // 白色卡片（用户要求）：与下面「今天的日程」等块同一种卡片语言
        .backgroundColor(FbColors.surface)
        .borderRadius(FbMetric.radius)
        .margin({
          left: FbMetric.pagePad,
          right: FbMetric.pagePad,
          top: 8
        })
        .alignItems(HorizontalAlign.Start)

        // ==================== ② 今天的日程 + 近期任务 ====================
        Column({ space: 0 }) {
          FbSectionTitle({ title: '今天的日程', extra: this.todayEvents.length.toString() + ' 条' })
          Column({ space: 10 }) {
            if (this.todayEvents.length === 0) {
              FbDotLine({ label: '今天没有安排，过得轻松一点', muted: true })
            } else {
              ForEach(this.todayEvents, (ev: FbCalEvent) => {
                Row({ space: 10 }) {
                  Text(ev.allDay ? '全天' : ev.time)
                    .fontSize(FbMetric.fontTiny)
                    .fontColor(FbColors.muted)
                    .width(46)
                  Column() {
                    FbDot({ dia: 8, fillC: ev.color })
                  }
                  .width(8)

                  Text(ev.title)
                    .fontSize(FbMetric.fontSmall)
                    .fontColor(FbColors.ink)
                    .layoutWeight(1)
                    .maxLines(1)
                    .textOverflow({ overflow: TextOverflow.Ellipsis })

                  Text(ev.calName)
                    .fontSize(10)
                    .fontColor(Color.White)
                    .backgroundColor(ev.color)
                    .borderRadius(4)
                    .padding({ left: 5, right: 5, top: 1, bottom: 1 })
                }
                .width('100%')
                .alignItems(VerticalAlign.Center)
              }, (ev: FbCalEvent): string => 'tev_' + ev.id.toString())
            }
          }
          .width('100%')
          .padding(FbMetric.cardPad)
          .backgroundColor(FbColors.surface)
          .borderRadius(FbMetric.radius)
        }
        .width('100%')
        .padding({ left: FbMetric.pagePad, right: FbMetric.pagePad, top: 8 })

        Column({ space: 0 }) {
          FbSectionTitle({
            title: '近期任务',
            extra: '进行中与已逾期'
          })
          Column({ space: 10 }) {
            ForEach(this.recentTasks(), (t: FbTaskItem) => {
              Row({ space: 10 }) {
                FbDot({ dia: 8, fillC: t.overdue ? '#C0533F' : t.boardColor })

                Text(t.title)
                  .fontSize(FbMetric.fontSmall)
                  .fontColor(FbColors.ink)
                  .layoutWeight(1)
                  .maxLines(1)
                  .textOverflow({ overflow: TextOverflow.Ellipsis })

                if (t.childTotal > 0) {
                  Text(t.childDone.toString() + '/' + t.childTotal.toString())
                    .fontSize(FbMetric.fontTiny)
                    .fontColor(FbColors.faint)
                }
                if (t.dueText.length > 0) {
                  Text(t.dueText)
                    .fontSize(FbMetric.fontTiny)
                    .fontColor(t.overdue ? FbColors.red : FbColors.faint)
                }
              }
              .width('100%')
              .alignItems(VerticalAlign.Center)
            }, (t: FbTaskItem): string => 'htk_' + t.id.toString())
          }
          .width('100%')
          .padding(FbMetric.cardPad)
          .backgroundColor(FbColors.surface)
          .borderRadius(FbMetric.radius)
        }
        .width('100%')
        .padding({ left: FbMetric.pagePad, right: FbMetric.pagePad, top: 12 })

        // ==================== ③ 我的家人 ====================
        Column({ space: 0 }) {
          FbSectionTitle({ title: '我的家人', extra: '以我为中心 · 上下三代' })
          Flex({ wrap: FlexWrap.Wrap }) {
            ForEach(FB_DEMO_KIN, (k: FbKinChip) => {
              Column({ space: 4 }) {
                FbAvatar({ name: k.shown, color: k.avatarColor, dia: 42, fontSizeVp: 17 })
                Text(k.shown)
                  .fontSize(FbMetric.fontTiny)
                  .fontColor(FbColors.ink)
                  .maxLines(1)
                Text(k.kinship)
                  .fontSize(10)
                  .fontColor(FbColors.faint)
                  .maxLines(1)
              }
              .width(64)
              .padding({ top: 6, bottom: 6 })
            }, (k: FbKinChip): string => 'kin_' + k.id.toString())
          }
          .width('100%')
          .padding(FbMetric.cardPad)
          .backgroundColor(FbColors.surface)
          .borderRadius(FbMetric.radius)
        }
        .width('100%')
        .padding({ left: FbMetric.pagePad, right: FbMetric.pagePad, top: 12 })

        // ==================== ④ 未来七天 ====================
        Column({ space: 0 }) {
          FbSectionTitle({ title: '未来七天', extra: this.soonEvents.length.toString() + ' 条' })
          Column({ space: 10 }) {
            ForEach(this.soonEvents, (ev: FbCalEvent) => {
              Row({ space: 10 }) {
                Text(ev.date)
                  .fontSize(FbMetric.fontTiny)
                  .fontColor(FbColors.muted)
                  .width(44)
                Text(ev.allDay ? '全天' : ev.time)
                  .fontSize(FbMetric.fontTiny)
                  .fontColor(FbColors.faint)
                  .width(40)
                FbDot({ dia: 7, fillC: ev.color })
                Text(ev.title)
                  .fontSize(FbMetric.fontSmall)
                  .fontColor(FbColors.ink)
                  .layoutWeight(1)
                  .maxLines(1)
                  .textOverflow({ overflow: TextOverflow.Ellipsis })
              }
              .width('100%')
              .alignItems(VerticalAlign.Center)
            }, (ev: FbCalEvent): string => 'sev_' + ev.id.toString())
          }
          .width('100%')
          .padding(FbMetric.cardPad)
          .backgroundColor(FbColors.surface)
          .borderRadius(FbMetric.radius)
        }
        .width('100%')
        .padding({ left: FbMetric.pagePad, right: FbMetric.pagePad, top: 12 })

        // ==================== ⑤ 模块入口 ====================
        Column({ space: 0 }) {
          FbSectionTitle({ title: '全部模块', extra: this.cards.length.toString() + ' 个' })

          Flex({ wrap: FlexWrap.Wrap, justifyContent: FlexAlign.SpaceBetween }) {
            ForEach(this.cards, (c: FbModuleCard) => {
              this.moduleCard(c)
            }, (c: FbModuleCard): string => 'mc_' + c.key)
          }
          .width('100%')
        }
        .width('100%')
        .padding({ left: FbMetric.pagePad, right: FbMetric.pagePad, top: 12, bottom: 28 })
      }
      .width('100%')
    }
    .width('100%')
    .height('100%')
    .scrollBar(BarState.Off)
    .edgeEffect(EdgeEffect.Spring)
    .align(Alignment.TopStart)
  }

  /** 一块模块入口卡（图标 + 模块名 + 一句关键数字） */
  @Builder
  moduleCard(c: FbModuleCard) {
    Column({ space: 8 }) {
      Row({ space: 8 }) {
        Image(this.cardIcon(c.key))
          .width(18)
          .height(18)
          .renderMode(ImageRenderMode.Template)
          .fillColor(fbPalette(c.color).brand)
        Text(c.name)
          .fontSize(FbMetric.fontSmall)
          .fontWeight(FontWeight.Medium)
          .fontColor(FbColors.ink)
          .layoutWeight(1)
          .maxLines(1)
      }
      .width('100%')
      .alignItems(VerticalAlign.Center)

      Text(c.big)
        .fontSize(20)
        .fontWeight(FontWeight.Medium)
        .fontColor(fbPalette(c.color).brand)
        .maxLines(1)

      Text(c.lines.length > 0 ? c.lines[0] : '')
        .fontSize(FbMetric.fontTiny)
        .fontColor(FbColors.faint)
        .maxLines(1)
        .textOverflow({ overflow: TextOverflow.Ellipsis })
    }
    .width('48.5%')
    .padding(14)
    .backgroundColor(FbColors.surface)
    .borderRadius(FbMetric.radius)
    .margin({ bottom: 10 })
    .alignItems(HorizontalAlign.Start)
    .onClick(() => {
      this.app.switchModule(c.key);
    })
  }

  /** 卡片图标（按模块 key 取） */
  private cardIcon(key: string): Resource {
    switch (key) {
      case 'people': return $r('app.media.fb_ic_people');
      case 'kin': return $r('app.media.fb_ic_kin');
      case 'movies': return $r('app.media.fb_ic_movies');
      case 'trips': return $r('app.media.fb_ic_trips');
      case 'calendar': return $r('app.media.fb_ic_calendar');
      case 'resources': return $r('app.media.fb_ic_resources');
      case 'tasks': return $r('app.media.fb_ic_tasks');
      case 'days': return $r('app.media.fb_ic_days');
      case 'ledger': return $r('app.media.fb_ic_ledger');
      case 'books': return $r('app.media.fb_ic_books');
      case 'notes': return $r('app.media.fb_ic_notes');
      default: return $r('app.media.fb_ic_home');
    }
  }

  /** 首页只放「进行中 + 已逾期」两类任务（与 Web 端同一取舍） */
  private recentTasks(): FbTaskItem[] {
    return this.tasks.filter((t: FbTaskItem): boolean => t.status === 'doing' || t.overdue);
  }
}