<div class="quotation-details-container">
  <div class="section-header">
    <h3>报价明细</h3>
    <div class="header-actions">
      <button type="button" class="btn-secondary" (click)="showAutoQuotation()">
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M8 1L10.5 6H15L11 9.5L12.5 15L8 12L3.5 15L5 9.5L1 6H5.5L8 1Z" stroke="currentColor" stroke-width="1.5" fill="none"/>
        </svg>
        智能报价
      </button>
      <button type="button" class="btn-secondary" (click)="showScriptLibrary()">
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M3 3h10a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z" stroke="currentColor" stroke-width="1.5" fill="none"/>
          <path d="M7 8h4M7 10h2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
        </svg>
        话术库
      </button>
      <button type="button" class="btn-primary" (click)="addQuotationItem()">
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M8 3V13M3 8H13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
        </svg>
        添加项目
      </button>
    </div>
  </div>

  <div class="quotation-form">
    <!-- 报价项目列表 -->
    <div class="quotation-items">
      @for (item of quotationData.items; track item.id; let i = $index) {
        <div class="quotation-item expanded">
          <div class="item-header">
            <div class="item-info">
              <span class="item-name">{{ item.name || '未命名项目' }}</span>
              <span class="item-category">{{ item.category }}</span>
            </div>
            <div class="item-actions">
              <button type="button" class="btn-icon" (click)="duplicateQuotationItem(i)" title="复制">
                <svg width="14" height="14" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M4 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V2Zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H6ZM2 5a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-1h1v1a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h1v1H2Z"/>
                </svg>
              </button>
              <button type="button" class="btn-icon btn-danger" (click)="removeQuotationItem(i)" title="删除">
                <svg width="14" height="14" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
                  <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
                </svg>
              </button>
            </div>
          </div>
          
          <div class="item-details">
            <div class="form-row">
              <div class="form-group">
                <label class="form-label">项目名称</label>
                <input type="text" [(ngModel)]="item.name" (ngModelChange)="onItemChange()" class="form-input" placeholder="请输入项目名称">
              </div>
              <div class="form-group">
                <label class="form-label">类别</label>
                <select [(ngModel)]="item.category" (ngModelChange)="onItemChange()" class="form-select">
                  <option value="客餐厅">客餐厅</option>
                  <option value="厨房">厨房</option>
                  <option value="卫生间">卫生间</option>
                  <option value="卧室">卧室</option>
                  <option value="阳台">阳台</option>
                  <option value="其他">其他</option>
                </select>
              </div>
            </div>
            
            <div class="form-row">
              <div class="form-group">
                <label class="form-label">数量</label>
                <input type="number" [(ngModel)]="item.quantity" (ngModelChange)="onItemChange()" class="form-input" min="0" step="0.01">
              </div>
              <div class="form-group">
                <label class="form-label">单位</label>
                <select [(ngModel)]="item.unit" (ngModelChange)="onItemChange()" class="form-select">
                  <option value="㎡">㎡</option>
                  <option value="延米">延米</option>
                  <option value="个">个</option>
                  <option value="套">套</option>
                  <option value="项">项</option>
                </select>
              </div>
              <div class="form-group">
                <label class="form-label">单价（元）</label>
                <input type="number" [(ngModel)]="item.unitPrice" (ngModelChange)="onItemChange()" class="form-input" min="0" step="0.01">
              </div>
              <div class="form-group">
                <label class="form-label">小计（元）</label>
                <input type="text" [value]="(item.quantity * item.unitPrice).toFixed(2)" class="form-input" readonly>
              </div>
            </div>
            
            <div class="form-group">
              <label class="form-label">项目描述</label>
              <textarea [(ngModel)]="item.description" (ngModelChange)="onItemChange()" class="form-textarea" rows="2" placeholder="请输入项目描述"></textarea>
            </div>
          </div>
        </div>
      }

      @if (quotationData.items.length === 0) {
        <div class="empty-state">
          <div class="empty-icon">
            <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M24 4L28.5 18H42L32 26.5L36.5 40L24 32L11.5 40L16 26.5L6 18H19.5L24 4Z" stroke="#D1D5DB" stroke-width="2" fill="none"/>
            </svg>
          </div>
          <p>暂无报价项目</p>
          <p class="empty-hint">点击"添加项目"或"智能报价"开始创建报价清单</p>
        </div>
      }
    </div>

    <!-- 报价汇总 -->
    @if (quotationData.items.length > 0) {
      <div class="quotation-summary">
        <div class="summary-header">
          <h4>报价汇总</h4>
        </div>
        <div class="summary-content">
          <div class="summary-row">
            <span class="summary-label">项目总数：</span>
            <span class="summary-value">{{ quotationData.items.length }} 项</span>
          </div>
          <div class="summary-row">
            <span class="summary-label">材料费用：</span>
            <span class="summary-value">¥{{ formatAmount(getMaterialCost()) }}</span>
          </div>
          <div class="summary-row">
            <span class="summary-label">人工费用：</span>
            <span class="summary-value">¥{{ formatAmount(getLaborCost()) }}</span>
          </div>
          <div class="summary-row total">
            <span class="summary-label">合计金额：</span>
            <span class="summary-value">¥{{ formatAmount(getTotalAmount()) }}</span>
          </div>
        </div>
        <div class="summary-actions">
          <button type="button" class="btn-primary" (click)="submitForApproval()" [disabled]="quotationData.totalAmount === 0">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M8 1L10.5 6H15L11 9.5L12.5 15L8 12L3.5 15L5 9.5L1 6H5.5L8 1Z" stroke="currentColor" stroke-width="1.5" fill="none"/>
            </svg>
            提交财务审核
          </button>
        </div>
      </div>
    }
  </div>



  <!-- 智能报价模态框 -->
  @if (showAutoQuotationModal) {
    <div class="modal-overlay" (click)="hideAutoQuotation()">
      <div class="modal-content" (click)="$event.stopPropagation()">
        <div class="modal-header">
          <h4>智能报价生成</h4>
          <button type="button" class="modal-close" (click)="hideAutoQuotation()">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M15 5L5 15M5 5L15 15" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
            </svg>
          </button>
        </div>
        <div class="modal-body">
          <div class="form-grid">
            <div class="form-group">
              <label class="form-label">空间类型</label>
              <select [(ngModel)]="autoQuotationParams.spaceType" class="form-select">
                <option value="">请选择空间类型</option>
                @for (type of getSpaceTypeOptions(); track type.value) {
                  <option [value]="type.value">{{ type.label }}</option>
                }
              </select>
            </div>
            <div class="form-group">
              <label class="form-label">项目风格</label>
              <select [(ngModel)]="autoQuotationParams.projectStyle" class="form-select">
                <option value="">请选择项目风格</option>
                @for (style of getProjectStyleOptions(); track style.value) {
                  <option [value]="style.value">{{ style.label }}</option>
                }
              </select>
            </div>
            <div class="form-group">
              <label class="form-label">预估工作天数</label>
              <input type="number" [(ngModel)]="autoQuotationParams.estimatedWorkDays" class="form-input" placeholder="请输入预估工作天数" min="1" max="365">
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn-secondary" (click)="hideAutoQuotation()">取消</button>
          <button type="button" class="btn-primary" (click)="generateAutoQuotation()" [disabled]="!autoQuotationParams.spaceType || !autoQuotationParams.projectStyle || !autoQuotationParams.estimatedWorkDays">
            生成报价
          </button>
        </div>
      </div>
    </div>
  }

  <!-- 话术库模态框 -->
  @if (showScriptModal) {
    <div class="modal-overlay" (click)="hideScriptLibrary()">
      <div class="modal-content script-modal" (click)="$event.stopPropagation()">
        <div class="modal-header">
          <h4>报价话术库</h4>
          <button type="button" class="modal-close" (click)="hideScriptLibrary()">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M15 5L5 15M5 5L15 15" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
            </svg>
          </button>
        </div>
        <div class="modal-body">
          <div class="script-categories">
            @for (script of pricingScripts; track script.id) {
              <div class="script-item" [class.selected]="selectedScript?.id === script.id" (click)="selectScript(script)">
                <div class="script-header">
                  <h5>{{ script.title }}</h5>
                  <span class="script-category">{{ script.category }}</span>
                </div>
                <p class="script-description">{{ script.content.substring(0, 100) }}...</p>
                @if (selectedScript?.id === script.id) {
                  <div class="script-content">
                    <div class="script-text">{{ script.content }}</div>
                    <div class="script-actions">
                      <button type="button" class="btn-secondary btn-sm" (click)="copyScript(script); $event.stopPropagation()">
                        <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M4.5 4.5V2.5C4.5 2.22386 4.72386 2 5 2H11.5C11.7761 2 12 2.22386 12 2.5V9C12 9.27614 11.7761 9.5 11.5 9.5H9.5" stroke="currentColor" stroke-width="1" fill="none"/>
                          <rect x="2" y="4.5" width="7.5" height="7.5" rx="0.5" stroke="currentColor" stroke-width="1" fill="none"/>
                        </svg>
                        复制
                      </button>
                    </div>
                  </div>
                }
              </div>
            }
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn-secondary" (click)="hideScriptLibrary()">关闭</button>
        </div>
      </div>
    </div>
  }
</div>