<!-- 项目详情页面内容 -->
<div class="project-detail-container ios-style">
  <!-- 顶部导航/Header -->
    <header class="project-header ios-header">
      <div class="header-content">
        <div class="project-info">
          <h1 class="project-title">{{ project()?.name || '现代简约风格三居室设计' }}</h1>
          <div class="project-meta">
            <span class="project-status {{ getProjectStatusClass(project()?.status) }}">
              {{ project()?.status || '进行中' }}
            </span>
            <span class="project-stage">当前阶段：{{ project()?.currentStage || '方案修改与确认' }}</span>
            <span class="project-date">最后更新：{{ formatDate(currentDate()) }}</span>
          </div>
        </div>
        <div class="header-actions">
          <button class="secondary-btn btn-hover-effect">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <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>
            <span>导出报告</span>
          </button>
          <button class="primary-btn btn-hover-effect">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <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>
          </button>
        </div>
      </div>
    </header>

  <!-- 主要内容区域 -->
  <div class="main-content-area ios-content">
    <!-- 主内容区 (居中) -->
    <div class="project-content-main ios-main">
      <!-- 项目进度卡片 -->
      <div class="card progress-card">
        <div class="progress-header">
          <h3>项目进度</h3>
          <span class="progress-percentage">{{ completionProgress() }}%</span>
        </div>
        <div class="progress-bar">
          <div class="progress-fill" [style.width]="progressFillWidth()"></div>
        </div>
        <div class="progress-meta">
          <span>开始时间：{{ formatDate(project()?.createdAt || '2023-06-01') }}</span>
          <span>预计完成：{{ formatDate(project()?.deadline || '2023-07-15') }}</span>
        </div>
      </div>
      
      <!-- 历史服务记录 -->
      <div class="card historical-records-card">
        <div class="records-header">
          <h3>历史服务记录</h3>
        </div>
        
        <!-- 过往咨询记录 -->
        <div class="record-section">
          <h4>过往咨询记录</h4>
          <div class="consultation-list">
            @for (record of consultationRecords(); track $index) {
              <div class="consultation-item">
                <div class="consultation-date">{{ formatDate(record.date) }}</div>
                <div class="consultation-content">{{ record.content }}</div>
                <div class="consultation-status"
                     [class.status-processed]="record.status === '已解决' || record.status === '成功'"
                     [class.status-processing]="record.status === '处理中'"
                     [class.status-pending]="record.status === '待处理'">
                  {{ record.status }}
                </div>
              </div>
            }
          </div>
        </div>
        
        <!-- 合作项目 -->
        <div class="record-section">
          <h4>合作项目</h4>
          <div class="projects-list">
            @for (proj of cooperationProjects(); track $index) {
              <div class="project-item">
                <div class="project-name">{{ proj.name }}</div>
                <div class="project-period">{{ formatDate(proj.startDate) }} - {{ formatDate(proj.endDate) }}</div>
                <div class="project-description">{{ proj.description }}</div>
                <div class="project-status">{{ proj.status }}</div>
              </div>
            }
          </div>
        </div>
        
        <!-- 历史反馈/评价 -->
        <div class="record-section">
          <h4>历史反馈/评价</h4>
          <div class="feedback-list">
            @for (feedback of historicalFeedbacks(); track $index) {
              <div class="feedback-item">
                <div class="feedback-date">{{ formatDate(feedback.date) }}</div>
                <div class="feedback-rating">
                  @for (star of [1,2,3,4,5]; track $index) {
                    <span>
                      <i class="fa" [ngClass]="{ 'fa-star': star <= feedback.rating, 'fa-star-o': star > feedback.rating }"></i>
                    </span>
                  }
                </div>
                <div class="feedback-content">{{ feedback.content }}</div>
                @if (feedback.response) {
                  <div class="feedback-response">
                    <strong>回复：</strong>{{ feedback.response }}
                  </div>
                }
              </div>
            }
          </div>
        </div>
      </div>

      <!-- 进度时间轴 -->
      <div class="card timeline-card">
        <h3 class="card-title">项目阶段时间轴</h3>
        <div class="project-timeline">
          @for (stage of projectStages; let i = $index; track $index) {
            <div class="timeline-item" [class.stage-completed]="stage.completed" [class.stage-in-progress]="stage.inProgress">
              <div class="timeline-icon" [class.icon-completed]="stage.completed" [class.icon-in-progress]="stage.inProgress">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                  <circle cx="12" cy="12" r="9"></circle>
                  @if (stage.completed) {
                    <path d="m5 12 5 5 10-10" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                  }
                  @if (stage.inProgress) {
                    <circle cx="12" cy="12" r="5"></circle>
                  }
                </svg>
              </div>
              @if (i < projectStages.length - 1) {
                <div class="timeline-line" [class.line-completed]="stage.completed && projectStages[i+1].completed"></div>
              }
              <div class="timeline-content">
                <div class="timeline-header">
                  <h4 class="stage-title">{{ stage.name }}</h4>
                  <span class="stage-status">
                    {{ stage.completed ? '已完成' : stage.inProgress ? '进行中' : '未开始' }}
                  </span>
                </div>
                <div class="timeline-meta">
                  <div class="stage-dates">
                    @if (stage.startDate) { <span class="date-item">开始：{{ formatDate(stage.startDate) }}</span> }
                    @if (stage.endDate) { <span class="date-item">完成：{{ formatDate(stage.endDate) }}</span> }
                  </div>
                  <div class="stage-responsible">负责人：{{ stage.responsible || '未分配' }}</div>
                </div>
                @if (stage.details) {
                  <div class="stage-details">
                    <p>{{ stage.details }}</p>
                  </div>
                }
              </div>
            </div>
          }
        </div>
      </div>

      <!-- 项目详情标签页 -->
      <div class="project-tabs ios-tabs">
        <div class="tab-header">
          <button class="tab-btn btn-hover-effect" [class.active]="activeTab() === 'overview'" (click)="switchTab('overview')">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <path d="M5 12h14M12 5l7 7-7 7"></path>
            </svg>
            <span>概览</span>
          </button>
          <button class="tab-btn btn-hover-effect" [class.active]="activeTab() === 'milestones'" (click)="switchTab('milestones')">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline>
            </svg>
            <span>里程碑</span>
          </button>
          <button class="tab-btn btn-hover-effect" [class.active]="activeTab() === 'tasks'" (click)="switchTab('tasks')">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline>
            </svg>
            <span>任务</span>
          </button>
          <button class="tab-btn btn-hover-effect" [class.active]="activeTab() === 'messages'" (click)="switchTab('messages')">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <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>
            <span>消息</span>
          </button>
          <button class="tab-btn btn-hover-effect" [class.active]="activeTab() === 'files'" (click)="switchTab('files')">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <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>
            <span>文件</span>
          </button>
          <button class="tab-btn btn-hover-effect" [class.active]="activeTab() === 'members'" (click)="switchTab('members')">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <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>
            <span>组员</span>
          </button>
          <button class="tab-btn btn-hover-effect" [class.active]="activeTab() === 'requirements'" (click)="switchTab('requirements')">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <path d="M9 11l3 3L22 4"></path>
              <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path>
            </svg>
            <span>需求</span>
          </button>
        </div>

        @if (activeTab() === 'requirements') {
          <div class="tab-content">
            <div class="requirements-header" style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;">
              <h3 style="margin:0;">需求补充</h3>
              <button class="secondary-btn btn-hover-effect" (click)="saveRequirementDraft()">保存草稿</button>
            </div>
            <div class="incomplete-hints" style="display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px;">
              @if (!hasBlueprint()) {
                <div class="hint-card" style="border:1px dashed #f39c12;background:#fffaf0;padding:10px 12px;border-radius:8px;display:flex;align-items:center;gap:8px;">
                  <span style="color:#e67e22;">未上传施工图纸</span>
                  <label class="primary-btn btn-hover-effect" style="margin-left:4px;">
                    <input type="file" accept=".pdf,.png,.jpg,.jpeg" style="display:none" (change)="uploadBlueprint($event)">
                    上传图纸
                  </label>
                </div>
              }
              @if (!hasStylePreference()) {
                <div class="hint-card" style="border:1px dashed #8e44ad;background:#faf5ff;padding:10px 12px;border-radius:8px;display:flex;align-items:center;gap:8px;">
                  <span style="color:#8e44ad;">未填写风格偏好</span>
                  <button class="secondary-btn btn-hover-effect" (click)="showStyleEdit.set(true); tempStylePreference = ''">去填写</button>
                </div>
              }
            </div>
            @if (showStyleEdit()) {
              <div class="style-editor" style="padding:12px;border:1px solid #eee;border-radius:8px;margin-bottom:16px;background:#fff;">
                <div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;">
                  <span>风格选择：</span>
                  <select [(ngModel)]="tempStylePreference">
                    <option value="" disabled selected>请选择风格</option>
                    @for (opt of styleOptions; track $index) {
                      <option [value]="opt">{{ opt }}</option>
                    }
                  </select>
                  <button class="primary-btn btn-hover-effect" (click)="saveStylePreference()" [disabled]="!tempStylePreference">保存</button>
                  <button class="secondary-btn btn-hover-effect" (click)="showStyleEdit.set(false)">取消</button>
                </div>
              </div>
            }
            <div class="requirements-form">
              <div class="form-row">
                <label>需求摘要</label>
                <textarea [formControl]="requirementForm.controls.summary" rows="3" placeholder="例如：偏好现代简约风，客厅以明亮色调为主…"></textarea>
              </div>
              <div class="form-row">
                <label>重点诉求</label>
                <textarea [formControl]="requirementForm.controls.priorityPoints" rows="3"></textarea>
              </div>
              <div class="form-row">
                <label>约束条件</label>
                <textarea [formControl]="requirementForm.controls.constraints" rows="3"></textarea>
              </div>
              <div class="form-row">
                <label>预算</label>
                <input type="text" [formControl]="requirementForm.controls.budget" placeholder="如：20万以内">
              </div>
              <div class="form-actions">
                <button class="primary-btn btn-hover-effect" (click)="submitRequirements()">提交需求</button>
              </div>
            </div>
          </div>
        }

        <!-- 消息标签内容 -->
        @if (activeTab() === 'messages') {
          <div class="tab-content">
            <div class="messages-toolbar" style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:8px;">
              <div style="display:flex;align-items:center;gap:8px;">
                <button class="primary-btn btn-hover-effect" (click)="createGroup()" [disabled]="creatingGroup() || !!chatGroup()">{{ creatingGroup() ? '拉群中…' : (chatGroup() ? '已创建群' : '拉群') }}</button>
                @if (chatGroup()) { <a class="secondary-btn btn-hover-effect" [href]="chatGroup()!.link" target="_blank">群聊入口</a> }
              </div>
              <div class="tips" style="color:#888;font-size:12px;">在这里与客户与设计师进行项目沟通</div>
            </div>
            <div class="messages-container">
              <div class="messages-list">
                @for (message of messages(); track $index) {
                  <div class="message-item">
                    <div class="message-avatar">
                      {{ message.sender.charAt(0) }}
                    </div>
                    <div class="message-content">
                      <div class="message-header">
                        <span class="message-sender">{{ message.sender }}</span>
                        <span class="message-time">{{ formatDateTime(message.timestamp) }}</span>
                      </div>
                      <div class="message-text">{{ message.content }}</div>
                    </div>
                  </div>
                }
                <div class="message-input-area">
                  <textarea 
                    [value]="newMessage()"
                    (input)="onMessageInput($event)"
                    placeholder="输入消息内容..."
                    rows="3"
                    (keydown.enter.shift)="$event.preventDefault()"
                    (keydown.enter)="sendMessage()"
                  ></textarea>
                  <div class="message-actions">
                    <button class="secondary-btn btn-hover-effect">
                      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                        <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"></path>
                        <polyline points="14 2 14 8 20 8"></polyline>
                      </svg>
                      <span>上传文件</span>
                    </button>
                    <button class="primary-btn btn-hover-effect" (click)="sendMessage()" [disabled]="!newMessage().trim()">
                      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                        <line x1="22" y1="2" x2="11" y2="13"></line>
                        <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
                      </svg>
                      <span>发送</span>
                    </button>
                  </div>
                </div>
              </div>
            </div>
      </div>
        }

    <!-- 右侧边栏 - 企业微信聊天集成 -->
    <div class="wechat-sidebar ios-sidebar">
      <div class="wechat-header">
        <h3>项目群聊</h3>
        <div class="wechat-actions">
          <button class="search-btn">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <circle cx="11" cy="11" r="8"></circle>
              <path d="m21 21-4.35-4.35"></path>
            </svg>
          </button>
          <button class="settings-btn">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <circle cx="12" cy="12" r="3"></circle>
              <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
            </svg>
          </button>
        </div>
      </div>
      
      <!-- 聊天消息列表 -->
      <div class="wechat-messages" #wechatMessages>
        @for (msg of wechatMessagesList; track $index) {
          <div class="wechat-message-item">
            <div class="message-avatar">
              {{ msg.sender.charAt(0) }}
            </div>
            <div class="message-content">
              <div class="message-header">
                <span class="message-sender">{{ msg.sender }}</span>
                <span class="message-time">{{ formatTime(msg.timestamp) }}</span>
              </div>
              <div class="message-text">{{ msg.content }}</div>
            </div>
          </div>
        }
      </div>
      
      <!-- 消息输入框 -->
      <div class="wechat-input-area">
        <div class="input-actions">
          <button class="action-btn btn-hover-effect">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
              <circle cx="8.5" cy="8.5" r="1.5"></circle>
              <polyline points="21 15 16 10 5 21"></polyline>
            </svg>
          </button>
          <button class="action-btn btn-hover-effect">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"></path>
              <polyline points="14 2 14 8 20 8"></polyline>
            </svg>
          </button>
        </div>
        <input 
          type="text" 
          [(ngModel)]="wechatInput" 
          placeholder="输入消息..." 
          class="wechat-input"
          (keydown.enter)="sendWechatMessage()"
        />
        <button class="send-btn btn-hover-effect" (click)="sendWechatMessage()" [disabled]="!wechatInput.trim()">
          发送
        </button>
      </div>
    </div>
  </div>

  <!-- 售后处理入口 (固定在底部) -->
  <div class="after-sales-actions ios-actions">
    <div class="actions-container">
      <button class="action-btn primary btn-hover-effect" (click)="openModificationRequest()">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor">
          <path d="M12 20h9"></path>
          <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path>
        </svg>
        <span>申请修改</span>
      </button>
      <button class="action-btn warning btn-hover-effect" (click)="openComplaintWarning()">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor">
          <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path>
          <line x1="12" y1="9" x2="12" y2="13"></line>
          <line x1="12" y1="17" x2="12.01" y2="17"></line>
        </svg>
        <span>投诉预警</span>
      </button>
      <button class="action-btn secondary btn-hover-effect" (click)="openRefundRequest()">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor">
          <path d="M22 12h-4l-3 9L9 3l-3 9H2"></path>
        </svg>
        <span>申请退款</span>
      </button>
    </div>
  </div>
