<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>way</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
    <!-- 新增路线表单模态框 -->
    <div class="modal-overlay" *ngIf="showCreateModal" (click)="closeModal()">
    <div class="create-modal" (click)="$event.stopPropagation()">
        <div class="modal-header">
        <h3>创建新路线</h3>
        <ion-icon name="close" (click)="closeModal()"></ion-icon>
        </div>

        <div class="modal-body">
        <!-- 路线名称 -->
        <div class="form-group">
            <label>路线名称</label>
            <input type="text" [(ngModel)]="newRouteData.title" placeholder="请输入路线名称" />
        </div>

        <!-- 描述 -->
        <div class="form-group">
            <label>描述</label>
            <textarea [(ngModel)]="newRouteData.description" placeholder="请输入路线描述"></textarea>
        </div>

        <!-- 长度和难度 行内排列 -->
        <div class="form-row">
            <div class="form-group half">
            <label>长度(公里)</label>
            <input type="number" step="0.1" [(ngModel)]="newRouteData.routelength" placeholder="8.5" />
            </div>
            <div class="form-group half">
            <label>难度(1-5)</label>
            <input type="number" min="1" max="5" [(ngModel)]="newRouteData.difficulty" />
            </div>
        </div>

        <!-- 常见鸟类 -->
        <ion-item class="form-group">
            <ion-label position="floating">常见鸟类</ion-label>
            <ion-select multiple="true" [(ngModel)]="newRouteData.birds">
            <ion-select-option *ngFor="let bird of birdTypes" [value]="bird.toPointer()">
                {{ bird.get('name') }}
            </ion-select-option>
            </ion-select>
        </ion-item>

        <!-- 路线图片URL -->
        <div class="form-group">
            <label>路线图片URL</label>
            <input type="text" [(ngModel)]="newRouteData.thumbnail" placeholder="https://example.com/image.jpg" />
        </div>
        </div>

        <!-- 按钮区域 -->
        <div class="modal-footer">
        <button class="cancel-btn" (click)="closeModal()">取消</button>
        <button class="confirm-btn" (click)="confirmCreate()">确定</button>
        </div>
    </div>
    </div>
  
  <div class="container">
    <!-- 顶部导航栏 -->
    <div class="header">
      <div class="back-btn">
        <i class="iconfont icon-arrow-left"></i>
      </div>
      <div class="title">观鸟路线</div>
      <div style="width: 24px;"></div>
    </div>

    <!-- 加载状态指示 -->
    <div *ngIf="isLoading" class="loading-indicator">
      加载中...
    </div>

    <!-- 路线推荐卡片 -->
    <div class="route-container">
    <div class="route-card" *ngFor="let route of routes">
        <div class="route-thumbnail" [style.background-image]="'url(' + route.get('thumbnail') + ')'"></div>
        <div class="route-info">
        <div class="route-title">{{ route.get('title') }}</div>
        <div class="route-actions">
            <button class="delete-btn" (click)="deleteRoute(route)">删除</button>
        </div>
        <div class="route-rating">
            <span *ngFor="let star of getStars(route.get('rating'))">{{ star }}</span>
            <span class="rating-value">{{ route.get('rating')?.toFixed(1) || '0.0' }}</span>
        </div>
        
        <div class="route-meta">
            <span><i class="iconfont icon-clock"></i>{{ route.get('duration') }}</span>
            <span><i class="iconfont icon-ruler"></i>{{ route.get('routelength') }}公里</span>
            <span><i class="iconfont icon-difficulty"></i>难度: {{ route.get('difficulty') }}/5</span>
        </div>
        
        <div class="route-description">
            {{ route.get('description') || '暂无描述' }}
        </div>
        
       <div class="birds-section" *ngIf="route.id && getBirdsForRoute(route.id).length > 0">
        <div class="section-title">
            鸟类 ({{ getBirdsForRoute(route.id).length }}种)
        </div>
        
        <div *ngIf="getBirdsForRoute(route.id).length === 0" class="no-birds">
            暂无鸟类数据
        </div>
        
        <div class="birds-grid" *ngIf="getBirdsForRoute(route.id).length > 0">
            <div class="bird-item" *ngFor="let bird of getBirdsForRoute(route.id)">
            <div class="bird-avatar" 
                [style.background-image]="'url(' + (bird.get('image') || 'assets/default-bird.png') + ')'" (click)="openBirdModal(bird)">
            </div>
            <div class="bird-name">
                {{ bird.get('name') }}
                <span class="protected-badge" *ngIf="bird.get('conservationStatus')">
                {{ bird.get('conservationStatus') }}
                </span>
            </div>
            </div>
        </div>
        </div>
        
        <div class="route-tags" *ngIf="route.get('tags')?.length > 0">
            <span class="tag" *ngFor="let tag of route.get('tags')">{{ tag }}</span>
        </div>
        </div>
    </div>
    </div>
    
    <!-- 底部操作按钮 -->
    <div class="action-buttons">
      <div class="action-btn select-btn" (click)="importSampleRoutes()">
        <i class="iconfont icon-select"></i> 导入示例
      </div>
      <div class="action-btn upload-btn" (click)="showCreateForm()">
        <i class="iconfont icon-upload"></i> 创建路线
      </div>
    </div>
  </div>

  <!-- 鸟类详情模态框 -->
    <div class="bird-modal-overlay" *ngIf="showBirdModal" (click)="closeBirdModal()">
    <div class="bird-modal-content" (click)="$event.stopPropagation()">
        <ion-icon name="close" class="close-icon" (click)="closeBirdModal()"></ion-icon>
        
        <div class="bird-card-top">
        <!-- 动态图片 -->
        <img [src]="selectedBird.image" alt="鸟类照片" class="bird-modal-avatar">

        <div class="bird-info">
            <!-- 名称与学名 -->
            <h2 class="bird-name">
            {{ selectedBird.name }}
            <span class="scientific-name">{{ selectedBird.scientificName }}</span>
            <span *ngIf="selectedBird.conservationStatus" class="conservation-status">
                {{ selectedBird.conservationStatus }}
            </span>
            </h2>

            <!-- 分类信息 -->
            <p class="bird-taxonomy" *ngIf="selectedBird.taxonomy">
            {{ selectedBird.taxonomy.order }} > 
            {{ selectedBird.taxonomy.family }} > 
            {{ selectedBird.taxonomy.genus }}
            </p>

            <!-- 星级评分 -->
            <div class="bird-rating">
            <span *ngFor="let star of getStars(selectedBird.rating)" class="star">{{ star }}</span>
            <span class="rating-text">{{ selectedBird.rating }}分</span>
            </div>

            <!-- 标签 -->
            <div class="bird-tags" *ngIf="selectedBird.tags.length > 0">
            <span *ngFor="let tag of selectedBird.tags" class="tag">{{ tag }}</span>
            </div>
        </div>
        </div>

        <!-- 描述 -->
        <p class="bird-description">{{ selectedBird.description }}</p>

        <!-- 特征 -->
        <div class="bird-section" *ngIf="selectedBird.characteristics">
        <h3>特征</h3>
        <ul>
            <li *ngIf="selectedBird.characteristics.size"><strong>体型:</strong> {{ selectedBird.characteristics.size }}</li>
            <li *ngIf="selectedBird.characteristics.color"><strong>颜色:</strong> {{ selectedBird.characteristics.color }}</li>
            <li *ngIf="selectedBird.characteristics.habitat"><strong>栖息地:</strong> {{ selectedBird.characteristics.habitat }}</li>
        </ul>
        </div>

        <!-- 观察提示 -->
        <div class="bird-section" *ngIf="selectedBird.observation">
        <h3>观察提示</h3>
        <ul>
            <li *ngIf="selectedBird.observation.season"><strong>最佳季节:</strong> {{ selectedBird.observation.season }}</li>
            <li *ngIf="selectedBird.observation.time"><strong>最佳时间:</strong> {{ selectedBird.observation.time }}</li>
        </ul>
        </div>
    </div>
    </div>

</ion-content>
