const fs = require('fs');
const path = require('path');

console.log('创建最小化HTML模板...');

const minimalTemplate = `<div class="project-detail-container designer-page">
  <!-- 项目头部 -->
  <div class="project-header">
    <div class="header-left">
      <h1>项目详情</h1>
      @if (project) { <span class="project-status">{{ project.status }}</span> }
    </div>
  </div>

  <!-- 标签页导航 -->
  <div class="tab-navigation">
    <button 
      class="tab-btn" 
      [class.active]="activeTab === 'progress'" 
      (click)="setActiveTab('progress')">
      项目进度
    </button>
    <button 
      class="tab-btn" 
      [class.active]="activeTab === 'members'" 
      (click)="setActiveTab('members')">
      项目人员
    </button>
    <button 
      class="tab-btn" 
      [class.active]="activeTab === 'files'" 
      (click)="setActiveTab('files')">
      项目文件
    </button>
  </div>

  <div class="tab-content">
    <!-- 项目进度标签页 -->
    @if (isActiveTab('progress')) {
      <div class="progress-tab-content">
        <div class="main-content-layout">
          <!-- 左侧保留 -->
          <div class="left-column">
            <div class="project-info-card card" [class.collapsed-card]="!isCustomerInfoExpanded">
              <div class="card-header" (click)="toggleCustomerInfo()" style="cursor: pointer;">
                <h2>客户信息</h2>
                <div class="header-actions">
                  <div class="sync-status" [class.syncing]="isSyncingCustomerInfo">
                    @if (isSyncingCustomerInfo) {
                      <span class="sync-indicator">
                        <span class="sync-spinner"></span>
                        同步中...
                      </span>
                    }
                    <button class="icon-btn" (click)="syncCustomerInfo($event)" [disabled]="isSyncingCustomerInfo">
                      <span class="icon">🔄</span>
                    </button>
                  </div>
                  <button class="collapse-btn" [class.collapsed]="!isCustomerInfoExpanded">
                    <span class="icon">{{ isCustomerInfoExpanded ? '▼' : '▶' }}</span>
                  </button>
                </div>
              </div>
              @if (isCustomerInfoExpanded) {
                <div class="card-content">
                  @if (project) {
                    <div class="customer-info">
                      @if (orderCreationData?.customerInfo) {
                        <div class="info-item">
                          <label>客户姓名：</label>
                          <span>{{ orderCreationData.customerInfo.name }}</span>
                        </div>
                        @if (orderCreationData.customerInfo.wechat) {
                          <div class="info-item">
                            <label>微信号：</label>
                            <span>{{ orderCreationData.customerInfo.wechat }}</span>
                          </div>
                        }
                        @if (orderCreationData.customerInfo.source) {
                          <div class="info-item">
                            <label>客户来源：</label>
                            <span>{{ orderCreationData.customerInfo.source }}</span>
                          </div>
                        }
                        @if (orderCreationData.customerInfo.remark) {
                          <div class="info-item">
                            <label>备注：</label>
                            <span>{{ orderCreationData.customerInfo.remark }}</span>
                          </div>
                        }
                      }
                    </div>
                  }
                </div>
              }
            </div>
          </div>

          <!-- 右侧横向折叠面板 -->
          <div class="right-column">
            <div class="horizontal-collapse-panels">
              <div class="panel-container" 
                   [class.expanded]="expandedSection === 'delivery'" 
                   [class.collapsed]="expandedSection !== 'delivery'">
                <div class="panel-header" (click)="toggleSection('delivery')">
                  <h3>交付管理</h3>
                  <span class="toggle-icon">{{ expandedSection === 'delivery' ? '▼' : '▶' }}</span>
                </div>
                @if (expandedSection === 'delivery') {
                  <div class="panel-content">
                    <div class="delivery-content">
                      <p>这里是交付管理的内容区域</p>
                      <div class="delivery-items">
                        <div class="delivery-item">
                          <span class="item-name">建模文件</span>
                          <span class="item-status">已完成</span>
                        </div>
                        <div class="delivery-item">
                          <span class="item-name">渲染图</span>
                          <span class="item-status">进行中</span>
                        </div>
                      </div>
                    </div>
                  </div>
                }
              </div>

              <div class="panel-container" 
                   [class.expanded]="expandedSection === 'aftercare'" 
                   [class.collapsed]="expandedSection !== 'aftercare'">
                <div class="panel-header" (click)="toggleSection('aftercare')">
                  <h3>售后管理</h3>
                  <span class="toggle-icon">{{ expandedSection === 'aftercare' ? '▼' : '▶' }}</span>
                </div>
                @if (expandedSection === 'aftercare') {
                  <div class="panel-content">
                    <div class="aftercare-content">
                      <p>这里是售后管理的内容区域</p>
                      <div class="aftercare-items">
                        <div class="aftercare-item">
                          <span class="item-name">客户反馈</span>
                          <span class="item-status">待处理</span>
                        </div>
                        <div class="aftercare-item">
                          <span class="item-name">修改请求</span>
                          <span class="item-status">已完成</span>
                        </div>
                      </div>
                    </div>
                  </div>
                }
              </div>
            </div>
          </div>
        </div>
      </div>
    }

    <!-- 项目人员标签页 -->
    @if (isActiveTab('members')) {
      <div class="members-tab-content">
        <div class="main-content-layout">
          <div class="members-list">
            <h3>项目成员</h3>
            @if (projectMembers.length === 0) {
              <div class="empty-state">
                <p>暂无项目成员</p>
              </div>
            }
          </div>
        </div>
      </div>
    }

    <!-- 项目文件标签页 -->
    @if (isActiveTab('files')) {
      <div class="files-tab-content">
        <div class="main-content-layout">
          <div class="files-list">
            <h3>项目文件</h3>
            @if (projectFiles.length === 0) {
              <div class="empty-state">
                <p>暂无项目文件</p>
              </div>
            }
          </div>
        </div>
      </div>
    }
  </div>
</div>`;

// 写入文件
const htmlFilePath = path.join(__dirname, 'src/app/pages/designer/project-detail/project-detail.html');
fs.writeFileSync(htmlFilePath, minimalTemplate, 'utf8');

console.log('最小化HTML模板创建完成！');