<div class="order-creation-card">
  <div class="method-switch">
    <button class="secondary-btn" [class.active]="orderCreationMethod === 'miniprogram'" (click)="setMethod('miniprogram')">小程序同步</button>
    <button class="secondary-btn" [class.active]="orderCreationMethod === 'manual'" (click)="setMethod('manual')">手动录入</button>
    <span class="hint">下单时间：{{ orderTime }}</span>
  </div>

  <div class="sync-row" *ngIf="orderCreationMethod === 'miniprogram'">
    <button class="primary-btn" [disabled]="isSyncing" (click)="triggerSync()">{{ isSyncing ? '同步中...' : '从小程序同步客户信息' }}</button>
    <span class="hint">点击同步后将自动填充客户姓名、手机号、微信等信息</span>
  </div>

  <div class="divider"></div>

  <div class="search-row">
    <input type="text" placeholder="搜索客户姓名或手机号" [ngModel]="customerSearchKeyword" (ngModelChange)="onKeywordChange($event)" />
    <button class="secondary-btn" (click)="triggerSearch()">搜索</button>
    @if (selectedCustomer) {
      <div class="selected-pill">
        <span>已选客户：{{ selectedCustomer.name }}（{{ selectedCustomer.phone }}）</span>
        <button class="link danger" (click)="clearCustomer()">清除</button>
      </div>
    }
  </div>

  @if (customerSearchResults.length > 0) {
    <div class="search-results">
      @for (c of customerSearchResults; track c.id) {
        <div class="result-item">
          <div class="left">
            <span class="name">{{ c.name }}</span>
            <span class="phone">{{ c.phone }}</span>
            @if (c.wechat) { <span class="wx">wx: {{ c.wechat }}</span> }
          </div>
          <button class="link" (click)="chooseCustomer(c)">选择</button>
        </div>
      }
    </div>
  }

  <form [formGroup]="customerForm" novalidate>
    <div class="form-group">
      <label>客户姓名</label>
      <input type="text" formControlName="name" placeholder="请输入客户姓名" />
      @if (customerForm.get('name')?.touched && customerForm.get('name')?.invalid) {
        <div class="error">请填写客户姓名</div>
      }
    </div>

    <div class="form-group">
      <label>手机号</label>
      <input type="text" formControlName="phone" placeholder="请输入11位手机号" />
      @if (customerForm.get('phone')?.touched && customerForm.get('phone')?.errors?.['required']) {
        <div class="error">请填写手机号</div>
      }
      @if (customerForm.get('phone')?.touched && customerForm.get('phone')?.errors?.['pattern']) {
        <div class="error">手机号格式不正确</div>
      }
    </div>

    <div class="form-group">
      <label>微信号</label>
      <input type="text" formControlName="wechat" placeholder="可选" />
    </div>

    <div class="form-group">
      <label>客户类型</label>
      <select formControlName="customerType">
        <option value="新客户">新客户</option>
        <option value="老客户">老客户</option>
        <option value="VIP客户">VIP客户</option>
      </select>
    </div>

    <div class="form-group">
      <label>需求类型</label>
      <select formControlName="demandType">
        <option value="">未指定</option>
        @for (d of demandTypes; track d.value) {
          <option [value]="d.value">{{ d.label }}</option>
        }
      </select>
    </div>

    <div class="form-group">
      <label>跟进状态</label>
      <select formControlName="followUpStatus">
        <option value="">未指定</option>
        @for (s of followUpStatus; track s.value) {
          <option [value]="s.value">{{ s.label }}</option>
        }
      </select>
    </div>

    <div class="form-group">
      <label>来源渠道</label>
      <input type="text" formControlName="source" placeholder="如：抖音/官网/转介绍/线下" />
    </div>

    <div class="form-group">
      <label>备注</label>
      <textarea formControlName="remark" rows="3" placeholder="可填写特殊要求或沟通记录"></textarea>
    </div>
  </form>
</div>