<!-- dish-management.component.html -->
<div class="container mx-auto p-4">
  <!-- 搜索和操作区域 -->
  <div class="flex justify-between items-center mb-6">
    <div class="flex gap-2">
      <input 
        type="text" 
        placeholder="搜索菜品..." 
        class="input input-bordered w-full max-w-xs"
        [(ngModel)]="searchTerm"
      />
      <button class="btn btn-primary" (click)="search()">
        <i class="fas fa-search"></i> 搜索
      </button>
    </div>
    
    <button class="btn btn-success" (click)="startCreate()">
      <i class="fas fa-plus"></i> 添加菜品
    </button>
  </div>

  <!-- 表单区域 -->
  @if (showForm) {
  <div class="card bg-base-100 shadow-xl mb-6">
    <div class="card-body">
      <h2 class="card-title">
        {{ isEditing ? '编辑菜品' : '添加新菜品' }}
      </h2>
      
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <!-- 基本信息 -->
        <div class="space-y-4">
          <div class="form-control">
            <label class="label">
              <span class="label-text">菜品名称 *</span>
            </label>
            <input 
              type="text" 
              class="input input-bordered w-full" 
              [(ngModel)]="currentDish.name"
              required
            />
          </div>
          
          <div class="form-control">
            <label class="label">
              <span class="label-text">描述</span>
            </label>
            <textarea 
              class="textarea textarea-bordered w-full" 
              [(ngModel)]="currentDish.description"
            ></textarea>
          </div>
          
          <div class="form-control">
            <label class="label cursor-pointer">
              <span class="label-text">是否上架</span>
              <input 
                type="checkbox" 
                class="toggle toggle-primary" 
                [(ngModel)]="currentDish.isActive"
              />
            </label>
          </div>
        </div>
        
        <!-- 分类和属性 -->
        <div class="space-y-4">
          <div class="form-control">
            <label class="label">
              <span class="label-text">分类</span>
            </label>
            <select class="select select-bordered w-full" [(ngModel)]="currentDish.category">
              <option [value]="null">-- 请选择分类 --</option>
              @for (category of categories; track category.objectId) {
              <option [value]="category.objectId">
                {{ category.get('name') }}
              </option>
              }
            </select>
          </div>
          
          <div class="grid grid-cols-2 gap-4">
            <div class="form-control">
              <label class="label">
                <span class="label-text">制作时间(分钟)</span>
              </label>
              <input 
                type="number" 
                class="input input-bordered w-full" 
                [(ngModel)]="currentDish.preparationTime"
                min="0"
              />
            </div>
            
            <div class="form-control">
              <label class="label">
                <span class="label-text">辣度(0-5)</span>
              </label>
              <input 
                type="number" 
                class="input input-bordered w-full" 
                [(ngModel)]="currentDish.spicyLevel"
                min="0" 
                max="5"
              />
            </div>
          </div>
          
          <!-- 标签管理 -->
          <div class="form-control">
            <label class="label">
              <span class="label-text">标签</span>
            </label>
            <div class="flex gap-2">
              <input 
                type="text" 
                class="input input-bordered flex-grow" 
                [(ngModel)]="newTag"
                placeholder="添加标签..."
                (keyup.enter)="addTag()"
              />
              <button class="btn btn-outline" (click)="addTag()">
                <i class="fas fa-plus"></i>
              </button>
            </div>
            
            <div class="flex flex-wrap gap-2 mt-2">
              @for (tag of currentDish.tags; track tag) {
              <div class="badge badge-primary gap-2">
                {{ tag }}
                <button class="text-xs" (click)="removeTag(tag)">
                  <i class="fas fa-times"></i>
                </button>
              </div>
              }
            </div>
          </div>
        </div>
      </div>
      
      <div class="card-actions justify-end mt-4">
        <button class="btn btn-ghost" (click)="cancelEdit()">取消</button>
        <button class="btn btn-primary" (click)="saveDish()">保存</button>
      </div>
    </div>
  </div>
  }

  <!-- 加载状态 -->
  @if (isLoading) {
  <div class="text-center py-10">
    <span class="loading loading-spinner loading-lg"></span>
    <p>加载中...</p>
  </div>
  }

  <!-- 菜品列表 -->
  @if (!isLoading && dishes.length === 0) {
  <div class="alert alert-info shadow-lg">
    <div>
      <i class="fas fa-info-circle"></i>
      <span>没有找到菜品数据</span>
    </div>
  </div>
  }

  @if (!isLoading && dishes.length > 0) {
  <div class="overflow-x-auto">
    <table class="table table-zebra w-full">
      <thead>
        <tr>
          <th>名称</th>
          <th>描述</th>
          <th>分类</th>
          <th>状态</th>
          <th>制作时间</th>
          <th>辣度</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        @for (dish of dishes; track dish.objectId) {
        <tr>
          <td>{{ dish.get('name') }}</td>
          <td class="max-w-xs truncate">{{ dish.get('description') }}</td>
          <td>
            @if (dish.get('category')) {
            {{ dish.get('category').get('name') }}
            } @else {
            <span class="text-gray-400">未分类</span>
            }
          </td>
          <td>
            <button 
              class="btn btn-xs" 
              [class.btn-success]="dish.get('isActive')"
              [class.btn-error]="!dish.get('isActive')"
              (click)="toggleStatus(dish)"
            >
              {{ dish.get('isActive') ? '上架中' : '已下架' }}
            </button>
          </td>
          <td>{{ dish.get('preparationTime') }} 分钟</td>
          <td>
            <div class="rating rating-sm">
              @for (star of [1,2,3,4,5]; track star) {
              <input 
                type="radio" 
                class="mask mask-star-2 bg-orange-400" 
                [checked]="star <= dish.get('spicyLevel')"
                disabled
              />
              }
            </div>
          </td>
          <td class="flex gap-2">
            <button class="btn btn-xs btn-info" (click)="startEdit(dish)">
              <i class="fas fa-edit"></i> 编辑
            </button>
            <button class="btn btn-xs btn-error" (click)="deleteDish(dish.objectId)">
              <i class="fas fa-trash"></i> 删除
            </button>
          </td>
        </tr>
        }
      </tbody>
    </table>
  </div>
  }
</div>