游戏数据分析工具箱 (黄鱼版)

黄鱼数分工具箱

请选择左侧工具


<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
  <title>十四日LTV预估工具（黄鱼版）</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- React & ReactDOM -->
  <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
  <!-- Babel -->
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <!-- Local XLSX, fallback to CDN if not found -->
  <script src="xlsx.full.min.js"></script>
  <script>
    if (typeof XLSX === 'undefined') {
      document.write('<script src="https://cdn.sheetjs.com/xlsx-0.20.0/package/dist/xlsx.full.min.js"><\/script>');
    }
  </script>
  
  <style>
      .scrollbar-hide::-webkit-scrollbar { display: none; }
      .scrollbar-default::-webkit-scrollbar { width: 8px; height: 8px; }
      .scrollbar-default::-webkit-scrollbar-track { background: #f1f1f1; }
      .scrollbar-default::-webkit-scrollbar-thumb { background: #888; border-radius: 4px; }
      .scrollbar-default::-webkit-scrollbar-thumb:hover { background: #555; }
      
      /* Fixed Tooltip Styles */
      #tooltip-portal {
        position: fixed;
        z-index: 9999;
        pointer-events: none;
        transition: opacity 0.1s;
      }
      .tooltip-content {
        background-color: #1f2937;
        color: #fff;
        padding: 8px 12px;
        border-radius: 6px;
        font-size: 12px;
        line-height: 1.5;
        white-space: pre-wrap;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        max-width: 320px;
        border: 1px solid #374151;
      }
  </style>
<script type="importmap">
{
  "imports": {
    "react-dom/": "https://aistudiocdn.com/react-dom@^19.2.0/",
    "lucide-react": "https://aistudiocdn.com/lucide-react@^0.555.0",
    "react/": "https://aistudiocdn.com/react@^19.2.0/",
    "react": "https://aistudiocdn.com/react@^19.2.0",
    "xlsx": "https://aistudiocdn.com/xlsx@^0.18.5"
  }
}
</script>
</head>
<body class="bg-gray-50 text-slate-800 antialiased">
  <div id="root"></div>
  <div id="tooltip-portal" style="opacity: 0; left: 0; top: 0;"></div>

  <script type="text/babel">
    const { useState, useMemo, useEffect, useRef } = React;

    // --- ICONS ---
    const HelpCircle = ({ size = 24, className = "" }) => (
      <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><path d="M12 17h.01"/></svg>
    );
    const Download = ({ size = 24, className = "" }) => (
      <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/></svg>
    );
    const FileSpreadsheet = ({ size = 24, className = "" }) => (
      <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><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"/><polyline points="14 2 14 8 20 8"/><path d="M8 13h2"/><path d="M8 17h2"/><path d="M14 13h2"/><path d="M14 17h2"/></svg>
    );
    const XIcon = ({ size = 24, className = "" }) => (
      <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
    );
    const Info = ({ size = 24, className = "" }) => (
      <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
    );

    // --- UTILS ---
    const parseExcelDate = (input) => {
      if (typeof input === 'number') {
        const date = new Date(Math.round((input - 25569) * 86400 * 1000));
        return date.toISOString().split('T')[0];
      }
      const d = new Date(input);
      if (!isNaN(d.getTime())) {
        return d.toISOString().split('T')[0];
      }
      if (typeof input === 'string' && input.includes('/')) {
          const parts = input.split('/');
          if (parts.length === 2) {
              const year = new Date().getFullYear();
              return `${year}-${parts[0].padStart(2, '0')}-${parts[1].padStart(2, '0')}`;
          }
      }
      return String(input);
    };

    const getWeekStart = (dateStr) => {
      const d = new Date(dateStr);
      const day = d.getDay();
      const diff = d.getDate() - day + (day === 0 ? -6 : 1);
      const monday = new Date(d.setDate(diff));
      return monday.toISOString().split('T')[0];
    };

    const formatDateMMDD = (dateStr) => {
      const d = new Date(dateStr);
      const m = (d.getMonth() + 1).toString().padStart(2, '0');
      const day = d.getDate().toString().padStart(2, '0');
      return `${m}/${day}`;
    };

    const getBenchPeriod = (b) => {
        if (!b) return 'Unk';
        if (b['周期']) return String(b['周期']).trim();
        if (b['日期']) return String(b['日期']).trim();
        if (b['日期范围']) return String(b['日期范围']).trim();
        if (b['Date']) return String(b['Date']).trim();
        const keys = Object.keys(b);
        const likelyKey = keys.find(k => /期|date|range|week/i.test(k));
        if (likelyKey && b[likelyKey]) return String(b[likelyKey]).trim();
        if (keys.length > 0) return String(b[keys[0]]).trim();
        return 'Unk';
    };

    // Helper: Linear Regression for Power Law (y = A * x^B => ln(y) = ln(A) + B * ln(x))
    const calculatePowerFit = (points) => {
        if (points.length < 2) return null;
        
        let n = 0;
        let sumLnX = 0;
        let sumLnY = 0;
        let sumLnX_LnY = 0;
        let sumLnX_2 = 0;

        for (const p of points) {
            if (p.x <= 0 || p.y <= 0) continue; 
            const lnX = Math.log(p.x);
            const lnY = Math.log(p.y);
            
            sumLnX += lnX;
            sumLnY += lnY;
            sumLnX_LnY += lnX * lnY;
            sumLnX_2 += lnX * lnX;
            n++;
        }

        if (n < 2) return null;

        const slope = (n * sumLnX_LnY - sumLnX * sumLnY) / (n * sumLnX_2 - sumLnX * sumLnX);
        const intercept = (sumLnY - slope * sumLnX) / n;
        const A = Math.exp(intercept);
        
        return { A, B: slope };
    };

    // Rule 1 & 2: Generic prediction for remaining days
    const predictNextDays = (days, startDay, targetDay, methodPrefix = "预估") => {
      for (let d = startDay; d <= targetDay; d++) {
        let prediction = 0;
        let note = "";

        // Rule 1: Plateau Check
        let isPlateau = false;
        if (d - 1 >= 3) {
          const v1 = days[d - 1].value;
          const v2 = days[d - 2].value;
          const v3 = days[d - 3].value;
          if (Math.abs(v1 - v2) < 0.001 && Math.abs(v2 - v3) < 0.001) {
            isPlateau = true;
          }
        }

        if (isPlateau) {
          prediction = days[d - 1].value;
          note = `${methodPrefix} (规则①): 连续三天数值一致，判定增长停止`;
        } else {
          // Rule 2: Growth Trend with Parallel Shift
          const prevVal = days[d - 1].value; // Actual Value (or previously estimated)
          
          // Data Collection
          const historyPoints = [];
          const availableHistory = (d - 1) - 1; 
          let lookback = 3;
          if (availableHistory >= 5) lookback = 5;
          else if (availableHistory >= 3) lookback = 3;
          else lookback = availableHistory;

          let isSurgeDampened = false;
          let effectiveLastIncrement = 0; // The increment we "trust"

          // Collect valid points (Excluding Day 1)
          for (let k = 0; k < lookback; k++) {
              // Points: d-1, d-2, ...
              const dayIdx = (d - 1) - k;
              
              if (dayIdx >= 2 && days[dayIdx]) { 
                  let pointValue = days[dayIdx].value;
                  
                  // SURGE DAMPENING CHECK (Only on the most recent Real data point transition)
                  if (k === 0 && days[dayIdx-1] && days[dayIdx-2]) {
                      const vCurr = days[dayIdx].value;
                      const vPrev = days[dayIdx-1].value;
                      const vPrePrev = days[dayIdx-2].value;
                      
                      const incCurr = vCurr - vPrev;
                      const incPrev = vPrev - vPrePrev;
                      
                      effectiveLastIncrement = incCurr;

                      // Check strictly if current point is NOT estimated (Real data surge)
                      if (!days[dayIdx].isEstimated) {
                        // Surge condition: Current Inc > 1.5x Previous Inc
                        if (incPrev > 0 && incCurr > incPrev * 1.5) {
                            // Create Virtual Point: Allow max 1.5x acceleration
                            const virtualInc = incPrev * 1.5;
                            pointValue = vPrev + virtualInc;
                            effectiveLastIncrement = virtualInc; 
                            isSurgeDampened = true;
                        }
                      }
                  }

                  historyPoints.push({ x: dayIdx, y: pointValue });
              }
          }
          // Sort by x asc for fit
          historyPoints.reverse();

          // Strategy A: Power Function Fitting (Strict B < 1)
          let fitResult = null;
          if (historyPoints.length >= 3) {
             fitResult = calculatePowerFit(historyPoints);
          }

          let useFit = false;
          
          if (fitResult && fitResult.B > 0 && fitResult.B < 1.0) { // STRICTLY LESS THAN 1.0
             useFit = true;
             const { A, B } = fitResult;
             
             // Calculate Virtual Increment based on Curve
             const vCurrent = A * Math.pow(d, B);
             const vPrev = A * Math.pow(d - 1, B);
             const predictedInc = Math.max(0, vCurrent - vPrev);
             
             // Apply Parallel Shift
             prediction = prevVal + predictedInc;
             
             note = `${methodPrefix} (规则②): 幂函数拟合 (B=${B.toFixed(3)}${isSurgeDampened ? ', 削峰' : ''}) - 增量平移`;

          } else {
             // Fallback or Acceleration Detected (B >= 1)
             // Strategy B: Decaying Increment
             if (historyPoints.length < 2) {
                 prediction = prevVal; 
                 note = `${methodPrefix}: 数据不足`;
             } else {
                 // Force Decay: 0.90 coefficient (Updated from 0.98)
                 const predictedInc = Math.max(0, effectiveLastIncrement * 0.90);
                 
                 prediction = prevVal + predictedInc;
                 
                 let reason = fitResult ? `(B=${fitResult.B.toFixed(2)}>=1)` : "(拟合失败)";
                 note = `${methodPrefix} (规则②兜底): 衰减增量 ${reason}, 系数0.90`;
             }
          }
        }
        days[d] = { value: prediction, isEstimated: true, note };
      }
    };

    const processSourceData = (data) => {
      const sorted = [...data].sort((a, b) => {
        const da = new Date(parseExcelDate(a.日期));
        const db = new Date(parseExcelDate(b.日期));
        return da.getTime() - db.getTime();
      });

      const platforms = ['ios', 'android'];
      let allProcessed = [];

      platforms.forEach(p => {
        const pData = sorted.filter(r => (r.平台 || '').toLowerCase().trim() === p);
        if (pData.length === 0) return;

        const weeksMap = new Map();
        pData.forEach(row => {
          const d = parseExcelDate(row.日期);
          const ws = getWeekStart(d);
          if (!weeksMap.has(ws)) weeksMap.set(ws, []);
          weeksMap.get(ws).push(row);
        });
        
        const sortedWeeks = Array.from(weeksMap.keys()).sort();
        const processedHistory = [];

        sortedWeeks.forEach((weekStart, weekIndex) => {
          const rows = weeksMap.get(weekStart) || [];
          const targetDay = weekIndex === 0 ? 15 : 7; 

          rows.forEach(row => {
            const dateStr = parseExcelDate(row.日期);
            const dayOfWeek = new Date(dateStr).getDay(); 
            
            const reg = Number(row.注册) || 0;
            const day1 = Number(row['第1天'] || row['首日LTV']) || 0;
            const days = {};
            
            let maxDay = 1;
            days[1] = { value: day1, isEstimated: false };
            for (let i = 2; i <= 30; i++) {
                const key = `第${i}天`;
                if (row[key] !== undefined && row[key] !== null && row[key] !== '') {
                    days[i] = { value: Number(row[key]), isEstimated: false };
                    maxDay = i;
                }
            }

            const isWeek2 = weekIndex === 1;
            let specificRuleApplied = false;

            // --- PRIORITY 1: RULE 5 (Week 2 Sunday) ---
            if (isWeek2 && dayOfWeek === 0 && maxDay <= 2) {
                 if (maxDay === 2) {
                    const currentD2 = days[2].value;
                    let multiplier = 1.4;
                    let predictedD2 = currentD2 * multiplier;
                    
                    const currentLTV = day1 * predictedD2;
                    let maxHistLTV_D2 = 0;
                    
                    processedHistory.forEach(h => {
                        if (h.days[2]) {
                            const hLTV = h.day1 * h.days[2].value;
                            if (hLTV > maxHistLTV_D2) maxHistLTV_D2 = hLTV;
                        }
                    });

                    let note = "规则⑤: 末值x1.4 (校验通过)";
                    if (currentLTV > maxHistLTV_D2 && maxHistLTV_D2 > 0) {
                        multiplier = 1.2;
                        predictedD2 = currentD2 * multiplier;
                        note = "规则⑤: 末值x1.4 LTV超限, 下调至x1.2";
                    }

                    days[2] = { value: predictedD2, isEstimated: true, note };
                    specificRuleApplied = true;
                 }
            }

            // --- PRIORITY 2: RULE 4 (Week 2 Saturday) ---
            if (isWeek2 && (dayOfWeek === 6 || dayOfWeek === 0) && (!specificRuleApplied || maxDay <= 3)) {
                if (maxDay <= 3) {
                    let sumProd = 0;
                    let sumReg = 0;
                    
                    processedHistory.forEach(h => {
                        if (h.days[3] && h.days[2] && h.days[2].value > 0) {
                            const ratio = h.days[3].value / h.days[2].value;
                            sumProd += h.reg * ratio;
                            sumReg += h.reg;
                        }
                    });
                    
                    const wAvgRatio = sumReg > 0 ? sumProd / sumReg : 1.05;
                    const d2Val = days[2] ? days[2].value : 0;
                    let estD3 = d2Val * wAvgRatio;
                    let note = `规则④: 加权D3/D2比值 (${wAvgRatio.toFixed(3)})`;

                    if (maxDay === 3) {
                        const actualD3 = days[3].value;
                        if (actualD3 > estD3) {
                            estD3 = actualD3;
                            note += " (取末值: 末值更大)";
                        } else {
                            note += " (取预估: 预估更大)";
                        }
                    }
                    
                    days[3] = { value: estD3, isEstimated: true, note };
                    if (maxDay < 3) maxDay = 3;
                    specificRuleApplied = true; 
                }
            }

            // --- PRIORITY 3: RULE 3 (Week 2 Friday) ---
            if (isWeek2 && (dayOfWeek === 5 || dayOfWeek === 6 || dayOfWeek === 0) && (!specificRuleApplied || maxDay <= 4)) {
                if (maxDay <= 4) {
                     const myRatio3_2 = (days[3] && days[2] && days[2].value > 0) ? days[3].value / days[2].value : 0;
                     let bestMatchRow = null;
                     let minDiff = 999;
                     
                     processedHistory.forEach(h => {
                         if (h.days[3] && h.days[2] && h.days[2].value > 0 && h.days[4]) {
                             const r = h.days[3].value / h.days[2].value;
                             const diff = Math.abs(r - myRatio3_2);
                             if (diff < minDiff) {
                                 minDiff = diff;
                                 bestMatchRow = h;
                             }
                         }
                     });
                     
                     let ratio4_3 = 1.05;
                     let matchInfo = "默认";
                     if (bestMatchRow) {
                         const bm = bestMatchRow;
                         if (bm.days[4] && bm.days[3] && bm.days[3].value > 0) {
                             ratio4_3 = bm.days[4].value / bm.days[3].value;
                             matchInfo = `对标 ${bm.date} (Diff: ${minDiff.toFixed(4)})`;
                         }
                     }
                     
                     let estD4 = days[3].value * ratio4_3;
                     let note = `规则③: 对标D4/D3比值, ${matchInfo}`;

                     if (maxDay === 4) {
                         const actualD4 = days[4].value;
                         if (actualD4 > estD4) {
                             estD4 = actualD4;
                             note += " (取末值)";
                         } else {
                             note += " (取预估)";
                         }
                     }
                     
                     days[4] = { value: estD4, isEstimated: true, note };
                     if (maxDay < 4) maxDay = 4;
                     specificRuleApplied = true;
                }
            }

            // --- PRIORITY 4: RULE 6 (Slope Correction) ---
            if (!specificRuleApplied && maxDay >= 3) {
                 const vN = days[maxDay].value;
                 const vN_1 = days[maxDay - 1].value;
                 const vN_2 = days[maxDay - 2].value;
                 
                 const slopeCurr = vN - vN_1;
                 const slopePrev = vN_1 - vN_2;
                 
                 if (slopeCurr > slopePrev) {
                     days[maxDay].isEstimated = true; 
                     days[maxDay].note = "规则⑥: 末值增幅足够，保持不变";
                 } else {
                     let corrected = vN_1 + (vN_1 - vN_2) * 0.9;
                     let note = `规则⑥: 线性修正 (斜率*0.9)`;
                     
                     if (maxDay >= 4) {
                         const vN_3 = days[maxDay - 3].value;
                         const increment = corrected - vN_1; 
                         const threshold = (vN_1 - vN_3) / 2;
                         
                         if (increment > threshold) {
                             const newIncrement = threshold * 0.9;
                             corrected = vN_1 + newIncrement;
                             note = `规则⑥: 二次校正 (跨度均值*0.9)`;
                         }
                     }

                     days[maxDay] = {
                         value: corrected,
                         isEstimated: true,
                         note: `${note} (${vN.toFixed(2)} -> ${corrected.toFixed(2)})`
                     };
                 }
            }

            // --- PRIORITY 5 & 6: REMAINING DAYS ---
            predictNextDays(days, maxDay + 1, targetDay, "预估");

            const processedRow = { date: dateStr, platform: p, reg, day1, days };
            processedHistory.push(processedRow);
            allProcessed.push(processedRow);
          });
        });
      });

      return allProcessed;
    };

    const calculateWeeklyStats = (rows) => {
      const weeksMap = new Map();

      rows.forEach(row => {
        const ws = getWeekStart(row.date);
        const key = `${row.platform}_${ws}`;

        if (!weeksMap.has(key)) {
          const d = new Date(ws);
          const endD = new Date(d);
          endD.setDate(d.getDate() + 6);
          const range = `${formatDateMMDD(ws)}-${formatDateMMDD(endD.toISOString())}`;

          weeksMap.set(key, {
            dateRange: range,
            platform: row.platform,
            totalReg: 0,
            weightedD1: 0,
            weightedD3: 0,
            weightedD7: 0,
            weightedD15: 0,
            sumReg: 0,
            sumProdD1: 0,
            sumProdD1_D3: 0, 
            sumProdD1_D7: 0, 
            sumProdD1_D15: 0, 
          });
        }

        const stat = weeksMap.get(key);
        stat.sumReg += row.reg;
        stat.sumProdD1 += row.reg * (row.days[1]?.value || 0);
        
        const d1Val = row.days[1]?.value || 0;
        stat.sumProdD1_D3 += row.reg * d1Val * (row.days[3]?.value || 0);
        stat.sumProdD1_D7 += row.reg * d1Val * (row.days[7]?.value || 0);
        stat.sumProdD1_D15 += row.reg * d1Val * (row.days[15]?.value || 0);
      });

      const results = [];
      weeksMap.forEach(stat => {
        if (stat.sumReg > 0) {
          stat.totalReg = stat.sumReg;
          stat.weightedD1 = stat.sumProdD1 / stat.sumReg;
          
          if (stat.sumProdD1 > 0) {
             stat.weightedD3 = stat.sumProdD1_D3 / stat.sumProdD1;
             stat.weightedD7 = stat.sumProdD1_D7 / stat.sumProdD1;
             stat.weightedD15 = stat.sumProdD1_D15 / stat.sumProdD1;
          }
        }
        results.push(stat);
      });
      
      return results.sort((a, b) => a.dateRange.localeCompare(b.dateRange));
    };

    const processBenchmarkForecast = (weeklyStats, benchmarkData, platform) => {
        const stats = weeklyStats.filter(s => s.platform === platform);
        const results = [];
        
        const bench360Values = benchmarkData.map(r => Number(r['第360天'])).filter(n => !isNaN(n) && n > 0);
        const meanBench360 = bench360Values.length > 0 
            ? bench360Values.reduce((a,b) => a+b, 0) / bench360Values.length 
            : 0;

        // Process Weekly Forecasts
        stats.forEach((stat, index) => {
            const isFirstWeek = index === 0; 
            const isSecondWeek = index === 1;

            let result = {
                ...stat,
                isEstimated: false,
                forecastedCells: [],
                rawStat: stat,
                forecastMethod: "",
                d30: 0, d45: 0, d60: 0, d90: 0, d120: 0, d180: 0, d360: 0
            };

            if (benchmarkData.length === 0) {
                results.push(result);
                return;
            }

            let selectedBench = null;
            let coefficient = 1;
            let methodLog = "";

            const calcLTVDev = (benchRow) => {
                const d1Bench = Number(benchRow['首日LTV'] || benchRow['第1天']);
                const d360Bench = Number(benchRow['第360天']);
                if (d1Bench > 0 && d360Bench > 0 && meanBench360 > 0) {
                    const projected360 = stat.weightedD1 * (d360Bench / d1Bench);
                    const deviation = Math.abs(projected360 - meanBench360) / meanBench360;
                    return deviation;
                }
                return 0; 
            };

            // --- Week 1 Logic (Rule 10 & 11) ---
            if (isFirstWeek) {
                const exactMatchRow = benchmarkData.find(b => getBenchPeriod(b) === stat.dateRange);
                const prevRatioDisplay = exactMatchRow && exactMatchRow['第15天'] > 0 
                    ? (stat.weightedD15 / exactMatchRow['第15天']).toFixed(4) 
                    : 'N/A';

                let useExactMatch = false;

                if (exactMatchRow && exactMatchRow['第15天'] > 0) {
                     const directCoeff = stat.weightedD15 / exactMatchRow['第15天'];
                     const dev = calcLTVDev(exactMatchRow);
                     
                     if (directCoeff >= 0.9 && directCoeff <= 1.1) {
                         selectedBench = exactMatchRow;
                         coefficient = directCoeff;
                         methodLog = `首周D15/同期D15比值: ${directCoeff.toFixed(4)}\n符合规则⑩\n对标周: ${getBenchPeriod(exactMatchRow)}\n系数: ${coefficient.toFixed(4)}\nLTV校验: ${(dev*100).toFixed(1)}%`;
                         useExactMatch = true;
                     }
                }

                if (!useExactMatch) {
                    const targetRatio = stat.weightedD7 > 0 ? stat.weightedD15 / stat.weightedD7 : 0;
                    const benchCandidates = benchmarkData.map(b => ({
                        row: b,
                        ratio15_7: (b['第15天'] && b['第7天']) ? b['第15天'] / b['第7天'] : 999
                    }));
                    benchCandidates.sort((a, b) => Math.abs(a.ratio15_7 - targetRatio) - Math.abs(b.ratio15_7 - targetRatio));

                    let validBenchFound = false;
                    for (const cand of benchCandidates) {
                        const b = cand.row;
                        const dev = calcLTVDev(b);
                        if (dev <= 1.0) { 
                            selectedBench = b;
                            coefficient = (b['第15天'] && b['第15天'] > 0) ? stat.weightedD15 / b['第15天'] : 1;
                            const benchRatio = cand.ratio15_7.toFixed(4);
                            methodLog = `首周D15/同期D15比值: ${prevRatioDisplay} (不符规则⑩)\n符合规则⑪\n首周D15/D7比值: ${targetRatio.toFixed(4)}\n另外寻找对标周: ${getBenchPeriod(b)}\n(当周D15/D7比值: ${benchRatio})\nLTV校验结果: ${(dev*100).toFixed(1)}%\n系数: ${coefficient.toFixed(4)}`;
                            validBenchFound = true;
                            break;
                        }
                    }
                    if (!validBenchFound && benchCandidates.length > 0) {
                        const b = benchCandidates[0].row;
                        selectedBench = b;
                        coefficient = (b['第15天'] > 0) ? stat.weightedD15 / b['第15天'] : 1;
                        methodLog = `规则⑪(强制): ${getBenchPeriod(b)}, K=${coefficient.toFixed(3)} (LTV偏差>100%)`;
                    }
                }
            }

            // --- Week 2 Logic (Rule 12) ---
            if (isSecondWeek) {
                const targetRatio = stat.weightedD3 > 0 ? stat.weightedD7 / stat.weightedD3 : 0; 
                const benchCandidates = benchmarkData.map(b => ({
                    row: b,
                    ratio7_3: (b['第7天'] && b['第3天']) ? b['第7天'] / b['第3天'] : 999
                }));
                benchCandidates.sort((a, b) => Math.abs(a.ratio7_3 - targetRatio) - Math.abs(b.ratio7_3 - targetRatio));
                let validBenchFound = false;
                
                for (const cand of benchCandidates) {
                    const b = cand.row;
                    const dev = calcLTVDev(b);
                    if (dev <= 1.0) {
                        selectedBench = b;
                        coefficient = (b['第7天'] && b['第7天'] > 0) ? stat.weightedD7 / b['第7天'] : 1;
                        const benchRatio = cand.ratio7_3.toFixed(4);
                        methodLog = `使用规则⑫\nD7/D3比值: ${targetRatio.toFixed(4)}\n对标周: ${getBenchPeriod(b)}\n(当周D7/D3比值: ${benchRatio})\n系数: ${coefficient.toFixed(4)}\nLTV校验结果: ${(dev*100).toFixed(1)}%`;
                        validBenchFound = true;
                        break;
                    }
                }
                if (!validBenchFound && benchCandidates.length > 0) {
                    const b = benchCandidates[0].row;
                    selectedBench = b;
                    coefficient = (b['第7天'] > 0) ? stat.weightedD7 / b['第7天'] : 1;
                    methodLog = `规则⑫(强制): ${getBenchPeriod(b)}, K=${coefficient.toFixed(3)} (LTV偏差>100%)`;
                }

                if (selectedBench) {
                    const benchD15 = Number(selectedBench['第15天']) || 0;
                    result.weightedD15 = benchD15 * coefficient;
                    result.forecastedCells.push('weightedD15');
                }
            }

            // --- Long Term ---
            if (selectedBench) {
                const days = [30, 45, 60, 90, 120, 180, 360];
                days.forEach(d => {
                    const val = Number(selectedBench[`第${d}天`]) || 0;
                    result[`d${d}`] = val * coefficient;
                    result.forecastedCells.push(`d${d}`);
                });
            }

            result.forecastMethod = methodLog;
            results.push(result);
        });

        // --- Append Remaining Benchmark Rows ---
        const forecastPeriods = new Set(results.map(r => r.dateRange));
        benchmarkData.forEach(row => {
            const period = getBenchPeriod(row);
            if (!forecastPeriods.has(period)) {
                results.push({
                    dateRange: period,
                    platform: platform,
                    totalReg: Number(row['独立注册'] || row['注册'] || 0),
                    weightedD1: Number(row['首日LTV'] || row['第1天'] || 0),
                    weightedD3: Number(row['第3天'] || 0),
                    weightedD7: Number(row['第7天'] || 0),
                    weightedD15: Number(row['第15天'] || 0),
                    sumReg: 0, sumProdD1: 0, sumProdD3: 0, sumProdD7: 0, sumProdD15: 0,
                    isEstimated: false,
                    forecastedCells: [],
                    rawStat: null,
                    forecastMethod: '对标源数据',
                    d30: Number(row['第30天'] || 0),
                    d45: Number(row['第45天'] || 0),
                    d60: Number(row['第60天'] || 0),
                    d90: Number(row['第90天'] || 0),
                    d120: Number(row['第120天'] || 0),
                    d180: Number(row['第180天'] || 0),
                    d360: Number(row['第360天'] || 0),
                });
            }
        });

        return results;
    };


    // --- COMPONENTS ---鑫

    const FileUpload = ({ label, onDataLoaded, accept = ".xlsx, .xls, .csv" }) => {
      const handleFileChange = (e) => {
        const file = e.target.files?.[0];
        if (!file) return;

        const reader = new FileReader();
        reader.onload = (evt) => {
          const bstr = evt.target?.result;
          const wb = window.XLSX.read(bstr, { type: 'binary' });
          const wsname = wb.SheetNames[0];
          const ws = wb.Sheets[wsname];
          const data = window.XLSX.utils.sheet_to_json(ws);
          onDataLoaded(data, file.name);
        };
        reader.readAsBinaryString(file);
      };

      return (
        <div className="mb-4">
          <label className="block text-sm font-medium text-gray-700 mb-1">{label}</label>
          <input
            type="file"
            accept={accept}
            onChange={handleFileChange}
            className="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100"
          />
        </div>
      );
    };

    const InstructionsModal = ({ isOpen, onClose }) => {
      if (!isOpen) return null;
      return (
        <div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
          <div className="bg-white rounded-lg shadow-xl w-full max-w-lg max-h-[90vh] flex flex-col">
            <div className="p-4 border-b flex justify-between items-center bg-blue-50 rounded-t-lg">
               <h2 className="font-bold text-lg text-blue-800">表格格式说明</h2>
               <button onClick={onClose} className="p-1 hover:bg-blue-200 rounded-full">
                 <XIcon size={24} />
               </button>
            </div>
            <div className="p-6 overflow-y-auto space-y-4 text-sm text-gray-700 leading-relaxed">
              <div>
                <h3 className="font-bold text-gray-900 mb-1">1. 源数据表 (Table 1)</h3>
                <p>必须包含以下列头：</p>
                <ul className="list-disc pl-5 space-y-1">
                    <li><b>日期</b>：格式如 2024-05-20 或 2024/05/20</li>
                    <li><b>平台</b>：ios 或 android</li>
                    <li><b>注册</b>：新增用户数</li>
                    <li><b>第1天</b> (或 <b>首日LTV</b>)</li>
                    <li><b>第2天</b>、<b>第3天</b>...<b>第15天</b>等</li>
                </ul>
              </div>
              <div className="border-t pt-4">
                <h3 className="font-bold text-gray-900 mb-1">2. 对标表 (Table 2/3)</h3>
                <p>必须包含以下列头：</p>
                <ul className="list-disc pl-5 space-y-1">
                    <li><b>周期</b> (或 <b>日期</b>/<b>日期范围</b>)：如 "05/12-05/18"</li>
                    <li><b>独立注册</b> (或 <b>注册</b>)：注册人数</li>
                    <li><b>首日LTV</b> (或 <b>第1天</b>)</li>
                    <li><b>第3天</b>、<b>第7天</b>、<b>第15天</b></li>
                    <li><b>第30天</b>、<b>第45天</b>...<b>第360天</b> (用于长线预估)</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      );
    };

    const UpdateLog = ({ isOpen, onClose }) => {
      if (!isOpen) return null;
      return (
        <div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
          <div className="bg-white rounded-lg shadow-xl w-full max-w-md max-h-[80vh] flex flex-col">
            <div className="p-4 border-b flex justify-between items-center bg-gray-50 rounded-t-lg">
               <h2 className="font-bold text-lg">更新日志</h2>
               <button onClick={onClose} className="p-1 hover:bg-gray-200 rounded-full">
                 <XIcon size={24} />
               </button>
            </div>
            <div className="p-6 overflow-y-auto">
              <ul className="space-y-4 text-sm text-gray-700">
                 <li>
                  <span className="font-bold block text-blue-600">v1.7.0 (2025-12-03)</span>
                  <span>- 核心算法优化：幂函数弃用后的衰减兜底系数调整为0.90 (原0.98)，加速趋缓。</span>
                  <span>- 双周预估表：追加显示除首周/次周外的所有对标源数据行。</span>
                  <span>- UI优化：修复底部Tooltip遮挡问题；增加公众号提示；增加表格说明。</span>
                </li>
                 <li>
                  <span className="font-bold block text-blue-600">v1.6.0 (2025-12-03)</span>
                  <span>- 核心算法优化(规则②)：增加“增量平行移植”逻辑。预测的增量叠加在真实前值之上，保留高起点。</span>
                  <span>- 增加双重减速锁：拟合B≥1时弃用，强制切换为衰减增量。</span>
                  <span>- 优化激增检测系数至1.5倍。</span>
                </li>
                 <li>
                  <span className="font-bold block text-blue-600">v1.5.0 (2025-12-03)</span>
                  <span>- 核心算法升级(规则②)：采用幂函数拟合(Power Function Fitting)预测LTV增长趋势。</span>
                </li>
                 <li>
                  <span className="font-bold block text-blue-600">v1.4.0 (2025-12-02)</span>
                  <span>- 完善日数据预估规则③④⑤，增加末值/预估值比对校验及LTV阈值风控。</span>
                  <span>- 重构规则⑥(末值修正)：引入线性修正与二次校正逻辑。</span>
                </li>
                 <li>
                  <span className="font-bold block text-blue-600">v1.3.0 (2025-12-02)</span>
                  <span>- 双周预估增加规则⑩⑪⑫：基于周期匹配及比值(D15/D7, D7/D3)匹配对标周。</span>
                  <span>- 增加LTV异常校验(360天偏差>100%跳过)。</span>
                </li>
                 <li>
                  <span className="font-bold block text-blue-600">v1.1.0 ~ v1.2.0</span>
                  <span>- 增加长线LTV(30-360天)列；修复加权统计公式；优化Tooltip显示。</span>
                </li>
                 <li>
                  <span className="font-bold block text-blue-600">v1.0.0 (2025-12-02)</span>
                  <span>- 初始版本发布，支持源数据导入及基础预估。</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      );
    };

    // --- APP ---

    function App() {
      const [sourceData, setSourceData] = useState([]);
      const [benchIOS, setBenchIOS] = useState([]);
      const [benchAndroid, setBenchAndroid] = useState([]);
      
      const [showLog, setShowLog] = useState(false);
      const [showInstructions, setShowInstructions] = useState(false);
      const [activeTab, setActiveTab] = useState('ios');
      const [tooltip, setTooltip] = useState({ visible: false, x: 0, y: 0, content: '' });

      const dailyForecast = useMemo(() => {
        if (sourceData.length === 0) return [];
        return processSourceData(sourceData);
      }, [sourceData]);

      const weeklyStats = useMemo(() => {
        if (dailyForecast.length === 0) return [];
        return calculateWeeklyStats(dailyForecast);
      }, [dailyForecast]);

      const benchmarkForecastIOS = useMemo(() => {
        return processBenchmarkForecast(weeklyStats, benchIOS, 'ios');
      }, [weeklyStats, benchIOS]);

      const benchmarkForecastAndroid = useMemo(() => {
        return processBenchmarkForecast(weeklyStats, benchAndroid, 'android');
      }, [weeklyStats, benchAndroid]);

      const currentDaily = dailyForecast.filter(r => r.platform === activeTab);
      const currentWeekly = weeklyStats.filter(r => r.platform === activeTab);
      const currentBenchForecast = activeTab === 'ios' ? benchmarkForecastIOS : benchmarkForecastAndroid;

      const handleMouseEnter = (e, content) => {
        if (!content) return;
        const rect = e.target.getBoundingClientRect();
        setTooltip({
          visible: true,
          x: rect.left,
          y: rect.bottom + 5,
          content
        });
      };

      const handleMouseLeave = () => {
        setTooltip({ ...tooltip, visible: false });
      };

      const handleExport = () => {
        if (dailyForecast.length === 0) return;
        const wb = XLSX.utils.book_new();

        // 1. Daily
        const dailyRows = dailyForecast.map(r => {
          const row = {
            '日期': r.date,
            '平台': r.platform,
            '注册': r.reg,
            '首日LTV': Number(r.day1.toFixed(2))
          };
          Object.keys(r.days).forEach(d => {
            if (Number(d) > 1) {
                row[`第${d}天`] = Number(r.days[Number(d)].value.toFixed(1));
            }
          });
          return row;
        });
        const ws1 = XLSX.utils.json_to_sheet(dailyRows);
        XLSX.utils.book_append_sheet(wb, ws1, "日数据预估");

        // 2. Weekly
        const weeklyRows = weeklyStats.map(r => ({
          '日期范围': r.dateRange,
          '平台': r.platform,
          '注册': Math.round(r.totalReg),
          '第1天': Number(r.weightedD1.toFixed(2)),
          '第3天': Number(r.weightedD3.toFixed(1)),
          '第7天': Number(r.weightedD7.toFixed(1)),
          '第15天': Number(r.weightedD15.toFixed(1))
        }));
        const ws2 = XLSX.utils.json_to_sheet(weeklyRows);
        XLSX.utils.book_append_sheet(wb, ws2, "周加权统计");

        // 3. Bench
        const allBench = [...benchmarkForecastIOS, ...benchmarkForecastAndroid];
        const benchRows = allBench.map(r => ({
          '日期范围': r.dateRange,
          '平台': r.platform,
          '注册': Math.round(r.totalReg),
          '第1天': Number(r.weightedD1.toFixed(2)),
          '第3天': Number(r.weightedD3.toFixed(1)),
          '第7天': Number(r.weightedD7.toFixed(1)),
          '第15天': Number(r.weightedD15.toFixed(1)),
          '第30天': r.d30 ? Number(r.d30.toFixed(1)) : 0,
          '第45天': r.d45 ? Number(r.d45.toFixed(1)) : 0,
          '第60天': r.d60 ? Number(r.d60.toFixed(1)) : 0,
          '第90天': r.d90 ? Number(r.d90.toFixed(1)) : 0,
          '第120天': r.d120 ? Number(r.d120.toFixed(1)) : 0,
          '第180天': r.d180 ? Number(r.d180.toFixed(1)) : 0,
          '第360天': r.d360 ? Number(r.d360.toFixed(1)) : 0,
          '预估说明': r.forecastMethod
        }));
        const ws3 = XLSX.utils.json_to_sheet(benchRows);
        XLSX.utils.book_append_sheet(wb, ws3, "双周倍数涨幅预估");

        XLSX.writeFile(wb, `LTV_Forecast_${new Date().toISOString().split('T')[0]}.xlsx`);
      };

      // Tooltip positioning logic
      useEffect(() => {
        const el = document.getElementById('tooltip-portal');
        if (el) {
           el.innerHTML = tooltip.visible ? `<div class="tooltip-content">${tooltip.content}</div>` : '';
           el.style.opacity = tooltip.visible ? '1' : '0';
           
           if (tooltip.visible) {
               let left = tooltip.x;
               let top = tooltip.y;
               
               // Prevent overflow right
               if (left + 320 > window.innerWidth) {
                   left = window.innerWidth - 330;
               }

               // Prevent overflow bottom: Flip to top if too close to bottom edge
               // Approx tooltip height is variable, assuming max ~200px
               if (top + 200 > window.innerHeight) {
                    // Position above the target
                    // We don't know exact target height here easily without passing it, 
                    // but we know tooltip.y was rect.bottom + 5.
                    // So rect.top is roughly tooltip.y - 25 (assuming row height ~20-30).
                    // Let's just shift it up by ~200px or so relative to bottom, 
                    // or better, pass rect info in state. 
                    // Simplified: just shift up by arbitrary amount to clear screen bottom
                    top = window.innerHeight - el.offsetHeight - 10;
                    if (top < 0) top = 10;
               }
               
               el.style.left = `${left}px`;
               el.style.top = `${top}px`;
           }
        }
      }, [tooltip]);

      return (
        <div className="min-h-screen pb-12 font-sans">
          <header className="bg-white shadow-sm sticky top-0 z-40">
            <div className="max-w-7xl mx-auto px-4 py-4 flex items-center gap-2">
                <h1 className="text-xl font-bold text-gray-800 truncate">十四日LTV预估工具</h1>
                
                <div className="flex items-center space-x-1 ml-2">
                    <button onClick={() => setShowLog(true)} className="text-blue-500 hover:text-blue-600 transition-colors p-1" title="更新日志">
                      <HelpCircle size={20} />
                    </button>
                    <button onClick={() => setShowInstructions(true)} className="flex items-center text-xs text-blue-600 hover:text-blue-800 font-medium px-2 py-1 bg-blue-50 rounded hover:bg-blue-100 transition">
                      <Info size={14} className="mr-1"/> 使用说明
                    </button>
                </div>

                <div className="flex-1 text-right">
                  <span className="text-xs text-gray-500 block cursor-help" title="公众号：三只小黄鱼">作者：三只小黄鱼</span>
                </div>
            </div>
          </header>

          <UpdateLog isOpen={showLog} onClose={() => setShowLog(false)} />
          <InstructionsModal isOpen={showInstructions} onClose={() => setShowInstructions(false)} />

          <main className="max-w-7xl mx-auto px-4 py-6 space-y-8">
            <section className="bg-white p-4 sm:p-6 rounded-lg shadow space-y-4">
              <h2 className="text-lg font-semibold border-b pb-2 mb-4 flex items-center gap-2">
                <FileSpreadsheet size={20}/> 数据导入
              </h2>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                <FileUpload label="1. 源数据表 (Table 1)" onDataLoaded={setSourceData} />
                <FileUpload label="2. iOS 对标表 (Table 2)" onDataLoaded={setBenchIOS} />
                <FileUpload label="3. Android 对标表 (Table 3)" onDataLoaded={setBenchAndroid} />
              </div>
            </section>

            <div className="flex flex-col sm:flex-row justify-between items-center gap-4">
                <div className="flex space-x-2 bg-gray-200 p-1 rounded-lg self-start sm:self-auto">
                  {['ios', 'android'].map(p => (
                    <button key={p} onClick={() => setActiveTab(p)}
                      className={`px-4 py-2 rounded-md text-sm font-medium transition-all ${activeTab === p ? 'bg-white text-blue-600 shadow' : 'text-gray-600 hover:text-gray-800'}`}>
                      {p.toUpperCase()}
                    </button>
                  ))}
                </div>
                {sourceData.length > 0 && (
                  <button onClick={handleExport} className="w-full sm:w-auto flex justify-center items-center gap-2 bg-green-600 text-white px-4 py-2 rounded shadow hover:bg-green-700 transition">
                    <Download size={18} /> 导出结果
                  </button>
                )}
            </div>

            {/* Daily Table */}
            <section className="bg-white rounded-lg shadow overflow-hidden">
              <div className="p-4 border-b bg-gray-50">
                <h3 className="font-bold text-gray-700">日数据预估结果 ({activeTab.toUpperCase()})</h3>
              </div>
              <div className="overflow-x-auto scrollbar-default">
                <table className="min-w-full divide-y divide-gray-200 text-sm whitespace-nowrap">
                  <thead className="bg-gray-100">
                    <tr>
                      <th className="px-3 py-2 text-left sticky left-0 bg-gray-100 z-10 border-r">日期</th>
                      <th className="px-3 py-2 text-right">注册</th>
                      <th className="px-3 py-2 text-right">首日LTV</th>
                      {Array.from({length: 14}).map((_, i) => (
                        <th key={i} className="px-3 py-2 text-right">第{i+2}天</th>
                      ))}
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-gray-200">
                    {currentDaily.map((row, idx) => (
                      <tr key={idx} className="hover:bg-gray-50">
                        <td className="px-3 py-2 sticky left-0 bg-white z-10 border-r border-gray-100 font-medium text-gray-900">{formatDateMMDD(row.date)}</td>
                        <td className="px-3 py-2 text-right">{row.reg}</td>
                        <td className="px-3 py-2 text-right">{row.day1.toFixed(2)}</td>
                        {Array.from({length: 14}).map((_, i) => {
                          const cell = row.days[i + 2];
                          if (!cell) return <td key={i} className="px-3 py-2 text-right text-gray-300">-</td>;
                          return (
                            <td key={i} 
                                className={`px-3 py-2 text-right ${cell.isEstimated ? 'text-red-500 font-medium cursor-help' : ''}`}
                                onMouseEnter={(e) => cell.isEstimated && handleMouseEnter(e, cell.note)}
                                onMouseLeave={handleMouseLeave}
                            >
                              {cell.value.toFixed(1)}
                            </td>
                          );
                        })}
                      </tr>
                    ))}
                    {currentDaily.length === 0 && <tr><td colSpan={17} className="text-center py-8 text-gray-400">请上传源数据查看结果</td></tr>}
                  </tbody>
                </table>
              </div>
            </section>

            {/* Weekly Table */}
            <section className="bg-white rounded-lg shadow overflow-hidden">
              <div className="p-4 border-b bg-gray-50">
                <h3 className="font-bold text-gray-700">周的加权统计 ({activeTab.toUpperCase()})</h3>
              </div>
              <div className="overflow-x-auto scrollbar-default">
                 <table className="min-w-full divide-y divide-gray-200 text-sm text-center whitespace-nowrap">
                    <thead className="bg-gray-100">
                       <tr>
                         <th className="px-4 py-2 text-left">日期范围</th>
                         <th className="px-4 py-2">注册 (总)</th>
                         <th className="px-4 py-2">第1天 (加权)</th>
                         <th className="px-4 py-2">第3天 (加权)</th>
                         <th className="px-4 py-2">第7天 (加权)</th>
                         <th className="px-4 py-2">第15天 (加权)</th>
                       </tr>
                    </thead>
                    <tbody className="divide-y divide-gray-200">
                       {currentWeekly.map((stat, idx) => (
                         <tr key={idx} className="hover:bg-gray-50">
                           <td className="px-4 py-2 text-left font-medium">{stat.dateRange}</td>
                           <td className="px-4 py-2">{Math.round(stat.totalReg)}</td>
                           <td className="px-4 py-2">{stat.weightedD1.toFixed(2)}</td>
                           <td className="px-4 py-2">{stat.weightedD3.toFixed(1)}</td>
                           <td className="px-4 py-2">{stat.weightedD7.toFixed(1)}</td>
                           <td className="px-4 py-2">{stat.weightedD15.toFixed(1)}</td>
                         </tr>
                       ))}
                       {currentWeekly.length === 0 && <tr><td colSpan={6} className="text-center py-4 text-gray-400">暂无数据</td></tr>}
                    </tbody>
                 </table>
              </div>
            </section>

            {/* Benchmark Table */}
            <section className="bg-white rounded-lg shadow overflow-hidden">
              <div className="p-4 border-b bg-gray-50">
                <h3 className="font-bold text-gray-700">双周倍数涨幅预估 ({activeTab.toUpperCase()})</h3>
              </div>
               <div className="overflow-x-auto scrollbar-default">
                 <table className="min-w-full divide-y divide-gray-200 text-sm text-center whitespace-nowrap">
                    <thead className="bg-gray-100">
                       <tr>
                         <th className="px-4 py-2 text-left">日期范围</th>
                         <th className="px-4 py-2">注册</th>
                         <th className="px-4 py-2">第1天</th>
                         <th className="px-4 py-2">第3天</th>
                         <th className="px-4 py-2">第7天</th>
                         <th className="px-4 py-2">第15天</th>
                         <th className="px-4 py-2 bg-blue-50">第30天</th>
                         <th className="px-4 py-2 bg-blue-50">第45天</th>
                         <th className="px-4 py-2 bg-blue-50">第60天</th>
                         <th className="px-4 py-2 bg-blue-50">第90天</th>
                         <th className="px-4 py-2 bg-blue-50">第120天</th>
                         <th className="px-4 py-2 bg-blue-50">第180天</th>
                         <th className="px-4 py-2 bg-blue-50">第360天</th>
                       </tr>
                    </thead>
                    <tbody className="divide-y divide-gray-200">
                       {currentBenchForecast.map((stat, idx) => (
                         <tr key={idx} className={`hover:bg-gray-50 ${stat.forecastMethod === '对标源数据' ? 'bg-gray-50 text-gray-500' : ''}`}>
                           <td className="px-4 py-2 text-left font-medium">{stat.dateRange}</td>
                           <td className="px-4 py-2">{Math.round(stat.totalReg)}</td>
                           <td className="px-4 py-2">{stat.weightedD1.toFixed(2)}</td>
                           
                           {[3, 7, 15].map(d => {
                             const key = `weightedD${d}`;
                             const isForecast = stat.forecastedCells.includes(key);
                             return (
                               <td key={d} 
                                   className={`px-4 py-2 ${isForecast ? 'text-red-500 font-bold cursor-help' : ''}`}
                                   onMouseEnter={(e) => isForecast && handleMouseEnter(e, stat.forecastMethod)}
                                   onMouseLeave={handleMouseLeave}
                               >
                                  {stat[key].toFixed(1)}
                               </td>
                             );
                           })}
                           {[30, 45, 60, 90, 120, 180, 360].map(d => {
                             const key = `d${d}`;
                             const val = stat[key];
                             const isForecast = val > 0 && stat.forecastMethod !== '对标源数据';
                             return (
                               <td key={d} className={`px-4 py-2 bg-blue-50 ${isForecast ? 'text-red-600 font-medium cursor-help' : 'text-blue-700'}`}
                                   onMouseEnter={(e) => isForecast && handleMouseEnter(e, stat.forecastMethod)}
                                   onMouseLeave={handleMouseLeave}
                               >
                                 {val ? val.toFixed(1) : '-'}
                               </td>
                             );
                           })}
                         </tr>
                       ))}
                       {currentBenchForecast.length === 0 && <tr><td colSpan={13} className="text-center py-4 text-gray-400">暂无数据 (请上传源数据及对标表)</td></tr>}
                    </tbody>
                 </table>
              </div>
            </section>
          </main>
        </div>
      );
    }

    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(<App />);
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新游日ROI表（黄鱼版）</title>
    
    <script src="./xlsx.full.min.js"></script>
    
    <style>
        /* 基礎樣式 */
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f4f7f9;
            color: #333;
        }
        .container {
            max-width: 1300px;
            margin: 0 auto;
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        /* 頂部標題與作者信息優化 */
        .header-container {
            padding: 10px 20px;
            background-color: #eee; 
            border-radius: 6px;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .header-left {
            display: flex;
            align-items: center;
            font-size: 1.5em;
            font-weight: bold;
            color: #333;
        }
        /* 作者名縮小字號 */
        .author-info {
            font-size: 0.6em; 
            font-weight: normal;
            margin-left: 10px;
            color: #555;
        }
        /* 藍色圓形小問號圖標 */
        .info-icon {
            cursor: pointer;
            background-color: #007bff;
            color: white;
            font-size: 12px;
            width: 18px;
            height: 18px;
            line-height: 18px;
            text-align: center;
            border-radius: 50%; 
            margin-left: 8px;
            transition: opacity 0.3s;
        }
        .info-icon:hover {
            opacity: 0.8;
        }
        /* 更新日誌模態視窗 CSS */
        #update-log-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 999;
            display: none;
        }
        #update-log {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%); /* 居中 */
            width: 90%; 
            max-width: 500px;
            max-height: 80vh; 
            overflow-y: auto;
            background-color: white;
            border: 1px solid #ccc;
            padding: 20px;
            z-index: 1000;
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
            border-radius: 8px;
            display: none; 
            box-sizing: border-box; /* 確保 padding 不會導致超框 */
        }
        #update-log h3 {
            margin-top: 0;
            color: #007bff;
            text-align: center;
        }
        .close-btn {
            position: absolute;
            top: 10px;
            right: 15px;
            font-size: 1.5em;
            cursor: pointer;
            color: #555;
            font-weight: bold;
        }
        #update-log ul {
            padding-left: 20px;
            font-size: 0.9em;
        }

        /* 控制區 */
        .controls {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 20px;
            margin-bottom: 30px;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 6px;
            background-color: #f8f8f8;
        }
        .control-group {
            display: flex;
            flex-direction: column;
            gap: 5px;
        }
        .btn-export {
            padding: 10px 20px;
            background-color: #28a745; 
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .btn-export:hover {
            background-color: #1e7e34;
        }

        /* 項目展示區壓縮間隔 */
        #tables-container {
            display: flex;
            flex-wrap: wrap;
            gap: 10px; 
            justify-content: flex-start;
        }
        .project-table-wrapper {
            flex: 1 1 calc(50% - 5px); 
            min-width: 580px; 
            overflow-x: auto;
            border: 1px solid #ddd;
            border-radius: 6px;
            padding: 5px; 
            background-color: #f9f9f9;
        }

        /* 表格樣式 */
        .data-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 13px;
            min-width: 550px;
        }
        .data-table th, .data-table td {
            border: 1px solid #e0e0e0;
            padding: 6px 4px;
            text-align: center;
            white-space: nowrap;
        }
        .data-table th {
            background-color: #eef;
            font-weight: bold;
            position: sticky;
            top: 0;
            z-index: 10;
        }
        .data-table tr:nth-child(even) {
            background-color: #f7f7f7;
        }

        /* 項目名稱輸入框樣式優化 */
        .header-input {
            width: 80px;
            border: none; 
            box-shadow: none;
            font-weight: bold;
            text-align: left;
            background: transparent;
            font-size: inherit;
        }

        /* 週統計行樣式 */
        .weekly-row td {
            font-weight: bold;
            background-color: #ffd !important; 
            border-top: 2px solid #ccc;
        }

        /* ALL 基礎值顯示/編輯優化 */
        .base-cell {
            background-color: #ccf !important;
            font-style: italic;
        }
        .editable-span {
            cursor: pointer;
            border-bottom: 1px dashed #555;
            padding: 0 2px;
            display: inline-block;
        }
        .base-value-input {
            width: 40px;
            height: 18px;
            padding: 0;
            margin: 0 2px;
            border: 1px solid #aaa;
            background-color: #fff;
            text-align: center;
        }
        
        /* 高亮樣式 */
        .highlight-light-red {
            background-color: #fcc; 
        }
        .highlight-deep-red {
            background-color: #f88; 
            font-weight: bold;
        }

        /* 特殊格式化 */
        .holiday-star {
            color: orange;
            margin-left: 2px;
            font-size: 0.8em;
            cursor: help; 
        }
        
        /* 手機豎屏适配优化 (Mobile Portrait Optimization) */
        @media (max-width: 600px) {
            body {
                padding: 10px;
            }
            .container {
                padding: 10px;
            }
            .controls {
                flex-direction: column;
                align-items: stretch;
            }
            /* 讓表格容器佔滿寬度並保證可滾動，解決超框問題 */
            .project-table-wrapper {
                flex: 1 1 100%; 
                min-width: auto;
                margin: 0;
                padding: 5px;
            }
            .header-left {
                 font-size: 1.2em; 
            }
        }
    </style>
