<!-- 报价明细组件 -->
<div class="quotation-detail-container">
  <div class="quotation-header">
    <div class="header-left">
      <h4>报价明细</h4>
      <p>AI辅助生成详细报价清单</p>
    </div>
    <div class="header-actions">
      <button 
        type="button" 
        class="btn-secondary btn-sm"
        (click)="generateAIQuotation()"
        [disabled]="isGenerating()">
        @if (isGenerating()) {
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="animate-spin">
            <path d="M21 12a9 9 0 1 1-6.219-8.56"></path>
          </svg>
        } @else {
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M12 2L2 7l10 5 10-5-10-5z"></path>
            <path d="M2 17l10 5 10-5"></path>
            <path d="M2 12l10 5 10-5"></path>
          </svg>
        }
        {{ isGenerating() ? 'AI生成中...' : 'AI智能报价' }}
      </button>
      
      <button 
        type="button" 
        class="btn-primary btn-sm"
        (click)="addQuotationItem()">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <line x1="12" y1="5" x2="12" y2="19"></line>
          <line x1="5" y1="12" x2="19" y2="12"></line>
        </svg>
        添加项目
      </button>
    </div>
  </div>

  <!-- 报价项目列表 -->
  <div class="quotation-items">
    @if (quotationItems().length === 0) {
      <div class="empty-state">
        <div class="empty-icon">
          <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
            <rect x="3" y="4" width="18" height="14" rx="2" ry="2"></rect>
            <line x1="8" y1="2" x2="16" y2="2"></line>
            <line x1="10" y1="11" x2="14" y2="11"></line>
            <line x1="12" y1="9" x2="12" y2="13"></line>
          </svg>
        </div>
        <p>暂无报价项目</p>
        <p class="empty-hint">点击"AI智能报价"或"添加项目"开始创建报价清单</p>
      </div>
    } @else {
      @for (item of quotationItems(); track item.id) {
        <div class="quotation-item" [class.editing]="editingItemId() === item.id">
          <div class="item-content">
            <div class="item-info">
              <div class="room-type">
                @if (editingItemId() === item.id) {
                  <select 
                    [(ngModel)]="editingItem.roomType" 
                    class="edit-select">
                    <option value="">选择空间类型</option>
                    @for (roomType of roomTypeOptions; track roomType) {
                      <option [value]="roomType">{{ roomType }}</option>
                    }
                  </select>
                } @else {
                  <span class="room-name">{{ item.roomType }}</span>
                }
              </div>
              
              <div class="item-amount">
                @if (editingItemId() === item.id) {
                  <div class="amount-input">
                    <input 
                      type="number" 
                      [(ngModel)]="editingItem.amount"
                      class="edit-input"
                      placeholder="金额"
                      min="0"
                      step="0.01">
                    <span class="unit">元</span>
                  </div>
                } @else {
                  <span class="amount">¥{{ item.amount | number:'1.2-2' }}</span>
                }
              </div>
            </div>
            
            @if (item.description || editingItemId() === item.id) {
              <div class="item-description">
                @if (editingItemId() === item.id) {
                  <textarea 
                    [(ngModel)]="editingItem.description"
                    class="edit-textarea"
                    placeholder="项目描述（选填）"
                    rows="2"></textarea>
                } @else {
                  <p>{{ item.description }}</p>
                }
              </div>
            }
          </div>
          
          <div class="item-actions">
            @if (editingItemId() === item.id) {
              <button 
                type="button" 
                class="action-btn save-btn"
                (click)="saveItem()">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <polyline points="20 6 9 17 4 12"></polyline>
                </svg>
              </button>
              <button 
                type="button" 
                class="action-btn cancel-btn"
                (click)="cancelEdit()">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <line x1="18" y1="6" x2="6" y2="18"></line>
                  <line x1="6" y1="6" x2="18" y2="18"></line>
                </svg>
              </button>
            } @else {
              <button 
                type="button" 
                class="action-btn edit-btn"
                (click)="editItem(item)">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
                  <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
                </svg>
              </button>
              <button 
                type="button" 
                class="action-btn delete-btn"
                (click)="deleteItem(item.id)">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <polyline points="3 6 5 6 21 6"></polyline>
                  <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
                </svg>
              </button>
            }
          </div>
        </div>
      }
    }
  </div>

  <!-- 总计 -->
  @if (quotationItems().length > 0) {
    <div class="quotation-summary">
      <div class="summary-row">
        <span class="summary-label">项目总数：</span>
        <span class="summary-value">{{ quotationItems().length }} 项</span>
      </div>
      <div class="summary-row total">
        <span class="summary-label">总计金额：</span>
        <span class="summary-value">¥{{ totalAmount() | number:'1.2-2' }}</span>
      </div>
    </div>
  }
</div>