<div class="customers-page">
  <div class="page-header">
    <div class="header-left">
      <h2 class="page-title">客户管理</h2>
      <p class="page-description">管理客户档案、分级与成交数据</p>
    </div>
    <div class="header-actions">
      <button class="btn primary" (click)="addCustomer()">+ 新建客户</button>
      <button class="btn" (click)="exportCustomers()">导出</button>
    </div>
  </div>

  <div class="stats-cards">
    <div class="stat-card">
      <div class="stat-label">客户总数</div>
      <div class="stat-value">{{ total() }}</div>
    </div>
    <div class="stat-card">
      <div class="stat-label">活跃客户</div>
      <div class="stat-value">{{ active() }}</div>
    </div>
    <div class="stat-card">
      <div class="stat-label">VIP客户</div>
      <div class="stat-value">{{ vip() }}</div>
    </div>
    <div class="stat-card">
      <div class="stat-label">累计成交额</div>
      <div class="stat-value">{{ formatAmount(amount()) }}</div>
    </div>
  </div>

  <div class="toolbar">
    <div class="search">
      <input placeholder="搜索客户名称/联系人/电话" (input)="keyword.set($any($event.target).value)" [value]="keyword()"/>
    </div>
    <div class="filters">
      <select (change)="status.set($any($event.target).value)">
        <option value="all">全部状态</option>
        <option value="active">活跃</option>
        <option value="inactive">沉默</option>
      </select>
      <select (change)="level.set($any($event.target).value)">
        <option value="all">全部等级</option>
        <option value="normal">普通</option>
        <option value="vip">VIP</option>
        <option value="svip">SVIP</option>
      </select>
      <button class="btn" (click)="resetFilters()">重置</button>
    </div>
  </div>

  <div class="table-card">
    <div class="table header">
      <div>客户名称</div>
      <div>联系人</div>
      <div>电话</div>
      <div>等级</div>
      <div>状态</div>
      <div>项目数</div>
      <div>累计成交</div>
      <div>加入日期</div>
      <div>操作</div>
    </div>
    <div class="table row" *ngFor="let c of filtered">
      <div class="name">
        <div class="title">{{ c.name }}</div>
      </div>
      <div>{{ c.contact }}</div>
      <div>{{ c.phone }}</div>
      <div>
        <span class="tag" [class.vip]="c.level==='vip'" [class.svip]="c.level==='svip'">{{ c.level.toUpperCase() }}</span>
      </div>
      <div>
        <span class="dot" [class.green]="c.status==='active'" [class.gray]="c.status==='inactive'"></span>
        {{ c.status==='active' ? '活跃' : '沉默' }}
      </div>
      <div>{{ c.projects }}</div>
      <div>{{ formatAmount(c.totalAmount) }}</div>
      <div>{{ c.joinDate }}</div>
      <div class="actions">
        <button class="icon" (click)="viewCustomer(c)">详</button>
        <button class="icon" (click)="editCustomer(c)">编</button>
        <button class="icon danger">删</button>
      </div>
    </div>
    <div class="empty" *ngIf="filtered.length === 0">暂无数据</div>
  </div>

  <!-- 侧边面板 -->
  <div class="panel-overlay" *ngIf="showPanel" (click)="closePanel()">
    <div class="side-panel" (click)="$event.stopPropagation()">
      <div class="panel-header">
        <h3>{{ panelMode==='add' ? '新建客户' : panelMode==='detail' ? '客户详情' : '编辑客户' }}</h3>
        <button class="close-btn" (click)="closePanel()">×</button>
      </div>

      <!-- 详情 -->
      <div class="panel-content" *ngIf="panelMode==='detail' && currentCustomer">
        <div class="detail-section"><label>客户名称</label><span>{{ currentCustomer.name }}</span></div>
        <div class="detail-section"><label>联系人</label><span>{{ currentCustomer.contact }}</span></div>
        <div class="detail-section"><label>电话</label><span>{{ currentCustomer.phone }}</span></div>
        <div class="detail-section"><label>等级</label><span class="tag" [class.vip]="currentCustomer.level==='vip'" [class.svip]="currentCustomer.level==='svip'">{{ currentCustomer.level.toUpperCase() }}</span></div>
        <div class="detail-section"><label>状态</label><span>{{ currentCustomer.status==='active' ? '活跃' : '沉默' }}</span></div>
        <div class="detail-section"><label>项目数</label><span>{{ currentCustomer.projects }}</span></div>
        <div class="detail-section"><label>累计成交</label><span>{{ formatAmount(currentCustomer.totalAmount) }}</span></div>
        <div class="detail-section"><label>加入日期</label><span>{{ currentCustomer.joinDate }}</span></div>
      </div>

      <!-- 新增/编辑表单 -->
      <div class="panel-content" *ngIf="panelMode==='add' || panelMode==='edit'">
        <form class="customer-form">
          <div class="form-group"><label>客户名称 *</label><input type="text" [(ngModel)]="formModel.name" name="name" placeholder="请输入客户名称" required></div>
          <div class="form-group"><label>联系人</label><input type="text" [(ngModel)]="formModel.contact" name="contact" placeholder="请输入联系人"></div>
          <div class="form-group"><label>电话</label><input type="text" [(ngModel)]="formModel.phone" name="phone" placeholder="请输入电话"></div>
          <div class="form-group"><label>等级</label><select [(ngModel)]="formModel.level" name="level"><option value="normal">普通</option><option value="vip">VIP</option><option value="svip">SVIP</option></select></div>
          <div class="form-group"><label>状态</label><select [(ngModel)]="formModel.status" name="status"><option value="active">活跃</option><option value="inactive">沉默</option></select></div>
          <div class="form-group"><label>项目数</label><input type="number" [(ngModel)]="formModel.projects" name="projects" min="0" placeholder="0"></div>
          <div class="form-group"><label>累计成交(¥)</label><input type="number" [(ngModel)]="formModel.totalAmount" name="totalAmount" min="0" step="100" placeholder="0"></div>
          <div class="form-group"><label>加入日期</label><input type="date" [(ngModel)]="formModel.joinDate" name="joinDate"></div>
        </form>
      </div>

      <div class="panel-footer">
        <button class="btn" (click)="closePanel()">取消</button>
        <button class="btn primary" *ngIf="panelMode==='add'" (click)="saveCustomer()">保存</button>
        <button class="btn primary" *ngIf="panelMode==='edit'" (click)="updateCustomer()">更新</button>
      </div>
    </div>
  </div>
</div>