<div class="consultation-order-container">
  <!-- Dashboard风格页面头部 -->
  <header class="page-header">
    <!-- 返回按钮 -->
    <button class="back-button" (click)="goBackToProjectList()" title="返回项目列表">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <path d="m15 18-6-6 6-6"/>
      </svg>
      <span>返回</span>
    </button>
    
    <div class="header-content">
      <h1>创建订单</h1>
      <div class="header-meta">通过小程序或人工方式创建新订单</div>
    </div>
    
    <!-- 成功提示 -->
    @if (showSuccessMessage()) {
      <div 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>



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

    <!-- 右上角项目需求卡片按钮 -->
    <div class="requirement-card-toggle">
      <button 
        class="btn-secondary btn-sm" 
        (click)="isRequirementCardExpanded.set(!isRequirementCardExpanded())"
        [class.active]="isRequirementCardExpanded()"
      >
        <svg width="16" height="16" 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>
        {{ isRequirementCardExpanded() ? '收起项目需求' : '填写项目需求' }}
      </button>
    </div>

    <!-- 客户信息长条栏 -->
    <section class="customer-info-bar">
      <div class="customer-bar-container">
        <!-- 左侧客户搜索和信息 -->
        <div class="customer-search-area">
          @if (!selectedCustomer()) {
            <div class="search-input-container">
              <div class="search-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>
              <input 
                type="text" 
                [ngModel]="searchKeyword()" 
                (ngModelChange)="searchKeyword.set($event); searchCustomer()"
                placeholder="输入客户姓名或手机号快速匹配老客户..."
                class="customer-search-input"
                autocomplete="off"
                (keyup.enter)="quickFillCustomerInfo(searchKeyword())"
              />
              <button 
                class="search-action-btn"
                (click)="quickFillCustomerInfo(searchKeyword())"
                [disabled]="!searchKeyword().trim()"
              >
                <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>
                匹配
              </button>
            </div>
            
            <!-- 搜索结果下拉 -->
            @if (searchResults().length > 0) {
              <div class="search-dropdown">
                <div class="dropdown-header">
                  <span>找到 {{ searchResults().length }} 位客户</span>
                </div>
                @for (customer of searchResults(); track customer.id) {
                  <div class="customer-option" (click)="selectCustomer(customer)">
                    <div class="customer-avatar-sm">
                      @if (customer.avatar) {
                        <img [src]="customer.avatar" [alt]="customer.name">
                      } @else {
                        <span>{{ customer.name.charAt(0) }}</span>
                      }
                    </div>
                    <div class="customer-details">
                      <div class="customer-name">{{ customer.name }}</div>
                      <div class="customer-phone">{{ customer.phone }}</div>
                    </div>
                    <div class="customer-tags">
                      @if (customer.customerType) {
                        <span class="tag">{{ customer.customerType }}</span>
                      }
                    </div>
                  </div>
                }
              </div>
            }
          } @else {
            <!-- 已选择客户信息展示 -->
            <div class="selected-customer-info">
              <div class="customer-avatar-lg">
                @if (selectedCustomer()?.avatar) {
                  <img [src]="selectedCustomer()?.avatar" [alt]="selectedCustomer()?.name">
                } @else {
                  <span>{{ selectedCustomer()?.name?.charAt(0) }}</span>
                }
              </div>
              <div class="customer-main-info">
                <div class="customer-name-lg">{{ selectedCustomer()?.name }}</div>
                <div class="customer-contact">
                  <span class="phone">{{ selectedCustomer()?.phone }}</span>
                  @if (selectedCustomer()?.wechat) {
                    <span class="wechat">微信: {{ selectedCustomer()?.wechat }}</span>
                  }
                </div>
              </div>
              <div class="customer-history">
                <div class="history-item">
                  <span class="label">合作项目:</span>
                  <span class="value">3个项目</span>
                </div>
                <div class="history-item">
                  <span class="label">历史反馈:</span>
                  <span class="value">满意度95%</span>
                </div>
              </div>
            </div>
          }
        </div>
        
        <!-- 右侧操作按钮 -->
        <div class="customer-actions">
          @if (selectedCustomer()) {
            <button class="action-btn secondary" (click)="clearSelectedCustomer()">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M3 6h18"></path>
                <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
                <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path>
              </svg>
              重新选择
            </button>
          }
        </div>
      </div>
    </section>

    <!-- 新客户快速填写表单 -->
    @if (!selectedCustomer()) {
      <section class="new-customer-form">
        <div class="form-header">
          <h3>新客户信息</h3>
          <p>仅需填写基本信息，其他信息可通过企业微信聊天记录补充</p>
        </div>
        <form [formGroup]="customerForm" class="simple-customer-form">
          <div class="form-row">
            <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>
        </form>
      </section>
    }

    <!-- 项目需求卡片（可折叠） -->
    @if (isRequirementCardExpanded()) {
      <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">
              <rect x="3" y="4" width="18" height="14" rx="2" ry="2"></rect>
              <line x1="8" y1="2" x2="16" y2="2"></line>
            </svg>
          </div>
          <div class="header-text">
            <h2>项目需求</h2>
            <p>项目基本信息配置</p>
          </div>
        </div>
        <div class="header-actions">
          <button class="btn-ghost btn-sm" (click)="isRequirementCardExpanded.set(false)">
            <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">
        <form [formGroup]="requirementForm" class="requirement-form">
          <!-- 第一行：装修类型、首付款、首稿时间 -->
          <div class="form-row">
            <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 value="家装">家装</option>
                <option value="工装">工装</option>
              </select>
            </div>
            <div class="form-field">
              <label for="downPayment" class="field-label">首付款 <span class="required">*</span></label>
              <div class="input-with-unit">
                <input type="number" id="downPayment" formControlName="downPayment" placeholder="请输入首付款金额" class="field-input">
                <span class="input-unit">元</span>
              </div>
            </div>
            <div class="form-field">
              <label for="firstDraftDate" class="field-label">首稿时间 <span class="required">*</span></label>
              <input type="date" id="firstDraftDate" formControlName="firstDraftDate" class="field-input">
            </div>
          </div>
          
          <!-- 第二行：装修风格、项目小组（选填） -->
          <div class="form-row">
            <div class="form-field">
              <label for="style" class="field-label">装修风格</label>
              <select id="style" formControlName="style" class="field-select">
                <option value="">请选择装修风格（选填）</option>
                @for (style of styleOptions; track style) {
                  <option [value]="style">{{ style }}</option>
                }
              </select>
            </div>
            <div class="form-field">
              <label for="projectGroup" class="field-label">项目小组</label>
              <select id="projectGroup" formControlName="projectGroup" class="field-select">
                <option value="">请选择项目小组（选填）</option>
                @for (group of projectGroupOptions; track group) {
                  <option [value]="group">{{ group }}</option>
                }
              </select>
            </div>
          </div>
        </form>
      </div>
    </section>
    }



    <section class="action-section">
      <div class="action-buttons">
        <button 
          class="btn-primary btn-lg" 
          (click)="submitForm()"
          [disabled]="isSubmitting() || !customerForm.valid"
        >
          @if (!isSubmitting()) {
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <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>
          }
          @if (isSubmitting()) {
            <svg width="18" height="18" 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>
          }
          @if (!isSubmitting()) {
            <span>创建项目</span>
          }
          @if (isSubmitting()) {
            <span>提交中...</span>
          }
        </button>
      </div>
    </section>
  </div>
</div>