<div class="consultation-order-container">
  <!-- 现代化页面头部 -->
  <header class="page-header">
    <div class="header-content">
      <div class="header-icon">
        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path>
        </svg>
      </div>
      <div class="header-text">
        <h1>客户咨询与下单</h1>
        <p>记录客户需求，快速生成报价，一键创建项目</p>
      </div>
    </div>
    
    <!-- 成功提示 -->
    <div *ngIf="showSuccessMessage()" class="success-toast">
      <div class="toast-content">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
          <polyline points="22 4 12 14.01 9 11.01"></polyline>
        </svg>
        <span>表单提交成功！项目已创建</span>
      </div>
    </div>
  </header>

  <!-- 主要内容区域 -->
  <main class="main-content">

    <!-- 客户信息卡片 -->
    <section class="info-card customer-card">
      <div class="card-header">
        <div class="header-left">
          <div class="icon-wrapper customer-icon">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
              <circle cx="12" cy="7" r="4"></circle>
            </svg>
          </div>
          <div class="header-text">
            <h2>客户信息</h2>
            <p>搜索或新建客户档案</p>
          </div>
        </div>
        <div class="header-actions">
          <button *ngIf="selectedCustomer()" class="btn-ghost btn-sm" (click)="clearSelectedCustomer()">
            <svg width="16" height="16" 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>
        </div>
      </div>
      
      <div class="card-content">
        <!-- 客户搜索区域 -->
        <div *ngIf="!selectedCustomer()" class="customer-search-section">
          <div class="search-container">
            <div class="search-input-wrapper">
              <svg class="search-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <circle cx="11" cy="11" r="8"></circle>
                <path d="m21 21-4.35-4.35"></path>
              </svg>
              <input 
                type="text" 
                [ngModel]="searchKeyword()" 
                (ngModelChange)="searchKeyword.set($event); searchCustomer()"
                placeholder="搜索客户姓名或手机号..."
                class="search-input"
                autocomplete="off"
              />
            </div>
          </div>
          
          <!-- 搜索结果 -->
          <div *ngIf="searchResults().length > 0" class="search-results">
            <div class="results-header">
              <span class="results-count">找到 {{ searchResults().length }} 位客户</span>
            </div>
            <div class="customer-list">
              <div *ngFor="let customer of searchResults()" class="customer-item" (click)="selectCustomer(customer)">
                <div class="customer-avatar">
                  <img [src]="customer.avatar" [alt]="customer.name" *ngIf="customer.avatar">
                  <div *ngIf="!customer.avatar" class="avatar-placeholder">
                    {{ customer.name.charAt(0) }}
                  </div>
                </div>
                <div class="customer-info">
                  <div class="customer-name">{{ customer.name }}</div>
                  <div class="customer-phone">{{ customer.phone }}</div>
                  <div class="customer-tags" *ngIf="customer.customerType || customer.source">
                    <span *ngIf="customer.customerType" class="tag type-tag">{{ customer.customerType }}</span>
                    <span *ngIf="customer.source" class="tag source-tag">{{ customer.source }}</span>
                  </div>
                </div>
                <div class="select-indicator">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <polyline points="9 18 15 12 9 6"></polyline>
                  </svg>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 客户信息表单 -->
        <form [formGroup]="customerForm" class="customer-form">
          <!-- 基本信息组 -->
          <div class="form-section">
            <h3 class="section-title">基本信息</h3>
            <div class="form-grid">
              <div class="form-field">
                <label for="name" class="field-label">客户姓名 <span class="required">*</span></label>
                <input type="text" id="name" formControlName="name" placeholder="请输入客户姓名" class="field-input">
              </div>
              <div class="form-field">
                <label for="phone" class="field-label">手机号码 <span class="required">*</span></label>
                <input type="tel" id="phone" formControlName="phone" placeholder="请输入手机号码" class="field-input">
              </div>
              <div class="form-field">
                <label for="wechat" class="field-label">微信账号</label>
                <input type="text" id="wechat" formControlName="wechat" placeholder="请输入微信账号" class="field-input">
              </div>
            </div>
          </div>
          
          <!-- 分类信息组 -->
          <div class="form-section">
            <h3 class="section-title">分类信息</h3>
            <div class="form-grid">
              <div class="form-field">
                <label for="customerType" class="field-label">客户类型</label>
                <select id="customerType" formControlName="customerType" class="field-select">
                  <option value="">请选择客户类型</option>
                  <option value="新客户">新客户</option>
                  <option value="老客户">老客户</option>
                  <option value="VIP客户">VIP客户</option>
                </select>
              </div>
              <div class="form-field">
                <label for="source" class="field-label">来源渠道</label>
                <input type="text" id="source" formControlName="source" placeholder="如：官网咨询、推荐介绍等" class="field-input">
              </div>
              <div class="form-field">
                <label for="demandType" class="field-label">需求类型</label>
                <select id="demandType" formControlName="demandType" class="field-select">
                  <option value="">请选择需求类型</option>
                  <option *ngFor="let type of demandTypes" [value]="type.value">{{ type.label }}</option>
                </select>
              </div>
              <div class="form-field">
                <label for="followUpStatus" class="field-label">跟进状态</label>
                <select id="followUpStatus" formControlName="followUpStatus" class="field-select">
                  <option value="">请选择跟进状态</option>
                  <option *ngFor="let status of followUpStatus" [value]="status.value">{{ status.label }}</option>
                </select>
              </div>
            </div>
          </div>
          
          <!-- 偏好标签组 -->
          <div class="form-section">
            <h3 class="section-title">偏好标签</h3>
            <div class="tags-section">
              <div class="current-tags">
                <mat-chip-grid #chipList aria-label="偏好标签">
                  <mat-chip-row
                    *ngFor="let tag of preferenceTags"
                    [removable]="true"
                    (removed)="removePreferenceTag(tag)"
                    class="preference-chip"
                  >
                    {{ tag }}
                    <button matChipRemove aria-label="移除 {{tag}}">
                      <mat-icon>cancel</mat-icon>
                    </button>
                  </mat-chip-row>
                  <input
                    placeholder="添加自定义标签..."
                    [matChipInputFor]="chipList"
                    [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
                    [matChipInputAddOnBlur]="addOnBlur"
                    (matChipInputTokenEnd)="addPreferenceTag($event)"
                    class="tag-input"
                  />
                </mat-chip-grid>
              </div>
              
              <!-- 预设标签选项 -->
              <div class="preset-tags">
                <div class="preset-header">
                  <span class="preset-label">快速选择</span>
                </div>
                <div class="preset-grid">
                  <button
                    *ngFor="let tag of preferenceTagOptions"
                    type="button"
                    class="preset-tag"
                    (click)="addFromPreset(tag)"
                    [class.selected]="preferenceTags.includes(tag)"
                  >
                    {{ tag }}
                  </button>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 备注信息组 -->
          <div class="form-section">
            <div class="form-field full-width">
              <label for="remark" class="field-label">备注信息</label>
              <textarea id="remark" formControlName="remark" rows="3" placeholder="请输入其他备注信息" class="field-textarea"></textarea>
            </div>
          </div>
        </form>
      </div>
    </section>

    <!-- 需求信息卡片 -->
    <section class="info-card requirement-card">
      <div class="card-header">
        <div class="header-left">
          <div class="icon-wrapper requirement-icon">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
              <polyline points="14 2 14 8 20 8"></polyline>
              <line x1="16" y1="13" x2="8" y2="13"></line>
              <line x1="16" y1="17" x2="8" y2="17"></line>
              <polyline points="10 9 9 9 8 9"></polyline>
            </svg>
          </div>
          <div class="header-text">
            <h2>需求信息</h2>
            <p>详细描述装修需求和偏好</p>
          </div>
        </div>
      </div>
      
      <div class="card-content">
        <form [formGroup]="requirementForm" class="requirement-form">
          <!-- 基础需求组 -->
          <div class="form-section">
            <h3 class="section-title">基础需求</h3>
            <div class="form-grid">
              <div class="form-field">
                <label for="style" class="field-label">装修风格 <span class="required">*</span></label>
                <select id="style" formControlName="style" class="field-select">
                  <option value="">请选择装修风格</option>
                  <option *ngFor="let style of styleOptions" [value]="style">{{ style }}</option>
                </select>
              </div>
              <div class="form-field">
                <label for="budget" class="field-label">预算范围 <span class="required">*</span></label>
                <select id="budget" formControlName="budget" class="field-select">
                  <option value="">请选择预算范围</option>
                  <option value="5-10万">5-10万</option>
                  <option value="10-20万">10-20万</option>
                  <option value="20-30万">20-30万</option>
                  <option value="30-50万">30-50万</option>
                  <option value="50万以上">50万以上</option>
                </select>
              </div>
              <div class="form-field">
                <label for="area" class="field-label">房屋面积 <span class="required">*</span></label>
                <div class="input-with-unit">
                  <input type="number" id="area" formControlName="area" placeholder="请输入面积" class="field-input">
                  <span class="input-unit">㎡</span>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 房屋信息组 -->
          <div class="form-section">
            <h3 class="section-title">房屋信息</h3>
            <div class="form-grid">
              <div class="form-field">
                <label for="houseType" class="field-label">户型 <span class="required">*</span></label>
                <select id="houseType" formControlName="houseType" class="field-select">
                  <option value="">请选择户型</option>
                  <option *ngFor="let houseType of houseTypeOptions" [value]="houseType">{{ houseType }}</option>
                </select>
              </div>
              <div class="form-field">
                <label for="floor" class="field-label">楼层</label>
                <input type="number" id="floor" formControlName="floor" placeholder="请输入楼层" class="field-input">
              </div>
              <div class="form-field">
                <label for="decorationType" class="field-label">装修类型 <span class="required">*</span></label>
                <select id="decorationType" formControlName="decorationType" class="field-select">
                  <option value="">请选择装修类型</option>
                  <option *ngFor="let type of decorationTypeOptions" [value]="type">{{ type }}</option>
                </select>
              </div>
            </div>
          </div>
          
          <!-- 其他需求组 -->
          <div class="form-section">
            <h3 class="section-title">其他需求</h3>
            <div class="form-grid">
              <div class="form-field">
                <label for="preferredDesigner" class="field-label">意向设计师</label>
                <input type="text" id="preferredDesigner" formControlName="preferredDesigner" placeholder="请输入意向设计师姓名" class="field-input">
              </div>
            </div>
            <div class="form-field full-width">
              <label for="specialRequirements" class="field-label">特殊需求</label>
              <textarea id="specialRequirements" formControlName="specialRequirements" rows="4" placeholder="请详细描述特殊需求或关注点" class="field-textarea"></textarea>
            </div>
          </div>
        </form>
      </div>
    </section>

    <!-- 报价与案例匹配卡片 -->
    <section class="info-card price-match-card">
      <div class="card-header">
        <div class="header-left">
          <div class="icon-wrapper price-icon">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <rect x="2" y="6" width="20" height="12" rx="2"></rect>
              <path d="M12 6v4"></path>
              <path d="M2 10h20"></path>
            </svg>
          </div>
          <div class="header-text">
            <h2>报价与案例匹配</h2>
            <p>智能匹配相似案例和预估报价</p>
          </div>
        </div>
      </div>
      
      <div class="card-content">
        <!-- 预估报价区域 -->
        <div class="price-section">
          <div class="price-card">
            <div class="price-header">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <circle cx="12" cy="12" r="10"></circle>
                <path d="M12 6v6l4 2"></path>
              </svg>
              <span>预估报价范围</span>
            </div>
            <div class="price-value">
              {{ estimatedPriceRange() || '请填写需求信息以获取报价' }}
            </div>
          </div>
        </div>
        
        <!-- 匹配案例区域 -->
        <div class="cases-section" *ngIf="matchedCases().length > 0">
          <div class="section-header">
            <h3>推荐案例</h3>
            <span class="section-subtitle">点击选择参考案例</span>
          </div>
          <div class="cases-grid">
            <div *ngFor="let caseItem of matchedCases()" class="case-card" (click)="selectReferenceCase(caseItem)">
              <div class="case-image-wrapper">
                <img [src]="caseItem.imageUrl" [alt]="caseItem.name" class="case-image">
                <div class="similarity-badge">{{ caseItem.similarity }}%</div>
              </div>
              <div class="case-content">
                <h4 class="case-name">{{ caseItem.name }}</h4>
                <div class="case-meta">
                  <span class="case-designer">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                      <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                      <circle cx="12" cy="7" r="4"></circle>
                    </svg>
                    {{ caseItem.designer }}
                  </span>
                  <span class="case-area">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                      <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
                    </svg>
                    {{ caseItem.area }}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 已选案例区域 -->
        <div *ngIf="requirementForm.get('referenceCases')?.value.length > 0" class="selected-cases-section">
          <div class="section-header">
            <h3>已选参考案例</h3>
            <span class="section-subtitle">{{ requirementForm.get('referenceCases')?.value.length }} 个案例</span>
          </div>
          <div class="selected-cases-list">
            <div *ngFor="let caseId of requirementForm.get('referenceCases')?.value" class="selected-case-item">
              <div class="case-info">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <path d="M9 11l3 3 8-8"></path>
                  <path d="M21 12c0 4.97-4.03 9-9 9s-9-4.03-9-9 4.03-9 9-9c1.51 0 2.93.37 4.18 1.03"></path>
                </svg>
                <span>案例 #{{ caseId }}</span>
              </div>
              <button class="remove-case-btn" (click)="removeReferenceCase(caseId)">
                <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>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 操作按钮区域 -->
    <section class="action-section">
      <div class="action-buttons">
        <button 
          class="btn-primary btn-lg" 
          (click)="submitForm()"
          [disabled]="isSubmitting() || !requirementForm.valid || !customerForm.valid"
        >
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" *ngIf="!isSubmitting()">
            <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path>
          </svg>
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" *ngIf="isSubmitting()" class="animate-spin">
            <path d="M21 12a9 9 0 11-6.219-8.56"></path>
          </svg>
          <span *ngIf="!isSubmitting()">创建项目</span>
          <span *ngIf="isSubmitting()">提交中...</span>
        </button>
        <button 
          class="btn-secondary btn-lg" 
          (click)="createProjectGroup()"
          [disabled]="isSubmitting() || !requirementForm.valid || !customerForm.valid"
        >
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
            <circle cx="9" cy="7" r="4"></circle>
            <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
            <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
          </svg>
          一键拉群
        </button>
      </div>
    </section>
  </main>
</div>