</head>
<body>
    <div id="update-log-overlay" onclick="toggleLog()"></div>
    
    <div id="update-log">
        <span class="close-btn" onclick="toggleLog()">×</span>
        <h3>更新日誌</h3>
        <p><strong>最新版本：v11.0.0</strong></p>
        <ul style="list-style-type: none;">
            <li><strong>v11.0.0 (2025-11-29)</strong>: 
                <ul>
                    <li>**【假期數據更新】**：更新 `HOLIDAYS` 常數，包含 2025 年至 2028 年中國大陸、香港、台灣、日本、韓國的完整法定假期資訊。</li>
                </ul>
            </li>
            <li><strong>v10.0.0 (2025-11-29)</strong>: 
                <ul>
                    <li>**【核心數據修復】**：修復周加權統計中 ALL 的「單價」和「淨ROI」數據不正確的問題。確保每日總成本/總收入被正確傳遞和累積。</li>
                </ul>
            </li>
            <li><strong>v9.0.0 (2025-11-29)</strong>: 
                <ul>
                    <li>**【移動端適配】**：修復「更新日誌」在豎版手機上顯示超框問題。優化數據表單在豎版手機上的顯示，確保可正確水平滾動，避免頁面超框。</li>
                </ul>
            </li>
            <li><strong>v8.0.0 (2025-11-29)</strong>: 
                <ul>
                    <li>**【關鍵修復】**：修正 `COL_MAP.CPA` 欄位名稱錯誤，從繁體 `注册單價` 改為簡體 `注册单价`，解決檔案無法讀取問題。</li>
                    <li>**數據修復**：修正週統計 iOS/Android 單價/ROI 數據，現在能正確計算週加權平均。</li>
                    <li>**UX/美觀優化**：藍色問號圖標圓形化，作者字號縮小，項目名稱輸入框移除邊框。模態優化，樣式強化。</li>
                </ul>
            </li>
            <li><strong>v7.0.0 (2025-11-29)</strong>: 
                <ul>
                    <li>**算法修正**：淨ROI算法修正，現在基於加權總成本和總收入計算。</li>
                    <li>**條件格式**：淨ROI標色規則修改為低於目標值才標色。</li>
                    <li>**統計功能**：新增按周加權統計，周數據以黃色底區分。</li>
                    <li>**導出修正**：一鍵導出按鈕修正，可匯出包含日數據和週數據的單一工作表。</li>
                </ul>
            </li>
            <li><strong>v6.0.0 - v2.0.0 (2025-11-29)</strong>: 
                <ul>
                    <li>**V5.1**：修正 CDN 載入問題，改為使用本地離線包。</li>
                    <li>**V5.0**：修正 `XLSX is not defined` 錯誤。</li>
                    <li>**V4.0**：修復 CSV 檔案編碼錯誤，提高檔案讀取穩定性。</li>
                    <li>**V3.0**：修復日期解析失敗問題。</li>
                    <li>**V2.0**：修復上傳無輸出的問題，並將基礎值設定移入表格標題。</li>
                </ul>
            </li>
            <li><strong>v1.0.0 (2025-11-29)</strong>: 初始版本發布。</li>
        </ul>
    </div>
    
    <div class="container">
        
        <div class="header-container">
            <div class="header-left">
                新游日ROI表 
                <span class="info-icon" onclick="toggleLog()">?</span>
                <span class="author-info">作者：三只小黄鱼</span>
            </div>
            <div id="load-error"></div>
        </div>
        
        <div class="controls">
            <div class="control-group">
                <label for="file-upload">上传源数据表 (可多选)</label>
                <input type="file" id="file-upload" accept=".xls, .xlsx, .csv" multiple>
            </div>
            
            <button class="btn-export" id="export-button">一键导出页面数据</button>
        </div>

        <div id="tables-container">
            </div>
    </div>

    <script>
        // ----------------- 設定與常量 -----------------
        // V11.0: 包含 2025-2028 年的完整假期列表
        const HOLIDAYS = {
            '2025-01-01': '新年 (大陸/香港/台灣/韓國)',
            '2025-01-28': '春節前夕/除夕 (大陸/台灣/韓國)',
            '2025-01-29': '春節/農曆新年 (大陸/香港/台灣/韓國)',
            '2025-01-30': '春節/農曆新年第二天 (大陸/香港/台灣/韓國)',
            '2025-01-31': '春節/農曆新年第三天 (大陸/香港/台灣)',
            '2025-02-01': '春節 (大陸/台灣)',
            '2025-02-02': '春節 (大陸)',
            '2025-02-03': '春節 (大陸)',
            '2025-02-04': '春節 (大陸)',
            '2025-02-11': '建國紀念日 (日本)',
            '2025-02-23': '天皇誕生日 (日本)',
            '2025-02-28': '228和平紀念日 (台灣)',
            '2025-03-01': '三一節 (韓國)',
            '2025-03-20': '春分日 (日本)',
            '2025-04-04': '清明節/兒童節 (大陸/香港/台灣)',
            '2025-04-05': '清明節 (大陸)',
            '2025-04-18': '耶穌受難節 (香港)',
            '2025-04-21': '復活節星期一 (香港)',
            '2025-04-29': '昭和之日 (日本)',
            '2025-05-01': '勞動節 (大陸/香港/台灣/韓國)',
            '2025-05-02': '勞動節 (大陸)',
            '2025-05-03': '勞動節 (大陸)',
            '2025-05-04': '勞動節 (大陸)',
            '2025-05-05': '勞動節 (大陸)/兒童節 (日本/韓國)',
            '2025-05-06': '勞動節 (大陸)/國民祝日 (日本)',
            '2025-05-12': '佛誕 (香港)',
            '2025-05-27': '顯忠日 (韓國)',
            '2025-06-02': '端午節 (大陸/香港)',
            '2025-06-03': '端午節 (大陸/台灣)',
            '2025-06-06': '端午節 (韓國)',
            '2025-06-14': '生日',
            '2025-07-01': '香港特別行政區成立紀念日 (香港)/建軍節補假 (台灣)',
            '2025-07-21': '海洋日 (日本)',
            '2025-08-01': '建軍節 (大陸)',
            '2025-08-11': '山之日 (日本)',
            '2025-08-15': '光復節 (韓國)',
            '2025-09-09': '中秋節 (大陸)',
            '2025-09-15': '中秋節補假 (台灣)',
            '2025-09-16': '中秋節補假 (大陸)',
            '2025-09-23': '秋分日 (日本)',
            '2025-09-28': '孔子誕辰 (台灣)',
            '2025-10-01': '中國國慶日 (大陸/香港)',
            '2025-10-02': '國慶節 (大陸)',
            '2025-10-03': '國慶節 (大陸)/開天節 (韓國)',
            '2025-10-04': '國慶節 (大陸)',
            '2025-10-05': '國慶節 (大陸)',
            '2025-10-06': '國慶節 (大陸)',
            '2025-10-07': '國慶節 (大陸)',
            '2025-10-09': '韓文日 (韓國)',
            '2025-10-10': '雙十節 (台灣)',
            '2025-10-13': '體育日 (日本)',
            '2025-10-25': '台灣光復節 (台灣)',
            '2025-11-03': '文化日 (日本)',
            '2025-11-23': '勤勞感謝之日 (日本)',
            '2025-12-25': '聖誕節 (香港/台灣/韓國)',
            '2026-01-01': '新年 (大陸/香港/台灣/韓國)',
            '2026-02-11': '建國紀念日 (日本)',
            '2026-02-16': '農曆除夕 (韓國)',
            '2026-02-17': '春節/農曆新年 (大陸/香港/台灣/韓國)',
            '2026-02-18': '春節/農曆新年第二天 (大陸/香港/台灣/韓國)',
            '2026-02-19': '春節/農曆新年第三天 (大陸/香港/台灣)',
            '2026-02-23': '天皇誕生日 (日本)',
            '2026-03-01': '三一節 (韓國)',
            '2026-03-20': '春分日 (日本)',
            '2026-04-03': '耶穌受難節 (香港)',
            '2026-04-04': '耶穌受難節翌日 (香港)',
            '2026-04-05': '清明節 (大陸/香港)',
            '2026-04-06': '清明節翌日/復活節星期一 (香港)',
            '2026-04-29': '昭和之日 (日本)',
            '2026-05-01': '勞動節 (大陸/香港/台灣/韓國)',
            '2026-05-03': '憲法紀念日 (日本)',
            '2026-05-04': '綠化日 (日本)',
            '2026-05-05': '兒童節 (日本/韓國)',
            '2026-05-13': '佛誕 (香港)',
            '2026-05-25': '顯忠日 (韓國)',
            '2026-06-09': '端午節 (韓國)',
            '2026-07-01': '香港特別行政區成立紀念日 (香港)',
            '2026-07-03': '生日',
            '2026-07-20': '海洋日 (日本)',
            '2026-08-10': '山之日 (日本)',
            '2026-08-15': '光復節 (韓國)',
            '2026-09-21': '敬老日 (日本)',
            '2026-09-23': '秋分日 (日本)',
            '2026-10-01': '中國國慶日 (大陸/香港)',
            '2026-10-03': '開天節 (韓國)',
            '2026-10-09': '韓文日 (韓國)',
            '2026-10-12': '體育日 (日本)',
            '2026-11-03': '文化日 (日本)',
            '2026-11-23': '勤勞感謝之日 (日本)',
            '2026-12-25': '聖誕節 (香港/韓國)',
            '2027-01-01': '新年 (大陸/香港/台灣/韓國)',
            '2027-02-06': '春節前夕/除夕 (大陸/台灣/韓國)',
            '2027-02-07': '春節/農曆新年 (大陸/香港/台灣/韓國)',
            '2027-02-08': '春節/農曆新年第二天 (大陸/香港/台灣/韓國)',
            '2027-02-11': '建國紀念日 (日本)',
            '2027-02-23': '天皇誕生日 (日本)',
            '2027-03-01': '三一節 (韓國)',
            '2027-03-21': '春分日 (日本)',
            '2027-04-05': '清明節 (大陸/香港)',
            '2027-04-26': '耶穌受難節 (香港)',
            '2027-04-29': '復活節星期一 (香港)',
            '2027-04-29': '昭和之日 (日本)',
            '2027-05-01': '勞動節 (大陸/香港/台灣/韓國)',
            '2027-05-03': '憲法紀念日 (日本)',
            '2027-05-04': '綠化日 (日本)',
            '2027-05-05': '兒童節 (日本/韓國)',
            '2027-05-24': '佛誕 (香港)',
            '2027-06-21': '端午節 (韓國)',
            '2027-06-23': '生日',
            '2027-07-01': '香港特別行政區成立紀念日 (香港)',
            '2027-07-19': '海洋日 (日本)',
            '2027-08-09': '山之日 (日本)',
            '2027-08-15': '光復節 (韓國)',
            '2027-09-20': '敬老日 (日本)',
            '2027-09-23': '秋分日 (日本)',
            '2027-10-01': '中國國慶日 (大陸/香港)',
            '2027-10-03': '開天節 (韓國)',
            '2027-10-10': '雙十節 (台灣)',
            '2027-10-11': '體育日 (日本)',
            '2027-10-25': '台灣光復節 (台灣)',
            '2027-11-03': '文化日 (日本)',
            '2027-11-23': '勤勞感謝之日 (日本)',
            '2027-12-25': '聖誕節 (香港/台灣/韓國)',
            '2028-01-01': '新年 (大陸/香港/台灣/韓國)',
            '2028-01-26': '春節前夕/除夕 (大陸/台灣/韓國)',
            '2028-01-27': '春節/農曆新年 (大陸/香港/台灣/韓國)',
            '2028-01-28': '春節/農曆新年第二天 (大陸/香港/台灣/韓國)',
            '2028-02-11': '建國紀念日 (日本)',
            '2028-02-23': '天皇誕生日 (日本)',
            '2028-03-01': '三一節 (韓國)',
            '2028-03-20': '春分日 (日本)',
            '2028-04-04': '清明節 (大陸/香港)',
            '2028-04-14': '耶穌受難節 (香港)',
            '2028-04-17': '復活節星期一 (香港)',
            '2028-04-29': '昭和之日 (日本)',
            '2028-05-01': '勞動節 (大陸/香港/台灣/韓國)',
            '2028-05-03': '憲法紀念日 (日本)',
            '2028-05-04': '綠化日 (日本)',
            '2028-05-05': '兒童節 (日本/韓國)',
            '2028-05-11': '佛誕 (香港)',
            '2028-06-06': '端午節 (韓國)',
            '2028-06-11': '生日',
            '2028-07-01': '香港特別行政區成立紀念日 (香港)',
            '2028-07-17': '海洋日 (日本)',
            '2028-08-07': '山之日 (日本)',
            '2028-08-15': '光復節 (韓國)',
            '2028-09-18': '敬老日 (日本)',
            '2028-09-23': '秋分日 (日本)',
            '2028-10-01': '中國國慶日/中秋節合併 (大陸/香港)',
            '2028-10-02': '國慶節/中秋節 (大陸)',
            '2028-10-03': '國慶節/開天節 (大陸/韓國)',
            '2028-10-04': '國慶節 (大陸)',
            '2028-10-05': '國慶節 (大陸)',
            '2028-10-06': '國慶節 (大陸)',
            '2028-10-07': '國慶節 (大陸)',
            '2028-10-09': '韓文日 (韓國)',
            '2028-10-10': '雙十節 (台灣)',
            '2028-10-09': '體育日 (日本)',
            '2028-11-03': '文化日 (日本)',
            '2028-11-23': '勤勞感謝之日 (日本)',
            '2028-12-25': '聖誕節 (香港/台灣/韓國)'
        };
        
        const COL_MAP = {
            DATE: '日期',
            PLATFORM: '平台',
            REGISTRATION: '注册', 
            CPA: '注册单价', 
            ROI_D1: '第1天', 
        };

        let projectData = []; 

        // ----------------- 數據格式化工具 -----------------
        
        function getWeekday(date) {
            const d = new Date(date);
            const localDate = new Date(d.getTime() + d.getTimezoneOffset() * 60000); 
            const dayIndex = localDate.getDay();
            const weekdays = ['日', '一', '二', '三', '四', '五', '六'];
            return weekdays[dayIndex];
        }

        function formatValue(type, value) {
            if (value === null || value === undefined || isNaN(value)) return '';
            
            switch (type) {
                case 'int': 
                    return Math.round(value).toLocaleString();
                case 'cpa': 
                    return '$' + value.toFixed(1);
                case 'roi': 
                    return (value * 100).toFixed(1) + '%';
                default:
                    return value;
            }
        }
        
        function formatDateWithHoliday(dateStr) {
            let displayDate = dateStr;
            const holidayName = HOLIDAYS[dateStr];
            if (holidayName) {
                displayDate += `<span class="holiday-star" title="特別法定假期：${holidayName}">*</span>`;
            }
            return displayDate;
        }

        function getHighlightClass(value, baseValue, type) {
            if (value === null || baseValue === null || isNaN(value) || isNaN(baseValue)) return '';
            
            if (type === 'ROI') {
                if (value < baseValue) {
                    if (value < baseValue * 0.5) {
                        return 'highlight-deep-red'; 
                    }
                    return 'highlight-light-red'; 
                }
            } else if (type === 'CPA') {
                if (value > baseValue) {
                    if (value > baseValue * 1.5) {
                        return 'highlight-deep-red'; 
                    }
                    return 'highlight-light-red'; 
                }
            }
            return '';
        }

        // ----------------- 數據處理核心邏輯 -----------------
        
        function parseDate(date) {
            if (!date) return null;
            
            if (date instanceof Date) {
                const year = date.getUTCFullYear();
                const month = String(date.getUTCMonth() + 1).padStart(2, '0');
                const day = String(date.getUTCDate()).padStart(2, '0');
                return `${year}-${month}-${day}`;
            } 
            if (typeof date === 'number' && date > 1) {
                return XLSX.SSF.format('yyyy-mm-dd', date);
            } 
            if (typeof date === 'string') {
                let dateStr = date.trim().replace(/\//g, '-');
                if (dateStr.match(/^\d{4}-\d{2}-\d{2}$/)) {
                    return dateStr;
                }
            }
            return null;
        }

        function processData(data, fileName) {
            const dailySummary = {};

            data.forEach(row => {
                const date = parseDate(row[COL_MAP.DATE]);
                if (!date) return; 

                const platform = String(row[COL_MAP.PLATFORM] || '').toLowerCase();
                const registration = parseFloat(row[COL_MAP.REGISTRATION]) || 0;
                const cpa = parseFloat(row[COL_MAP.CPA]) || 0;
                
                let roi_d1 = parseFloat(row[COL_MAP.ROI_D1]); 
                if (typeof row[COL_MAP.ROI_D1] === 'string' && row[COL_MAP.ROI_D1].endsWith('%')) {
                     roi_d1 = parseFloat(row[COL_MAP.ROI_D1].replace('%', '')) / 100;
                }
                roi_d1 = roi_d1 || 0;
                
                const cost = registration * cpa;
                const revenue = cost * roi_d1; 

                if (!dailySummary[date]) {
                    dailySummary[date] = {
                        totalReg: 0,
                        totalCPAWeighted: 0, 
                        totalCost: 0, 
                        totalRevenue: 0, 
                        platforms: {
                            ios: { reg: 0, cost: 0, revenue: 0, cpa: null, roi_d1: null },
                            android: { reg: 0, cost: 0, revenue: 0, cpa: null, roi_d1: null },
                        }
                    };
                }

                // ALL 數據累積 (所有平台)
                dailySummary[date].totalReg += registration; 
                dailySummary[date].totalCPAWeighted += registration * cpa; 
                dailySummary[date].totalCost += cost; 
                dailySummary[date].totalRevenue += revenue; 

                // 平台數據累積 (只記錄 ios/android)
                const platformKey = platform;
                if (['ios', 'android'].includes(platformKey)) {
                    // 累積總數
                    dailySummary[date].platforms[platformKey].reg += registration;
                    dailySummary[date].platforms[platformKey].cost += cost;
                    dailySummary[date].platforms[platformKey].revenue += revenue;
                    
                    // 日數據的 CPA/ROI (取當天最後一筆值)
                    dailySummary[date].platforms[platformKey].cpa = cpa; 
                    dailySummary[date].platforms[platformKey].roi_d1 = roi_d1; 
                }
            });

            // 進行二次計算（日數據）
            const dailyData = Object.keys(dailySummary).sort().map(date => {
                const day = dailySummary[date];
                const totalReg = day.totalReg;
                const totalCost = day.totalCost;
                const totalRevenue = day.totalRevenue; 

                
                const allCPA = totalReg > 0 ? day.totalCPAWeighted / totalReg : null;
                const allROI = totalCost > 0 ? totalRevenue / totalCost : null;
                
                const row = {
                    date: date,
                    weekday: getWeekday(date),
                    regTotal: totalReg,
                    totalCost: totalCost,      
                    totalRevenue: totalRevenue, 
                    allCPA: allCPA,
                    allROI: allROI,
                    iosCPA: day.platforms['ios'] ? day.platforms['ios'].cpa : null,
                    iosROI: day.platforms['ios'] ? day.platforms['ios'].roi_d1 : null,
                    androidCPA: day.platforms['android'] ? day.platforms['android'].cpa : null,
                    androidROI: day.platforms['android'] ? day.platforms['android'].roi_d1 : null,
                    isWeekly: false,
                    platformTotals: day.platforms 
                };
                return row;
            });
            
            // 計算週統計
            const weeklyData = calculateWeeklySummary(dailyData);

            return {
                name: fileName.replace(/\.[^/.]+$/, ""),
                data: dailyData,
                weeklyData: weeklyData,
                baseMultiplier: 16, 
                baseCPA: 18
            };
        }

        // 周加權數據修正：確保 ALL 的單價和淨ROI被正確計算 
        function calculateWeeklySummary(dailyData) {
            const weeklySummary = {};
            
            dailyData.forEach(day => {
                const dateObj = new Date(day.date);
                const dayOfWeek = (dateObj.getDay() + 6) % 7; 
                const weekStartDate = new Date(dateObj);
                weekStartDate.setDate(dateObj.getDate() - dayOfWeek); 

                const wsYear = weekStartDate.getFullYear();
                const wsMonth = String(weekStartDate.getMonth() + 1).padStart(2, '0');
                const wsDay = String(weekStartDate.getDate()).padStart(2, '0');
                const weekKey = `${wsYear}-${wsMonth}-${wsDay}`;

                if (!weeklySummary[weekKey]) {
                    weeklySummary[weekKey] = {
                        totalReg: 0,
                        totalCost: 0,
                        totalRevenue: 0,
                        platforms: {
                            ios: { reg: 0, cost: 0, revenue: 0 },
                            android: { reg: 0, cost: 0, revenue: 0 }
                        },
                        weekEndDate: new Date(weekStartDate)
                    };
                    weeklySummary[weekKey].weekEndDate.setDate(weekStartDate.getDate() + 6); 
                }

                // 累積 ALL 數據
                weeklySummary[weekKey].totalReg += day.regTotal || 0;
                weeklySummary[weekKey].totalCost += day.totalCost || 0; 
                weeklySummary[weekKey].totalRevenue += day.totalRevenue || 0; 

                // 累積平台數據
                ['ios', 'android'].forEach(p => {
                    const platformTotals = day.platformTotals[p];
                    if (platformTotals) {
                        weeklySummary[weekKey].platforms[p].reg += platformTotals.reg;
                        weeklySummary[weekKey].platforms[p].cost += platformTotals.cost;
                        weeklySummary[weekKey].platforms[p].revenue += platformTotals.revenue;
                    }
                });
            });

            // 進行週平均計算並格式化
            return Object.keys(weeklySummary).map(weekKey => {
                const week = weeklySummary[weekKey];
                const weekStart = new Date(weekKey);
                
                const startMonth = weekStart.getMonth() + 1;
                const startDay = weekStart.getDate();
                const endMonth = week.weekEndDate.getMonth() + 1;
                const endDay = week.weekEndDate.getDate();
                const dateRange = `${startMonth}/${startDay}-${endMonth}/${endDay}`;

                // ALL
                const weeklyAllCPA = week.totalReg > 0 ? (week.totalCost / week.totalReg) : null;
                const weeklyAllROI = week.totalCost > 0 ? (week.totalRevenue / week.totalCost) : null;

                // iOS
                const weeklyIosCPA = week.platforms.ios.reg > 0 ? (week.platforms.ios.cost / week.platforms.ios.reg) : null;
                const weeklyIosROI = week.platforms.ios.cost > 0 ? (week.platforms.ios.revenue / week.platforms.ios.cost) : null;

                // Android
                const weeklyAndroidCPA = week.platforms.android.reg > 0 ? (week.platforms.android.cost / week.platforms.android.reg) : null;
                const weeklyAndroidROI = week.platforms.android.cost > 0 ? (week.platforms.android.revenue / week.platforms.android.cost) : null;


                return {
                    date: dateRange,
                    weekday: '週統計',
                    regTotal: week.totalReg,
                    allCPA: weeklyAllCPA, 
                    allROI: weeklyAllROI, 
                    iosCPA: weeklyIosCPA, 
                    iosROI: weeklyIosROI,
                    androidCPA: weeklyAndroidCPA,
                    androidROI: weeklyAndroidROI,
                    isWeekly: true 
                };
            });
        }

        // ----------------- UI 渲染與互動 -----------------鑫

        function toggleLog() {
            const logElement = document.getElementById('update-log');
            const overlay = document.getElementById('update-log-overlay');
            if (logElement.style.display === 'block') {
                logElement.style.display = 'none';
                overlay.style.display = 'none';
            } else {
                logElement.style.display = 'block';
                overlay.style.display = 'block';
            }
        }
        window.toggleLog = toggleLog; 

        function toggleEdit(index, type) {
            const spanId = `base-${type}-span-${index}`;
            const inputId = `base-${type}-input-${index}`;
            const span = document.getElementById(spanId);
            const input = document.getElementById(inputId);

            if (span && input) {
                span.style.display = 'none';
                input.style.display = 'inline-block';
                input.focus();
                input.value = projectData[index][`base${type.charAt(0).toUpperCase() + type.slice(1)}`].toFixed(1);
            }
        }

        window.finishEdit = function(index, type, inputElement) {
            const numValue = parseFloat(inputElement.value);
            const spanId = `base-${type}-span-${index}`;
            const span = document.getElementById(spanId);

            if (span && !isNaN(numValue) && numValue >= 0) {
                if (type === 'multiplier') {
                    projectData[index].baseMultiplier = numValue;
                } else if (type === 'cpa') {
                    projectData[index].baseCPA = numValue;
                }
                
                span.textContent = numValue.toFixed(1); 
                inputElement.style.display = 'none';
                span.style.display = 'inline-block';
                
                const newBaseROI = 1 / projectData[index].baseMultiplier;
                const roiSpan = document.getElementById(`base-roi-${index}`);
                if(roiSpan) {
                    roiSpan.textContent = formatValue('roi', newBaseROI);
                }

                renderTables(); 
            } else {
                inputElement.value = projectData[index][`base${type.charAt(0).toUpperCase() + type.slice(1)}`].toFixed(1);
                inputElement.style.display = 'none';
                span.style.display = 'inline-block';
            }
        }
        

        function renderTables() {
            const container = document.getElementById('tables-container');
            container.innerHTML = '';
            
            if (projectData.length === 0) return;

            let allDates = new Set();
            projectData.forEach(p => p.data.forEach(row => allDates.add(row.date)));
            const sortedDates = Array.from(allDates).sort();

            projectData.forEach((project, index) => {
                const baseMultiplier = project.baseMultiplier;
                const baseCPA = project.baseCPA;
                const baseROI = 1 / baseMultiplier; 

                const wrapper = document.createElement('div');
                wrapper.className = 'project-table-wrapper';
                
                const table = document.createElement('table');
                table.className = 'data-table';
                table.id = `table-${index}`;

                const thead = table.createTHead();
                const row1 = thead.insertRow();
                const row2 = thead.insertRow();

                // Row 1: 大標題和 ALL 基礎值
                row1.insertCell().innerHTML = `<input type="text" class="header-input" value="${project.name}" onchange="projectData[${index}].name = this.value; renderTables()">`; 
                row1.cells[0].colSpan = 2;
                
                const baseCell = row1.insertCell();
                baseCell.colSpan = 3;
                baseCell.className = 'base-cell';
                
                baseCell.innerHTML = `ALL (
                                      <span id="base-multiplier-span-${index}" class="editable-span" onclick="toggleEdit(${index}, 'multiplier')">${baseMultiplier.toFixed(1)}</span>
                                      <input type="number" id="base-multiplier-input-${index}" class="base-value-input" value="${baseMultiplier.toFixed(1)}" min="1" step="0.1" style="display:none;" 
                                          onblur="finishEdit(${index}, 'multiplier', this)" onkeydown="if(event.key==='Enter') finishEdit(${index}, 'multiplier', this)">倍, 
                                      $<span id="base-cpa-span-${index}" class="editable-span" onclick="toggleEdit(${index}, 'cpa')">${baseCPA.toFixed(1)}</span>
                                      <input type="number" id="base-cpa-input-${index}" class="base-value-input" value="${baseCPA.toFixed(1)}" min="0" step="0.1" style="display:none;" 
                                          onblur="finishEdit(${index}, 'cpa', this)" onkeydown="if(event.key==='Enter') finishEdit(${index}, 'cpa', this)">, 
                                      <span id="base-roi-${index}">${formatValue('roi', baseROI)}</span>)`; 

                row1.insertCell().colSpan = 2;
                row1.cells[2].textContent = 'iOS';

                row1.insertCell().colSpan = 2;
                row1.cells[3].textContent = 'Android';
                
                // Row 2: 細項標題
                ['日期', '星期'].forEach(text => row2.insertCell().textContent = text);
                ['量級', '單價', '淨ROI'].forEach(text => row2.insertCell().textContent = text);
                ['單價', '淨ROI'].forEach(text => row2.insertCell().textContent = text);
                ['單價', '淨ROI'].forEach(text => row2.insertCell().textContent = text);


                // 建立表身 (Body) - 日數據
                const tbody = table.createTBody();
                const dataMap = project.data.reduce((map, row) => { map[row.date] = row; return map; }, {});

                sortedDates.forEach(date => {
                    const row = tbody.insertRow();
                    const data = dataMap[date];

                    row.insertCell().innerHTML = formatDateWithHoliday(date);
                    row.insertCell().textContent = getWeekday(date);

                    if (data) {
                        row.insertCell().textContent = formatValue('int', data.regTotal);
                        
                        let cellD = row.insertCell();
                        cellD.textContent = formatValue('cpa', data.allCPA);
                        cellD.className = getHighlightClass(data.allCPA, baseCPA, 'CPA'); 
                        
                        let cellE = row.insertCell();
                        cellE.textContent = formatValue('roi', data.allROI);
                        cellE.className = getHighlightClass(data.allROI, baseROI, 'ROI'); 

                        row.insertCell().textContent = formatValue('cpa', data.iosCPA);
                        row.insertCell().textContent = formatValue('roi', data.iosROI);

                        row.insertCell().textContent = formatValue('cpa', data.androidCPA);
                        row.insertCell().textContent = formatValue('roi', data.androidROI);
                    } else {
                        for (let i = 0; i < 7; i++) { 
                            row.insertCell().textContent = '';
                        }
                    }
                });

                // 渲染週統計數據
                project.weeklyData.forEach(weekData => {
                    const row = tbody.insertRow();
                    row.className = 'weekly-row'; 
                    
                    row.insertCell().textContent = weekData.date; 
                    row.cells[0].colSpan = 2; 

                    row.insertCell().textContent = formatValue('int', weekData.regTotal);
                    
                    let cellD = row.insertCell();
                    cellD.textContent = formatValue('cpa', weekData.allCPA); 
                    cellD.className = getHighlightClass(weekData.allCPA, baseCPA, 'CPA'); 
                    
                    let cellE = row.insertCell();
                    cellE.textContent = formatValue('roi', weekData.allROI); 
                    cellE.className = getHighlightClass(weekData.allROI, baseROI, 'ROI'); 

                    // 輸出平台周數據
                    row.insertCell().textContent = formatValue('cpa', weekData.iosCPA);
                    row.insertCell().textContent = formatValue('roi', weekData.iosROI);
                    row.insertCell().textContent = formatValue('cpa', weekData.androidCPA);
                    row.insertCell().textContent = formatValue('roi', weekData.androidROI);
                });


                wrapper.appendChild(table);
                container.appendChild(wrapper);
            });
        }
        
        // 匯出全部數據 (單一表單)
        function exportAllData() {
            if (projectData.length === 0) {
                alert('請先上傳數據。');
                return;
            }
            
            const outputWorkbook = XLSX.utils.book_new();
            
            const headerRow1 = ['日期', '星期'];
            const headerRow2 = ['', ''];
            
            projectData.forEach(project => {
                const baseMultiplier = project.baseMultiplier;
                const baseCPA = project.baseCPA;
                const baseROI = 1 / baseMultiplier; 
                
                headerRow1.push(`${project.name} (${baseMultiplier.toFixed(1)}倍, $${baseCPA.toFixed(1)}, ${formatValue('roi', baseROI)})`, '', '', 'iOS', '', 'Android', '');
                headerRow2.push('量級', '單價', '淨ROI', '單價', '淨ROI', '單價', '淨ROI');
            });
            
            let allDates = new Set();
            projectData.forEach(p => p.data.forEach(row => allDates.add(row.date)));
            const sortedDates = Array.from(allDates).sort();

            let exportData = [headerRow1, headerRow2];
            
            // 匯出日數據
            sortedDates.forEach(date => {
                let row = [date, getWeekday(date)];
                
                projectData.forEach(project => {
                    const data = project.data.find(d => d.date === date);
                    if (data) {
                        row.push(
                            formatValue('int', data.regTotal),
                            formatValue('cpa', data.allCPA),
                            formatValue('roi', data.allROI),
                            formatValue('cpa', data.iosCPA),
                            formatValue('roi', data.iosROI),
                            formatValue('cpa', data.androidCPA),
                            formatValue('roi', data.androidROI)
                        );
                    } else {
                        row.push('', '', '', '', '', '', ''); 
                    }
                });
                exportData.push(row);
            });

            // 匯出週數據
            let maxWeeks = 0;
            projectData.forEach(p => {
                if (p.weeklyData.length > maxWeeks) maxWeeks = p.weeklyData.length;
            });

            for (let i = 0; i < maxWeeks; i++) {
                let weekRow = [];
                let hasWeekData = false;

                projectData.forEach(project => {
                    if (project.weeklyData[i]) hasWeekData = true;
                });

                if (!hasWeekData) continue; 

                const firstProjectWeekData = projectData.find(p => p.weeklyData[i])?.weeklyData[i];
                if (firstProjectWeekData) {
                    weekRow.push(firstProjectWeekData.date, '週統計');
                } else {
                    weekRow.push('', ''); 
                }

                projectData.forEach(project => {
                    const weekData = project.weeklyData[i];
                    
                    if (weekData) {
                        weekRow.push(
                            formatValue('int', weekData.regTotal),
                            formatValue('cpa', weekData.allCPA),
                            formatValue('roi', weekData.allROI),
                            formatValue('cpa', weekData.iosCPA),
                            formatValue('roi', weekData.iosROI),
                            formatValue('cpa', weekData.androidCPA),
                            formatValue('roi', weekData.androidROI)
                        );
                    } else {
                        weekRow.push('', '', '', '', '', '', ''); 
                    }
                });
                
                exportData.push(weekRow);
            }
            
            const ws = XLSX.utils.aoa_to_sheet(exportData);
            
            const colWidths = [{ wch: 10 }, { wch: 5 }];
            for(let i = 0; i < projectData.length; i++) {
                colWidths.push({ wch: 8 }, { wch: 8 }, { wch: 8 }, { wch: 8 }, { wch: 8 }, { wch: 8 }, { wch: 8 });
            }
            ws['!cols'] = colWidths;

            // 處理合併單元格 (第一行標題)
            let merge = [{ s: { r: 0, c: 0 }, e: { r: 0, c: 1 } }]; 
            let currentC = 2;
            projectData.forEach(() => {
                merge.push({ s: { r: 0, c: currentC }, e: { r: 0, c: currentC + 6 } });
                currentC += 7;
            });
            ws['!merges'] = merge;
            
            XLSX.utils.book_append_sheet(outputWorkbook, ws, '數據總結報表');
            
            XLSX.writeFile(outputWorkbook, '數據報表_總匯出.xlsx');
        }

        // ----------------- 事件處理 -----------------

        window.onload = function() {
            if (typeof XLSX === 'undefined') {
                const errorDiv = document.getElementById('load-error');
                errorDiv.innerHTML = '警告：SheetJS 函式庫載入失敗！請確保 `xlsx.full.min.js` 檔案已下載並與此 HTML 檔案在同一資料夾內。工具功能將無法使用。';
                document.getElementById('file-upload').disabled = true;
                document.getElementById('export-button').disabled = true;
                return;
            } else {
                document.getElementById('load-error').innerHTML = '';
            }

            document.getElementById('file-upload').addEventListener('change', async (event) => {
                const files = event.target.files;
                projectData = []; 

                for (const file of files) {
                    await new Promise((resolve) => {
                        const reader = new FileReader();
                        
                        reader.onload = (e) => {
                            try {
                                const data = e.target.result; 
                                
                                const workbook = XLSX.read(data, { 
                                    type: 'array', 
                                    cellDates: true, 
                                    dateNF: 'yyyy-mm-dd' 
                                });
                                
                                const sheetName = workbook.SheetNames[0];
                                const worksheet = workbook.Sheets[sheetName];
                                
                                const dataRows = XLSX.utils.sheet_to_json(worksheet);
                                
                                if (dataRows.length === 0) {
                                    resolve();
                                    return;
                                }
                                
                                const requiredKeys = [COL_MAP.DATE, COL_MAP.PLATFORM, COL_MAP.REGISTRATION, COL_MAP.CPA, COL_MAP.ROI_D1];
                                const missingKeys = requiredKeys.filter(key => !Object.keys(dataRows[0]).includes(key));

                                if (missingKeys.length > 0) {
                                    throw new Error(`缺少必要的欄位：${missingKeys.join(', ')}。請確認欄位名稱是否完全符合簡體中文標頭。`);
                                }

                                const processed = processData(dataRows, file.name);
                                if (processed.data.length === 0) {
                                    throw new Error("數據處理後結果為空，可能是所有行都被視為無效日期。");
                                }
                                
                                projectData.push(processed);
                                
                            } catch (error) {
                                console.error(`檔案 ${file.name} 處理失敗的詳細錯誤:`, error);
                                alert(`檔案 ${file.name} 處理失敗，請確認格式是否正確。錯誤訊息：${error.message}`);
                            }
                            resolve();
                        };
                        
                        reader.readAsArrayBuffer(file);
                    });
                }
                
                renderTables();
            });

            document.getElementById('export-button').addEventListener('click', exportAllData);
        };
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新游周盈亏表 (黄鱼版)</title>
    <script src="./xlsx.full.min.js"></script> 
    
    <style>
        /* Feature 7: 手機豎屏適配優化 */
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 0; 
            background-color: #f4f7f6;
            color: #333;
        }

        /* 頂部 Header 樣式 */
        .app-header {
            background-color: #ecf0f1; 
            padding: 15px 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
            margin-bottom: 20px;
        }

        .header-left {
            display: flex;
            align-items: center;
            flex-wrap: wrap; 
        }

        .header-left h1 {
            color: #2c3e50;
            font-size: 1.5em;
            margin: 0;
            display: inline-block;
        }
        
        .header-tools {
            display: flex;
            align-items: center;
        }
        
        .header-left span {
            margin-left: 15px;
            color: #7f8c8d;
            font-weight: bold;
            white-space: nowrap; 
        }

        /* 更新日誌按鈕 (藍色小問號) */
        .log-button {
            background-color: #3498db;
            color: white;
            border-radius: 50%;
            width: 24px;
            height: 24px;
            line-height: 24px;
            font-size: 1.1em;
            font-weight: bold;
            margin-left: 10px;
            cursor: pointer;
            transition: background-color 0.2s;
            order: 1; 
            text-align: center;
        }

        .log-button:hover {
            background-color: #2980b9;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        /* 檔案上傳與操作區塊 */
        .controls {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin-bottom: 25px;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
            background-color: #ecf0f1;
        }
        .controls input[type="file"], .controls button {
            padding: 10px 15px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-weight: bold;
            transition: background-color 0.3s;
        }
        .controls input[type="file"] {
            background-color: #3498db;
            color: white;
        }
        .controls button {
            background-color: #2ecc71;
            color: white;
        }
        .controls button:hover {
            background-color: #27ae60;
        }


        /* 資料表單樣式 */
        .project-data {
            margin-top: 30px;
            border: 1px solid #c0c0c0;
            border-radius: 6px;
            overflow: hidden; 
        }
        .project-title {
            background-color: #34495e;
            color: white;
            padding: 10px 15px;
            font-size: 1.2em;
            font-weight: bold;
            cursor: pointer;
        }
        .project-title[contenteditable="true"]:hover {
            background-color: #2c3e50;
        }

        .table-wrapper {
            overflow-x: auto; 
            width: 100%;
        }

        /* PC 寬度調整與美觀 */
        .result-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.85em; 
            table-layout: fixed; 
        }

        /* 所有文字和數字居中顯示 */
        .result-table th, .result-table td {
            padding: 3px 5px; 
            border: 1px solid #ddd;
            text-align: center !important; 
            white-space: nowrap;
        }

        /* Feature 1 & 2: 日期/週期 字體再次縮小 */
        .result-table th:first-child, .result-table td:first-child {
            min-width: 90px; 
            position: sticky; 
            left: 0;
            background-color: #f8f8f8;
            z-index: 3; /* 確保日期欄位在最頂層 */
            font-size: 0.7em; /* 縮小到 0.7em */
        }
        
        /* 量級欄位，防止其覆蓋日期欄位 */
        .result-table td:nth-child(2) {
             position: relative; /* 確保後面的元素不會有隱式的高 z-index */
        }

        /* 縮小表頭字體 */
        .result-table thead th {
            background-color: #f8f8f8;
            color: #333;
            font-weight: bold;
            text-align: center;
            font-size: 0.8em; 
        }

        /* 樣式規定保持不變 */
        .platform-header { background-color: #e6f7ff; }
        .ltv-lifetime { background-color: #e5ffe5; }
        .pl-loss {
            background-color: #e74c3c; 
            color: #000; 
            font-weight: bold;
        }

        /* 更新日誌彈窗 (Modal) - 增加滾動條 */
        .modal {
            display: none; 
            position: fixed; 
            z-index: 10; 
            left: 0;
            top: 0;
            width: 100%; 
            height: 100%; 
            overflow: auto; 
            background-color: rgba(0,0,0,0.4); 
            padding-top: 60px;
        }
        .modal-content {
            background-color: #fefefe;
            margin: 5% auto; 
            padding: 20px;
            border: 1px solid #888;
            width: 80%; 
            max-width: 600px;
            border-radius: 8px;
            position: relative;
            /* Feature 2: 更新日誌內容增加垂直滾動條 */
            max-height: 80vh;
            overflow-y: auto;
        }
        .close-button {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }
        .close-button:hover,
        .close-button:focus {
            color: #000;
            text-decoration: none;
            cursor: pointer;
        }
        
        /* Feature 2: 手機豎版 Header 適配 */
        @media (max-width: 768px) {
            .app-header {
                flex-direction: column;
                align-items: flex-start;
                padding: 10px 15px;
            }
            .header-left {
                flex-direction: column; 
                align-items: flex-start;
                width: 100%;
            }
            .header-tools {
                display: flex;
                align-items: center;
                margin-top: 5px;
                order: 2; 
            }
            .header-left h1 {
                font-size: 1.3em;
                order: 1;
            }
            .log-button {
                margin-left: 0;
                margin-right: 10px;
            }
            .header-left span {
                margin-left: 0;
            }
            .container {
                padding: 10px;
            }
            .controls {
                flex-direction: column;
            }
        }
        @media (min-width: 769px) {
            .header-tools {
                display: flex;
                align-items: center;
            }
        }

    </style>
</head>
<body>

<div class="app-header">
    <div class="header-left">
        <h1>新游周盈亏表</h1>
        <div class="header-tools">
            <div class="log-button" id="logButton">?</div>
            <span>作者：三只小黄鱼</span>
        </div>
    </div>
</div>

<div class="container">

    <div class="controls">
        <input type="file" id="fileInput" accept=".xls,.xlsx,.csv" multiple>
        <button id="exportButton">一键导出数据</button>
        <div id="loading" style="display:none; color: red; align-self: center;">正在處理中...</div>
    </div>

    <div id="outputContainer">
        <p>请上传您的原始 Excel/CSV 文件，文件将会转换为目标表单格式并显示于此。</p>
    </div>
</div>

<div id="updateLogModal" class="modal">
    <div class="modal-content">
        <span class="close-button">×</span>
        <h2>更新日誌</h2>
        <ul>
            <li>**2025/12/01 (優化)**：
                <ul>
                    <li>**相容性**：新增對「第360天」作為「終生倍數」表頭的支援。</li>
                    <li>**相容性**：內部邏輯預留「第120天」、「第180天」的欄位識別，以應對不同格式的原始檔案。</li>
                </ul>
            </li>
            <li>**2025/11/30 (最終修正)**：
                <ul>
                    <li>**修復 (3)**：最終修正 **盈虧預估** 欄位索引，**鎖定原始表頭中標籤為「終生」的欄位**，徹底解決數據讀取錯誤。</li>
                    <li>**修復 (2)**：**滾動覆蓋問題解決**：通過調整 `z-index`，確保手機上滾動時「量級」欄位不會覆蓋「日期/週期」。</li>
                    <li>**排版 (1, 2)**：單獨縮小「日期/週期」欄位字體至 `0.7em`；為「更新日誌」內容增加垂直滾動條。</li>
                </ul>
            </li>
            <li>**2025/11/30**：
                <ul>
                    <li>**修復**：修正盈虧預估欄位偏移錯誤，實現重新上傳相同檔案時能自動刷新和計算。</li>
                    <li>**排版**：優化手機豎版 Header 顯示；微調「日期/週期」欄位寬度。</li>
                </ul>
            </li>
            <li>**2025/11/30**：
                <ul>
                    <li>**排序**：修復日期排序問題，現在按日期範圍的起始日期從小到大排序。</li>
                    <li>**格式**：表格所有內容居中顯示；盈虧預估負值調整為紅底黑字。</li>
                    <li>**排版**：移除 ALL 表頭多餘文字；調整表格 padding 以優化電腦顯示寬度。</li>
                </ul>
            </li>
            <li>**2025/11/30 (初版)**：初版發布，實現多檔案上傳、資料轉換、格式化及 Excel 匯出功能。</li>
        </ul>
    </div>
</div>

<script>

// =========================================================================
// 輔助函式：日期排序邏輯
// =========================================================================
function dateRangeToStartDate(dateRangeStr) {
    if (!dateRangeStr || typeof dateRangeStr !== 'string') return 0;
    
    const startStr = dateRangeStr.split('-')[0].trim(); 
    const parts = startStr.split('/'); 
    
    if (parts.length === 2) {
        const year = 2025;
        const month = String(parts[0]).padStart(2, '0');
        const day = String(parts[1]).padStart(2, '0');
        return parseInt(`${year}${month}${day}`, 10);
    }
    return 0; 
}


// =========================================================================
// 檔案處理與自動刷新邏輯
// =========================================================================
const fileInput = document.getElementById('fileInput');
const outputContainer = document.getElementById('outputContainer');
const exportButton = document.getElementById('exportButton');
const loadingIndicator = document.getElementById('loading');

fileInput.addEventListener('change', async (event) => {
    if (event.target.files.length > 0) {
        loadingIndicator.style.display = 'block';
        outputContainer.innerHTML = ''; 

        for (const file of event.target.files) {
            await processFile(file);
        }
        loadingIndicator.style.display = 'none';
        exportButton.disabled = false;
        
        event.target.value = null; 
    }
});


/**
 * 處理單一檔案
 */
async function processFile(file) {
    return new Promise((resolve) => {
        const reader = new FileReader();
        reader.onload = (e) => {
            const data = new Uint8Array(e.target.result);
            const workbook = XLSX.read(data, { type: 'array' });
            const worksheet = workbook.Sheets[workbook.SheetNames[0]];
            const rawData = XLSX.utils.sheet_to_json(worksheet, { header: 1, raw: true }); 
            
            const defaultProjectName = file.name.replace(/\.[^/.]+$/, "");
            
            try {
                const transformedData = transformData(rawData);
                renderTable(transformedData, defaultProjectName);
            } catch (error) {
                console.error("資料轉換錯誤:", error);
                const errorDiv = document.createElement('div');
                errorDiv.innerHTML = `<p style="color: red;">[錯誤] 檔案 <strong>${defaultProjectName}</strong> 處理失敗：${error.message || '請檢查檔案格式是否與範例 TW-王者 相同。'}</p>`;
                outputContainer.appendChild(errorDiv);
            }
            resolve();
        };
        reader.readAsArrayBuffer(file);
    });
}

/**
 * 輔助函式：從單一數據行提取指標數據並計算終生LTV
 */
function extractPlatformData(row, colIndices) {
    if (!row) return {};
    
    if (row.length <= colIndices['終生倍數']) {
        return {};
    }

    const ltv_d1 = Number(row[colIndices['首日LTV']]);
    const multiplier = Number(row[colIndices['終生倍數']]);
    
    // 檢查盈虧預估欄位是否存在
    const isALL = row.length > colIndices['盈虧預估'] && row[colIndices['盈虧預估']] !== undefined && row[colIndices['盈虧預估']] !== '';

    const data = {
        '量級': row[colIndices['獨立註冊']],
        '單價': row[colIndices['單價']],
        '首日LTV': ltv_d1,
        '首日ROI': row[colIndices['首日ROI']],
        '終生倍數': multiplier,
        '終生LTV': ltv_d1 * multiplier, 
    };
    
    if (isALL) {
        data['盈虧預估'] = row[colIndices['盈虧預估']];
    }
    
    if (!isALL) {
        delete data['量級'];
    }

    return data;
}

/**
 * 根據 鑫 格式（分塊堆疊）轉換為目標格式（水平展開）
 */
function transformData(rawData) {
    
    const headerRowIndex = 3; 
    const dataStartIndex = 4;

    if (!rawData || rawData.length <= dataStartIndex) {
        throw new Error("原始資料行數不足或表頭結構不符。");
    }

    const headerRow = rawData[headerRowIndex];
    
    // 1. 鎖定盈虧預估 (终生) 欄位索引 (Feature 3 最終修正)
    let plLifetimeIndex = -1;
    for (let i = headerRow.length - 1; i >= 0; i--) {
        const colName = String(headerRow[i] || '').trim();
        if (colName === '终生') {
            plLifetimeIndex = i;
            break;
        }
    }

    // 增加一個從左到右的備用檢查
    if (plLifetimeIndex === -1) { 
         for (let i = 0; i < headerRow.length; i++) {
             const colName = String(headerRow[i] || '').trim();
             if (colName === '终生') { 
                plLifetimeIndex = i;
                break;
             }
         }
         if (plLifetimeIndex === -1) {
             throw new Error("無法在原始檔案表頭中找到 '终生' P&L 欄位，請確認檔案格式。");
         }
    }

    // 2. 建立欄位索引對應
    const columnIndexMap = {};
    headerRow.forEach((colName, index) => {
        const cleanName = String(colName || '').trim().replace(/\n/g, ''); 
        if (cleanName) {
            columnIndexMap[cleanName] = index;
        }
    });

    const colIndices = {
        '日期': 1, 
        '獨立註冊': columnIndexMap['独立注册'],
        '單價': columnIndexMap['單價'] || columnIndexMap['单价'],
        '首日LTV': columnIndexMap['首日LTV'],
        '首日ROI': columnIndexMap['首日ROI'],
        // 兼容支持：预估倍数-终生 = 第360天
        '終生倍數': columnIndexMap['預估倍數-終生'] || columnIndexMap['預估倍數-终生'] || columnIndexMap['预估倍数-终生'] || columnIndexMap['第360天'],
        '盈虧預估': plLifetimeIndex, // 使用鎖定的索引
        // 預留兼容：120天與180天映射
        '120天倍數': columnIndexMap['預估倍數-120天'] || columnIndexMap['预估倍数-120天'] || columnIndexMap['第120天'],
        '180天倍數': columnIndexMap['預估倍數-180天'] || columnIndexMap['预估倍数-180天'] || columnIndexMap['第180天']
    };
    
    if (!colIndices['單價'] || !colIndices['獨立註冊'] || !colIndices['終生倍數']) {
         throw new Error("原始檔案中缺少關鍵欄位 (e.g., 单价, 独立注册, 预估倍数-终生/第360天)。");
    }

    // --- 區塊解析邏輯 ---
    const allDataMap = {}; 
    const iOSDataMap = {};
    const anDataMap = {};
    
    let currentDataMap = allDataMap; 
    
    const rows = rawData.slice(dataStartIndex - 1);

    for (const row of rows) {
        if (!row || row.length < 2) continue;
        
        const index1Value = String(row[1] || '').trim();
        
        // 1. 識別平台區塊變換
        if (index1Value === 'ALL') {
            currentDataMap = allDataMap;
            continue; 
        }
        if (index1Value === 'iOS') {
            currentDataMap = iOSDataMap;
            continue; 
        }
        if (index1Value === 'AN') {
            currentDataMap = anDataMap;
            continue; 
        }
        
        // 2. 識別數據行
        const date = String(row[colIndices['日期']] || '').trim(); 
        if (date.match(/\d{1,2}\/\d{1,2}/) && row[colIndices['獨立註冊']] !== undefined) { 
            currentDataMap[date] = row;
        }
    }
    
    // 3. 合併數據
    const dateKeys = new Set([
        ...Object.keys(allDataMap),
        ...Object.keys(iOSDataMap),
        ...Object.keys(anDataMap)
    ]);
    
    const transformedData = [];
    
    for (const date of dateKeys) {
        const rowALL = allDataMap[date];
        const rowiOS = iOSDataMap[date];
        const rowAN = anDataMap[date];
        
        if (!rowALL) continue; 
        
        const record = {
            '日期': date,
            'ALL': extractPlatformData(rowALL, colIndices),
            'iOS': extractPlatformData(rowiOS, colIndices),
            'AN': extractPlatformData(rowAN, colIndices)
        };
        transformedData.push(record);
    }

    if (transformedData.length === 0) {
        throw new Error("無法解析出任何有效的日期資料行。請檢查 ALL 數據區塊是否存在。");
    }
    
    // 按日期從小到大排序
    transformedData.sort((a, b) => {
        const dateA = dateRangeToStartDate(a['日期']);
        const dateB = dateRangeToStartDate(b['日期']);
        return dateA - dateB;
    });

    return transformedData;
}


// =========================================================================
// 資料格式化輔助函式
// =========================================================================
function formatValue(value, type) {
    const num = Number(value);
    if (isNaN(num) || value === null || value === undefined || value === '') return '';

    switch (type) {
        case 'int': 
            return Math.round(num).toLocaleString('en-US'); 
        case 'float1': 
            return num.toFixed(1);
        case 'percent1': 
            return (num * 100).toFixed(1) + '%';
        default:
            return String(value);
    }
}

/**
 * 根據轉換後的資料生成 HTML 表格 (渲染)
 */
function renderTable(data, projectName) {
    
    const projectDiv = document.createElement('div');
    projectDiv.className = 'project-data';
    projectDiv.setAttribute('data-project-name', projectName); 
    
    const titleDiv = document.createElement('div');
    titleDiv.className = 'project-title';
    titleDiv.contentEditable = 'true';
    titleDiv.textContent = projectName;
    projectDiv.appendChild(titleDiv);

    const tableWrapper = document.createElement('div');
    tableWrapper.className = 'table-wrapper';
    
    const table = document.createElement('table');
    table.className = 'result-table';
    
    // --- 表格標頭 ---
    const thead = table.createTHead();
    
    const row1 = thead.insertRow();
    row1.innerHTML = `
        <th rowspan="2">日期/週期</th>
        <th colspan="7" class="platform-header">ALL</th> 
        <th colspan="5" class="platform-header">iOS</th>
        <th colspan="5" class="platform-header">AN</th>
    `;
    
    const row2 = thead.insertRow();
    const metrics = ['量級', '單價', '首日LTV', '首日ROI', '終生倍數', '終生LTV', '盈虧預估'];
    const subMetrics = ['單價', '首日LTV', '首日ROI', '終生倍數', '終生LTV'];
    
    row2.innerHTML = `
        ${metrics.map(m => `<th>${m}</th>`).join('')}
        ${subMetrics.map(m => `<th>${m}</th>`).join('')}
        ${subMetrics.map(m => `<th>${m}</th>`).join('')}
    `;

    // --- 表格內容 ---
    const tbody = table.createTBody();
    
    data.forEach(record => {
        const tr = tbody.insertRow();
        
        tr.insertCell().textContent = record['日期'];
        
        const addCell = (platform, metric, formatType) => {
            const cell = tr.insertCell();
            const value = record[platform][metric];
            cell.textContent = formatValue(value, formatType);

            // 樣式規定
            if (metric === '終生LTV') {
                cell.classList.add('ltv-lifetime'); // 綠底色
            } else if (platform === 'ALL' && metric === '盈虧預估' && Number(value) < 0) {
                cell.classList.add('pl-loss'); // 紅底黑字
            }
            cell.setAttribute('data-raw-value', value); 
        };

        // ALL 平台 (7 個指標)
        addCell('ALL', '量級', 'int');
        addCell('ALL', '單價', 'float1');
        addCell('ALL', '首日LTV', 'float1');
        addCell('ALL', '首日ROI', 'percent1');
        addCell('ALL', '終生倍數', 'int');
        addCell('ALL', '終生LTV', 'int'); 
        addCell('ALL', '盈虧預估', 'int');

        // iOS 平台 (5 個指標)
        addCell('iOS', '單價', 'float1');
        addCell('iOS', '首日LTV', 'float1');
        addCell('iOS', '首日ROI', 'percent1');
        addCell('iOS', '終生倍數', 'int');
        addCell('iOS', '終生LTV', 'int');

        // AN 平台 (5 個指標)
        addCell('AN', '單價', 'float1');
        addCell('AN', '首日LTV', 'float1');
        addCell('AN', '首日ROI', 'percent1');
        addCell('AN', '終生倍數', 'int');
        addCell('AN', '終生LTV', 'int');
    });

    tableWrapper.appendChild(table);
    projectDiv.appendChild(tableWrapper);
    outputContainer.appendChild(projectDiv);
}


// =========================================================================
// 一鍵匯出整個頁面的多項目數據
// =========================================================================
exportButton.addEventListener('click', () => {
    const projectTables = document.querySelectorAll('.project-data');
    if (projectTables.length === 0) {
        alert("頁面上沒有數據表單可以匯出！請先上傳檔案。");
        return;
    }
    
    const workbook = XLSX.utils.book_new();

    projectTables.forEach((projectDiv, index) => {
        const titleElement = projectDiv.querySelector('.project-title');
        let sheetName = titleElement.textContent.trim() || `Sheet${index + 1}`;
        sheetName = sheetName.substring(0, 31).replace(/[\[\]\/\?\*\:\\]/g, '_'); 

        const table = projectDiv.querySelector('.result-table');
        
        // ----------------- 構造 Excel 表頭 -----------------
        const headerALL = ['日期/週期', 'ALL', '', '', '', '', '', '']; 
        const headeriOS = ['iOS', '', '', '', ''];
        const headerAN = ['AN', '', '', '', ''];
        
        const metrics = ['量級', '單價', '首日LTV', '首日ROI', '終生倍數', '終生LTV', '盈虧預估'];
        const subMetrics = ['單價', '首日LTV', '首日ROI', '終生倍數', '終生LTV'];
        
        const header1 = [
            ...headerALL, ...headeriOS, ...headerAN
        ];
        const header2 = [
            '日期/週期', 
            ...metrics, 
            ...subMetrics, 
            ...subMetrics
        ];
        
        // ----------------- 提取資料行 -----------------
        const sheetData = [header1, header2];
        
        const dataRows = table.querySelectorAll('tbody tr');
        dataRows.forEach(row => {
            const rowData = [];
            row.querySelectorAll('td').forEach(cell => {
                const rawValue = cell.getAttribute('data-raw-value');
                if (rawValue !== null) {
                    const numValue = Number(rawValue);
                    rowData.push(isNaN(numValue) ? rawValue : numValue); 
                } else {
                    rowData.push(cell.textContent); 
                }
            });
            sheetData.push(rowData);
        });
        
        // ----------------- 寫入 Sheet -----------------
        const worksheet = XLSX.utils.aoa_to_sheet(sheetData);
        
        // 合併單元格
        worksheet["!merges"] = [
            { s: { r: 0, c: 0 }, e: { r: 1, c: 0 } }, 
            { s: { r: 0, c: 1 }, e: { r: 0, c: 7 } },
            { s: { r: 0, c: 8 }, e: { r: 0, c: 12 } },
            { s: { r: 0, c: 13 }, e: { r: 0, c: 17 } }
        ];

        // 設定合併單元格的標題
        XLSX.utils.sheet_add_aoa(worksheet, [['ALL']], { origin: "B1" }); 
        XLSX.utils.sheet_add_aoa(worksheet, [['iOS']], { origin: "I1" });
        XLSX.utils.sheet_add_aoa(worksheet, [['AN']], { origin: "N1" });
        
        XLSX.utils.book_append_sheet(workbook, worksheet, sheetName);
    });

    XLSX.writeFile(workbook, `TW-王者_多專案數據_${new Date().toLocaleDateString('zh-TW').replace(/\//g, '')}.xlsx`);
    
    alert(`成功匯出 ${projectTables.length} 個專案數據！`);
});

// =========================================================================
// UI Feature: 更新日誌彈窗控制 (小問號)
// =========================================================================
const modal = document.getElementById("updateLogModal");
const btn = document.getElementById("logButton");
const span = document.getElementsByClassName("close-button")[0];

btn.onclick = function() {
  modal.style.display = "block";
}

span.onclick = function() {
  modal.style.display = "none";
}

window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>

</body>
</html>


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>营收预估表（黄鱼版）</title>
    
    <!-- Dependencies -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    
    <!-- SheetJS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>

    <style>
        body { background-color: #f8fafc; color: #1e293b; }
        /* Custom scrollbar */
        ::-webkit-scrollbar { width: 8px; height: 8px; }
        ::-webkit-scrollbar-track { background: #f1f1f1; }
        ::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 4px; }
        ::-webkit-scrollbar-thumb:hover { background: #a8a8a8; }
        
        /* Hide number input arrows */
        input[type=number]::-webkit-inner-spin-button, 
        input[type=number]::-webkit-outer-spin-button { 
            -webkit-appearance: none; 
            margin: 0; 
        }
        input[type=number] {
            -moz-appearance: textfield;
        }

        /* Tooltip container */
        .tooltip {
            position: relative;
            display: inline-flex;
            align-items: center;
        }
        /* Updated Tooltip Style for Author Name */
        .author-tooltip .tooltip-text {
            visibility: hidden;
            background-color: #333;
            color: #fff;
            text-align: center;
            border-radius: 6px;
            padding: 6px 10px;
            position: absolute;
            z-index: 50;
            top: 100%; /* Position below */
            right: 0;   /* Align right */
            margin-top: 8px;
            opacity: 0;
            transition: opacity 0.3s;
            font-size: 12px;
            pointer-events: none;
            white-space: nowrap;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }
        .author-tooltip:hover .tooltip-text {
            visibility: visible;
            opacity: 1;
        }

        /* Generic Table Tooltip */
        .table-tooltip .tooltip-text {
            visibility: hidden;
            width: 200px;
            background-color: #333;
            color: #fff;
            text-align: center;
            border-radius: 6px;
            padding: 5px;
            position: absolute;
            z-index: 50;
            bottom: 125%;
            left: 50%;
            transform: translateX(-50%);
            opacity: 0;
            transition: opacity 0.3s;
            font-size: 12px;
            pointer-events: none;
        }
        .table-tooltip:hover .tooltip-text {
            visibility: visible;
            opacity: 1;
        }
    </style>
<script type="importmap">
{
  "imports": {
    "lucide-react": "https://aistudiocdn.com/lucide-react@^0.555.0",
    "xlsx": "https://aistudiocdn.com/xlsx@^0.18.5",
    "react/": "https://aistudiocdn.com/react@^19.2.1/",
    "react": "https://aistudiocdn.com/react@^19.2.1",
    "date-fns": "https://aistudiocdn.com/date-fns@^4.1.0"
  }
}
</script>
</head>
<body>
    <div id="root"></div>

    <script type="text/babel" data-presets="react,typescript">
        const { useState, useMemo, useRef, useEffect } = React;

        // --- Icons ---
        const Icons = {
            Upload: () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>,
            Download: () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2 2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>,
            FileSpreadsheet: () => <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round"><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"/><polyline points="14 2 14 8 20 8"/><path d="M8 13h2"/><path d="M8 17h2"/><path d="M14 13h2"/><path d="M14 17h2"/></svg>,
            HelpCircle: () => <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>,
            BookOpen: () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg>,
            X: () => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>,
            Trash2: () => <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/></svg>,
            Edit2: () => <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"/></svg>,
            User: () => <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
        };

        // --- Date Utils ---
        const DateUtils = {
            format: (date, fmt) => {
                const d = new Date(date);
                if (isNaN(d.getTime())) return '';
                const year = d.getFullYear();
                const month = String(d.getMonth() + 1).padStart(2, '0');
                const day = String(d.getDate()).padStart(2, '0');
                const weekDay = ['日', '一', '二', '三', '四', '五', '六'][d.getDay()];
                
                return fmt.replace('yyyy', year)
                          .replace('MM', month)
                          .replace('dd', day)
                          .replace('WEEK', weekDay);
            },
            addDays: (date, days) => {
                const result = new Date(date);
                result.setDate(result.getDate() + days);
                return result;
            },
            getDay: (date) => new Date(date).getDay(),
            startOfMonth: (date) => new Date(date.getFullYear(), date.getMonth(), 1),
            // The 0th day of month M+1 is the last day of month M.
            endOfMonth: (date) => new Date(date.getFullYear(), date.getMonth() + 1, 0),
            subMonths: (date, months) => new Date(date.getFullYear(), date.getMonth() - months, date.getDate()),
            addMonths: (date, months) => new Date(date.getFullYear(), date.getMonth() + months, date.getDate()),
        };

        // --- Helpers ---
        const parsePercentage = (val) => {
            if (val == null || val === '') return 0;
            if (typeof val === 'string') {
                if (val.includes('%')) {
                    return parseFloat(val.replace('%', ''));
                }
                const floatVal = parseFloat(val);
                if (floatVal <= 1 && floatVal > 0) return floatVal * 100;
                return floatVal;
            }
            if (typeof val === 'number') {
                if (val <= 1 && val > 0) return val * 100;
                return val;
            }
            return 0;
        };

        const findColumn = (row, ...candidates) => {
            if (!row) return null;
            const keys = Object.keys(row);
            
            // Priority 1: Exact matches
            for (const cand of candidates) {
                 const cleanCand = cand.toLowerCase().replace(/\s+/g, '');
                 for (const key of keys) {
                     const cleanKey = key.trim().toLowerCase().replace(/\s+/g, '');
                     if (cleanKey === cleanCand) return row[key];
                 }
            }
            // Priority 2: Partial matches
            for (const cand of candidates) {
                const cleanCand = cand.toLowerCase().replace(/\s+/g, '');
                if (cleanCand === 'arpu') {
                     for (const key of keys) {
                        const cleanKey = key.trim().toLowerCase().replace(/\s+/g, '');
                        if (cleanKey.includes(cleanCand) && !cleanKey.includes('arppu') && !cleanKey.includes('arrpu')) return row[key];
                    }
                } else {
                    for (const key of keys) {
                        const cleanKey = key.trim().toLowerCase().replace(/\s+/g, '');
                        if (cleanKey.includes(cleanCand)) return row[key];
                    }
                }
            }
            return null;
        };

        const findHeaderRow = (sheet, requiredKeywords) => {
            const rows = XLSX.utils.sheet_to_json(sheet, { header: 1, range: 0, defval: '' });
            for (let r = 0; r < Math.min(rows.length, 20); r++) {
                const row = rows[r];
                if (!Array.isArray(row) || row.length === 0) continue;
                const rowStr = row.map(cell => String(cell).toLowerCase().replace(/\s+/g, '')).join(' ');
                
                const isMatch = requiredKeywords.every(group => 
                    group.some(k => rowStr.includes(k.toLowerCase()))
                );
                if (isMatch) return r;
            }
            return -1;
        };

        const parseDateVal = (val) => {
            if (val instanceof Date) return val;
            if (!val) return null;
            if (typeof val === 'number') {
                return new Date(Math.round((val - 25569) * 86400 * 1000) + (new Date().getTimezoneOffset() * 60000));
            }
            if (typeof val === 'string') {
                const d = new Date(val);
                if (!isNaN(d.getTime())) return d;
            }
            return null;
        };

        // --- Core Algorithms ---

        const calculateOldGameProjection = (rows) => {
            let data = [...rows].sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime());
            if (data.length === 0) return [];

            const lastActualDataPoint = data.filter(r => !r.isProjected && r.loginCount != null).pop();
            if (!lastActualDataPoint) return data; 

            const lastActualDate = new Date(lastActualDataPoint.date);
            lastActualDate.setHours(12, 0, 0, 0);

            const actualData = data.filter(d => !d.isProjected && d.loginCount != null);

            // 1. Calculate Initial Decay Coefficient (Last 7 days)
            let initialDecayCoeff = 1.0;
            if (actualData.length >= 8) {
                const recent = actualData.slice(-8);
                const ratios = [];
                for (let i = 1; i < recent.length; i++) {
                    const prev = recent[i-1].loginCount || 1;
                    const curr = recent[i].loginCount || 0;
                    if (prev > 0) ratios.push(curr / prev);
                }
                if (ratios.length > 2) {
                    const min = Math.min(...ratios);
                    const max = Math.max(...ratios);
                    const sum = ratios.reduce((a, b) => a + b, 0) - min - max;
                    initialDecayCoeff = sum / (ratios.length - 2);
                } else if (ratios.length > 0) {
                    initialDecayCoeff = ratios.reduce((a,b)=>a+b,0) / ratios.length;
                }
            }

            const endOfCurrentMonth = DateUtils.endOfMonth(lastActualDate);
            endOfCurrentMonth.setHours(12, 0, 0, 0);

            // Project 12 Months
            const startOfProjection = DateUtils.addDays(lastActualDate, 1);
            startOfProjection.setHours(12, 0, 0, 0);

            const endOfProjection = DateUtils.addMonths(endOfCurrentMonth, 12); 
            endOfProjection.setHours(12, 0, 0, 0);
            
            let currentDate = startOfProjection;
            let lastLoginCount = lastActualDataPoint.loginCount || 0;
            // Removed: let lastTotalReg = lastActualDataPoint.totalReg || 0;

            const avgPayRate = actualData.length > 0 ? actualData.reduce((s, r) => s + (r.payRate || 0), 0) / actualData.length : 0;
            const avgArpu = actualData.length > 0 ? actualData.reduce((s, r) => s + (r.arpu || 0), 0) / actualData.length : 0;

            // Decay Dynamics
            let currentDecayCoeff = initialDecayCoeff;
            const hardeningFactor = 0.8; 

            while (currentDate.getTime() <= endOfProjection.getTime()) {
                const dateStr = DateUtils.format(currentDate, 'yyyy-MM-dd');
                const dayOfWeek = DateUtils.getDay(currentDate);
                const isWeekend = dayOfWeek === 0 || dayOfWeek === 6;

                // Adjust decay at start of month AND mid-month (16th)
                // New logic: Trigger hardening twice a month (1st and 16th)
                if ((currentDate.getDate() === 1 || currentDate.getDate() === 16) && currentDate.getTime() > startOfProjection.getTime()) {
                    const currentChurn = 1 - currentDecayCoeff;
                    const newChurn = currentChurn * hardeningFactor;
                    currentDecayCoeff = 1 - newChurn;
                }

                const projectedLoginCount = Math.floor(lastLoginCount * currentDecayCoeff);
                lastLoginCount = projectedLoginCount;

                const refDate = DateUtils.subMonths(currentDate, 1);
                const refDateStr = DateUtils.format(refDate, 'yyyy-MM-dd');
                const refRow = data.find(d => d.date === refDateStr);

                const projectedPayRate = refRow ? (refRow.payRate || 0) : avgPayRate;
                const projectedArpu = refRow ? (refRow.arpu || 0) : avgArpu;

                const projectedRevenue = projectedLoginCount * projectedArpu;
                const projectedArppu = projectedPayRate > 0 ? (projectedArpu / (projectedPayRate / 100)) : 0;

                data.push({
                    date: dateStr,
                    isWeekend: isWeekend,
                    totalReg: null, // Force blank for projected days
                    loginCount: projectedLoginCount,
                    revenue: projectedRevenue,
                    payRate: projectedPayRate,
                    arpu: projectedArpu,
                    arppu: projectedArppu,
                    isProjected: true,
                    tooltipText: `衰减系数: ${currentDecayCoeff.toFixed(4)}`
                });

                currentDate = DateUtils.addDays(currentDate, 1);
                currentDate.setHours(12, 0, 0, 0);
            }
            return data;
        };

        const calculateNewGameProjection = (rows, launchRetention, normalRetention) => {
            let data = [...rows].sort((a, b) => new Date(a.fullDate).getTime() - new Date(b.fullDate).getTime());
            if (data.length === 0) return [];

            const firstDate = new Date(data[0].fullDate);
            const lastActualDate = new Date(data[data.length - 1].fullDate);
            const endDate = DateUtils.addDays(firstDate, 90);

            let currentDate = DateUtils.addDays(lastActualDate, 1);
            while (currentDate <= endDate) {
                const fullDate = DateUtils.format(currentDate, 'yyyy-MM-dd');
                data.push({
                    fullDate,
                    date: DateUtils.format(currentDate, 'MM/dd'),
                    weekday: DateUtils.format(currentDate, 'WEEK'),
                    newUsers: 0,
                    cumUsers: 0,
                    activeUsers: null, 
                    payRate: 0,
                    arpu: 0,
                    arppu: 0,
                    revenue: 0,
                    cumRevenue: 0,
                    ltv: 0,
                    isProjected: true
                });
                currentDate = DateUtils.addDays(currentDate, 1);
            }

            const newUsersMap = new Map();
            data.forEach(r => newUsersMap.set(r.fullDate, r.newUsers || 0));

            let cumulativeReg = 0;
            let cumulativeRev = 0;

            return data.map((row, idx) => {
                let active = 0;
                if (!row.isProjected && row.activeUsers !== null && row.activeUsers > 0) {
                    active = row.activeUsers;
                } else {
                    for (let i = 0; i <= idx; i++) {
                        const cohortRow = data[i];
                        const cohortNew = newUsersMap.get(cohortRow.fullDate) || 0;
                        const lag = idx - i; 
                        const retentionDay = lag + 1; 
                        
                        let rate = 0;
                        if (lag === 0) {
                            rate = 1; 
                        } else {
                            if (i === 0) {
                                rate = launchRetention[retentionDay] !== undefined ? launchRetention[retentionDay] : 0;
                            } else {
                                rate = normalRetention[retentionDay] !== undefined ? normalRetention[retentionDay] : 0;
                            }
                        }
                        active += cohortNew * rate;
                    }
                }
                
                let payRate = row.payRate || 0;
                let arpu = row.arpu || 0;

                if (row.isProjected) {
                    const prevValid = data.slice(0, idx).reverse().find(d => d.arpu > 0);
                    if (prevValid) {
                        arpu = prevValid.arpu;
                        payRate = prevValid.payRate;
                    }
                }

                const revenue = Math.round(active * arpu);
                const arppu = payRate > 0 ? arpu / (payRate/100) : 0;

                cumulativeReg += (row.newUsers || 0);
                cumulativeRev += revenue;
                const ltv = cumulativeReg > 0 ? cumulativeRev / cumulativeReg : 0;

                return {
                    ...row,
                    activeUsers: Math.round(active),
                    revenue,
                    cumUsers: cumulativeReg,
                    cumRevenue: cumulativeRev,
                    arppu,
                    ltv,
                    payRate,
                    arpu
                };
            });
        };

        const aggregateMonthly = (data, type) => {
            const result = [];
            let currentMonth = '';
            let monthlyRows = [];

            const processBatch = () => {
                if (monthlyRows.length === 0) return;
                result.push(...monthlyRows);

                const summary = { isSummary: true, monthLabel: DateUtils.format(monthlyRows[0].fullDate || monthlyRows[0].date, 'yyyy-MM') };
                
                if (type === 'old') {
                    const totalRev = monthlyRows.reduce((acc, r) => acc + Number(r.revenue || 0), 0);
                    const avgPayRate = monthlyRows.reduce((acc,r) => acc + Number(r.payRate||0), 0) / monthlyRows.length;
                    
                    // Logic Update: Total Reg is SUM of daily TotalReg (as per request)
                    const totalRegSum = monthlyRows.reduce((acc, r) => acc + Number(r.totalReg || 0), 0);
                    
                    // Logic Update: Total Login is MAX of daily Login Count (as per request)
                    const maxLogin = Math.max(...monthlyRows.map(r => Number(r.loginCount || 0)));

                    summary.date = '月度汇总';
                    summary.loginCount = maxLogin > 0 ? maxLogin : 0;
                    summary.revenue = totalRev;
                    summary.payRate = avgPayRate;
                    summary.arpu = maxLogin > 0 ? totalRev / maxLogin : 0;
                    summary.arppu = avgPayRate > 0 ? summary.arpu / (avgPayRate/100) : 0;
                    summary.totalReg = totalRegSum > 0 ? totalRegSum : null; 
                } else {
                    const totalNew = monthlyRows.reduce((acc, r) => acc + Number(r.newUsers || 0), 0);
                    const totalRev = monthlyRows.reduce((acc, r) => acc + Number(r.revenue || 0), 0);
                    const avgActive = monthlyRows.reduce((acc, r) => acc + Number(r.activeUsers || 0), 0) / monthlyRows.length;
                    const lastRow = monthlyRows[monthlyRows.length - 1];

                    summary.fullDate = '月度汇总';
                    summary.date = '汇总';
                    summary.newUsers = totalNew;
                    summary.cumUsers = lastRow.cumUsers;
                    summary.activeUsers = Math.round(avgActive);
                    summary.revenue = totalRev;
                    summary.cumRevenue = lastRow.cumRevenue;
                    const totalActiveSum = monthlyRows.reduce((acc,r)=>acc + Number(r.activeUsers || 0), 0);
                    summary.arpu = totalActiveSum > 0 ? totalRev / totalActiveSum : 0;
                    summary.payRate = monthlyRows.reduce((acc,r) => acc + Number(r.payRate||0), 0) / monthlyRows.length;
                    summary.arppu = summary.payRate > 0 ? summary.arpu / (summary.payRate/100) : 0;
                    summary.ltv = lastRow.ltv;
                }
                result.push(summary);
            };

            data.forEach(row => {
                const d = row.fullDate || row.date;
                if(!d) return;
                const month = d.substring(0, 7);
                if (month !== currentMonth) {
                    processBatch();
                    currentMonth = month;
                    monthlyRows = [];
                }
                monthlyRows.push(row);
            });
            processBatch();
            return result;
        };

        // --- Components ---鑫

        const Modal = ({ isOpen, onClose, title, children }) => {
            if (!isOpen) return null;
            return (
                <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 p-4">
                    <div className="bg-white rounded-lg shadow-xl w-full max-w-md flex flex-col max-h-[85vh]">
                        <div className="flex justify-between items-center p-4 border-b">
                            <h2 className="text-xl font-bold text-gray-800">{title}</h2>
                            <button onClick={onClose} className="p-1 hover:bg-gray-100 rounded-full">
                                <Icons.X />
                            </button>
                        </div>
                        <div className="p-6 overflow-y-auto flex-1">
                            {children}
                        </div>
                    </div>
                </div>
            );
        };

        const UsageGuide = ({ isOpen, onClose }) => (
            <Modal isOpen={isOpen} onClose={onClose} title="使用说明">
                <div className="space-y-4 text-sm text-gray-700">
                    <section>
                        <h3 className="font-bold text-gray-900 mb-2">数据导入规则</h3>
                        <ul className="list-disc pl-5 space-y-1">
                            <li><span className="font-semibold text-blue-600">表一（老游戏）：</span>必须包含“日期”、“登录账号数”、“付费金额”、“ARPU”列。可选列：“总注册”、“付费率”。</li>
                            <li><span className="font-semibold text-purple-600">表二（新游戏）：</span>必须包含“日期”、“新增”、“活跃”、“ARPU”列。保留率配置需包含“留存天数”、“上线日-留存率”、“正常-留存率”。</li>
                            <li>支持 Excel (.xlsx, .xls) 格式。</li>
                            <li>系统会自动扫描前20行以寻找有效表头，无需删除文件中的标题行。</li>
                        </ul>
                    </section>
                    <section>
                        <h3 className="font-bold text-gray-900 mb-2">预估逻辑</h3>
                        <p><strong>老游戏：</strong>取近7天数据的波动系数进行线性衰减预估。预估范围为未来12个月，且流失率会逐月降低。</p>
                        <p className="mt-2"><strong>新游戏：</strong>基于同期群（Cohort）留存模型。上线首日用户遵循“上线日留存”，后续新增用户遵循“正常留存”。</p>
                    </section>
                </div>
            </Modal>
        );

        const Changelog = ({ isOpen, onClose }) => (
             <Modal isOpen={isOpen} onClose={onClose} title="更新日志">
                <div className="space-y-4">
                     {[
                         { v: 'v1.1.4', d: '2025-12-04', t: '衰减算法优化', items: ['表一：老游戏用户固化逻辑调整为每半月（1号和16号）触发一次，流失率递减20%，使长线预估更平滑。'] },
                         { v: 'v1.1.3', d: '2025-12-04', t: '汇总算法与编辑修复', items: ['表一：月度汇总“总注册”改为每日本月总和，“总登录”改为本月最大值。', '系统：彻底修复表单手动编辑无效问题（支持直接输入字符串，避免光标跳动）。', '系统：修复导出数据与页面显示不一致的问题。'] },
                         { v: 'v1.1.2', d: '2025-12-04', t: '体验与逻辑完善', items: ['表一：总注册直接读取源数据，无数据则留白不预估。', '表一：新增底部“月度汇总表”，一目了然查看全年趋势。', '表一：修复总注册的月度汇总逻辑。'] },
                        { v: 'v1.1.1', d: '2025-12-03', t: '汇总增强', items: ['表一：底部新增单独的汇总行展示。', '修复总注册汇总显示为“-”的问题。'] },
                        { v: 'v1.1.0', d: '2025-12-03', t: '长周期预估与UI修复', items: ['表一：预估周期延长至未来12个月。', '表一：新增动态衰减算法。', 'UI：修复作者署名冒泡提示被遮挡的问题。'] },
                    ].map((log, idx) => (
                        <div key={idx} className="border-l-4 border-blue-500 pl-4 py-1">
                            <div className="flex justify-between items-baseline mb-1">
                                <span className="font-bold text-gray-800">{log.v} <span className="text-xs font-normal text-gray-500 ml-2">{log.t}</span></span>
                                <span className="text-xs text-gray-400">{log.d}</span>
                            </div>
                            <ul className="list-disc pl-4 text-gray-600 text-xs leading-relaxed space-y-0.5">
                                {log.items.map((item, i) => <li key={i}>{item}</li>)}
                            </ul>
                        </div>
                    ))}
                    <div className="pt-4 mt-4 border-t text-center">
                        <p className="text-xs text-gray-400">作者：三只小黄鱼</p>
                    </div>
                </div>
             </Modal>
        );

        const EditableProjectName = ({ project, onRename }) => {
            const [isEditing, setIsEditing] = useState(false);
            const [name, setName] = useState(project.name);

            const handleSave = (e) => {
                e.stopPropagation();
                if (name.trim()) onRename(project.id, name);
                setIsEditing(false);
            };

            const handleKeyDown = (e) => {
                if (e.key === 'Enter') handleSave(e);
            };

            if (isEditing) {
                return (
                    <div className="flex items-center space-x-1 flex-1 min-w-0" onClick={e => e.stopPropagation()}>
                        <input 
                            autoFocus
                            value={name}
                            onChange={e => setName(e.target.value)}
                            onKeyDown={handleKeyDown}
                            onBlur={handleSave}
                            className="w-full px-1 py-0.5 text-sm border rounded shadow-sm focus:ring-2 focus:ring-blue-500 outline-none"
                        />
                    </div>
                );
            }
            
            return (
                <div className="flex items-center space-x-2 w-full group/name min-w-0">
                    <span className="truncate font-medium flex-1 text-left">{project.name}</span>
                    <button 
                        onClick={(e) => { e.stopPropagation(); setIsEditing(true); }}
                        className="opacity-0 group-hover/name:opacity-100 p-1 text-gray-400 hover:text-blue-600 transition-opacity flex-shrink-0"
                        title="重命名"
                    >
                        <Icons.Edit2 />
                    </button>
                </div>
            );
        };

        const App = () => {
            const [projects, setProjects] = useState([]);
            const [activeProjectId, setActiveProjectId] = useState(null);
            const [showChangelog, setShowChangelog] = useState(false);
            const [showGuide, setShowGuide] = useState(false);
            
            const oldGameInputRef = useRef(null);
            const newGameInputRef = useRef(null);

            const activeProject = useMemo(() => projects.find(p => p.id === activeProjectId), [projects, activeProjectId]);
            
            const handleRenameProject = (id, newName) => {
                setProjects(prev => prev.map(p => p.id === id ? { ...p, name: newName } : p));
            };

            const handleFileUpload = async (e, type) => {
                const files = e.target.files;
                if (!files || files.length === 0) return;

                const newProjects = [];
                let hasError = false;
                let errorMsg = '';

                for (let i = 0; i < files.length; i++) {
                    const file = files[i];
                    try {
                        const buffer = await file.arrayBuffer();
                        const workbook = XLSX.read(buffer);
                        const projectName = file.name.replace(/\.[^/.]+$/, "");

                        let oldGameData = [];
                        let newGameData = [];
                        let launchRetention = {};
                        let normalRetention = {};
                        let parsedSuccessfully = false;

                        for (const sheetName of workbook.SheetNames) {
                            const sheet = workbook.Sheets[sheetName];
                            
                            if (type === 'old') {
                                const headerRowIdx = findHeaderRow(sheet, [['date', '日期'], ['login', '登录', 'dau', '账号'], ['pay', 'revenue', '付费']]);
                                
                                if (headerRowIdx !== -1) {
                                    const json = XLSX.utils.sheet_to_json(sheet, { range: headerRowIdx, defval: null });
                                    
                                    const parsedRows = json.map(row => {
                                         const dateRaw = findColumn(row, 'Date', '日期');
                                         const dateObj = parseDateVal(dateRaw);
                                         if (!dateObj) return null;
                                         const dateStr = DateUtils.format(dateObj, 'yyyy-MM-dd');

                                         const login = findColumn(row, '登录账号数', '登录账号', '登录', 'Login', 'DAU');
                                         const totalReg = findColumn(row, '总注册', 'Total Reg', 'Total Users', '累计注册');
                                         const rev = findColumn(row, '付费金额', 'Revenue', 'Pay Amount', 'Income');
                                         const rate = findColumn(row, '付费率', 'Pay Rate');
                                         const arpu = findColumn(row, 'ARPU', 'Arpu'); 
                                         const arppuRaw = findColumn(row, 'ARPPU', 'ARRPU', 'Arppu');

                                         const payRateVal = parsePercentage(rate);
                                         const arpuVal = Number(arpu || 0);
                                         let arppuVal = Number(arppuRaw || 0);
                                         if (arppuVal === 0 && payRateVal > 0) {
                                            arppuVal = arpuVal / (payRateVal / 100);
                                         }

                                         return {
                                             date: dateStr,
                                             isWeekend: false, // Calc in logic
                                             loginCount: Number(login || 0),
                                             totalReg: totalReg ? Number(totalReg) : null,
                                             revenue: Number(rev || 0),
                                             payRate: payRateVal,
                                             arpu: arpuVal,
                                             arppu: arppuVal,
                                             isProjected: false
                                         };
                                    }).filter(r => r && r.date);
                                    
                                    if (parsedRows.length > 0) {
                                        oldGameData = parsedRows;
                                        parsedSuccessfully = true;
                                    }
                                }
                            } else if (type === 'new') {
                                const headerRowIdx = findHeaderRow(sheet, [['date', '日期'], ['new', '新增']]);
                                if (headerRowIdx !== -1) {
                                    const fullJson = XLSX.utils.sheet_to_json(sheet);
                                    fullJson.forEach(row => {
                                        const day = parseInt(findColumn(row, '留存天数', 'Retention Day'));
                                        if (!isNaN(day)) {
                                            launchRetention[day] = parsePercentage(findColumn(row, '上线日-留存率', '上线日', 'Launch')) / 100;
                                            normalRetention[day] = parsePercentage(findColumn(row, '正常-留存率', '正常', 'Normal')) / 100;
                                        }
                                    });

                                    const json = XLSX.utils.sheet_to_json(sheet, { range: headerRowIdx, defval: null });
                                    const parsedRows = json.map(row => {
                                        const dateRaw = findColumn(row, 'Date', '日期');
                                        const dateObj = parseDateVal(dateRaw);
                                        if (!dateObj) return null;
                                        const dateStr = DateUtils.format(dateObj, 'yyyy-MM-dd');

                                        const newUser = findColumn(row, '新增', 'New');
                                        const active = findColumn(row, '活跃', 'Active');
                                        const rate = findColumn(row, '活跃付费率', '付费率', 'Pay Rate');
                                        const arpu = findColumn(row, 'ARPU');

                                        return {
                                            fullDate: dateStr,
                                            date: DateUtils.format(dateStr, 'MM/dd'),
                                            weekday: DateUtils.format(dateStr, 'WEEK'),
                                            newUsers: Number(newUser || 0),
                                            activeUsers: (active !== null && active !== undefined && active !== '') ? Number(active) : null,
                                            payRate: parsePercentage(rate),
                                            arpu: Number(arpu || 0),
                                            isProjected: false
                                        };
                                    }).filter(Boolean);
                                    
                                    if (parsedRows.length > 0) {
                                        newGameData = parsedRows;
                                        parsedSuccessfully = true;
                                    }
                                }
                            }
                        }

                        if (parsedSuccessfully) {
                            let projectedOld = [];
                            let projectedNew = [];
                            
                            if (type === 'old') {
                                projectedOld = calculateOldGameProjection(oldGameData);
                            } else {
                                if (Object.keys(launchRetention).length === 0) {
                                    launchRetention = { 2: 0.5, 3: 0.35, 7: 0.2, 30: 0.1 };
                                    normalRetention = { 2: 0.45, 3: 0.3, 7: 0.15, 30: 0.08 };
                                }
                                projectedNew = calculateNewGameProjection(newGameData, launchRetention, normalRetention);
                            }

                            newProjects.push({
                                id: Date.now() + Math.random(),
                                name: projectName,
                                oldGameData: projectedOld,
                                newGameData: projectedNew
                            });
                        } else {
                            hasError = true;
                            errorMsg += `\n文件 "${file.name}" 中未找到有效的${type === 'old' ? '老游戏' : '新游戏'}数据表头。`;
                        }
                    } catch (err) {
                        console.error(err);
                        hasError = true;
                        errorMsg += `\n解析文件 "${file.name}" 时发生错误: ${err.message}`;
                    }
                }
                
                if (hasError && newProjects.length === 0) {
                    alert("导入失败：" + errorMsg);
                } else {
                    if (hasError) alert("部分导入完成，但存在错误：" + errorMsg);
                    setProjects(prev => [...prev, ...newProjects]);
                    if (newProjects.length > 0) setActiveProjectId(newProjects[0].id);
                }
                
                e.target.value = '';
            };

            const deleteProject = (id, e) => {
                e.stopPropagation();
                if (window.confirm('确定要删除这个项目吗？')) {
                    const newProjs = projects.filter(p => p.id !== id);
                    setProjects(newProjs);
                    if (activeProjectId === id) setActiveProjectId(newProjs.length > 0 ? newProjs[0].id : null);
                }
            };

            const updateProjectData = (type, idx, field, value) => {
                if (!activeProject) return;
                const newProjects = [...projects];
                const projIndex = newProjects.findIndex(p => p.id === activeProject.id);
                
                // IMPORTANT: We do NOT parseFloat immediately for state update.
                // This allows the user to type "12." (string) without it becoming 12 (number) and losing the dot.
                // We only cast to Number when performing calculations (math).
                
                if (type === 'old') {
                     const newData = [...activeProject.oldGameData];
                     if (idx === undefined || idx < 0) return;
                     
                     // Store raw value (string or number)
                     newData[idx] = { ...newData[idx], [field]: value };
                     
                     // Recalc dependencies using Number() cast
                     if(field === 'loginCount' || field === 'arpu') {
                        const l = Number(newData[idx].loginCount || 0);
                        const a = Number(newData[idx].arpu || 0);
                        newData[idx].revenue = l * a; // Calculated fields are always numbers
                     }
                     if(field === 'revenue' && newData[idx].loginCount) {
                        const rev = Number(newData[idx].revenue || 0);
                        const log = Number(newData[idx].loginCount || 0);
                        if (log > 0) newData[idx].arpu = rev / log;
                     }
                     newProjects[projIndex].oldGameData = newData;
                } else {
                     const newData = [...activeProject.newGameData];
                     if (idx === undefined || idx < 0) return;

                     newData[idx] = { ...newData[idx], [field]: value };

                     // Recalc dependencies
                     if (field === 'revenue' || field === 'newUsers' || field === 'activeUsers' || field === 'arpu' || field === 'payRate') {
                        // For simplicity in this manual editing mode, we do localized recalc.
                        // Ideally, changing NewUsers should re-ripple through cohorts, but that destroys manual overrides.
                        // We will just fix the row consistency.
                        
                        // If revenue changed, update cumRev?
                        if (field === 'revenue') {
                             let cumRev = 0;
                             newData.forEach(r => {
                                 cumRev += Number(r.revenue || 0);
                                 r.cumRevenue = cumRev;
                                 r.ltv = Number(r.cumUsers || 0) > 0 ? cumRev / Number(r.cumUsers) : 0;
                             });
                        }
                        // If active/arpu changed, update revenue?
                        if (field === 'activeUsers' || field === 'arpu') {
                             const act = Number(newData[idx].activeUsers || 0);
                             const arp = Number(newData[idx].arpu || 0);
                             const newRev = act * arp;
                             newData[idx].revenue = newRev;
                             
                             // Ripple cumulative revenue
                             let cumRev = 0;
                             newData.forEach(r => {
                                 cumRev += Number(r.revenue || 0);
                                 r.cumRevenue = cumRev;
                                 r.ltv = Number(r.cumUsers || 0) > 0 ? cumRev / Number(r.cumUsers) : 0;
                             });
                        }
                     }
                     newProjects[projIndex].newGameData = newData;
                }
                setProjects(newProjects);
            };

            const handleExport = () => {
                if (!projects || projects.length === 0) {
                    alert("请先导入数据");
                    return;
                }
                try {
                    const wb = XLSX.utils.book_new();
                    projects.forEach(p => {
                        if (p.oldGameData && p.oldGameData.length > 0) {
                            const oldRows = aggregateMonthly(p.oldGameData, 'old').map(r => ({
                                '日期': r.date,
                                '总注册': r.totalReg !== null ? Number(r.totalReg) : '',
                                '登录账号数': Number(r.loginCount || 0),
                                '付费金额': Number(r.revenue || 0),
                                '付费率': Number(r.payRate || 0)/100,
                                'ARPU': Number(r.arpu || 0),
                                'ARPPU': Number(r.arppu || 0)
                            }));
                            const wsOld = XLSX.utils.json_to_sheet(oldRows);
                            XLSX.utils.book_append_sheet(wb, wsOld, `${p.name}-老游戏`);
                        }

                        if (p.newGameData && p.newGameData.length > 0) {
                            const newRows = aggregateMonthly(p.newGameData, 'new').map(r => ({
                                '日期': r.fullDate,
                                '星期': r.weekday,
                                '新增': Number(r.newUsers || 0),
                                '累积注册': Number(r.cumUsers || 0),
                                '活跃': Number(r.activeUsers || 0),
                                '付费率': Number(r.payRate || 0)/100,
                                'ARPPU': Number(r.arppu || 0),
                                'ARPU': Number(r.arpu || 0),
                                '营收': Number(r.revenue || 0),
                                '累积营收': Number(r.cumRevenue || 0),
                                'LTV测算': Number(r.ltv || 0)
                            }));
                            const wsNew = XLSX.utils.json_to_sheet(newRows);
                            XLSX.utils.book_append_sheet(wb, wsNew, `${p.name}-新游戏`);
                        }
                    });
                    XLSX.writeFile(wb, `营收预估_${DateUtils.format(new Date(), 'yyyyMMdd')}.xlsx`);
                } catch (e) {
                    console.error(e);
                    alert("导出失败，请检查数据完整性");
                }
            };

            const oldDisplayData = useMemo(() => {
                if (!activeProject || activeProject.oldGameData.length === 0) return [];
                const rawWithIdx = activeProject.oldGameData.map((r, i) => ({...r, _rawIdx: i}));
                return aggregateMonthly(rawWithIdx, 'old');
            }, [activeProject]);
            
            // Extract ONLY summaries for the separate summary table
            const oldSummaryData = useMemo(() => {
                return oldDisplayData.filter(row => row.isSummary);
            }, [oldDisplayData]);
            
            // Extract ONLY daily rows for the main table (exclude summary rows from main table)
            const oldDailyData = useMemo(() => {
                return oldDisplayData.filter(row => !row.isSummary);
            }, [oldDisplayData]);

            const newDisplayData = useMemo(() => {
                if (!activeProject || activeProject.newGameData.length === 0) return [];
                const rawWithIdx = activeProject.newGameData.map((r, i) => ({...r, _rawIdx: i}));
                return aggregateMonthly(rawWithIdx, 'new');
            }, [activeProject]);

            return (
                <div className="min-h-screen flex flex-col">
                    {/* Header */}
                    <header className="bg-white border-b sticky top-0 z-30 shadow-sm">
                        <div className="max-w-7xl mx-auto px-4 py-3 flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4">
                            <div className="flex items-center space-x-3">
                                <h1 className="text-xl font-bold text-slate-800 tracking-tight">营收预估表</h1>
                                <div className="flex items-center text-sm text-gray-500 space-x-2 border-l pl-3">
                                    <button onClick={() => setShowChangelog(true)} className="hover:text-blue-600 flex items-center gap-1 transition-colors">
                                        <Icons.HelpCircle /> <span className="underline decoration-dotted">更新日志</span>
                                    </button>
                                    <button onClick={() => setShowGuide(true)} className="hover:text-blue-600 flex items-center gap-1 transition-colors">
                                        <Icons.BookOpen /> <span className="underline decoration-dotted">使用说明</span>
                                    </button>
                                </div>
                            </div>
                            
                            <div className="flex items-center gap-4">
                                <div className="author-tooltip tooltip group hidden md:flex items-center text-sm text-gray-600 bg-gray-50 px-3 py-1 rounded-full border cursor-help">
                                    <Icons.User />
                                    <span className="ml-1.5 font-medium">作者：三只小黄鱼</span>
                                    <span className="tooltip-text">公众号：三只小黄鱼</span>
                                </div>
                                <div className="h-6 w-px bg-gray-200 hidden md:block"></div>
                                <div className="flex flex-wrap gap-2">
                                    <label className="flex items-center space-x-1.5 bg-blue-600 hover:bg-blue-700 text-white px-3 py-1.5 rounded-md cursor-pointer transition shadow-sm text-sm font-medium">
                                        <Icons.Upload />
                                        <span>导入老游戏 (表一)</span>
                                        <input type="file" ref={oldGameInputRef} multiple accept=".xlsx,.xls" className="hidden" onChange={(e) => handleFileUpload(e, 'old')} />
                                    </label>
                                    <label className="flex items-center space-x-1.5 bg-purple-600 hover:bg-purple-700 text-white px-3 py-1.5 rounded-md cursor-pointer transition shadow-sm text-sm font-medium">
                                        <Icons.Upload />
                                        <span>导入新游戏 (表二)</span>
                                        <input type="file" ref={newGameInputRef} multiple accept=".xlsx,.xls" className="hidden" onChange={(e) => handleFileUpload(e, 'new')} />
                                    </label>
                                    {projects.length > 0 && (
                                        <button onClick={handleExport} className="flex items-center space-x-1.5 bg-gray-700 hover:bg-gray-800 text-white px-3 py-1.5 rounded-md transition shadow-sm text-sm font-medium">
                                            <Icons.Download />
                                            <span>一键导出</span>
                                        </button>
                                    )}
                                </div>
                            </div>
                        </div>
                    </header>

                    {/* Main Content */}
                    <main className="flex-1 max-w-full mx-auto w-full px-2 sm:px-4 py-6">
                        {projects.length === 0 ? (
                            <div className="flex flex-col items-center justify-center h-80 border-2 border-dashed border-gray-300 rounded-lg bg-white m-4 p-8 text-center">
                                <div className="text-blue-100 mb-4">
                                    <Icons.FileSpreadsheet />
                                </div>
                                <h3 className="text-lg font-medium text-gray-900 mb-2">开始您的预估</h3>
                                <p className="text-gray-500 max-w-sm mb-6 text-sm">请根据数据类型点击上方“导入”按钮。<br/>系统将自动扫描表头，支持多Sheet导入。</p>
                                <div className="flex gap-4 text-xs text-gray-400">
                                    <span className="flex items-center"><span className="w-2 h-2 bg-blue-500 rounded-full mr-2"></span>表一：老游戏数据</span>
                                    <span className="flex items-center"><span className="w-2 h-2 bg-purple-500 rounded-full mr-2"></span>表二：新游戏数据</span>
                                </div>
                            </div>
                        ) : (
                            <div className="flex flex-col lg:flex-row gap-6">
                                {/* Sidebar */}
                                <div className="lg:w-64 flex-shrink-0 bg-white rounded-lg shadow-sm border h-fit">
                                    <div className="p-3 border-b font-bold text-gray-700 bg-gray-50 flex justify-between items-center text-sm">
                                        <span>项目列表</span>
                                        <span className="text-xs bg-gray-200 text-gray-600 px-1.5 py-0.5 rounded-full">{projects.length}</span>
                                    </div>
                                    <ul className="divide-y max-h-60 lg:max-h-none overflow-y-auto">
                                        {projects.map(p => (
                                            <li key={p.id} className={`group flex items-center justify-between border-l-4 transition hover:bg-gray-50 ${activeProjectId === p.id ? 'bg-blue-50 text-blue-700 border-blue-600' : 'border-transparent'}`}>
                                                <button 
                                                    onClick={() => setActiveProjectId(p.id)}
                                                    className="flex-1 text-left px-3 py-2.5 min-w-0 overflow-hidden"
                                                >
                                                    <EditableProjectName project={p} onRename={handleRenameProject} />
                                                    <div className="text-[10px] text-gray-400 mt-1 flex gap-2">
                                                        {p.oldGameData.length > 0 && <span className="text-blue-500">● 老游戏</span>}
                                                        {p.newGameData.length > 0 && <span className="text-purple-500">● 新游戏</span>}
                                                    </div>
                                                </button>
                                                
                                                <div className="pr-2 flex items-center">
                                                     <button 
                                                        onClick={(e) => deleteProject(p.id, e)}
                                                        className="p-1.5 text-gray-300 hover:text-red-500 hover:bg-red-50 rounded opacity-0 group-hover:opacity-100 transition-opacity"
                                                        title="删除项目"
                                                    >
                                                        <Icons.Trash2 />
                                                    </button>
                                                </div>
                                            </li>
                                        ))}
                                    </ul>
                                </div>

                                {/* Tables */}
                                <div className="flex-1 min-w-0 space-y-6 pb-20">
                                    {/* Old Game Table */}
                                    {activeProject.oldGameData.length > 0 && (
                                        <div className="space-y-6">
                                            {/* Daily Detail Table */}
                                            <div className="bg-white rounded-lg shadow-sm border overflow-hidden">
                                                <div className="p-3 bg-gray-50 border-b flex justify-between items-center">
                                                    <h2 className="text-base font-bold text-gray-800 border-l-4 border-blue-600 pl-3">表一：老游戏预估 (每日明细)</h2>
                                                    <span className="text-xs text-blue-600 font-medium bg-blue-100 px-2 py-0.5 rounded">Dynamic Decay</span>
                                                </div>
                                                <div className="overflow-x-auto max-h-[60vh]">
                                                    <table className="min-w-full text-xs text-left whitespace-nowrap">
                                                        <thead className="bg-gray-100 text-gray-700 font-semibold sticky top-0 z-20 shadow-sm">
                                                            <tr>
                                                                <th className="px-2 py-2 sticky left-0 bg-gray-100 border-b z-20">日期</th>
                                                                <th className="px-2 py-2 text-right border-b">总注册</th>
                                                                <th className="px-2 py-2 text-right border-b">登录账号数</th>
                                                                <th className="px-2 py-2 text-right border-b">付费金额</th>
                                                                <th className="px-2 py-2 text-right border-b">付费率</th>
                                                                <th className="px-2 py-2 text-right border-b">ARPU</th>
                                                                <th className="px-2 py-2 text-right border-b">ARPPU</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody className="divide-y divide-gray-200">
                                                            {oldDailyData.map((row, idx) => (
                                                                <tr key={idx} className={`hover:bg-gray-50 ${row.isProjected ? 'bg-yellow-50/50' : ''}`}>
                                                                    <td className={`px-2 py-1 sticky left-0 bg-white border-r flex items-center ${row.isProjected ? 'bg-yellow-50/50' : ''}`}>
                                                                        {row.date}
                                                                        {row.isWeekend && <span className="ml-1 w-1.5 h-1.5 rounded-full bg-blue-400" title="周末"></span>}
                                                                    </td>
                                                                    <td className="px-2 py-1 text-right">
                                                                        <input type="number" className="w-20 text-right bg-transparent focus:bg-white focus:ring-1 focus:ring-blue-500 rounded px-1 transition-colors outline-none"
                                                                            value={row.totalReg ?? ''}
                                                                            onChange={(e) => updateProjectData('old', row._rawIdx, 'totalReg', e.target.value)}
                                                                        />
                                                                    </td>
                                                                    <td className="px-2 py-1 text-right">
                                                                        <div className={`relative ${row.isProjected ? 'table-tooltip cursor-help' : ''}`}>
                                                                            <input type="number" className="w-full text-right bg-transparent focus:bg-white focus:ring-1 focus:ring-blue-500 rounded px-1 transition-colors outline-none"
                                                                                value={row.loginCount ?? ''}
                                                                                onChange={(e) => updateProjectData('old', row._rawIdx, 'loginCount', e.target.value)}
                                                                            />
                                                                            {row.isProjected && <span className="tooltip-text">基于近7天衰减系数预估 (每半月流失率递减20%) {row.tooltipText && <span className="block text-[10px] opacity-70">{row.tooltipText}</span>}</span>}
                                                                        </div>
                                                                    </td>
                                                                    <td className="px-2 py-1 text-right">
                                                                        <input type="text" className="w-full text-right bg-transparent focus:bg-white focus:ring-1 focus:ring-blue-500 rounded px-1 transition-colors outline-none"
                                                                            value={Math.round(Number(row.revenue || 0)).toLocaleString()}
                                                                            onChange={(e) => updateProjectData('old', row._rawIdx, 'revenue', e.target.value.replace(/,/g, ''))}
                                                                        />
                                                                    </td>
                                                                    <td className="px-2 py-1 text-right">
                                                                        <div className="flex items-center justify-end">
                                                                            <input type="number" step="0.1" className="w-12 text-right bg-transparent focus:bg-white focus:ring-1 focus:ring-blue-500 rounded px-1 transition-colors outline-none"
                                                                                value={row.payRate ?? ''}
                                                                                onChange={(e) => updateProjectData('old', row._rawIdx, 'payRate', e.target.value)}
                                                                            />
                                                                            <span className="ml-0.5 text-gray-400">%</span>
                                                                        </div>
                                                                    </td>
                                                                    <td className="px-2 py-1 text-right">
                                                                        <input type="number" step="0.1" className="w-full text-right bg-transparent focus:bg-white focus:ring-1 focus:ring-blue-500 rounded px-1 transition-colors outline-none"
                                                                            value={row.arpu ?? ''}
                                                                            onChange={(e) => updateProjectData('old', row._rawIdx, 'arpu', e.target.value)}
                                                                        />
                                                                    </td>
                                                                    <td className="px-2 py-1 text-right text-gray-500">{(Number(row.arppu || 0)).toFixed(1)}</td>
                                                                </tr>
                                                            ))}
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>

                                            {/* Monthly Summary Table */}
                                            <div className="bg-white rounded-lg shadow-sm border overflow-hidden">
                                                <div className="p-3 bg-indigo-50 border-b flex justify-between items-center">
                                                    <h2 className="text-base font-bold text-indigo-900 border-l-4 border-indigo-600 pl-3">月度汇总表 (Monthly Overview)</h2>
                                                </div>
                                                <div className="overflow-x-auto">
                                                    <table className="min-w-full text-xs text-left whitespace-nowrap">
                                                        <thead className="bg-indigo-100 text-indigo-900 font-semibold">
                                                            <tr>
                                                                <th className="px-4 py-2 border-b">月份</th>
                                                                <th className="px-4 py-2 text-right border-b">总注册 (月总和)</th>
                                                                <th className="px-4 py-2 text-right border-b">总登录 (月峰值)</th>
                                                                <th className="px-4 py-2 text-right border-b">总付费金额</th>
                                                                <th className="px-4 py-2 text-right border-b">平均付费率</th>
                                                                <th className="px-4 py-2 text-right border-b">平均 ARPU</th>
                                                                <th className="px-4 py-2 text-right border-b">平均 ARPPU</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody className="divide-y divide-gray-200">
                                                            {oldSummaryData.map((row, idx) => (
                                                                <tr key={idx} className="hover:bg-indigo-50/50">
                                                                    <td className="px-4 py-2 font-medium text-gray-700">{row.monthLabel}</td>
                                                                    <td className="px-4 py-2 text-right font-medium">{row.totalReg ? Math.round(Number(row.totalReg)).toLocaleString() : '-'}</td>
                                                                    <td className="px-4 py-2 text-right">{Math.round(Number(row.loginCount || 0)).toLocaleString()}</td>
                                                                    <td className="px-4 py-2 text-right text-indigo-700 font-bold">{Math.round(Number(row.revenue || 0)).toLocaleString()}</td>
                                                                    <td className="px-4 py-2 text-right">{(Number(row.payRate || 0)).toFixed(1)}%</td>
                                                                    <td className="px-4 py-2 text-right">{(Number(row.arpu || 0)).toFixed(1)}</td>
                                                                    <td className="px-4 py-2 text-right">{(Number(row.arppu || 0)).toFixed(1)}</td>
                                                                </tr>
                                                            ))}
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    )}

                                    {/* New Game Table */}
                                    {activeProject.newGameData.length > 0 && (
                                        <div className="bg-white rounded-lg shadow-sm border overflow-hidden">
                                            <div className="p-3 bg-gray-50 border-b flex justify-between items-center">
                                                <h2 className="text-base font-bold text-gray-800 border-l-4 border-purple-500 pl-3">表二：新游戏预估</h2>
                                                <span className="text-xs text-purple-600 font-medium bg-purple-100 px-2 py-0.5 rounded">90 Days Projection</span>
                                            </div>
                                            <div className="overflow-x-auto max-h-[70vh]">
                                                <table className="min-w-full text-xs text-left whitespace-nowrap">
                                                    <thead className="bg-gray-100 text-gray-700 font-semibold sticky top-0 z-20 shadow-sm">
                                                        <tr>
                                                            <th className="px-2 py-2 sticky left-0 bg-gray-100 border-b z-20">日期</th>
                                                            <th className="px-1 py-2 border-b">星期</th>
                                                            <th className="px-1 py-2 text-right border-b">新增</th>
                                                            <th className="px-1 py-2 text-right border-b">累积注册</th>
                                                            <th className="px-1 py-2 text-right border-b">活跃</th>
                                                            <th className="px-1 py-2 text-right border-b">付费率</th>
                                                            <th className="px-1 py-2 text-right border-b">ARPPU</th>
                                                            <th className="px-1 py-2 text-right border-b">ARPU</th>
                                                            <th className="px-1 py-2 text-right border-b">营收</th>
                                                            <th className="px-1 py-2 text-right border-b">累积营收</th>
                                                            <th className="px-1 py-2 text-right border-b">LTV</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody className="divide-y divide-gray-200">
                                                        {newDisplayData.map((row, idx) => {
                                                            if (row.isSummary) {
                                                                return (
                                                                    <tr key={`sum-new-${idx}`} className="bg-purple-50 font-bold text-purple-900 sticky bottom-0 z-10 shadow-sm border-t-2 border-purple-200">
                                                                        <td className="px-2 py-2 sticky left-0 bg-purple-50">{row.date}</td>
                                                                        <td className="px-1 py-2">-</td>
                                                                        <td className="px-1 py-2 text-right">{Math.round(Number(row.newUsers || 0)).toLocaleString()}</td>
                                                                        <td className="px-1 py-2 text-right">{Math.round(Number(row.cumUsers || 0)).toLocaleString()}</td>
                                                                        <td className="px-1 py-2 text-right">{Math.round(Number(row.activeUsers || 0)).toLocaleString()}</td>
                                                                        <td className="px-1 py-2 text-right">{Math.round(Number(row.payRate || 0))}%</td>
                                                                        <td className="px-1 py-2 text-right">{(Number(row.arppu || 0)).toFixed(1)}</td>
                                                                        <td className="px-1 py-2 text-right">{(Number(row.arpu || 0)).toFixed(1)}</td>
                                                                        <td className="px-1 py-2 text-right">{Math.round(Number(row.revenue || 0)).toLocaleString()}</td>
                                                                        <td className="px-1 py-2 text-right">{Math.round(Number(row.cumRevenue || 0)).toLocaleString()}</td>
                                                                        <td className="px-1 py-2 text-right">{(Number(row.ltv || 0)).toFixed(1)}</td>
                                                                    </tr>
                                                                );
                                                            }
                                                            return (
                                                                <tr key={idx} className={`hover:bg-gray-50 ${row.isProjected ? 'bg-yellow-50/50' : ''}`}>
                                                                    <td className={`px-2 py-1 sticky left-0 bg-white border-r ${row.isProjected ? 'bg-yellow-50/50' : ''}`}>{row.date}</td>
                                                                    <td className="px-1 py-1 text-gray-500 scale-90 origin-left">{row.weekday}</td>
                                                                    
                                                                    <td className="px-1 py-1 text-right">
                                                                        <input type="number" className="w-14 text-right bg-transparent focus:bg-white focus:ring-1 focus:ring-blue-500 rounded px-1 outline-none"
                                                                            value={row.newUsers ?? ''}
                                                                            onChange={(e) => updateProjectData('new', row._rawIdx, 'newUsers', e.target.value)}
                                                                        />
                                                                    </td>
                                                                    <td className="px-1 py-1 text-right text-gray-500">{Math.round(Number(row.cumUsers || 0)).toLocaleString()}</td>
                                                                    <td className="px-1 py-1 text-right">
                                                                        <input type="number" className="w-14 text-right bg-transparent focus:bg-white focus:ring-1 focus:ring-blue-500 rounded px-1 outline-none"
                                                                            value={row.activeUsers ?? ''}
                                                                            onChange={(e) => updateProjectData('new', row._rawIdx, 'activeUsers', e.target.value)}
                                                                        />
                                                                    </td>
                                                                    <td className="px-1 py-1 text-right">
                                                                        <div className="flex items-center justify-end">
                                                                            <input type="number" className="w-8 text-right bg-transparent focus:bg-white focus:ring-1 focus:ring-blue-500 rounded px-0 outline-none"
                                                                                value={row.payRate ?? ''}
                                                                                onChange={(e) => updateProjectData('new', row._rawIdx, 'payRate', e.target.value)}
                                                                            />
                                                                            <span className="text-gray-400">%</span>
                                                                        </div>
                                                                    </td>
                                                                    <td className="px-1 py-1 text-right text-gray-500">{(Number(row.arppu || 0)).toFixed(1)}</td>
                                                                    <td className="px-1 py-1 text-right">
                                                                        <input type="number" step="0.1" className="w-12 text-right bg-transparent focus:bg-white focus:ring-1 focus:ring-blue-500 rounded px-1 outline-none"
                                                                            value={row.arpu ?? ''}
                                                                            onChange={(e) => updateProjectData('new', row._rawIdx, 'arpu', e.target.value)}
                                                                        />
                                                                    </td>
                                                                    <td className="px-1 py-1 text-right">
                                                                        <input type="text" className="w-16 text-right bg-transparent focus:bg-white focus:ring-1 focus:ring-blue-500 rounded px-1 outline-none"
                                                                            value={Math.round(Number(row.revenue || 0)).toLocaleString()}
                                                                            onChange={(e) => updateProjectData('new', row._rawIdx, 'revenue', e.target.value.replace(/,/g, ''))}
                                                                        />
                                                                    </td>
                                                                    <td className="px-1 py-1 text-right text-gray-500">{Math.round(Number(row.cumRevenue || 0)).toLocaleString()}</td>
                                                                    <td className="px-1 py-1 text-right text-gray-500">{(Number(row.ltv || 0)).toFixed(1)}</td>
                                                                </tr>
                                                            );
                                                        })}
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    )}
                                </div>
                            </div>
                        )}
                    </main>

                    <Changelog isOpen={showChangelog} onClose={() => setShowChangelog(false)} />
                    <UsageGuide isOpen={showGuide} onClose={() => setShowGuide(false)} />
                </div>
            );
        };

        const root = ReactDOM.createRoot(document.getElementById('root'));
        root.render(<App />);
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>周LTV倍数对比更新（黄鱼版）</title>
    <script src="xlsx.full.min.js"></script>
    <style>
        /* --- 基礎樣式 --- */
        body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 0; background-color: #f4f7f6; color: #333; }
        .header-container { background-color: #e9ecef; padding: 20px; margin-bottom: 20px; border-bottom: 2px solid #ddd; }
        .container { max-width: 1200px; margin: auto; background: #fff; padding: 25px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
        h1 { color: #0056b3; margin-top: 0; margin-bottom: 10px; display: inline-block; }
        
        /* --- 標題區塊與作者/日誌 --- */
        .title-bar { display: flex; align-items: center; justify-content: space-between; padding-bottom: 5px; margin-bottom: 15px; }
        .branding { display: flex; align-items: center; gap: 15px; }
        .author-name { font-size: 0.9em; color: #6c757d; }
        .log-toggle { font-size: 1.5em; cursor: pointer; color: #007bff; margin-left: 10px; }
        
        /* --- 彈出窗口樣式 (Modal) --- */
        .modal {
            display: none; /* 預設隱藏 */
            position: fixed;
            z-index: 1000; /* 置頂 */
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0,0,0,0.4); /* 半透明背景 */
        }
        .modal-content {
            background-color: #fefefe;
            margin: 10% auto; /* 垂直居中 */
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
            max-width: 600px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
            max-height: 70vh;
            overflow-y: auto;
        }
        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
        }
        .close:hover,
        .close:focus {
            color: #000;
            text-decoration: none;
        }
        
        /* --- 輸入區和表格樣式 --- */
        .input-section, .output-section { margin-bottom: 30px; padding: 15px; border: 1px solid #ddd; border-radius: 8px; background-color: #fafafa; }
        .file-upload { display: flex; gap: 15px; align-items: flex-start; flex-wrap: wrap; }
        .file-upload > div { flex: 1 1 30%; min-width: 250px; }
        input[type="file"] { border: 1px solid #ccc; padding: 8px; border-radius: 4px; width: 100%; box-sizing: border-box; }
        button { background-color: #007bff; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.3s; font-size: 16px; margin-top: 10px; }
        table { width: 100%; border-collapse: collapse; margin-top: 15px; background-color: #ffffff; }
        th, td { border: 1px solid #ddd; padding: 10px; text-align: right; }
        th { background-color: #e9ecef; color: #333; text-align: center; }
        .table-container { overflow-x: auto; margin-top: 20px; }
        .log-list { margin-top: 5px; padding-left: 20px; }
        .platform-table-title { margin-top: 30px; color: #28a745; border-bottom: 1px solid #28a745; padding-bottom: 5px; }
    </style>
</head>
<body>

<div id="changelog-modal" class="modal">
    <div class="modal-content">
        <span class="close" onclick="toggleLog()">×</span>
        <h2>更新日誌</h2>
        <ul class="log-list">
            <li>v37.0/v38.0：**結構調整**：將「終生」替換為 $\text{第360天}$。修復 $\text{LTV}$ $\text{Max}$ 備援邏輯，確保 $\text{第360天}$ 數據被正確計算。</li>
            <li>v35.0/v36.0：**三檔案結構/模型隔離**：將模型數據分拆為 $\text{表2}$ ($\text{iOS}$) 和 $\text{表3}$ ($\text{AN}$)，並移除 $\text{AN}$ 回退到 $\text{iOS}$ 的邏輯。</li>
            <li>v34.0：數據源頭嚴格檢查，解決 `Cannot read properties of undefined` 錯誤。</li>
            <li>v22.0：修復日期 $\text{ID}$ 統一化 (MM/DD-MM/DD) 錯誤。</li>
            <li>v20.0：恢復 Day 1 數據，並精確化係數查找邏輯。</li>
            <li>v17.0：**模型選擇最大化策略**：確保程式碼選擇正確的 LTV 值計算係數。</li>
            <li>v13.0：修復 $\text{LTV}$ 數據讀取與表格排版優化。</li>
            <li>v5.0：根據用戶提供的精確欄位名稱，修復檔案讀取失敗的問題。</li>
            <li>v1.0：初始版本：實現數據上傳、核心預估邏輯、係數校準和結果匯出功能。</li>
        </ul>
    </div>
</div>

<div class="header-container">
    <div class="container">
        <div class="title-bar">
            <div class="branding">
                <h1>周LTV倍数对比更新</h1>
                <span class="log-toggle" onclick="toggleLog()">ⓘ</span> <span class="author-name">作者：三只小黄魚</span>
            </div>
        </div>
    </div>
</div>

<div class="container">

    <div class="input-section">
        <h2>📂 数据输入区</h2>
        <div class="file-upload">
            <div>
                <label for="file1">**上传源数据表 (表1)**：</label>
                <input type="file" id="file1" accept=".xlsx, .xls, .csv">
            </div>
            <div>
                <label for="file2">**上传 iOS 模型数据表 (表2)**：</label>
                <input type="file" id="file2" accept=".xlsx, .xls, .csv">
            </div>
            <div>
                <label for="file3">**上传 AN 模型数据表 (表3)**：</label>
                <input type="file" id="file3" accept=".xlsx, .xls, .csv">
            </div>
        </div>
        <button id="processButton" onclick="startProcessing()" disabled>🚀 开始数据处理与预估</button>
        <p class="note" id="statusMessage">请上传三个档案。</p>
    </div>

    <div class="output-section">
        <h2>📈 预估结果输出</h2>
        
        <button id="exportButton" onclick="exportData()" disabled>📥 一键导出数据 (Excel)</button>

        <h3 class="platform-table-title">🍎 iOS 数据预估结果</h3>
        <div id="iosTableContainer" class="table-container">
            <p>处理结果将显示在此处。</p>
        </div>

        <h3 class="platform-table-title">🤖 Android 数据预估结果</h3>
        <div id="androidTableContainer" class="table-container">
            <p>处理结果将显示在此处。</p>
        </div>
    </div>
</div>

<script>
    // ------------------------------------
    // 程式碼核心邏輯 (JavaScript) - 修正版 v38.0
    // ------------------------------------

    // 關鍵天數調整：將 360 加入關鍵天數中
    const NUMERIC_KEY_DAYS_COMPARE = [3, 7, 15, 30, 45, 60, 90, 120, 180, 360]; 
    const ALL_OUTPUT_COLUMNS = NUMERIC_KEY_DAYS_COMPARE.map(d => `第${d}天`); 
    const NUMERIC_KEY_DAYS_INTERNAL = [1].concat(NUMERIC_KEY_DAYS_COMPARE); 

    let table1Data = [];
    let table2Data = []; // iOS Model Data
    let table3Data = []; // AN Model Data

    const file1Input = document.getElementById('file1');
    const file2Input = document.getElementById('file2');
    const file3Input = document.getElementById('file3');

    const processButton = document.getElementById('processButton');
    const exportButton = document.getElementById('exportButton');
    const statusMessage = document.getElementById('statusMessage');
    const changelogModal = document.getElementById('changelog-modal');

    // ** UI Toggle Function **
    function toggleLog() {
        if (changelogModal.style.display === 'block') {
            changelogModal.style.display = 'none';
        } else {
            changelogModal.style.display = 'block';
        }
    }
    // 點擊 Modal 外區域關閉
    window.onclick = function(event) {
        if (event.target == changelogModal) {
            changelogModal.style.display = "none";
        }
    }


    // 監聽文件上傳
    file1Input.addEventListener('change', () => handleFileUpload(file1Input, 1));
    file2Input.addEventListener('change', () => handleFileUpload(file2Input, 2));
    file3Input.addEventListener('change', () => handleFileUpload(file3Input, 3));


    /**
     * **核心輔助函數：日期 ID 清理與標準化**
     */
    function cleanDateID(idStr) {
        if (!idStr) return { internal: 'N/A', display: 'N/A' };
        let cleaned = idStr.toString().toLowerCase().trim();
        
        cleaned = cleaned.replace(/\d{4}[-/]/g, ''); 
        cleaned = cleaned.replace(/\s*至\s*/g, '-').replace(/\//g, '-');
        cleaned = cleaned.replace(/--+/g, '-').replace(/^\-|\-$/g, '');
        
        const parts = cleaned.split('-');
        
        const internalParts = parts.map(p => {
            if (p.length > 1 && p[0] === '0') return p.substring(1);
            return p;
        });

        const internalID = internalParts.join('-');

        const displayParts = parts.map(p => {
            return p.length === 1 ? `0${p}` : p; 
        });

        let displayID = 'N/A';
        if (displayParts.length >= 4) {
             displayID = `${displayParts[0]}/${displayParts[1]}-${displayParts[2]}/${displayParts[3]}`; 
        } else {
             displayID = displayParts.join('-'); 
        }
        
        return { internal: internalID, display: displayID }; 
    }


    /**
     * 輔助狀態函數 (保持不變)
     */
    function statusButton(message) {
        statusMessage.textContent = message;
        processButton.disabled = true;
        exportButton.disabled = true;
    }

    function statusError(message) {
        statusMessage.textContent = '🚨 ' + message;
        processButton.disabled = true;
        exportButton.disabled = true;
    }

    function checkProcessingReadiness() {
        let status1 = table1Data.length > 0;
        let status2 = table2Data.length > 0;
        let status3 = table3Data.length > 0;
        
        if (status1 && status2 && status3) {
            processButton.disabled = false;
            statusMessage.textContent = `✅ 表1 (${table1Data.length} 行), 表2 (iOS) (${table2Data.length} 行) 和 表3 (AN) (${table3Data.length} 行) 已成功上傳。可以開始處理。`;
            exportButton.disabled = true;
        } else {
            let pending = [];
            if (!status1) pending.push("表1");
            if (!status2) pending.push("表2 (iOS)");
            if (!status3) pending.push("表3 (AN)");
            statusMessage.textContent = `請上傳所有檔案。缺少: ${pending.join(', ')}`;
            processButton.disabled = true;
            exportButton.disabled = true;
        }
    }


    /**
     * @步驟2：數據讀取與解析 (v37.0：強化終生讀取)
     */
    function handleFileUpload(input, tableIndex) {
        if (!input.files.length) return;
        statusButton(`正在讀取 表${tableIndex} 數據...`);
        
        const file = input.files[0];
        const reader = new FileReader();

        reader.onload = function(e) {
            const data = new Uint8Array(e.target.result);
            try {
                const workbook = XLSX.read(data, { type: 'array' }); 
                const firstSheetName = workbook.SheetNames[0];
                const worksheet = workbook.Sheets[firstSheetName];
                
                const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
                
                const headers = jsonData[0];
                if (!headers || headers.length === 0) {
                    statusError(`表${tableIndex} 讀取失敗：檔案似乎是空的。`);
                    return;
                }
                
                const rows = jsonData.slice(1).map(row => {
                    const obj = {};
                    headers.forEach((header, i) => {
                        const cleanHeader = (header || '').toString().trim(); 
                        obj[cleanHeader] = row[i];
                    });
                    return obj;
                });

                if (tableIndex === 1) {
                    table1Data = jsonDataToStandard(rows, 1); 
                } else if (tableIndex === 2) {
                    table2Data = jsonDataToStandard(rows, 2); // iOS Model
                } else {
                    table3Data = jsonDataToStandard(rows, 3); // AN Model
                }

                checkProcessingReadiness();

            } catch (error) {
                 statusError(`表${tableIndex} 讀取失敗：${error.message}`);
                 console.error("讀取錯誤:", error);
                 if (tableIndex === 1) table1Data = []; 
                 else if (tableIndex === 2) table2Data = [];
                 else table3Data = [];
                 checkProcessingReadiness();
            }
        };

        reader.readAsArrayBuffer(file);
    }

    // 將輸入數據標準化，統一欄位名稱 (v38.0：終生轉 360天)
    function jsonDataToStandard(data, tableIndex) {
        if (!data || data.length === 0) return [];

        const newStandardData = [];
        
        data.forEach(row => {
            if (!row) return; 

            const newRow = {};
            let maxActualDay = 0;
            const tempLTVs = {};
            let explicitPlatform = null; 

            Object.keys(row).forEach(originalKey => {
                const value = row[originalKey];
                const cleanKey = (originalKey || '').toString().trim(); 
                
                if (cleanKey.length === 0) return; 

                const ltvVal = parseFloat(value) || 0; 
                
                let ltvKey = null;

                // 1. 處理 LTV 天數數據 (第X天) - 絕對匹配
                const matchDay = cleanKey.match(/^第(\d+)天$/);
                if (matchDay) { 
                    const dayNum = parseInt(matchDay[1]);
                    ltvKey = cleanKey + 'LTV';
                    if (ltvVal > 0 && tableIndex === 1) {
                        maxActualDay = Math.max(maxActualDay, dayNum);
                    }
                } 
                // 1.5. 處理 '終生' LTV -> 替換為 第360天 LTV (v38.0)
                else if (cleanKey === '終生' || cleanKey.toLowerCase().includes('終生') || cleanKey.toLowerCase().includes('lifetime')) {
                    ltvKey = '第360天LTV';
                }
                // 1.6. **後備處理：讀取舊的 '預估倍數' LTV 欄位（參與最大值比較）**
                else if (cleanKey.includes('預估倍數-')) {
                    const dayMatch = cleanKey.match(/(\d+天|終生)$/); 
                    if (dayMatch) {
                        const dayStr = dayMatch[0].replace('天', '');
                        ltvKey = dayStr === '終生' ? '第360天LTV' : `第${dayStr}LTV`;
                    }
                }
                 // 1.7. **後備處理：讀取 '首日LTV' 欄位（參與最大值比較）**
                else if (cleanKey === '首日LTV') {
                     ltvKey = '第1天LTV';
                }


                if (ltvKey && ltvVal > 0) {
                    if (!tempLTVs[ltvKey]) tempLTVs[ltvKey] = [];
                    tempLTVs[ltvKey].push(ltvVal);
                }
                
                // ----------------------------------------------------
                // 核心欄位處理
                // ----------------------------------------------------
                
                // 2. 表1 核心欄位 (Source)
                if (tableIndex === 1) {
                    if (cleanKey === '日期') newRow['ID'] = (value || '').toString().trim();
                    else if (cleanKey === '平台') {
                        const val = (value || '').toString().toUpperCase();
                        if (val.includes('IOS')) newRow['平台'] = 'iOS';
                        else if (val.includes('AN') || val.includes('ANDROID')) newRow['平台'] = 'AN';
                    }
                    else if (cleanKey === '注册') newRow['獨立註冊'] = ltvVal;
                } 
                // 3. 表2 (iOS Model) / 表3 (AN Model)
                else {
                    // T2 (iOS) / T3 (AN) - 平台預設
                    if (tableIndex === 2) explicitPlatform = 'iOS';
                    if (tableIndex === 3) explicitPlatform = 'AN';
                    
                    // ID 欄位可能是 iOS 或 AN (或日期)
                    if (cleanKey === 'iOS' || cleanKey === 'AN' || cleanKey === '日期') { 
                         newRow['ID'] = (value || '').toString().trim();
                    } 
                    else if (cleanKey === '獨立註冊') {
                        newRow['獨立註冊'] = ltvVal;
                    }
                }
            }); // End of Object.keys(row).forEach

            // 從臨時存儲中取出 LTV 最大值
            let hasLTVData = false;
            for (const key in tempLTVs) {
                const maxLTV = Math.max(...tempLTVs[key]);
                newRow[key] = maxLTV;
                if (maxLTV > 0) hasLTVData = true;
            }

            // 4. 數據整理與過濾
            const idData = cleanDateID(newRow['ID']);
            newRow['第1天LTV'] = newRow['第1天LTV'] || 0;
            newRow['ID'] = newRow['ID'] || 'N/A';
            newRow['獨立註冊'] = newRow['獨立註冊'] || 0;
            newRow['CleanedID'] = idData.internal; 
            newRow['DisplayID'] = idData.display; 

            let isValidRow = false;
            if (tableIndex === 1) { // Source
                newRow['跑出天數'] = maxActualDay;
                if (newRow['平台'] && hasLTVData) {
                    isValidRow = true;
                }
            } else { // Model (T2/T3)
                 if (hasLTVData) {
                    newRow['平台'] = explicitPlatform; 
                    isValidRow = true;
                 }
            }

            if (isValidRow) {
                newStandardData.push(newRow);
            }
        });
        
        return newStandardData;
    }


    /**
     * @步驟3：核心數據處理函數 (使用兩模型表)
     */
    function startProcessing() {
        processButton.disabled = true;
        statusButton('🚀 正在進行數據處理與複雜預估，請稍候...');
        
        table1Data = table1Data.filter(Boolean);
        table2Data = table2Data.filter(Boolean);
        table3Data = table3Data.filter(Boolean);
        
        let processedData = [];

        try {
            // 1. 處理表1：數據預估 (趨勢預估)
            table1Data.forEach(t1DataRow => {
                let processedRow = { ...t1DataRow };
                
                const maxDay = processedRow['跑出天數'];
                let lastDayLTV = 0;
                let lastDay = 0;
                
                NUMERIC_KEY_DAYS_INTERNAL.filter(d => d <= maxDay).forEach(d => {
                    const ltvKey = `第${d}天LTV`; 
                    if (typeof processedRow[ltvKey] === 'number' && processedRow[ltvKey] > 0) { 
                        lastDayLTV = processedRow[ltvKey];
                        lastDay = d;
                        processedRow[`第${d}天預估標記`] = 'Actual';
                    }
                });

                NUMERIC_KEY_DAYS_INTERNAL.filter(keyDay => keyDay > lastDay).forEach(keyDay => {
                    if (maxDay >= 7 && (keyDay - maxDay) < 5 && lastDayLTV > 0) { 
                        
                        let estimatedLTV = 0;
                        const prevKeyDay = NUMERIC_KEY_DAYS_INTERNAL.slice().reverse().find(d => d < lastDay);

                        if (prevKeyDay && processedRow[`第${prevKeyDay}天LTV`] > 0) {
                            
                            const prevLTV = processedRow[`第${prevKeyDay}天LTV`];
                            if (prevLTV > 0) { 
                                const ratio = lastDayLTV / prevLTV;
                                const daysDiff = lastDay - prevKeyDay; 
                                let dailyRate = Math.pow(ratio, 1/daysDiff) || 1.001; 
                                estimatedLTV = lastDayLTV * Math.pow(dailyRate, (keyDay - lastDay));
                                if (!isNaN(estimatedLTV) && isFinite(estimatedLTV) && estimatedLTV > 0) {
                                     processedRow[`第${keyDay}天LTV`] = estimatedLTV;
                                     processedRow[`第${keyDay}天預估標記`] = 'Trend_Est'; 
                                }
                            }
                        } else if (lastDayLTV > 0 && lastDay > 0) {
                            estimatedLTV = lastDayLTV * Math.pow(1.05, (keyDay - lastDay) / lastDay); 
                            if (!isNaN(estimatedLTV) && isFinite(estimatedLTV) && estimatedLTV > 0) {
                                processedRow[`第${keyDay}天LTV`] = estimatedLTV; 
                                processedRow[`第${keyDay}天預估標記`] = 'Base_Est';
                            }
                        }
                    }
                });
                
                processedData.push(processedRow);
            });
            
            processedData = processedData.filter(Boolean);


            // 2. 表1與表2/3對比，計算係數並進行預估
            const finalResults = [];
            
            // 建立模型映射：T2 for iOS, T3 for AN
            const iosModelMap = {};
            table2Data.forEach(row => {
                iosModelMap[row.CleanedID] = row;
            });
            const anModelMap = {};
            table3Data.forEach(row => {
                anModelMap[row.CleanedID] = row;
            });

            processedData.forEach(t1ProcessedRow => {
                
                const originalMaxRunDay = t1ProcessedRow['跑出天數'];
                const platform = t1ProcessedRow['平台'];
                const T1_CLEANED_ID = t1ProcessedRow['CleanedID'];
                
                // **** 模型選擇：直接按平台查找 ID 匹配模型 ****
                let modelRow = null;
                let modelSelectionMethod = 'NO_MODEL_FOUND';

                const currentModelMap = platform === 'iOS' ? iosModelMap : anModelMap;
                const modelCandidates = platform === 'iOS' ? table2Data : table3Data; 
                
                // 1. 優先精確 ID 匹配
                modelRow = currentModelMap[T1_CLEANED_ID];
                if (modelRow) modelSelectionMethod = 'ID_MATCH_SUCCESS';

                // 2. 備援：模糊匹配 (T2/T3 ID 包含在 T1 ID 中)
                if (!modelRow && modelCandidates.length > 0) {
                     modelRow = modelCandidates.find(model => {
                        const T2_CLEANED_ID = model['CleanedID'];
                        return T1_CLEANED_ID.includes(T2_CLEANED_ID);
                    });
                    if(modelRow) modelSelectionMethod = 'FUZZY_ID_MATCH';
                }

                // 3. 備援：LTV Max Fallback (使用該平台 LTV 最大的模型行)
                if (!modelRow && modelCandidates.length > 0) {
                     modelRow = modelCandidates.reduce((max, current) => {
                        const maxLTV = max['第120天LTV'] || 0;
                        const currentLTV = current['第120天LTV'] || 0;
                        return (currentLTV > maxLTV) ? current : max;
                    }, modelCandidates[0]); 
                    modelSelectionMethod = 'LTV_MAX_FALLBACK';
                }
                
                if (!modelRow) {
                     // 最終沒有模型可用
                     finalResults.push({ ...t1ProcessedRow, Coefficient: '1.000', ComparisonNote: `找不到 ${platform} 模型數據`, CoefficientStyle: 'style="color: blue; font-weight: bold;"' });
                     return;
                }
                
                // **** 核心係數計算邏輯 ****
                let maxCommonKeyDay = 0;
                let maxCommonKeyLTV_T1 = 0;
                
                let T1_MaxKeyDay = 0;
                NUMERIC_KEY_DAYS_COMPARE.filter(d => d <= originalMaxRunDay).forEach(d => {
                    const ltvKey = `第${d}天LTV`;
                    const currentLTV_T1 = t1ProcessedRow[ltvKey];
                    const currentLTV_T2 = modelRow[ltvKey];
                    
                    if (typeof currentLTV_T1 === 'number' && currentLTV_T1 > 0 &&
                        typeof currentLTV_T2 === 'number' && currentLTV_T2 > 0) {
                        T1_MaxKeyDay = d;
                    }
                });
                
                maxCommonKeyDay = T1_MaxKeyDay;
                
                if (T1_MaxKeyDay === 0 && originalMaxRunDay >= 1) {
                    const ltvKey = `第1天LTV`;
                    const currentLTV_T1 = t1ProcessedRow[ltvKey];
                    const currentLTV_T2 = modelRow[ltvKey];
                    if (currentLTV_T1 > 0 && currentLTV_T2 > 0) {
                        maxCommonKeyDay = 1;
                    }
                }
                
                if (maxCommonKeyDay > 0) {
                    maxCommonKeyLTV_T1 = t1ProcessedRow[`第${maxCommonKeyDay}天LTV`];
                } else {
                    finalResults.push({ ...t1ProcessedRow, Coefficient: '1.000', ComparisonNote: '找不到共同關鍵天 LTV，無法計算係數' });
                    return;
                }
                
                // T1 數據標記 (Actual)
                let maxCommonKeyTag = 'Actual';
                
                const modelLTV = modelRow[`第${maxCommonKeyDay}天LTV`]; 

                let coefficient = 1.0;
                let comparisonNote = '';
                let coefficientStyle = ''; 

                if (maxCommonKeyDay > 0 && typeof modelLTV === 'number' && modelLTV > 0) {
                    coefficient = maxCommonKeyLTV_T1 / modelLTV;

                    if (isNaN(coefficient) || !isFinite(coefficient)) {
                         coefficient = 1.0; 
                    }

                    // **** 修正：縮短備註文字 ****
                    comparisonNote = `第${maxCommonKeyDay}天係數: ${coefficient.toFixed(3)}`;
                    // **************************

                    // 3. 係數校驗與修正 (項目3)
                    if (coefficient < 0.85 || coefficient > 1.15) {
                        
                        coefficientStyle = 'style="color: red; font-weight: bold;"'; 
                        
                        comparisonNote += ` (${maxCommonKeyTag}, 係數偏差較大)`;

                        const sortedKeyDays = NUMERIC_KEY_DAYS_INTERNAL.filter(d => d < maxCommonKeyDay).sort((a, b) => b - a);
                        const secondMaxKeyDay = sortedKeyDays.length > 0 ? sortedKeyDays[0] : 0;
                        
                        const t1SecondMaxLTV = t1ProcessedRow[`第${secondMaxKeyDay}天LTV`];
                        const t2SecondMaxLTV = modelRow[`第${secondMaxKeyDay}天LTV`];

                        if (secondMaxKeyDay > 0 && t1SecondMaxLTV > 0 && t2SecondMaxLTV > 0) {
                            const t1GrowthFactor = maxCommonKeyLTV_T1 / t1SecondMaxLTV;
                            const t2GrowthFactor = modelLTV / t2SecondMaxLTV;
                            
                            const smoothingFactor = 0.5; 
                            let idealCoefficient = 1.0;
                            if (t2GrowthFactor > 0) {
                                idealCoefficient = (t1GrowthFactor / t2GrowthFactor); 
                            }

                            const finalCoefficient = coefficient * (1 - smoothingFactor) + (idealCoefficient * smoothingFactor); 
                            
                            if (!isNaN(finalCoefficient) && isFinite(finalCoefficient)) {
                                coefficient = finalCoefficient; 
                            }
                        } else {
                            const smoothingFactor = 0.7; 
                            coefficient = coefficient * (1 - smoothingFactor) + (1.0 * smoothingFactor); 
                        }
                    }
                }
                
                // 根據係數和表2數據，算出未跑出的其餘關鍵天數據 (項目2-鑫)
                
                // 1. 預估數值天數
                NUMERIC_KEY_DAYS_INTERNAL.filter(d => d > maxCommonKeyDay).forEach(keyDay => {
                    const modelLTV = modelRow[`第${keyDay}天LTV`];
                    if (typeof modelLTV === 'number' && modelLTV > 0) {
                        const estimatedLTV = modelLTV * coefficient;
                        
                        if (!isNaN(estimatedLTV) && isFinite(estimatedLTV)) {
                             t1ProcessedRow[`第${keyDay}天LTV`] = estimatedLTV;
                             t1ProcessedRow[`第${keyDay}天預估標記`] = 'Model_Est'; 
                        }
                    }
                });

                // 2. 預估 '第360天'
                // 由於 ALL_OUTPUT_COLUMNS 包含 '第360天'，這裡只需要確保第360天的 LTV 被計算即可。
                // 核心邏輯已經在上面 '預估數值天數' 中處理了 keyDay=360 的情況。
                
                // 整理最終結果 (移除 MaxRunDay, Coefficient, 首日LTV)
                let finalNote = comparisonNote; // 獲取係數計算的備註
                
                // 將診斷信息添加到備註中 
                if (modelSelectionMethod !== 'ID_MATCH_SUCCESS' && modelSelectionMethod !== 'FUZZY_ID_MATCH') {
                     finalNote += ` [模型: ${modelSelectionMethod}]`;
                }


                const finalRow = {
                    '日期': t1ProcessedRow['DisplayID'] || 'N/A', 
                    '平台': platform,
                    '獨立註冊': t1ProcessedRow['獨立註冊'] || 0,
                    'CoefficientText': coefficient.toFixed(3),
                    'CoefficientStyle': coefficientStyle,
                    '備註': finalNote, 
                };
                
                // 添加所有 LTV 數據和標記
                ALL_OUTPUT_COLUMNS.forEach(key => {
                    const ltvValKey = key + 'LTV';
                    const tagKey = key + '預估標記';
                    const ltvVal = t1ProcessedRow[ltvValKey];
                    
                    finalRow[key] = (typeof ltvVal === 'number' && ltvVal > 0) ? ltvVal.toFixed(2) : '-';
                    
                    // 檢查 LTV 是否為實際跑出數據：如果是數值天數，且小於等於原始最大運行天數，且有 LTV 值
                    let isActual = false;
                    if (key !== '第360天' && ltvVal > 0) {
                        const currentDayMatch = key.match(/(\d+)/);
                        if (currentDayMatch) {
                            const currentDay = parseInt(currentDayMatch[0]);
                            if (currentDay <= originalMaxRunDay) {
                                isActual = true;
                            }
                        }
                    }

                    finalRow[tagKey] = t1ProcessedRow[tagKey] || (isActual ? 'Actual' : '-');
                });
                
                finalResults.push(finalRow);
            });


            // 4. 顯示結果 (項目6 & 格式優化)
            displayResults(finalResults);
            
            processButton.disabled = false;
            exportButton.disabled = false;
            statusMessage.textContent = '✅ 數據處理與預估完成！結果已顯示在下方。';

        } catch (error) {
             statusError(`致命錯誤：數據處理失敗，原因：${error.message}`);
             console.error("處理錯誤:", error);
             processButton.disabled = false;
             exportButton.disabled = true;
             return;
        }
    }


    /**
     * @步驟4：結果顯示與匯出 (格式優化)
     */
    function displayResults(data) {
        const iosData = data.filter(row => row.平台 === 'iOS');
        const androidData = data.filter(row => row.平台 === 'AN');

        document.getElementById('iosTableContainer').innerHTML = createTableHTML(iosData);
        document.getElementById('androidTableContainer').innerHTML = createTableHTML(androidData);
    }
    
    function createTableHTML(data) {
        if (data.length === 0) return '<p>無數據。</p>';

        let html = '<table><thead><tr>';
        
        // 核心欄位：[日期, 平台, 獨立註冊] + 預估天數 + 備註
        const keyHeaders = ALL_OUTPUT_COLUMNS.map(h => h.replace('第1天', '首日LTV').replace('第360天', '終生'));
        // 調整順序：[日期, 平台, 註冊]
        const fixedHeaders = ['日期', '平台', '獨立註冊']; 
        
        // 輸出標頭
        fixedHeaders.concat(keyHeaders).concat(['備註']).forEach(h => {
            html += `<th>${h.replace('獨立註冊', '註冊')}</th>`; 
        });
        html += '</tr></thead><tbody>';

        data.forEach(row => {
            html += '<tr>';
            
            // 核心欄位
            html += `<td>${row.日期}</td>`; 
            html += `<td>${row.平台}</td>`; 
            html += `<td style="text-align: right;">${row['獨立註冊']}</td>`;

            // LTV 數據和紅色標記
            ALL_OUTPUT_COLUMNS.forEach(key => {
                const tagKey = key + '預估標記';
                const tag = row[tagKey] || '-';
                const displayValue = row[key];

                // 判斷是否為預估值 (Trend_Est, Base_Est, Model_Est)
                const isEstimated = tag !== 'Actual' && tag !== '-';
                const style = isEstimated ? 'style="color: #dc3545; text-align: right;"' : 'style="text-align: right;"'; 

                html += `<td ${style}>${displayValue}</td>`; 
            });
            
            // 備註列 (移動到最後)
            let finalNote = row.備註;
            const styleMatch = finalNote.match(/([\d\.]+)/);
            if (styleMatch) {
                const coefficientText = styleMatch[0];
                const styledCoefficient = `<span ${row.CoefficientStyle}>**${coefficientText}**</span>`;
                // 替換備註中的係數文本
                finalNote = finalNote.replace(coefficientText, styledCoefficient);
                // 移除係數標記後面的多餘文字 (但保留診斷信息)
                finalNote = finalNote.split(' (')[0] + (row.備註.includes('[模型:') ? row.備註.substring(row.備註.indexOf(' [模型:')) : '');
            }
            
            html += `<td style="font-size: 0.8em; text-align: left;">${finalNote || '-'}</td>`;

            html += '</tr>';
        });
        
        html += '</tbody></table>';
        return html;
    }


    /**
     * @步驟7：一鍵匯出整個頁面的數據 (保持不變)
     */
    function exportData() {
        if (exportButton.disabled) return;
        
        const iosContainer = document.getElementById('iosTableContainer');
        const androidContainer = document.getElementById('androidTableContainer');

        const iosTableHTML = iosContainer.querySelector('table');
        const androidTableHTML = androidContainer.querySelector('table');
        
        if (!iosTableHTML && !androidTableHTML) {
             alert('沒有可匯出的數據！');
             return;
        }

        const wb = XLSX.utils.book_new();

        const tableToSheet = (table, sheetName) => {
             if (table) {
                const ws = XLSX.utils.table_to_sheet(table);
                XLSX.utils.book_append_sheet(wb, ws, sheetName);
             }
        };

        tableToSheet(iosTableHTML, 'iOS_預估結果');
        tableToSheet(androidTableHTML, 'Android_預估結果');
        
        const filename = "數據預估結果_" + new Date().toISOString().slice(0, 10).replace(/-/g, '') + ".xlsx";
        XLSX.writeFile(wb, filename);
    }

</script>

</body>
</html>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>手游LTV倍数智能预估 V12 (黄鱼版)</title>
    
    <link rel="preconnect" href="https://registry.npmmirror.com">

    <style>
        /* --- 样式保持 V11 不变 --- */
        * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; padding: 15px; background: #f4f7f6; color: #333; margin: 0; }
        .container { max-width: 100%; margin: 0 auto; background: white; padding: 20px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
        
        .header-row { display: flex; align-items: center; justify-content: space-between; border-bottom: 2px solid #eee; padding-bottom: 15px; margin-bottom: 20px; flex-wrap: nowrap; }
        .title-group { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
        h1 { margin: 0; font-size: 20px; color: #2c3e50; white-space: nowrap; }
        .author { font-size: 12px; color: #7f8c8d; background: #eee; padding: 2px 8px; border-radius: 4px; white-space: nowrap; }
        .help-btn { cursor: pointer; background: #3498db; color: white; border-radius: 50%; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: bold; flex-shrink: 0; margin-left: 5px; }
        
        .btn-action { background-color: #27ae60; color: white; border: none; padding: 10px 15px; border-radius: 6px; cursor: pointer; font-size: 14px; white-space: nowrap; transition: 0.2s; }
        .btn-action:hover { background-color: #219150; }
        .btn-action:disabled { background-color: #ccc; cursor: not-allowed; }

        .upload-box { border: 2px dashed #ccc; background: #f9f9f9; padding: 25px; text-align: center; border-radius: 8px; transition: all 0.3s; cursor: not-allowed; position: relative; overflow: hidden; }
        .upload-box.ready { border-color: #3498db; background: #f0f8ff; cursor: pointer; }
        .upload-box.ready:active { background: #e1f0fa; }
        .upload-text h3 { margin: 0; font-size: 18px; color: #7f8c8d; transition: color 0.3s; }
        .upload-text p { margin: 5px 0 0; font-size: 12px; color: #999; }
        .upload-box.ready .upload-text h3 { color: #333; }
        .loading-bar { position: absolute; bottom: 0; left: 0; height: 4px; background: #3498db; width: 0%; transition: width 0.5s; opacity: 1; }

        .section-header { display: flex; align-items: baseline; justify-content: flex-start; gap: 15px; margin-top: 30px; margin-bottom: 15px; }
        h2 { font-size: 16px; margin: 0; border-left: 5px solid #3498db; padding-left: 10px; color: #2c3e50; white-space: nowrap; }
        .sub-text { color: #666; font-size: 12px; white-space: nowrap; }

        .table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid #eee; border-radius: 4px; background: #fff; }
        table { width: 100%; border-collapse: collapse; font-size: 12px; white-space: nowrap; }
        th, td { border: 1px solid #ddd; padding: 10px 6px; text-align: center; }
        th { background: #34495e; color: white; position: sticky; top: 0; z-index: 10; font-weight: normal; }
        tr:nth-child(even) { background-color: #f9f9f9; }
        
        .val-reg { font-weight: bold; color: #333; background-color: #f0f0f0; }
        .val-day1 { font-weight: bold; color: #2980b9; }
        .val-lifetime { font-weight: bold; color: #c0392b; background-color: #fff5f5; }
        .pred-cohort { color: #d35400; background-color: #fff3cd; } 
        .pred-global { color: #2980b9; background-color: #e8f4fd; } 
        .pred-curve { color: #8e44ad; background-color: #f3e5f5; font-weight: bold; }

        #changelogModal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 2000; }
        .modal-content { background: white; width: 90%; max-width: 500px; margin: 20vh auto; padding: 20px; border-radius: 8px; position: relative; }
        .close-modal { position: absolute; right: 15px; top: 10px; font-size: 24px; cursor: pointer; color: #999; }
        
        /* 离线加速指引 */
        .offline-tip { margin-top: 15px; font-size: 12px; color: #888; text-align: center; background: #fdfdfd; padding: 10px; border: 1px solid #eee; border-radius: 4px;}
        .offline-link { color: #3498db; text-decoration: underline; cursor: pointer; }

        @media screen and (max-width: 768px) {
            .container { padding: 15px; border-radius: 0; box-shadow: none; }
            .header-row { flex-direction: column; align-items: stretch; gap: 15px; }
            .title-group { width: 100%; justify-content: flex-start; position: relative; }
            .author { margin-left: auto; font-size: 11px; }
            .btn-action { width: 100%; text-align: center; padding: 12px; font-size: 15px; }
            .section-header { flex-direction: column; align-items: flex-start; gap: 5px; }
            .sub-text { margin-left: 0; color: #888; font-size: 11px; }
            h1 { font-size: 18px; }
        }
    </style>
</head>
<body>

<div class="container">
    <div class="header-row">
        <div class="title-group">
            <h1>手游LTV倍数智能预估 V12</h1>
            <span class="help-btn" onclick="toggleModal(true)">?</span>
            <span class="author">作者：三只小黄鱼</span>
        </div>
        <div>
            <button id="btnDownload" class="btn-action" onclick="exportToCSV()" disabled>📥 导出日预估表</button>
        </div>
    </div>

    <div id="uploadBox" class="upload-box" onclick="triggerUpload()">
        <div class="upload-text">
            <h3 id="uploadTitle">🚀 正在从镜像源加载... (15s)</h3>
            <p id="uploadDesc">如长时间无反应，请使用下方的“离线加速包”</p>
        </div>
        <div class="loading-bar" id="loadingBar"></div>
        <input type="file" id="fileInput" onchange="handleFile(this.files)" style="display:none">
    </div>

    <div class="offline-tip">
        🐢 觉得加载慢？
        <a href="https://registry.npmmirror.com/xlsx/0.18.5/files/dist/xlsx.full.min.js" download="xlsx.full.min.js" class="offline-link" target="_blank">👉 点此下载离线包 (xlsx.full.min.js)</a>
        <br>将下载文件放在与本工具<strong>同一文件夹</strong>内，即可<strong>0秒打开</strong>。
    </div>

    <div id="resultSection" style="display:none;">
        <div class="section-header">
            <h2>📅 每日详细预估</h2>
        </div>
        <div class="table-container">
            <table id="dailyTable"><thead></thead><tbody></tbody></table>
        </div>

        <div class="section-header">
            <h2>📊 每周加权汇总</h2>
            <span class="sub-text">*根据注册数加权计算 (周一至周日)</span>
        </div>
        <div class="table-container">
            <table id="weeklyTable"><thead></thead><tbody></tbody></table>
        </div>
    </div>
</div>

<div id="changelogModal">
    <div class="modal-content">
        <span class="close-modal" onclick="toggleModal(false)">×</span>
        <h3 style="margin-top:0;">📜 更新记录</h3>
        <ul style="font-size:13px; line-height: 1.6; color:#555; padding-left: 20px;">
            <li><strong>V12 (Speed+):</strong> 切换至 npmmirror 极速源；增加离线模式支持。</li>
            <li><strong>V11 (Logic):</strong> 强制设定“周一”为每周第一天，修复周日归属问题。</li>
            <li><strong>V10 (UI):</strong> 增加倒计时；日期格式化；文案修正。</li>
            <li><strong>V9 (Clean):</strong> 修复表格底部出现空行(Null/NaN)的问题；优化电脑端说明文字排版。</li>
            <li><strong>V8 (Speed):</strong> 异步加载核心库，页面秒开。</li>
            <li><strong>V7 (Mobile):</strong> 手机竖屏适配优化。</li>
            <li><strong>V6:</strong> 增加注册数录入、终生LTV计算；增加周加权报表；格式化小数位。</li>
            <li><strong>V5:</strong> 引入对数回归 (Log Regression) 修复长尾停滞问题；精简输出列。</li>
            <li><strong>V4:</strong> 优化算法参数 (Tolerance=5%, Decay=0.8)；增加 CSV 导出。</li>
            <li><strong>V3:</strong> 引入特徵匹配 (Cohort) 与增量衰减逻辑。</li>
            <li><strong>V2:</strong> 支援 Excel 自动日期转换；初步链式预估。</li>
            <li><strong>V1:</strong> 基础 HTML 工具，手动输入。</li>
            <br>
           <div style="text-align: center;"><strong>	微信公众号：三只小黄鱼</strong> </div>       
        </ul>
    </div>
</div>

<script>
    // === 倒计时逻辑 ===金金金
    let loadingCountdown = 15;
    const titleEl = document.getElementById('uploadTitle');
    const timer = setInterval(() => {
        if (!document.getElementById('uploadBox').classList.contains('ready')) {
            loadingCountdown--;
            if (loadingCountdown > 0) {
                titleEl.innerText = `🚀 正在加载计算引擎... (${loadingCountdown}s)`;
            } else {
                titleEl.innerText = `⏳ 仍在努力加载... 建议下载离线包`;
            }
        }
    }, 1000);

    function toggleModal(show) { document.getElementById('changelogModal').style.display = show ? 'block' : 'none'; }
    function triggerUpload() { if (document.getElementById('uploadBox').classList.contains('ready')) document.getElementById('fileInput').click(); }
    
    function onEngineLoaded() {
        clearInterval(timer);
        const box = document.getElementById('uploadBox');
        const bar = document.getElementById('loadingBar');
        bar.style.width = '100%';
        setTimeout(() => {
            box.classList.add('ready');
            document.getElementById('uploadTitle').innerText = '📂 点击上传 Excel文件';
            document.getElementById('uploadDesc').innerText = '支持自动识别注册数、首日LTV、关键天倍数';
            bar.style.opacity = '0';
        }, 300);
    }
</script>

<script src="xlsx.full.min.js" onload="onEngineLoaded()" onerror="loadFromCDN()"></script>

<script>
    function loadFromCDN() {
        console.log("Local file not found, loading from CDN...");
        var script = document.createElement('script');
        // 使用 npmmirror 淘宝镜像源，国内速度极快
        script.src = 'https://registry.npmmirror.com/xlsx/0.18.5/files/dist/xlsx.full.min.js';
        script.onload = onEngineLoaded;
        script.onerror = function() {
            alert("CDN 加载失败，请检查网络或下载离线包。");
        };
        document.body.appendChild(script);
    }
</script>

<script>
    const CALC_DAYS = [1, 2, 3, 4, 5, 6, 7, 14, 15, 30, 45, 60, 90, 120, 150, 180, 270, 360];
    const DISPLAY_MULTIPLIERS = [3, 7, 15, 30, 45, 60, 90, 120, 150, 180, 270];
    const COHORT_TOLERANCE = 0.05; 
    const DECAY_RATE = 0.80;

    let globalDailyData = []; 

    function handleFile(files) {
        if (files.length === 0) return;
        document.getElementById('uploadTitle').innerText = '⏳ 正在极速运算中...';
        setTimeout(() => {
            const reader = new FileReader();
            reader.onload = function(e) {
                try {
                    const data = new Uint8Array(e.target.result);
                    const workbook = XLSX.read(data, {type: 'array'});
                    const jsonData = XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]], {header: 1, defval: null});
                    processData(jsonData);
                    document.getElementById('uploadTitle').innerText = '✅ 计算完成！点击重新上传';
                } catch (err) { 
                    alert("读取失败: " + err.message); 
                    document.getElementById('uploadTitle').innerText = '📂 点击上传 Excel文件';
                }
            };
            reader.readAsArrayBuffer(files[0]);
        }, 50);
    }

    function processData(rawData) {
        if (rawData.length < 2) return;
        const headers = rawData[0];
        const rows = rawData.slice(1);
        
        let colMap = {};
        let regIdx = -1; 
        
        headers.forEach((h, i) => {
            let str = String(h).trim().toLowerCase();
            let m = str.match(/day\s*(\d+)/i) || str.match(/(\d+)日/);
            if (m) { colMap[parseInt(m[1])] = i; } 
            else if (str.match(/^\d+$/)) { colMap[parseInt(str)] = i; }
            if (str.includes('首日') || str === 'day1' || str === 'ltv') { colMap[1] = i; }
            if (str.includes('注册') || str.includes('新增') || str.includes('用户') || str === 'reg') { regIdx = i; }
        });

        let allDays = CALC_DAYS;
        
        let cleanRows = rows.map(r => {
            let dStr = r[0];
            if(typeof dStr === 'number') {
                dStr = new Date((dStr - 25569)*86400*1000).toISOString().split('T')[0];
            } else if (!dStr) { return null; }
            
            let regNum = 1;
            if (regIdx !== -1) { let val = parseInt(r[regIdx]); if (!isNaN(val)) regNum = val; }
            
            let vals = {};
            let hasValidData = false;
            for(let d of allDays) {
                if(colMap[d] !== undefined) {
                    let v = parseFloat(r[colMap[d]]);
                    if(!isNaN(v)) { vals[d] = v; hasValidData = true; }
                }
            }
            if (!hasValidData && !dStr) return null;
            return { date: dStr, reg: regNum, values: vals, predicted: {}, predMethod: {} };
        })
        .filter(r => r !== null && r.date);

        cleanRows.forEach(row => {
            row.ratios = {};
            for(let i=0; i<allDays.length-1; i++) {
                let d1 = allDays[i], d2 = allDays[i+1];
                if(row.values[d1] && row.values[d2] && row.values[d1]!==0) {
                    row.ratios[`${d1}->${d2}`] = row.values[d2] / row.values[d1];
                }
            }
        });

        cleanRows.forEach(row => {
            let lastDay = 0;
            allDays.forEach(d => { if(row.values[d] !== undefined) lastDay = d; });
            if(lastDay === 0) return;
            let startIdx = allDays.indexOf(lastDay);
            for(let i = startIdx; i < allDays.length - 1; i++) {
                let dCurr = allDays[i];
                let dNext = allDays[i+1];
                let valCurr = row.values[dCurr] || row.predicted[dCurr];
                let bestVal = null;
                let method = "";

                if (i > 0) {
                    let dPrev = allDays[i-1];
                    let valPrev = row.values[dPrev] || row.predicted[dPrev];
                    if(valPrev && valPrev!==0) {
                        let myPrevRatio = valCurr / valPrev;
                        let similarRatios = [];
                        cleanRows.forEach(r => {
                            let hPrev = r.ratios[`${dPrev}->${dCurr}`];
                            let hNext = r.ratios[`${dCurr}->${dNext}`];
                            if(hPrev && hNext && Math.abs(hPrev - myPrevRatio)/myPrevRatio <= COHORT_TOLERANCE) {
                                similarRatios.push(hNext);
                            }
                        });
                        if(similarRatios.length > 0) {
                            let avgRatio = similarRatios.reduce((a,b)=>a+b,0) / similarRatios.length;
                            bestVal = valCurr * avgRatio;
                            method = `相似`;
                        }
                    }
                }
                if (bestVal === null) {
                    let globalRatios = [];
                    cleanRows.forEach(r => { if(r.ratios[`${dCurr}->${dNext}`]) globalRatios.push(r.ratios[`${dCurr}->${dNext}`]); });
                    if(globalRatios.length > 0) {
                        let avgRatio = globalRatios.reduce((a,b)=>a+b,0) / globalRatios.length;
                        bestVal = valCurr * avgRatio;
                        method = "全局";
                    }
                }
                if (bestVal === null) {
                    let pointsX = [], pointsY = [];
                    allDays.forEach(d => {
                        if (d <= dCurr) {
                            let v = row.values[d] || row.predicted[d];
                            if (v) { pointsX.push(d); pointsY.push(v); }
                        }
                    });
                    if (pointsX.length >= 2) {
                        let predCurveVal = fitLogCurve(pointsX, pointsY, dNext);
                        bestVal = Math.max(predCurveVal, valCurr);
                        method = "拟合";
                    } else {
                        bestVal = valCurr;
                        method = "停滞";
                    }
                }
                row.predicted[dNext] = bestVal;
                row.predMethod[dNext] = method;
                if(!row.values[dNext]) row.values[dNext] = bestVal;
            }
        });

        globalDailyData = cleanRows;
        renderDailyTable(cleanRows);
        renderWeeklyTable(cleanRows);
        document.getElementById('resultSection').style.display = 'block';
        document.getElementById('btnDownload').disabled = false;
    }

    function fitLogCurve(xArr, yArr, xTarget) {
        let n = xArr.length;
        let sumLnX = 0, sumY = 0, sumLnX_Y = 0, sumLnX_Sq = 0;
        for (let i = 0; i < n; i++) {
            let lnx = Math.log(xArr[i]);
            let y = yArr[i];
            sumLnX += lnx;
            sumY += y;
            sumLnX_Y += (lnx * y);
            sumLnX_Sq += (lnx * lnx);
        }
        let b = (n * sumLnX_Y - sumLnX * sumY) / (n * sumLnX_Sq - sumLnX * sumLnX);
        let a = (sumY - b * sumLnX) / n;
        return a + b * Math.log(xTarget);
    }

    function renderDailyTable(rows) {
        const thead = document.querySelector('#dailyTable thead');
        const tbody = document.querySelector('#dailyTable tbody');
        
        let hHtml = `<tr>
            <th style="left:0; z-index:20;">日期</th>
            <th class="val-reg">注册数</th>
            <th class="val-day1">首日LTV</th>`;
        DISPLAY_MULTIPLIERS.forEach(d => {
            let title = `Day ${d}`;
            if (d === 270) title = "终生倍数";
            hHtml += `<th>${title}</th>`;
        });
        hHtml += `<th class="val-lifetime">终生LTV</th></tr>`;
        thead.innerHTML = hHtml;

        let bHtml = "";
        rows.forEach(r => {
            let day1 = r.values[1] || 0;
            let day270 = r.values[270] || 0;
            let lifetimeLTV = day1 * day270;

            bHtml += `<tr>
                <td style="position:sticky; left:0; background:#fff; font-weight:bold;">${r.date}</td>
                <td class="val-reg">${r.reg}</td>
                <td class="val-day1">${day1.toFixed(2)}</td>`;
            DISPLAY_MULTIPLIERS.forEach(d => {
                let val = r.values[d];
                let isPred = r.predicted[d] !== undefined;
                let method = r.predMethod[d];
                if (val === undefined) { bHtml += `<td>-</td>`; } 
                else {
                    let num = val.toFixed(1);
                    if (isPred) {
                        let cls = method.includes("拟合") ? "pred-curve" : (method.includes("相似") ? "pred-cohort" : "pred-global");
                        bHtml += `<td class="${cls}" title="${method}">${num}</td>`;
                    } else { bHtml += `<td>${num}</td>`; }
                }
            });
            bHtml += `<td class="val-lifetime">${lifetimeLTV.toFixed(2)}</td></tr>`;
        });
        tbody.innerHTML = bHtml;
    }

    // 周一修正版：获取该日期所在周的【周一】作为Key
    function getMondayKey(dStr) {
        let d = new Date(dStr.replace(/-/g, '/'));
        if (isNaN(d)) return null;
        let day = d.getDay() || 7; // 周日设为7
        if (day !== 1) {
            d.setHours(-24 * (day - 1)); // 倒退回周一
        }
        let year = d.getFullYear();
        let month = ('0' + (d.getMonth() + 1)).slice(-2);
        let date = ('0' + d.getDate()).slice(-2);
        return `${year}-${month}-${date}`;
    }

    function formatWeekLabel(mondayStr) {
        let monday = new Date(mondayStr.replace(/-/g, '/'));
        let sunday = new Date(monday);
        sunday.setDate(monday.getDate() + 6);
        let m = monday.getMonth() + 1;
        let d = monday.getDate();
        let sm = sunday.getMonth() + 1;
        let sd = sunday.getDate();
        return `${m}/${d}-${sm}/${sd}`;
    }

    function renderWeeklyTable(rows) {
        let weeklyData = {};
        rows.forEach(r => {
            let mondayKey = getMondayKey(r.date);
            if (!mondayKey) return; 

            if (!weeklyData[mondayKey]) {
                weeklyData[mondayKey] = { regTotal: 0, revenueDay1: 0, revenueDays: {}, dates: [] };
                DISPLAY_MULTIPLIERS.forEach(d => weeklyData[mondayKey].revenueDays[d] = 0);
                weeklyData[mondayKey].revenueDays[270] = 0; 
            }
            let g = weeklyData[mondayKey];
            g.dates.push(r.date);
            g.regTotal += r.reg;
            let day1 = r.values[1] || 0;
            let currentDay1Rev = r.reg * day1;
            g.revenueDay1 += currentDay1Rev;
            DISPLAY_MULTIPLIERS.forEach(d => {
                let mult = r.values[d] || 0;
                g.revenueDays[d] += (currentDay1Rev * mult);
            });
        });

        const thead = document.querySelector('#weeklyTable thead');
        const tbody = document.querySelector('#weeklyTable tbody');
        let hHtml = `<tr>
            <th style="left:0; z-index:20;">周期</th>
            <th class="val-reg">总注册</th>
            <th class="val-day1">首日LTV</th>`; 
        DISPLAY_MULTIPLIERS.forEach(d => {
            let title = `Day ${d}`;
            if (d === 270) title = "终生倍数";
            hHtml += `<th>${title}</th>`;
        });
        hHtml += `<th class="val-lifetime">终生LTV</th></tr>`;
        thead.innerHTML = hHtml;

        let bHtml = "";
        Object.keys(weeklyData).sort().forEach(mondayKey => {
            let g = weeklyData[mondayKey];
            let displayLabel = formatWeekLabel(mondayKey);

            let weightedDay1 = g.regTotal > 0 ? (g.revenueDay1 / g.regTotal) : 0;
            let lifetimeRevenue = g.revenueDays[270];
            let weightedLifetimeLTV = g.regTotal > 0 ? (lifetimeRevenue / g.regTotal) : 0;

            bHtml += `<tr>
                <td style="position:sticky; left:0; background:#fff; font-weight:bold;">${displayLabel}</td>
                <td class="val-reg">${g.regTotal}</td>
                <td class="val-day1">${weightedDay1.toFixed(2)}</td>`;
            DISPLAY_MULTIPLIERS.forEach(d => {
                let totalRevN = g.revenueDays[d];
                let weightedMult = g.revenueDay1 > 0 ? (totalRevN / g.revenueDay1) : 0;
                bHtml += `<td>${weightedMult.toFixed(1)}</td>`;
            });
            bHtml += `<td class="val-lifetime">${weightedLifetimeLTV.toFixed(2)}</td></tr>`;
        });
        tbody.innerHTML = bHtml;
    }

    function exportToCSV() {
        if(!globalDailyData.length) return;
        let csv = "\uFEFF"; 
        let header = ["日期", "注册数", "首日LTV"];
        DISPLAY_MULTIPLIERS.forEach(d => header.push(d===270 ? "终生倍数(预估)" : `Day ${d}`));
        header.push("终生LTV(预估)");
        csv += header.join(",") + "\n";
        globalDailyData.forEach(r => {
            let day1 = r.values[1] || 0;
            let day270 = r.values[270] || 0;
            let lifetime = day1 * day270;
            let row = [r.date, r.reg, day1.toFixed(2)];
            DISPLAY_MULTIPLIERS.forEach(d => {
                let v = r.values[d] || 0;
                row.push(v.toFixed(1));
            });
            row.push(lifetime.toFixed(2));
            csv += row.join(",") + "\n";
        });
        const link = document.createElement("a");
        link.href = URL.createObjectURL(new Blob([csv], { type: 'text/csv;charset=utf-8;' }));
        link.download = "LTV_Prediction_V12_Daily.csv";
        link.click();
    }
</script>

</body>
</html>


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>数据趋势增幅对比工具 (黄鱼版)</title>
    
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
      tailwind.config = {
        theme: {
          extend: {
            colors: {
              primary: '#2563eb',
              secondary: '#475569',
              danger: '#ef4444',
              success: '#22c55e',
            }
          }
        }
      }
    </script>

    <!-- React Dependencies (UMD) -->
    <script crossorigin src="https://unpkg.com/prop-types@15.8.1/prop-types.min.js"></script>
    <script crossorigin src="https://unpkg.com/react@18.2.0/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/recharts@2.10.3/umd/Recharts.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

    <!-- XLSX -->
    <script src="https://cdn.sheetjs.com/xlsx-0.20.1/package/dist/xlsx.full.min.js"></script>
    <script>
        if (!window.XLSX) {
             console.warn("XLSX loading...");
        }
    </script>

    <style>
      ::-webkit-scrollbar { width: 6px; height: 6px; }
      ::-webkit-scrollbar-track { background: #f1f5f9; }
      ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
      ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
      body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
      .fade-in { animation: fadeIn 0.3s ease-in-out; }
      @keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
      .chart-legend-item { @apply flex items-center gap-1 cursor-pointer select-none px-2 py-1 rounded hover:bg-slate-100 border border-transparent transition-colors; }
      .chart-legend-item.active { @apply bg-blue-50 border-blue-200 text-blue-700 shadow-sm; }
    </style>
<script type="importmap">
{
  "imports": {
    "react/": "https://aistudiocdn.com/react@^19.2.1/",
    "react": "https://aistudiocdn.com/react@^19.2.1",
    "react-dom/": "https://aistudiocdn.com/react-dom@^19.2.1/",
    "lucide-react": "https://aistudiocdn.com/lucide-react@^0.556.0",
    "recharts": "https://aistudiocdn.com/recharts@^3.5.1"
  }
}
</script>
</head>
<body class="bg-slate-50 text-slate-900 antialiased selection:bg-blue-100">
    <div id="root"></div>

    <script type="text/babel">
        const { useState, useMemo, useEffect, useRef } = React;
        const { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, ReferenceLine } = Recharts;

        // --- ICONS ---
        const Icon = ({ children, size=16, className="", ...props }) => (
            <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className} {...props}>{children}</svg>
        );
        const Icons = {
            Upload: (p) => <Icon {...p}><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" x2="12" y1="3" y2="15"/></Icon>,
            FileSpreadsheet: (p) => <Icon {...p}><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M8 13h2"/><path d="M8 17h2"/><path d="M14 13h2"/><path d="M14 17h2"/></Icon>,
            ArrowUpCircle: (p) => <Icon {...p}><circle cx="12" cy="12" r="10"/><path d="m16 12-4-4-4 4"/><path d="M12 16V8"/></Icon>,
            ArrowDownCircle: (p) => <Icon {...p}><circle cx="12" cy="12" r="10"/><path d="m8 12 4 4 4-4"/><path d="M12 8v8"/></Icon>,
            AlertCircle: (p) => <Icon {...p}><circle cx="12" cy="12" r="10"/><line x1="12" x2="12" y1="8" y2="12"/><line x1="12" x2="12.01" y1="16" y2="16"/></Icon>,
            Calendar: (p) => <Icon {...p}><rect width="18" height="18" x="3" y="4" rx="2" ry="2"/><line x1="16" x2="16" y1="2" y2="6"/><line x1="8" x2="8" y1="2" y2="6"/><line x1="3" x2="21" y1="10" y2="10"/></Icon>,
            RefreshCw: (p) => <Icon {...p}><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M8 16H3v5"/></Icon>,
            BarChart3: (p) => <Icon {...p}><path d="M3 3v18h18"/><path d="M18 17V9"/><path d="M13 17V5"/><path d="M8 17v-3"/></Icon>,
            Layers: (p) => <Icon {...p}><path d="m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z"/><path d="m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65"/><path d="m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65"/></Icon>,
            Pencil: (p) => <Icon {...p}><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></Icon>,
            Check: (p) => <Icon {...p}><path d="M20 6 9 17l-5-5"/></Icon>,
            X: (p) => <Icon {...p}><path d="M18 6 6 18"/><path d="m6 6 12 12"/></Icon>,
            HelpCircle: (p) => <Icon {...p}><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><path d="M12 17h.01"/></Icon>,
            Activity: (p) => <Icon {...p}><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></Icon>,
            Eye: (p) => <Icon {...p}><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></Icon>,
            EyeOff: (p) => <Icon {...p}><path d="M9.88 9.88a3 3 0 1 0 4.24 4.24"/><path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68"/><path d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61"/><line x1="2" x2="22" y1="2" y2="22"/></Icon>
        };

        // --- CONSTANTS ---
        const KEY_METRICS_DAYS = [1, 3, 7, 15, 30, 45, 60, 90, 120, 180, 360];
        const COLORS = [
            '#e6194b', '#3cb44b', '#ffe119', '#4363d8', '#f58231', 
            '#911eb4', '#46f0f0', '#f032e6', '#bcf60c', '#fabebe', 
            '#008080', '#e6beff', '#9a6324', '#fffac8', '#800000', 
            '#aaffc3', '#808000', '#ffd8b1', '#000075', '#808080'
        ];

        // --- UTILS ---

        const readExcelFile = (file) => {
            return new Promise((resolve, reject) => {
                const reader = new FileReader();
                reader.onload = (e) => {
                    try {
                        const data = e.target.result;
                        if (!window.XLSX) {
                            reject(new Error("XLSX library not loaded"));
                            return;
                        }
                        const workbook = window.XLSX.read(data, { type: 'binary' });
                        const firstSheetName = workbook.SheetNames[0];
                        const worksheet = workbook.Sheets[firstSheetName];
                        const jsonData = window.XLSX.utils.sheet_to_json(worksheet, { header: 1 });
                        resolve(parseRawArray(jsonData));
                    } catch (err) {
                        reject(err);
                    }
                };
                reader.onerror = reject;
                reader.readAsBinaryString(file);
            });
        };

        const parseRawArray = (rows) => {
            const result = [];
            if (rows.length < 2) return result;

            let headerRowIndex = -1;
            for (let i = 0; i < Math.min(rows.length, 10); i++) {
                const rowStr = rows[i].join(' ').toLowerCase();
                if (rowStr.includes('date') || rowStr.includes('日期')) {
                    headerRowIndex = i;
                    break;
                }
            }
            if (headerRowIndex === -1) headerRowIndex = 0;

            const headers = rows[headerRowIndex].map(String);
            const dateIdx = headers.findIndex(h => h.toLowerCase().includes('date') || h.includes('日期'));
            const regIdx = headers.findIndex(h => h.toLowerCase().includes('reg') || h.includes('注册'));

            if (dateIdx === -1 || regIdx === -1) return [];

            const dayColumns = [];
            headers.forEach((h, idx) => {
                if (idx === regIdx || idx === dateIdx) return;
                const match = h.match(/(\d+)/);
                if (match) {
                    const day = parseInt(match[1], 10);
                    if (day > 0) {
                        dayColumns.push({ day, index: idx });
                    }
                }
            });

            for (let i = headerRowIndex + 1; i < rows.length; i++) {
                const row = rows[i];
                if (!row || row.length === 0) continue;

                const rawDate = row[dateIdx];
                let dateStr = '';
                if (typeof rawDate === 'number') {
                    const excelEpoch = new Date(1899, 11, 30);
                    const d = new Date(excelEpoch.getTime() + rawDate * 24 * 60 * 60 * 1000);
                    dateStr = d.toISOString().split('T')[0];
                } else {
                    const d = new Date(String(rawDate));
                    if (!isNaN(d.getTime())) {
                        dateStr = d.toISOString().split('T')[0];
                    } else {
                        dateStr = String(rawDate).trim();
                    }
                }
                
                if (!dateStr || dateStr === 'Invalid Date' || dateStr.length < 5) continue;
                const reg = parseFloat(String(row[regIdx]));
                if (isNaN(reg)) continue;

                const days = {};
                let maxDay = 0;
                dayColumns.forEach(({ day, index }) => {
                    const val = parseFloat(String(row[index]));
                    if (!isNaN(val)) {
                        days[day] = val;
                        maxDay = Math.max(maxDay, day);
                    }
                });

                result.push({ date: dateStr, reg, days, maxDay });
            }
            return result.sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime());
        };

        const formatNumber = (val, decimals = 2) => {
             if (val === null || isNaN(val)) return '-';
             return val.toFixed(decimals);
        };

        const formatPercent = (val, decimals = 2) => {
            if (val === null || isNaN(val)) return '-';
            return `${(val * 100).toFixed(decimals)}%`;
        };

        const generateExampleData = () => {
            const header = ['日期', '注册', ...Array.from({length: 30}, (_, i) => `第${i+1}天`)];
            const rows = [header];
            const baseReg = 1000;
            const today = new Date();
            for (let i = 0; i < 15; i++) {
                const d = new Date(today);
                d.setDate(d.getDate() - (15 - i));
                const dateStr = d.toISOString().split('T')[0];
                const reg = baseReg + Math.floor(Math.random() * 200);
                const row = [dateStr, reg];
                let currentVal = 0.5 + (Math.random() * 0.1); 
                const dataLength = 30 - i;
                for (let j = 1; j <= 30; j++) {
                    if (j > dataLength) row.push('');
                    else {
                        const growth = 1.05 + (Math.random() * 0.05);
                        currentVal = currentVal * growth;
                        row.push(parseFloat(currentVal.toFixed(2)));
                    }
                }
                rows.push(row);
            }
            return rows;
        };

        // --- WEIGHTED LOGIC (STRICT) ---
        const calculateWeightedData = (rows, startDate, endDate) => {
            const filteredRows = rows.filter(r => r.date >= startDate && r.date <= endDate);
            const resultMap = new Map();

            if (filteredRows.length === 0) return resultMap;

            const globalMaxDay = Math.max(...filteredRows.map(r => r.maxDay), 0);
            
            const totalReg = filteredRows.reduce((acc, r) => acc + r.reg, 0);
            resultMap.set(0, totalReg);

            let numD1 = 0;
            let denD1 = 0;
            filteredRows.forEach(r => {
                if (r.days[1] !== undefined && r.maxDay >= 1) {
                    numD1 += r.reg * r.days[1];
                    denD1 += r.reg;
                }
            });
            const wD1 = denD1 > 0 ? numD1 / denD1 : 0;
            if (denD1 > 0) resultMap.set(1, wD1);

            for (let day = 2; day <= globalMaxDay; day++) {
                let num = 0;
                let den = 0;
                let hasData = false;

                filteredRows.forEach(r => {
                    const d1 = r.days[1];
                    const dn = r.days[day];
                    const isStable = r.maxDay > day;

                    if (d1 !== undefined && dn !== undefined && isStable) {
                        const weight = r.reg * d1; 
                        num += weight * dn;
                        den += weight;
                        hasData = true;
                    }
                });

                if (hasData && den > 0) {
                    resultMap.set(day, num / den);
                }
            }
            return resultMap;
        };

        // --- COMPONENTS ---

        const Modal = ({ isOpen, onClose, title, children }) => {
            if (!isOpen) return null;
            return (
                <div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/50 p-4 backdrop-blur-sm">
                    <div className="bg-white rounded-xl shadow-2xl w-full max-w-lg flex flex-col max-h-[90vh] fade-in">
                        <div className="p-4 border-b flex items-center justify-between">
                            <h3 className="font-bold text-slate-800">{title}</h3>
                            <button onClick={onClose} className="p-1 hover:bg-slate-100 rounded-full transition"><Icons.X /></button>
                        </div>
                        <div className="p-6 overflow-y-auto">
                            {children}
                        </div>
                    </div>
                </div>
            );
        };

        const DataInput = ({ label, onDataLoaded, fileName, color, compact = false }) => {
            const fileInputRef = useRef(null);
            const borderColor = color === 'blue' ? 'border-primary/50 hover:bg-blue-50' : 'border-slate-300 hover:bg-slate-50';
            const textColor = color === 'blue' ? 'text-primary' : 'text-slate-600';

            const handleFileChange = async (e) => {
                if (e.target.files && e.target.files[0]) {
                    try {
                        const file = e.target.files[0];
                        const data = await readExcelFile(file);
                        onDataLoaded(data, file.name);
                    } catch (err) {
                        alert('解析Excel失败，请检查格式');
                    }
                }
            };

            const handleUseExample = (e) => {
                e.stopPropagation();
                const raw = generateExampleData();
                const data = parseRawArray(raw);
                onDataLoaded(data, '示例数据.xlsx');
            };

            const handleClick = () => fileInputRef.current?.click();

            if (compact) {
                return (
                    <div className="flex items-center gap-2">
                        <input type="file" ref={fileInputRef} className="hidden" accept=".xlsx, .xls, .csv" onChange={handleFileChange} />
                        <button onClick={handleClick} className={`flex items-center gap-2 px-3 py-1.5 rounded border border-dashed transition-colors text-xs font-medium ${borderColor} ${textColor} bg-white`} title={fileName || "点击上传Excel"}>
                            {fileName ? <Icons.FileSpreadsheet size={14} /> : <Icons.Upload size={14} />}
                            <span className="max-w-[120px] sm:max-w-[150px] truncate">{fileName || "上传数据"}</span>
                        </button>
                        {!fileName && (
                            <button onClick={handleUseExample} className="text-[10px] text-slate-400 hover:text-primary hover:underline whitespace-nowrap">加载示例</button>
                        )}
                    </div>
                );
            }
            return null;
        };

        const DataTable = ({ data, colorTheme, comparisonTargetMap, showKeyMetricsOnly, activeDateRange, weightedValues }) => {
            const [isExpanded, setIsExpanded] = useState(true);
            
            const columns = useMemo(() => {
                if (!data || data.length === 0) return [];
                const maxDay = Math.max(...data.map(d => d.maxDay));
                const allDays = Array.from({ length: maxDay }, (_, i) => i + 1);
                if (showKeyMetricsOnly) return allDays.filter(day => KEY_METRICS_DAYS.includes(day));
                return allDays;
            }, [data, showKeyMetricsOnly]);

            const renderCellContent = (day, val, rowData = null, isWeightedRow = false) => {
                 let smallText = "";
                 let diffElement = null;
                 let cellClass = isWeightedRow ? "font-bold" : "text-slate-600";
                 
                 if (val !== undefined && val !== null) {
                    if (day === 2) {
                        smallText = `(${formatNumber(val, 2)})`;
                    } else if (day === 3) {
                         if (showKeyMetricsOnly) {
                             smallText = `(${formatNumber(val, 2)})`;
                         } else {
                             let prevVal = 0;
                             if (isWeightedRow) {
                                 prevVal = weightedValues.get(day-1);
                             } else {
                                 prevVal = rowData.days[day-1];
                             }
                             if (prevVal) smallText = `(${formatNumber(val/prevVal, 2)})`;
                         }
                    } else if (day > 3) {
                        let prevVal = 0;
                        if (showKeyMetricsOnly) {
                            const kIdx = KEY_METRICS_DAYS.indexOf(day);
                            if (kIdx > 0) {
                                const prevKeyDay = KEY_METRICS_DAYS[kIdx-1];
                                if (isWeightedRow) prevVal = weightedValues.get(prevKeyDay);
                                else prevVal = rowData.days[prevKeyDay];
                            }
                        } else {
                            if (isWeightedRow) prevVal = weightedValues.get(day-1);
                            else prevVal = rowData.days[day-1];
                        }
                        if (prevVal) smallText = `(${formatNumber(val/prevVal, 2)})`;
                    }

                    const isTargetTable = colorTheme === 'blue';
                    if (comparisonTargetMap && !isTargetTable) {
                        const targetVal = comparisonTargetMap.get(day);
                        let targetMetric = null;
                        let rowMetric = null;

                        if (day === 2) {
                            targetMetric = targetVal;
                            rowMetric = val;
                        } else {
                             let targetPrev = null;
                             let rowPrev = null;
                             
                             const getTargetPrev = (d) => {
                                 if (showKeyMetricsOnly) {
                                    const kIdx = KEY_METRICS_DAYS.indexOf(d);
                                    if (kIdx > 0) return comparisonTargetMap.get(KEY_METRICS_DAYS[kIdx-1]);
                                 } else {
                                    return comparisonTargetMap.get(d-1);
                                 }
                                 return null;
                             };
                             
                             const getRowPrev = (d) => {
                                 if (showKeyMetricsOnly) {
                                    const kIdx = KEY_METRICS_DAYS.indexOf(d);
                                    if (kIdx > 0) {
                                        const pd = KEY_METRICS_DAYS[kIdx-1];
                                        return isWeightedRow ? weightedValues.get(pd) : rowData.days[pd];
                                    }
                                 } else {
                                     const pd = d-1;
                                     return isWeightedRow ? weightedValues.get(pd) : rowData.days[pd];
                                 }
                                 return null;
                             };

                             targetPrev = getTargetPrev(day);
                             rowPrev = getRowPrev(day);

                             if (targetVal !== undefined && targetPrev) targetMetric = targetVal / targetPrev;
                             if (val !== undefined && rowPrev) rowMetric = val / rowPrev;
                        }

                        if (targetMetric !== null && rowMetric) {
                            const diff = targetMetric / rowMetric;
                            if (Math.abs(1 - diff) > 0.03) {
                                cellClass = `text-slate-900 font-bold ${isWeightedRow ? 'bg-red-100' : 'bg-red-50'}`;
                                diffElement = <div className="text-[10px] text-danger flex items-center justify-end gap-1">{diff.toFixed(2)}<Icons.AlertCircle size={8} /></div>;
                            } else {
                                diffElement = <div className="text-[10px] text-slate-400">{diff.toFixed(2)}</div>;
                            }
                        }
                    }
                 }

                 return (
                    <div className={`flex flex-col items-end ${cellClass} px-1 rounded`}>
                        <span>{formatNumber(val, 2)} <span className="text-[10px] opacity-60">{smallText}</span></span>
                        {diffElement}
                    </div>
                 );
            };

            if (!data || data.length === 0) return null;
            const headerColor = colorTheme === 'blue' ? 'bg-blue-50 text-blue-700' : 'bg-slate-100 text-slate-700';
            const isTargetTable = colorTheme === 'blue';
            const bottomRowColor = isTargetTable ? 'bg-blue-100 text-blue-900 border-blue-200' : 'bg-slate-100 text-slate-900 border-slate-200';

            return (
                <div className="border rounded-lg shadow-sm bg-white overflow-hidden mb-6">
                    <div className={`px-4 py-3 flex justify-between items-center cursor-pointer ${headerColor}`} onClick={() => setIsExpanded(!isExpanded)}>
                        <h3 className="font-bold text-sm flex items-center gap-2">数据列表 <span className="text-xs font-normal opacity-70">({data.length} 行)</span></h3>
                        <span className="text-xs font-mono">{isExpanded ? '收起' : '展开'}</span>
                    </div>
                    {isExpanded && (
                        <div className="overflow-x-auto">
                            <table className="w-full text-xs text-right whitespace-nowrap">
                                <thead className="bg-slate-50 text-slate-500 font-medium">
                                    <tr>
                                        <th className="px-3 py-2 text-left sticky left-0 bg-slate-50 z-10 border-r border-b">日期</th>
                                        <th className="px-3 py-2 border-r border-b">注册</th>
                                        {columns.map(day => (
                                            <th key={day} className="px-3 py-2 border-r border-b min-w-[90px]">
                                                第{day}天
                                                {comparisonTargetMap && !isTargetTable && <div className="text-[10px] scale-90 text-slate-400 font-normal">vs Target</div>}
                                            </th>
                                        ))}
                                    </tr>
                                </thead>
                                <tbody className="divide-y divide-slate-100">
                                    {data.map((row, idx) => {
                                        const isActive = activeDateRange && row.date >= activeDateRange.start && row.date <= activeDateRange.end;
                                        const bgClass = isActive ? 'bg-blue-50/50' : (isTargetTable ? 'hover:bg-slate-50' : 'hover:bg-slate-50');

                                        return (
                                            <tr key={idx} className={bgClass}>
                                                <td className="px-3 py-2 text-left sticky left-0 bg-white border-r z-10 font-mono text-slate-600 shadow-[2px_0_5px_-2px_rgba(0,0,0,0.1)]">{row.date}</td>
                                                <td className="px-3 py-2 border-r font-mono">{row.reg.toLocaleString()}</td>
                                                {columns.map((day) => (
                                                    <td key={day} className="px-3 py-2 border-r font-mono">
                                                        {renderCellContent(day, row.days[day], row, false)}
                                                    </td>
                                                ))}
                                            </tr>
                                        );
                                    })}
                                    
                                    {weightedValues && (
                                        <tr className={`${bottomRowColor} font-bold border-t-2`}>
                                            <td className={`px-3 py-2 text-left sticky left-0 border-r z-10 font-mono shadow ${bottomRowColor}`}>加权值</td>
                                            <td className="px-3 py-2 border-r font-mono text-right">
                                                {weightedValues.get(0)?.toLocaleString() ?? '-'}
                                            </td>
                                            {columns.map(day => {
                                                const val = weightedValues.get(day);
                                                return (
                                                    <td key={day} className="px-3 py-2 border-r font-mono text-right">
                                                        {renderCellContent(day, val, null, true)}
                                                    </td>
                                                );
                                            })}
                                        </tr>
                                    )}
                                </tbody>
                            </table>
                        </div>
                    )}
                </div>
            );
        };

        const ComparisonTable = ({ rows, mode, onModeChange }) => {
            return (
                <div className="flex flex-col h-full bg-white rounded-lg shadow-sm border overflow-hidden">
                    <div className="flex border-b bg-slate-50">
                        <button 
                            className={`flex-1 py-2 text-xs font-medium text-center transition-colors ${mode === 'key' ? 'bg-white text-primary border-b-2 border-primary' : 'text-slate-500 hover:text-slate-700'}`}
                            onClick={() => onModeChange('key')}
                        >
                            按关键天
                        </button>
                        <button 
                            className={`flex-1 py-2 text-xs font-medium text-center transition-colors ${mode === 'daily' ? 'bg-white text-primary border-b-2 border-primary' : 'text-slate-500 hover:text-slate-700'}`}
                            onClick={() => onModeChange('daily')}
                        >
                            按每一天
                        </button>
                    </div>
                    <div className="overflow-x-auto overflow-y-auto flex-1 max-h-[400px]">
                        <table className="w-full text-xs text-left relative">
                            <thead className="text-[10px] text-slate-500 uppercase bg-slate-50 border-b sticky top-0 z-10">
                                <tr>
                                    <th className="px-2 py-2 bg-slate-50">维度 (Diff=Tgt/Bch)</th>
                                    <th className="px-2 py-2 text-right bg-slate-50">Tgt</th>
                                    <th className="px-2 py-2 text-right bg-slate-50">Bch</th>
                                    <th className="px-2 py-2 text-right bg-slate-50">Diff</th>
                                </tr>
                            </thead>
                            <tbody>
                                {rows.map((row, idx) => {
                                    const isAlert = row.diff !== null && Math.abs(1 - row.diff) > 0.03;
                                    const diffDisplay = row.diff !== null ? row.diff.toFixed(2) : '-';
                                    return (
                                        <tr key={idx} className={`border-b transition-colors bg-white hover:bg-slate-50`}>
                                            <td className="px-2 py-2 font-medium text-slate-700">{row.label}</td>
                                            <td className="px-2 py-2 text-right font-mono text-blue-600">{formatNumber(row.targetRatio)}</td>
                                            <td className="px-2 py-2 text-right font-mono text-slate-600">{formatNumber(row.benchmarkRatio)}</td>
                                            <td className="px-2 py-2 text-right">
                                                <div className={`flex items-center justify-end gap-1 font-mono font-bold ${isAlert ? 'text-danger' : 'text-slate-500'}`}>
                                                    {diffDisplay}
                                                    {isAlert && <Icons.AlertCircle size={12} className="text-danger" />}
                                                </div>
                                            </td>
                                        </tr>
                                    );
                                })}
                            </tbody>
                        </table>
                    </div>
                </div>
            );
        };

        const TrendChart = ({ targetMap, benchmarkMap }) => {
            const data = [];
            const maxDayTarget = Math.max(...(Array.from(targetMap.keys())), 0);
            const maxDayBench = Math.max(...(Array.from(benchmarkMap.keys())), 0);
            const maxDay = Math.min(Math.max(maxDayTarget, maxDayBench), 60);

            for (let i = 1; i <= maxDay; i++) {
                const tVal = targetMap.get(i);
                const bVal = benchmarkMap.get(i);
                data.push({ 
                    day: `Day ${i}`, 
                    Target: tVal !== undefined ? parseFloat(tVal.toFixed(2)) : null, 
                    Benchmark: bVal !== undefined ? parseFloat(bVal.toFixed(2)) : null 
                });
            }
            
            const CustomDot = (props) => {
                const { cx, cy, payload, dataKey } = props;
                if (!payload || dataKey !== 'Target') return <circle cx={cx} cy={cy} r="3" stroke={props.stroke} strokeWidth={2} fill="white" />;
                const t = payload.Target;
                const b = payload.Benchmark;
                if (t && b && t < b * 0.95) {
                    return <circle cx={cx} cy={cy} r="4" fill="#ef4444" stroke="white" strokeWidth={2} />;
                }
                return <circle cx={cx} cy={cy} r="3" stroke={props.stroke} strokeWidth={2} fill="white" />;
            };

            return (
                <div className="h-80 w-full bg-white p-4 rounded-lg shadow-sm border">
                    <h3 className="text-sm font-semibold text-slate-700 mb-4">加权值趋势对比 (Day N Weighted Value)</h3>
                    <ResponsiveContainer width="100%" height="100%">
                        <LineChart data={data} margin={{ top: 5, right: 30, left: 0, bottom: 5 }}>
                            <CartesianGrid strokeDasharray="3 3" vertical={false} />
                            <XAxis dataKey="day" tick={{fontSize: 10}} interval="preserveStartEnd" />
                            <YAxis tick={{fontSize: 10}} domain={['auto', 'auto']} />
                            <Tooltip contentStyle={{ borderRadius: '8px', border: 'none', boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)' }} />
                            <Legend />
                            <Line type="monotone" dataKey="Target" name="目标数据" stroke="#2563eb" strokeWidth={2} dot={<CustomDot />} activeDot={{ r: 6 }} connectNulls={true} />
                            <Line type="monotone" dataKey="Benchmark" name="对标数据" stroke="#64748b" strokeWidth={2} strokeDasharray="5 5" dot={{r: 2}} connectNulls={true} />
                        </LineChart>
                    </ResponsiveContainer>
                </div>
            );
        };

        const DailyTrendChart = ({ targetMap, benchmarkData, benchmarkWeightedMap }) => {
            const [hiddenKeys, setHiddenKeys] = useState(new Set());
            const [predictionData, setPredictionData] = useState([]);

            const getBenchmarkKeys = useMemo(() => {
                return benchmarkData.map(row => row.date);
            }, [benchmarkData]);

            // Prediction and Data Merging Logic
            const chartData = useMemo(() => {
                const dataPoints = [];
                const targetDays = Array.from(targetMap.keys()).sort((a,b)=>a-b);
                const lastTargetDay = targetDays.length > 0 ? Math.max(...targetDays) : 0;
                const lastTargetVal = targetMap.get(lastTargetDay) || 0;
                
                // 1. Find Best Fit Benchmark Row for Prediction
                let bestFitRow = null;
                let minError = Infinity;

                if (lastTargetDay > 0 && benchmarkData.length > 0) {
                     benchmarkData.forEach(row => {
                         let errorSum = 0;
                         let count = 0;
                         targetDays.forEach(day => {
                             if (day <= lastTargetDay && row.days[day] !== undefined && targetMap.get(day)) {
                                 const tVal = targetMap.get(day);
                                 const bVal = row.days[day];
                                 errorSum += Math.abs((bVal - tVal) / tVal);
                                 count++;
                             }
                         });
                         if (count > 0) {
                             const avgError = errorSum / count;
                             if (avgError < minError) {
                                 minError = avgError;
                                 bestFitRow = row;
                             }
                         }
                     });
                }

                // 2. Determine Max Day for Chart 鑫
                const maxDayBench = benchmarkData.reduce((max, row) => Math.max(max, row.maxDay), 0);
                const maxDay = Math.min(Math.max(lastTargetDay, maxDayBench), 90); // Limit to 90 days for clarity

                for (let i = 1; i <= maxDay; i++) {
                    const point = { day: `Day ${i}`, dayNum: i };
                    
                    // Target Actual
                    if (targetMap.has(i)) {
                        point["Target"] = parseFloat(targetMap.get(i).toFixed(2));
                    }

                    // Target Prediction
                    if (i > lastTargetDay && bestFitRow && bestFitRow.days[i] !== undefined && bestFitRow.days[lastTargetDay] > 0) {
                         const benchCurrent = bestFitRow.days[i];
                         const benchAnchor = bestFitRow.days[lastTargetDay];
                         const predictedVal = benchCurrent * (lastTargetVal / benchAnchor);
                         point["Predicted"] = parseFloat(predictedVal.toFixed(2));
                    }

                    // Benchmark Weighted
                    if (benchmarkWeightedMap && benchmarkWeightedMap.has(i)) {
                         point["Weighted"] = parseFloat(benchmarkWeightedMap.get(i).toFixed(2));
                    }

                    // Individual Rows
                    benchmarkData.forEach(row => {
                        if (row.days[i] !== undefined) {
                            point[row.date] = parseFloat(row.days[i].toFixed(2));
                        }
                    });

                    dataPoints.push(point);
                }
                return dataPoints;
            }, [targetMap, benchmarkData, benchmarkWeightedMap]);

            // Toggle Handler
            const toggleKey = (key) => {
                const next = new Set(hiddenKeys);
                if (next.has(key)) next.delete(key);
                else next.add(key);
                setHiddenKeys(next);
            };

            const toggleAll = (show) => {
                if (show) setHiddenKeys(new Set());
                else {
                    const allKeys = new Set(getBenchmarkKeys);
                    allKeys.add("Weighted");
                    setHiddenKeys(allKeys);
                }
            };

            const getLineColor = (index) => COLORS[index % COLORS.length];

            return (
                <div className="bg-white p-4 rounded-lg shadow-sm border mt-6">
                    <div className="flex items-center justify-between mb-4">
                        <h3 className="text-sm font-semibold text-slate-700 flex items-center gap-2">
                            <Icons.Activity size={16} className="text-slate-400"/>
                            每日趋势图表 (Individual Rows)
                        </h3>
                        <div className="flex gap-2 text-[10px]">
                             <button onClick={() => toggleAll(true)} className="px-2 py-1 bg-slate-100 hover:bg-slate-200 rounded text-slate-600">全选</button>
                             <button onClick={() => toggleAll(false)} className="px-2 py-1 bg-slate-100 hover:bg-slate-200 rounded text-slate-600">全不选</button>
                        </div>
                    </div>
                    
                    {/* Control Panel */}
                    <div className="flex flex-wrap gap-x-2 gap-y-1 mb-4 max-h-32 overflow-y-auto border p-2 rounded bg-slate-50">
                         {/* Static Items */}
                         <button onClick={() => toggleKey("Weighted")} className={`chart-legend-item text-[10px] ${!hiddenKeys.has("Weighted") ? 'active' : 'opacity-50'}`}>
                             <div className="w-2 h-0.5 bg-slate-800"></div> 对标加权平均
                         </button>
                         {/* Dynamic Items */}
                         {getBenchmarkKeys.map((date, idx) => (
                             <button 
                                key={date} 
                                onClick={() => toggleKey(date)} 
                                className={`chart-legend-item text-[10px] ${!hiddenKeys.has(date) ? 'active' : 'opacity-50'}`}
                             >
                                 <div className="w-1.5 h-1.5 rounded-full" style={{backgroundColor: getLineColor(idx)}}></div> {date}
                             </button>
                         ))}
                    </div>

                    <div className="h-96 w-full">
                        <ResponsiveContainer width="100%" height="100%">
                            <LineChart data={chartData} margin={{ top: 5, right: 30, left: 0, bottom: 5 }}>
                                <CartesianGrid strokeDasharray="3 3" vertical={false} />
                                <XAxis dataKey="day" tick={{fontSize: 10}} interval="preserveStartEnd" />
                                <YAxis tick={{fontSize: 10}} domain={['auto', 'auto']} />
                                <Tooltip contentStyle={{ borderRadius: '8px', border: 'none', boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)' }} />
                                <Legend wrapperStyle={{display:'none'}} /> {/* Custom Legend Used Above */}
                                
                                {/* Target (Always Visible) */}
                                <Line type="monotone" dataKey="Target" name="目标数据" stroke="#2563eb" strokeWidth={3} dot={{r:3}} connectNulls={true} />
                                
                                {/* Target Predicted */}
                                <Line type="monotone" dataKey="Predicted" name="Target 预测" stroke="#2563eb" strokeWidth={2} strokeDasharray="5 5" dot={false} connectNulls={true} />

                                {/* Benchmark Weighted */}
                                {!hiddenKeys.has("Weighted") && (
                                    <Line type="monotone" dataKey="Weighted" name="对标加权平均" stroke="#1e293b" strokeWidth={2} dot={false} connectNulls={true} />
                                )}
                                
                                {/* Individual Rows */}
                                {getBenchmarkKeys.map((date, idx) => (
                                    !hiddenKeys.has(date) && (
                                        <Line 
                                            key={date}
                                            type="monotone" 
                                            dataKey={date} 
                                            name={date}
                                            stroke={getLineColor(idx)} 
                                            strokeWidth={1.5} 
                                            dot={false}
                                            connectNulls={true} 
                                        />
                                    )
                                ))}
                            </LineChart>
                        </ResponsiveContainer>
                    </div>
                </div>
            );
        };

        const App = () => {
            const [targetData, setTargetData] = useState([]);
            const [targetFileName, setTargetFileName] = useState('');
            const [benchmarkDatasets, setBenchmarkDatasets] = useState([{name: '默认对标组', data: [], fileName: ''}]);
            const [activeBenchmarkTab, setActiveBenchmarkTab] = useState(0);
            const [isRenaming, setIsRenaming] = useState(false);
            const [tempName, setTempName] = useState('');
            const [startDate, setStartDate] = useState('');
            const [endDate, setEndDate] = useState('');
            const [showKeyMetricsOnly, setShowKeyMetricsOnly] = useState(true);
            const [showChangelog, setShowChangelog] = useState(false);
            const [comparisonMode, setComparisonMode] = useState('key'); // 'key' | 'daily'

            // --- Calculation Hooks ---
            const availableDates = useMemo(() => targetData.map(d => d.date).sort(), [targetData]);
            useEffect(() => {
                if (availableDates.length > 0 && !startDate) {
                    setStartDate(availableDates[0]);
                    setEndDate(availableDates[availableDates.length - 1]);
                }
            }, [availableDates]);

            const targetAggregates = useMemo(() => {
                if (!startDate || !endDate || targetData.length === 0) return new Map();
                return calculateWeightedData(targetData, startDate, endDate);
            }, [targetData, startDate, endDate]);

            const activeBenchData = benchmarkDatasets[activeBenchmarkTab].data;
            const benchAggregates = useMemo(() => {
                if (activeBenchData.length === 0) return new Map();
                const dates = activeBenchData.map(d => d.date).sort();
                return calculateWeightedData(activeBenchData, dates[0], dates[dates.length - 1]);
            }, [activeBenchData]);

            const comparisonRows = useMemo(() => {
                const rows = [];
                const getMetric = (map, dayN, dayM) => {
                    const valN = map.get(dayN);
                    if (valN === undefined) return null;
                    if (dayM === 0) return valN; // Value
                    const valM = map.get(dayM);
                    if (valM === undefined || valM === 0) return null;
                    return valN / valM; // Slope
                };

                // 1. Day 2 (Value vs Value) - Always included
                const t2 = getMetric(targetAggregates, 2, 0);
                const b2 = getMetric(benchAggregates, 2, 0);
                if (t2 !== null || b2 !== null) {
                    rows.push({ label: '第2天 (Value)', targetRatio: t2, benchmarkRatio: b2, diff: (t2&&b2) ? t2/b2 : null });
                }

                if (comparisonMode === 'key') {
                    // 2. Key Slopes
                    const pairs = [[3,2], [7,3], [15,7], [30,15], [45,30], [60,45], [90,60], [120,90]];
                    pairs.forEach(([curr, prev]) => {
                        const t = getMetric(targetAggregates, curr, prev);
                        const b = getMetric(benchAggregates, curr, prev);
                        if (t!==null || b!==null) {
                            rows.push({ label: `第${curr}天 / 第${prev}天`, targetRatio: t, benchmarkRatio: b, diff: (t&&b) ? t/b : null });
                        }
                    });
                } else {
                    // 3. Daily Slopes
                    const maxDay = Math.max(
                        Math.max(...Array.from(targetAggregates.keys())),
                        Math.max(...Array.from(benchAggregates.keys()))
                    ) || 2;
                    
                    for (let i = 3; i <= maxDay; i++) {
                         const t = getMetric(targetAggregates, i, i-1);
                         const b = getMetric(benchAggregates, i, i-1);
                         if (t!==null || b!==null) {
                             rows.push({ label: `第${i}天 / 第${i-1}天`, targetRatio: t, benchmarkRatio: b, diff: (t&&b) ? t/b : null });
                         }
                    }
                }

                return rows;
            }, [targetAggregates, benchAggregates, comparisonMode]);

            // --- Handlers ---
            const handleBenchLoad = (d, n) => {
                const s = [...benchmarkDatasets];
                s[activeBenchmarkTab] = {...s[activeBenchmarkTab], data: d, fileName: n};
                setBenchmarkDatasets(s);
            };
            const addBench = () => {
                setBenchmarkDatasets([...benchmarkDatasets, {name: `对标组 ${benchmarkDatasets.length+1}`, data:[], fileName:''}]);
                setActiveBenchmarkTab(benchmarkDatasets.length);
            };
            const saveName = () => {
                if (tempName.trim()) {
                    const s = [...benchmarkDatasets];
                    s[activeBenchmarkTab].name = tempName.trim();
                    setBenchmarkDatasets(s);
                }
                setIsRenaming(false);
            };

            return (
                <div className="min-h-screen flex flex-col font-sans pb-10">
                    <header className="bg-white border-b sticky top-0 z-50 shadow-sm px-4 py-3 flex items-center justify-between">
                        <div className="flex items-center gap-2">
                            <Icons.BarChart3 className="text-primary" />
                            <h1 className="text-lg font-bold text-slate-800 hidden sm:block">数据趋势增幅对比工具</h1>
                            <h1 className="text-lg font-bold text-slate-800 sm:hidden">趋势工具</h1>
                            <button onClick={() => setShowChangelog(true)} className="text-blue-500 hover:bg-blue-50 rounded-full p-1"><Icons.HelpCircle size={18} /></button>
                        </div>
                        <div className="text-xs text-slate-400 flex items-center gap-2">
                             <span className="hidden sm:inline">作者：三只小黄鱼</span>
                        </div>
                    </header>

                    <main className="flex-1 p-4 w-full max-w-[1400px] mx-auto space-y-6">
                        {/* BENCHMARK */}
                        <section className="bg-white rounded-lg shadow-sm border p-4">
                            <div className="flex items-center justify-between mb-4 flex-wrap gap-2">
                                <div className="flex items-center gap-2 overflow-x-auto max-w-full pb-1 scrollbar-hide">
                                    <div className="flex items-center gap-1 font-bold text-slate-700 whitespace-nowrap mr-2"><Icons.ArrowUpCircle size={18} className="text-slate-400"/> 对标数据</div>
                                    {benchmarkDatasets.map((set, i) => (
                                        <button key={i} onClick={()=>{setActiveBenchmarkTab(i); setIsRenaming(false)}} className={`px-3 py-1 rounded-full text-xs whitespace-nowrap transition ${activeBenchmarkTab===i ? 'bg-slate-800 text-white shadow' : 'bg-slate-100 text-slate-600'}`}>{set.name}</button>
                                    ))}
                                    <button onClick={addBench} className="p-1 text-slate-400 hover:text-slate-600">+</button>
                                </div>
                                <label className="flex items-center gap-1.5 text-xs text-slate-600 select-none"><input type="checkbox" checked={showKeyMetricsOnly} onChange={e=>setShowKeyMetricsOnly(e.target.checked)} className="accent-primary"/> 只看关键指标</label>
                            </div>
                            
                            <div className="bg-slate-50 p-3 rounded-lg border border-slate-100 mb-4 flex flex-wrap items-center gap-4">
                                <div className="flex items-center gap-2 min-w-[120px]">
                                    {isRenaming ? (
                                        <div className="flex items-center gap-1">
                                            <input value={tempName} onChange={e=>setTempName(e.target.value)} className="w-24 text-xs border rounded px-1 py-1" autoFocus onKeyDown={e=>e.key==='Enter'&&saveName()} />
                                            <button onClick={saveName} className="text-green-600"><Icons.Check size={14}/></button>
                                            <button onClick={()=>setIsRenaming(false)} className="text-red-500"><Icons.X size={14}/></button>
                                        </div>
                                    ) : (
                                        <div className="flex items-center gap-1 group cursor-pointer" onClick={()=>{setTempName(benchmarkDatasets[activeBenchmarkTab].name); setIsRenaming(true)}}>
                                            <span className="text-sm font-bold text-slate-700">{benchmarkDatasets[activeBenchmarkTab].name}</span>
                                            <Icons.Pencil size={12} className="text-slate-300 group-hover:text-primary"/>
                                        </div>
                                    )}
                                </div>
                                <div className="h-4 w-[1px] bg-slate-300"></div>
                                <DataInput color="slate" onDataLoaded={handleBenchLoad} fileName={benchmarkDatasets[activeBenchmarkTab].fileName} compact />
                            </div>

                            <DataTable 
                                data={activeBenchData} 
                                colorTheme="slate" 
                                comparisonTargetMap={targetAggregates.size>0?targetAggregates:undefined} 
                                showKeyMetricsOnly={showKeyMetricsOnly} 
                                weightedValues={benchAggregates.size > 0 ? benchAggregates : undefined} 
                            />
                        </section>

                        {/* TARGET */}
                        <section className="bg-white rounded-lg shadow-sm border p-4">
                            <div className="flex flex-col gap-4">
                                <div className="flex items-center justify-between flex-wrap gap-2">
                                    <div className="flex items-center gap-2 font-bold text-slate-700"><Icons.ArrowDownCircle size={18} className="text-primary"/> 目标数据</div>
                                    {targetData.length > 0 && (
                                        <div className="flex items-center gap-1 bg-blue-50 px-2 py-1 rounded text-xs border border-blue-100">
                                            <span className="text-blue-600 font-bold">周期:</span>
                                            <select value={startDate} onChange={e=>setStartDate(e.target.value)} className="bg-transparent outline-none max-w-[90px]">{availableDates.map(d=><option key={d} value={d}>{d}</option>)}</select>
                                            <span className="text-blue-300">-</span>
                                            <select value={endDate} onChange={e=>setEndDate(e.target.value)} className="bg-transparent outline-none max-w-[90px]">{availableDates.map(d=><option key={d} value={d}>{d}</option>)}</select>
                                            <button onClick={()=>{setStartDate(availableDates[0]);setEndDate(availableDates[availableDates.length-1])}}><Icons.RefreshCw size={10} className="text-blue-400"/></button>
                                        </div>
                                    )}
                                </div>
                                <div className="bg-blue-50/50 p-3 rounded-lg border border-blue-100 flex flex-wrap items-center gap-4">
                                    <span className="text-sm font-bold text-blue-800">Target Data</span>
                                    <div className="h-4 w-[1px] bg-blue-200"></div>
                                    <DataInput color="blue" onDataLoaded={(d,n)=>{setTargetData(d);setTargetFileName(n)}} fileName={targetFileName} compact />
                                </div>
                                <DataTable 
                                    data={targetData} 
                                    colorTheme="blue" 
                                    showKeyMetricsOnly={showKeyMetricsOnly} 
                                    activeDateRange={{start:startDate, end:endDate}} 
                                    comparisonTargetMap={targetAggregates} 
                                    weightedValues={targetAggregates.size > 0 ? targetAggregates : undefined}
                                />
                            </div>
                        </section>

                        {/* TRENDS */}
                        <section className="grid grid-cols-1 lg:grid-cols-3 gap-6">
                            <div className="lg:col-span-2 space-y-6">
                                <div>
                                    <h2 className="text-sm font-bold text-slate-500 uppercase mb-2 flex items-center gap-2"><Icons.Layers size={16}/> 趋势图表 (加权平均)</h2>
                                    <TrendChart targetMap={targetAggregates} benchmarkMap={benchAggregates} />
                                </div>
                                <div>
                                    <h2 className="text-sm font-bold text-slate-500 uppercase mb-2 flex items-center gap-2"><Icons.Activity size={16}/> 每日趋势图表 (每一周期)</h2>
                                    <DailyTrendChart targetMap={targetAggregates} benchmarkData={activeBenchData} benchmarkWeightedMap={benchAggregates} />
                                </div>
                            </div>
                            <div className="lg:col-span-1">
                                <h2 className="text-sm font-bold text-slate-500 uppercase mb-2">加权值关键比值差异</h2>
                                <ComparisonTable rows={comparisonRows} mode={comparisonMode} onModeChange={setComparisonMode} />
                            </div>
                        </section>
                    </main>

                    <Modal isOpen={showChangelog} onClose={()=>setShowChangelog(false)} title="更新日志 & 说明">
                        <div className="space-y-4 text-sm text-slate-600">
                            <div>
                                <h4 className="font-bold text-slate-900 mb-1">使用说明</h4>
                                <ul className="list-disc pl-5 space-y-1">
                                    <li>请上传 .xlsx 或 .csv 文件，格式需包含“日期”、“注册”及“第N天”列。</li>
                                    <li>目标数据上传后，请选择“加权周期”，底部“加权值”行会自动根据周期计算。</li>
                                    <li><span className="text-blue-600 font-bold">蓝色底色</span>行表示已被纳入加权计算。</li>
                                    <li>第2天的括号内小字直接展示当日数值；第3天根据勾选状态展示绝对值或比值。</li>
                                </ul>
                            </div>
                            <hr/>
                            <div>
                                <h4 className="font-bold text-slate-900 mb-1">版本记录</h4>
                                <ul className="space-y-2">
                                    <li><span className="bg-blue-100 text-blue-800 px-1 rounded text-xs">V3.5</span> <span className="text-xs text-slate-400">Current</span><br/>关键比值差异增加“按每一天”对比模式；图表增加断点连线(Connect Nulls)；图例UI优化。</li>
                                    <li><span className="bg-slate-100 px-1 rounded text-xs">V3.4</span><br/>优化每日趋势图：支持按日期命名、自定义颜色、显隐控制、目标趋势预测。</li>
                                    <li><span className="bg-slate-100 px-1 rounded text-xs">V3.3</span><br/>对标加权行增加比值与Diff；加权行注册数显示总和；Day 3 条件逻辑。</li>
                                </ul>
                            </div>
                        </div>
                    </Modal>
                </div>
            );
        };

        const root = ReactDOM.createRoot(document.getElementById('root'));
        root.render(<App />);
    </script>
</body>
</html>

    <!-- 请在此处粘贴【新工具】的完整 HTML 代码 -->
    <html><body><h2 style="text-align:center; margin-top: 50px; color: #666;">工具完善中</h2></body></html>