<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title size="large">个性化推荐</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
    <!-- 用户画像区 -->
    <section>
      <ion-card>
        <ion-card-header>
          <ion-card-title>用户画像</ion-card-title>
        </ion-card-header>
        <ion-card-content>
          <ion-item>
          <!-- 未登录 -->
          @if(!currentUser.id){
            <ion-avatar slot="start">
              <img src="assets/user.png">
            </ion-avatar>
            <ion-label>
              <h2>用户未登录</h2>
              <p><a (click)="relogin()">请登录后重试</a></p>
            </ion-label>
          }
          <!-- 已登录 -->
          @if(currentUser.id){
            <ion-avatar slot="start">
              <img [src]="currentUser.get('avatar')" alt="avatar">
            </ion-avatar>
            <ion-label>
              <h1>{{ currentUser.get("username") }}</h1>
              <h3> 个人画像：{{ currentUser.get("imagery") }}</h3>
            </ion-label>
          }
        </ion-item>
        <!-- <ion-button (click)="goToPage()">
          生成用户画像
        </ion-button> -->
        </ion-card-content>
      </ion-card>
    </section>
  
    <!-- AI智能推荐
    <section>
      <ion-card>
        <ion-card-header>
          <ion-card-title>AI智能推荐</ion-card-title>
        </ion-card-header>
        <ion-card-content>
          <ion-button expand="full" color="primary" size="large" (click)="goToPage()">
            AI推荐
          </ion-button>
        </ion-card-content>
      </ion-card>
    </section> -->

    <!-- 推荐影视剧列表 -->
    <section>
      <ion-card>
        <ion-card-header>
          <ion-card-title>为您推荐</ion-card-title>
        </ion-card-header>
        <ion-card-content>
          <ion-button (click)="sendMessage()" expand="block">推荐生成</ion-button>
          <ion-list>
            <ion-item *ngFor="let film of filmList">
              <!-- <ion-thumbnail slot="start">
                <img [src]="movie.coverImage" alt="{{ movie.title }} 封面">
              </ion-thumbnail> -->
              <ion-label>
                <h2>{{ film.get('title') }}</h2>
                <p>题材: {{ film.get('genre') }}</p>
                <p>评分: {{ film.get('grade') }}</p>
                <p>{{ film.get('desc') }}</p>
              </ion-label>
            </ion-item>
          </ion-list>
        </ion-card-content>
      </ion-card>
    </section>
</ion-content>








    <!-- 底部推荐区 -->
    <!-- <section>
      <ion-card>
        <ion-card-header>
          <ion-card-title>您可能也喜欢</ion-card-title>
        </ion-card-header>
        <ion-card-content>
          <ion-list>
            <ion-item *ngFor="let similarMovie of similarMovies">
              <ion-thumbnail slot="start">
                <img [src]="similarMovie.coverImage" alt="{{ similarMovie.title }} 封面">
              </ion-thumbnail>
              <ion-label>
                <h2>{{ similarMovie.title }}</h2>
                <p>评分: {{ similarMovie.rating }}</p>
                <p>{{ similarMovie.description }}</p>
              </ion-label>
            </ion-item>
          </ion-list>
        </ion-card-content>
      </ion-card>
    </section> -->