</div>

<!-- 文件标签内容 -->
@if (activeTab() === 'files') {
  <div class="tab-content">
    <div class="files-header">
      <h4>项目文件</h4>
      <div class="files-actions">
        <button class="primary-btn btn-hover-effect" (click)="openRenderPreview()" [disabled]="renderImages().length === 0">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
            <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
            <circle cx="8.5" cy="8.5" r="1.5"></circle>
            <polyline points="21 15 16 10 5 21"></polyline>
          </svg>
          <span>查看渲染图</span>
        </button>
      </div>
    </div>
    <div class="files-list">
      <div class="file-item" *ngFor="let f of files()">
        <div class="file-icon">{{ f.type === 'image' ? 'IMG' : 'DOC' }}</div>
        <div class="file-info">
          <div class="file-name">{{ f.name }}</div>
          <div class="file-meta">{{ f.size }} · 由 {{ f.uploadedBy }} 于 {{ formatDate(f.uploadedAt) }} 上传</div>
        </div>
        <div class="file-actions">
          <button class="link" (click)="previewFile(f)">预览</button>
          <button class="link" (click)="downloadFile(f)">下载</button>
        </div>
      </div>
    </div>
  </div>
}

<!-- 只读渲染图预览弹窗 -->
@if (showRenderPreviewModal) {
  <div class="modal-backdrop" (click)="closeRenderPreview()"></div>
  <div class="modal" role="dialog" aria-modal="true">
    <div class="modal-header">
      <h3>渲染图预览</h3>
      <button class="close-button" (click)="closeRenderPreview()" aria-label="关闭">×</button>
    </div>
    <div class="modal-body">
      @if (renderImages().length > 0) {
        <div class="thumb-list">
          @for (img of renderImages(); track img.id) {
            <div class="thumb-item">
              <img [src]="img.url" [alt]="img.name" />
              <div class="thumb-meta">
                <div class="name">{{ img.name }}</div>
                <div class="sub">{{ img.size }} · {{ formatDate(img.uploadedAt) }}</div>
              </div>
            </div>
          }
        </div>
      } @else {
        <div class="empty">
          <p>暂无可预览的渲染图</p>
        </div>
      }
    </div>
    <div class="modal-footer">
      <button class="secondary-btn" (click)="closeRenderPreview()">关闭</button>
    </div>
  </div>
}