<div class="finance-project-records">
  <!-- 顶部标题区 -->
  <header class="page-header">
    <div class="header-left">
      <div class="header-content">
        <h1>项目财务档案</h1>
        <p class="subtitle">管理所有项目的财务状态和报价信息</p>
      </div>
    </div>
    <div class="header-right">
      <div class="header-actions">
        <button class="action-btn back-btn" routerLink="/finance/dashboard">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M19 12H5"></path>
            <polyline points="12 19 5 12 12 5"></polyline>
          </svg>
          返回工作台
        </button>
      </div>
    </div>
  </header>

  <!-- 搜索和筛选区 -->
  <div class="search-filter-section">
    <div class="search-box">
      <input type="text" placeholder="搜索项目名称、客户名称或项目编号" class="search-input">
      <i class="search-icon">🔍</i>
    </div>
    <div class="filter-buttons">
      <button class="filter-btn active">全部</button>
      <button class="filter-btn">待报价</button>
      <button class="filter-btn">待收款</button>
      <button class="filter-btn">已结算</button>
    </div>
  </div>

  <!-- 项目列表 -->
  <div class="project-list">
    <div class="list-header">
      <div class="header-item">项目信息</div>
      <div class="header-item">财务状态</div>
      <div class="header-item">价格</div>
      <div class="header-item">操作</div>
    </div>
    
    <div class="project-items">
      <div *ngFor="let project of projects() || []" class="project-item">
        <div class="project-info">
          <div class="project-id">{{ project.id }}</div>
          <div class="project-main">
            <div class="project-name">{{ project.name }}</div>
            <div class="project-meta">
              <span class="client-name">{{ project.clientName }}</span>
              <span class="date">{{ formatDate(project.updatedAt) }}</span>
            </div>
            <div class="project-details">
              <span>{{ getProjectTypeLabel(project) }}</span>
              <span>{{ getTechnicalTypeLabel(project) }}</span>
            </div>
          </div>
          <div *ngIf="project && getQuoteTypeLabel(project)" class="quote-type-tag {{ getQuoteTypeClass(project) }}">
              {{ getQuoteTypeLabel(project) }}
            </div>
        </div>
        
        <div class="project-status">
          <span class="status-badge {{ getStatusClass(project.financialStatus) }}">
            {{ getStatusText(project.financialStatus) }}
          </span>
        </div>
        
        <div class="project-price">
          <div class="total-price" *ngIf="userRole() === 'teamLead'; else hiddenPrice">
            {{ formatAmount(project.price) }}
          </div>
          <ng-template #hiddenPrice>
            <div class="total-price hidden-amount">--</div>
          </ng-template>
          
          <div class="cost-info" *ngIf="userRole() === 'teamLead'">
            <span>成本: {{ formatAmount(project.cost) }}</span>
            <span>利润率: {{ project.profitRate.toFixed(1) }}%</span>
          </div>
        </div>
        
        <div class="project-actions">
          <button *ngIf="project.financialStatus === 'pendingQuote' && userRole() === 'teamLead'" (click)="openQuoteModal(project)" class="action-btn quote-btn">
            生成报价
          </button>
          
          <button *ngIf="project.financialStatus === 'quoted' && userRole() === 'teamLead'" (click)="updateFinancialStatus(project, 'pendingPayment')" class="action-btn status-btn">
            标记为待收款
          </button>
          
          <button *ngIf="project.financialStatus === 'pendingPayment' && userRole() === 'teamLead'" (click)="updateFinancialStatus(project, 'partialPayment')" class="action-btn status-btn">
            部分收款
          </button>
          
          <button *ngIf="project.financialStatus === 'partialPayment' && userRole() === 'teamLead'" (click)="updateFinancialStatus(project, 'fullPayment')" class="action-btn status-btn">
            全款到账
          </button>
          
          <button *ngIf="project.financialStatus === 'fullPayment' && userRole() === 'teamLead'" (click)="updateFinancialStatus(project, 'pendingSettlement')" class="action-btn status-btn">
            待结算
          </button>
          
          <button *ngIf="project.financialStatus === 'pendingSettlement' && userRole() === 'teamLead'" (click)="updateFinancialStatus(project, 'settled')" class="action-btn status-btn">
            完成结算
          </button>
          
          <button (click)="openCommunicationLogModal(project)" class="action-btn log-btn">
            沟通日志
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- 报价弹窗 -->
  <div *ngIf="showQuoteModal()" class="modal-overlay">
    <div class="modal-content quote-modal">
      <div class="modal-header">
        <h2>生成项目报价</h2>
        <button (click)="showQuoteModal.set(false)" class="close-btn">×</button>
      </div>
      
      <div class="modal-body">
        <form [formGroup]="quoteForm" (ngSubmit)="calculateQuote()" class="quote-form">
          <div class="form-row">
            <div class="form-group">
              <label>项目编号</label>
              <input formControlName="projectId" type="text" readonly>
            </div>
            
            <div class="form-group">
              <label>方案类型</label>
              <input formControlName="planType" type="text" readonly>
            </div>
          </div>
          
          <div class="form-row">
            <div class="form-group">
              <label>技术类型</label>
              <select formControlName="technicalType">
                <option value="建模">建模</option>
                <option value="渲染">渲染</option>
                <option value="后期">后期</option>
                <option value="建模/渲染">建模/渲染</option>
                <option value="建模/渲染/后期">建模/渲染/后期</option>
              </select>
            </div>
            
            <div class="form-group">
              <label>面积 (m²)</label>
              <input formControlName="area" type="number" min="1">
            </div>
          </div>
          
          <div class="form-row">
            <div class="form-group">
              <label>利润率 (%)</label>
              <input formControlName="profitRate" type="range" min="0" max="100">
              <div class="profit-rate-display">{{ quoteForm.value.profitRate }}%</div>
            </div>
          </div>
          
          <div class="form-actions">
            <button type="button" (click)="showQuoteModal.set(false)" class="btn-cancel">取消</button>
            <button type="submit" class="btn-primary">计算并生成报价</button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <!-- 沟通日志弹窗 -->
  <div *ngIf="showCommunicationLogModal()" class="modal-overlay">
    <div class="modal-content communication-log-modal">
      <div class="modal-header">
        <h2>销售沟通日志</h2>
        <button (click)="showCommunicationLogModal.set(false)" class="close-btn">×</button>
      </div>
      
      <div class="modal-body">
        <div class="log-header" *ngIf="selectedProject()">
          <div class="project-name">{{ selectedProject()?.name }}</div>
          <div class="client-info">客户: {{ selectedProject()?.clientName }}</div>
          <div class="sales-info">销售: {{ selectedProject()?.salesPerson }}</div>
        </div>
        
        <div class="log-list" *ngIf="selectedProject()">
          <div *ngIf="selectedProject()?.communicationLog && selectedProject()?.communicationLog?.length === 0" class="no-logs">
            暂无沟通记录
          </div>
          
          <div *ngFor="let log of selectedProject()?.communicationLog || []" class="log-item">
            <div class="log-content" [class.has-red-line]="log.hasRedLineContent">
              {{ log.content }}
            </div>
            <div class="log-time">
              {{ formatDate(log.timestamp) }}
            </div>
          </div>
        </div>
        
        <div class="add-log-section">
          <textarea placeholder="添加沟通记录..." rows="3" class="log-input"></textarea>
          <div class="log-actions">
            <label class="checkbox-label">
              <input type="checkbox"> 包含红线内容
            </label>
            <button class="btn-add-log">添加记录</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 角色权限提示 -->
  <div *ngIf="userRole() === 'juniorMember'" class="permission-tip">
    <div class="tip-icon">🔒</div>
    <div class="tip-content">
      <p>您当前以初级组员身份查看项目财务档案，部分敏感数据已隐藏。如需查看完整数据，请联系管理员提升权限。</p>
    </div>
  </div>
</div>