<ion-header>
  <ion-toolbar color="primary">
    <ion-title (click)="initializeSampleData()">我的农场</ion-title>
    <ion-buttons slot="end">
      <ion-button (click)="toggleFieldForm()">
        <ion-icon [name]="showFieldForm ? 'close' : 'add'" slot="icon-only"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>
  <!-- 添加/编辑农田表单 -->
  <ion-card *ngIf="showFieldForm" class="form-card">
    <ion-card-header>
      <ion-card-title>{{ editingField ? '编辑农田' : '添加新农田' }}</ion-card-title>
    </ion-card-header>
    <ion-card-content>
      <form [formGroup]="fieldForm" (ngSubmit)="saveField()">
        <ion-item>
          <ion-label position="floating">农田名称</ion-label>
          <ion-input formControlName="name" type="text"></ion-input>
        </ion-item>

        <ion-item>
          <ion-label position="floating">面积(亩)</ion-label>
          <ion-input formControlName="area" type="number"></ion-input>
        </ion-item>

        <ion-item>
          <ion-label position="floating">位置</ion-label>
          <ion-input formControlName="location" type="text"></ion-input>
        </ion-item>

        <ion-item>
          <ion-label>当前作物</ion-label>
          <ion-select formControlName="currentCrop">
            <ion-select-option value="冬小麦">冬小麦</ion-select-option>
            <ion-select-option value="春玉米">春玉米</ion-select-option>
            <ion-select-option value="水稻">水稻</ion-select-option>
            <ion-select-option value="大豆">大豆</ion-select-option>
          </ion-select>
        </ion-item>

        <ion-item>
          <ion-label>作物阶段</ion-label>
          <ion-select formControlName="growthStage">
            <ion-select-option value="播种期">播种期</ion-select-option>
            <ion-select-option value="苗期">苗期</ion-select-option>
            <ion-select-option value="生长期">生长期</ion-select-option>
            <ion-select-option value="成熟期">成熟期</ion-select-option>
            <ion-select-option value="收获期">收获期</ion-select-option>
          </ion-select>
        </ion-item>

        <ion-item>
          <ion-label>土壤类型</ion-label>
          <ion-select formControlName="soilType">
            <ion-select-option value="粘壤土">粘壤土</ion-select-option>
            <ion-select-option value="砂壤土">砂壤土</ion-select-option>
            <ion-select-option value="壤土">壤土</ion-select-option>
            <ion-select-option value="粘土">粘土</ion-select-option>
          </ion-select>
        </ion-item>

        <div class="form-buttons">
          <ion-button type="button" fill="outline" (click)="cancelEdit()">取消</ion-button>
          <ion-button *ngIf="editingField" type="button" color="danger" (click)="confirmDelete()">
            <ion-icon name="trash" slot="start"></ion-icon>
            删除
          </ion-button>
          <ion-button type="submit" [disabled]="!fieldForm.valid">保存</ion-button>
        </div>
      </form>
    </ion-card-content>
  </ion-card>

  <!-- 农场概览 -->
  <ion-card class="summary-card">
    <ion-card-header>
      <ion-card-title>农场概览</ion-card-title>
    </ion-card-header>
    <ion-card-content>
      <div class="summary-grid">
        <div class="summary-item">
          <ion-icon name="map" color="primary"></ion-icon>
          <h3>{{ fields.length }}</h3>
          <p>地块数量</p>
        </div>
        <div class="summary-item">
          <ion-icon name="leaf" color="success"></ion-icon>
          <h3>{{ totalArea }}亩</h3>
          <p>种植面积</p>
        </div>
        <div class="summary-item">
          <ion-icon name="stats-chart" color="warning"></ion-icon>
          <h3>{{ cropDistribution.length }}</h3>
          <p>作物种类</p>
        </div>
      </div>
    </ion-card-content>
  </ion-card>

  <!-- 作物分布 -->
  <ion-card *ngIf="fields.length > 0" class="crops-card">
    <ion-card-header>
      <ion-card-title>
        <ion-icon name="pie-chart" color="primary"></ion-icon>
        作物分布
      </ion-card-title>
    </ion-card-header>
    <ion-card-content>
      <div class="crops-grid">
        <div class="crop-item" *ngFor="let crop of cropDistribution">
          <div class="crop-icon">
            <img [src]="getCropImage(crop.name)">
          </div>
          <div class="crop-info">
            <h4>{{ crop.name }}</h4>
            <p>{{ crop.area }}亩 ({{ crop.percentage }}%)</p>
            <ion-progress-bar [value]="crop.percentage/100" [color]="getCropColor(crop.name)"></ion-progress-bar>
          </div>
        </div>
      </div>
    </ion-card-content>
  </ion-card>

  <!-- 农田地块列表 -->
  <ion-list>
    <ion-item-sliding *ngFor="let field of fields">
      <ion-item (click)="editField(field)">
        <ion-avatar slot="start">
          <img [src]="getCropImage(field.currentCrop)">
        </ion-avatar>
        <ion-label>
          <h2>{{ field.name }}</h2>
          <p>{{ field.area }}亩 • {{ field.currentCrop }}</p>
          <p class="field-status">
            <ion-badge [color]="getStageColor(field.growthStage)">
              {{ field.growthStage }}
            </ion-badge>
            <span>种植 {{ field.daysPlanted }}天</span>
          </p>
        </ion-label>
        <ion-note slot="end">
          {{ getStageDays(field.growthStage) }}天
        </ion-note>
      </ion-item>
      <ion-item-options side="end">
        <ion-item-option color="danger" (click)="deleteField(field.id)">
          <ion-icon name="trash" slot="icon-only"></ion-icon>
        </ion-item-option>
      </ion-item-options>
    </ion-item-sliding>
  </ion-list>

  <!-- 无地块提示 -->
  <div class="empty-tip" *ngIf="fields.length === 0 && !showFieldForm">
    <ion-icon name="earth"></ion-icon>
    <p>您还没有添加农田地块</p>
    <ion-button fill="outline" (click)="toggleFieldForm()">添加第一块地</ion-button>
  </div>
</ion-content>