<div class="groupchats-container">
  <div class="page-header">
    <div>
      <h1>群组管理</h1>
      <p class="subtitle">管理企业微信群聊与项目关联 (数据从企业微信同步)</p>
    </div>
    <button class="btn btn-secondary" (click)="exportGroupChats()">导出</button>
  </div>

  <div class="stats-cards">
    <div class="stat-card">
      <div class="stat-value">{{ total() }}</div>
      <div class="stat-label">群组总数</div>
    </div>
  </div>

  <div class="filter-bar">
    <input
      type="text"
      class="search-input"
      placeholder="搜索群名称..."
      [ngModel]="keyword()"
      (ngModelChange)="keyword.set($event)"
    />
    <button class="btn btn-text" (click)="resetFilters()">重置</button>
  </div>

  <div *ngIf="loading()" class="loading-state">加载中...</div>
  <div *ngIf="!loading()" class="data-table">
    <table>
      <thead>
        <tr>
          <th>群名称</th>
          <th>企微群ID</th>
          <th>关联项目</th>
          <th>成员数</th>
          <th>状态</th>
          <th width="120">操作</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let group of filtered" [class.disabled]="group.isDisabled">
          <td>{{ group.name }}</td>
          <td><code>{{ group.chat_id }}</code></td>
          <td>
            <span *ngIf="group.project" class="project-link" [routerLink]="['/admin/project-detail', group.project.id]" title="点击查看项目详情">
              {{ group.project.get("title") }}
            </span>
            <span *ngIf="!group.project" class="no-project">
              未关联
              <button class="btn-link" (click)="openCreateProjectModal(group)">创建项目</button>
            </span>
          </td>
          <td>{{ group.memberCount }}</td>
          <td>
            <span [class]="'status ' + (group.isDisabled ? 'disabled' : 'active')">
              {{ group.isDisabled ? '已禁用' : '正常' }}
            </span>
          </td>
          <td>
            <button class="btn-icon" (click)="viewGroupChat(group)">👁</button>
            <button class="btn-icon" (click)="editGroupChat(group)">✏️</button>
            <button class="btn-icon" (click)="toggleGroupChat(group)">
              {{ group.isDisabled ? '✓' : '🚫' }}
            </button>
          </td>
        </tr>
        <tr *ngIf="filtered.length === 0">
          <td colspan="6" class="empty-state">暂无数据</td>
        </tr>
      </tbody>
    </table>
  </div>

  <!-- 侧边面板 -->
  <div class="side-panel" [class.open]="showPanel">
    <div class="panel-overlay" (click)="closePanel()"></div>
    <div class="panel-content">
      <div class="panel-header">
        <h2>{{ panelMode === 'edit' ? '编辑群组' : '群组详情' }}</h2>
        <button class="btn-close" (click)="closePanel()">×</button>
      </div>
      <div class="panel-body" *ngIf="currentGroupChat">
        <div *ngIf="panelMode === 'detail'" class="detail-view">
          <!-- 基础信息 -->
          <div class="section-title">基础信息</div>
          <div class="detail-item"><label>群名称</label><div>{{ currentGroupChat.name }}</div></div>
          <div class="detail-item"><label>企微群ID</label><div><code>{{ currentGroupChat.chat_id }}</code></div></div>
          <div class="detail-item"><label>关联项目</label><div>{{ currentGroupChat.project?.get("title") || '未关联' }}</div></div>
          <div class="detail-item"><label>成员数</label><div>{{ currentGroupChat.memberCount }}</div></div>
          <div class="detail-item"><label>状态</label><div>{{ currentGroupChat.isDisabled ? '已禁用' : '正常' }}</div></div>

          <!-- 入群二维码 -->
          <div class="section-title" *ngIf="qrCodeUrl">入群二维码</div>
          <div class="qr-code-container" *ngIf="qrCodeUrl">
            <img [src]="qrCodeUrl" alt="入群二维码" class="qr-code-image" />
            <p class="qr-code-tip">扫描二维码加入群聊</p>
          </div>

          <!-- 群成员列表 -->
          <div class="section-title">群成员列表</div>
          <div class="loading-text" *ngIf="loadingDetail()">加载成员信息中...</div>
          <div class="members-list" *ngIf="!loadingDetail() && groupMembers.length > 0">
            <div class="member-item" *ngFor="let member of groupMembers">
              <div class="member-info">
                <div class="member-name">
                  {{ member.name || member.userid || '未知成员' }}
                  <span class="member-type" [class.external]="member.type === 2">
                    {{ member.type === 1 ? '内部' : '外部' }}
                  </span>
                </div>
                <div class="member-detail" *ngIf="member.userid">
                  <code>{{ member.userid }}</code>
                </div>
              </div>
            </div>
          </div>
          <div class="empty-text" *ngIf="!loadingDetail() && groupMembers.length === 0">
            暂无成员信息
          </div>
        </div>
        <div *ngIf="panelMode === 'edit'" class="form-view">
          <div class="form-group">
            <label>关联项目</label>
            <select class="form-control" [(ngModel)]="formModel.projectId">
              <option [value]="undefined">未关联</option>
              <option *ngFor="let proj of projects()" [value]="proj.id">{{ proj.title }}</option>
            </select>
          </div>
          <div class="form-group">
            <label>
              <input type="checkbox" [(ngModel)]="formModel.isDisabled" />
              禁用此群组
            </label>
          </div>
        </div>
      </div>
      <div class="panel-footer" *ngIf="panelMode === 'edit'">
        <button class="btn btn-default" (click)="closePanel()">取消</button>
        <button class="btn btn-primary" (click)="updateGroupChat()">更新</button>
      </div>
    </div>
  </div>

  <!-- 创建项目模态框 -->
  <div class="modal-overlay" *ngIf="showCreateProjectModal" (click)="closeCreateProjectModal()">
    <div class="modal-dialog" (click)="$event.stopPropagation()">
      <div class="modal-header">
        <h2>创建项目</h2>
        <button class="btn-close" (click)="closeCreateProjectModal()">×</button>
      </div>
      <div class="modal-body">
        <div class="modal-info">
          <p>为群组 <strong>{{ creatingGroupChat?.name }}</strong> 创建关联项目</p>
        </div>
        <div class="form-group">
          <label>项目名称 <span class="required">*</span></label>
          <input
            type="text"
            class="form-control"
            [(ngModel)]="newProjectName"
            placeholder="请输入项目名称"
            [disabled]="creating()"
          />
        </div>
        <div class="form-tip">
          <svg class="icon-info" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="16" height="16">
            <path fill="currentColor" d="M256 56C145.72 56 56 145.72 56 256s89.72 200 200 200 200-89.72 200-200S366.28 56 256 56zm0 82a26 26 0 11-26 26 26 26 0 0126-26zm48 226h-88a16 16 0 010-32h28v-88h-16a16 16 0 010-32h32a16 16 0 0116 16v104h28a16 16 0 010 32z"/>
          </svg>
          <span>项目将自动关联到此群组,状态为"待分配"</span>
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn btn-default" (click)="closeCreateProjectModal()" [disabled]="creating()">
          取消
        </button>
        <button class="btn btn-primary" (click)="createProject()" [disabled]="creating() || !newProjectName.trim()">
          <span *ngIf="!creating()">创建项目</span>
          <span *ngIf="creating()">创建中...</span>
        </button>
      </div>
    </div>
  </div>
</div>
