import React, { useState, useMemo } from 'react';
import { 
  TrendingUp, Landmark, Users, Plus, Trash2, Home, Wallet, 
  Activity, CreditCard, LayoutDashboard, Target, Zap, 
  PlusCircle, Construction, Building2, Receipt, ArrowDownCircle, 
  ArrowUpCircle, PlusSquare, Coffee, Car, Lightbulb, HeartPulse, ShoppingBag,
  UserCircle2, PieChart, BadgeDollarSign, UserPlus, HeartHandshake, Heart,
  BarChart3, FileSearch, Scale, Scroll, GraduationCap, ShieldCheck, Settings, Save,
  UserCog, MapPin, Banknote, CalendarRange, LineChart, Briefcase
} from 'lucide-react';

// --- 圖示對照表 ---
const iconMap = {
  Coffee, ShoppingBag, Home, Car, Lightbulb, Zap, HeartPulse, Landmark, Receipt,
  ShoppingCart: ShoppingBag, GraduationCap, Scale, Scroll, MapPin, Banknote, CalendarRange, LineChart, Briefcase
};

const App = () => {
  const [activeTab, setActiveTab] = useState('family'); 
  const [isTaxEditMode, setIsTaxEditMode] = useState(false);

  // --- 初始資料 (全數清空預設值) ---
  const initialBaseData = {
    fillDate: new Date().toISOString().split('T')[0],
    family: [
      // 修正：角色名稱變更，欄位留空，新增 salaryGrowth (薪資漲幅)
      { id: 'h', role: '本人', birthday: '', gender: '男', income: '', salaryGrowth: '' }, 
      { id: 'w', role: '配偶', birthday: '', gender: '女', income: '', salaryGrowth: '' }
    ],
    // 修正：預設不帶入任何親屬
    relatives: [],
    completedHouses: [], // 清空
    presaleHouses: [], // 清空
    movableAssets: [
      // 僅保留結構，數值清空
      { id: 1, type: '現金存款', amount: '', monthlyIncome: '', pledgeAmount: '', pledgeRate: '', faceValue: '', returnRate: '' }, 
      { id: 2, type: '累積型投資(如:股票)目前帳面金額', amount: '', monthlyIncome: '', pledgeAmount: '', pledgeRate: '', faceValue: '', returnRate: '' },
      { id: 3, type: '配息型投資(如:基金)目前帳面金額', amount: '', monthlyIncome: '', pledgeAmount: '', pledgeRate: '', faceValue: '', returnRate: '' },
      { id: 4, type: '利變、分紅保單', amount: '', monthlyIncome: '', pledgeAmount: '', pledgeRate: '', faceValue: '', returnRate: '' },
    ],
    debts: [], // 清空
    otherIncomes: [],
    livingExpenses: [
      { id: 1, type: '食 (伙食外食)', amount: '', icon: 'Coffee' },
      { id: 2, type: '衣 (治裝費)', amount: '', icon: 'ShoppingBag' },
      { id: 3, type: '住 (水電/管理費)', amount: '', icon: 'Home' },
      { id: 4, type: '行 (交通/油資)', amount: '', icon: 'Car' },
      { id: 5, type: '育 (教育/進修)', amount: '', icon: 'Lightbulb' },
      { id: 6, type: '樂 (娛樂/交際)', amount: '', icon: 'Zap' },
      { id: 7, type: '保險 (不還本/醫療)', amount: '', icon: 'HeartPulse' },
      { id: 8, type: '保險 (還本/儲蓄)', amount: '', icon: 'Landmark' },
    ],
    // 稅務設定 (保留法規預設值，因這是客觀數據)
    taxSettings: {
      exemption: 1333, 
      funeralDeduction: 138, 
      spouseDeduction: 553, 
      childDeduction: 56, 
      parentDeduction: 138, 
      siblingDeduction: 56, 
      handicapDeduction: 693,
      insuranceExemption: 3330 
    },
    taxPeople: {
      spouse: '', children: '', parents: '', siblings: '', handicap: '' 
    },
    // 經濟假設參數 (部分保留預設以便計算，資產相關清空)
    assumptions: {
      cpi: '2', // 預設 2% 較合理
      realEstateGrowth: '', // 不動產增值率不預設
      pledgeEndAge: '80', 
      childIndependenceAge: '22', 
    }
  };

  const [data, setData] = useState(initialBaseData);

  const toNum = (val) => {
    if (val === '' || val === null || val === undefined) return 0;
    const n = parseFloat(val);
    return isNaN(n) ? 0 : n;
  };
  
  const handleInputChange = (path, value) => {
    const keys = path.split('.');
    setData(prev => {
      const newState = JSON.parse(JSON.stringify(prev)); 
      let current = newState;
      for (let i = 0; i < keys.length - 1; i++) {
        current = current[keys[i]];
      }
      current[keys[keys.length - 1]] = value;
      return newState;
    });
  };

  // --- 輔助：年齡計算 ---
  const calculateAge = (birthday) => {
    if (!birthday) return 0;
    const birthDate = new Date(birthday);
    const ageDifMs = Date.now() - birthDate.getTime();
    const ageDate = new Date(ageDifMs);
    return Math.abs(ageDate.getUTCFullYear() - 1970);
  };

  // --- 輔助：判斷是否扶養 (中華民國定義參考) ---
  const checkIsDependent = (person) => {
    const age = calculateAge(person.birthday);
    // 父母/祖父母 (直系尊親屬): 滿 60 歲
    if (person.relationship === 'parent' || person.relationship === 'grandparent') {
      return age >= 60; 
    }
    // 子女/兄弟姐妹 (直系卑親屬/旁系): 未滿 20 歲
    if (person.relationship === 'child' || person.relationship === 'sibling') {
      return age < 20; 
    }
    return false; // 其他情況預設否，可手動改
  };

  // --- 核心計算引擎 ---
  const calculations = useMemo(() => {
    // 1. 房產計算
    const houseCalcs = data.completedHouses.map(h => {
      const principal = toNum(h.loanBalance) * 10000;
      const monthlyRate = (toNum(h.rate)/100)/12;
      const totalMonths = toNum(h.loanYear)*12;
      const gracePay = Math.round(principal * monthlyRate);
      let amortizePay = 0;
      if (principal > 0 && totalMonths > 0) {
        if (monthlyRate > 0) {
           const factor = Math.pow(1 + monthlyRate, totalMonths);
           amortizePay = Math.round((principal * monthlyRate * factor) / (factor - 1));
        } else amortizePay = Math.round(principal / totalMonths);
      }
      const selectedPay = h.repayType === 'amortize' ? amortizePay : gracePay;
      const estimatedAssessedValue = h.assessedValue ? toNum(h.assessedValue) : Math.round(toNum(h.marketValue) * 0.4);
      return { ...h, gracePay, amortizePay, effectivePay: selectedPay, estimatedAssessedValue };
    });

    const presaleCalcs = data.presaleHouses.map(p => {
      const principal = toNum(p.expectedLoan) * 10000;
      const monthlyRate = (toNum(p.rate)/100)/12;
      const totalMonths = toNum(p.loanYear)*12;
      const gracePay = Math.round(principal * monthlyRate);
      let amortizePay = 0;
      if (principal > 0 && totalMonths > 0) {
        if (monthlyRate > 0) {
           const factor = Math.pow(1 + monthlyRate, totalMonths);
           amortizePay = Math.round((principal * monthlyRate * factor) / (factor - 1));
        } else amortizePay = Math.round(principal / totalMonths);
      }
      const selectedPay = p.repayType === 'amortize' ? amortizePay : gracePay;
      const baseValue = p.marketValue ? toNum(p.marketValue) : toNum(p.contractPrice);
      const estimatedAssessedValue = p.assessedValue ? toNum(p.assessedValue) : Math.round(baseValue * 0.4);
      return { ...p, gracePay, amortizePay, effectivePay: selectedPay, estimatedAssessedValue, baseValue };
    });

    const debtCalcs = data.debts.map(d => {
      const principal = toNum(d.amount) * 10000;
      const monthlyRate = (toNum(d.rate)/100)/12;
      const totalMonths = toNum(d.years)*12;
      let amortizePay = 0;
      if (principal > 0 && totalMonths > 0) {
        if (monthlyRate > 0) {
           const factor = Math.pow(1 + monthlyRate, totalMonths);
           amortizePay = Math.round((principal * monthlyRate * factor) / (factor - 1));
        } else amortizePay = Math.round(principal / totalMonths);
      }
      return { ...d, calculatedMonthlyPay: amortizePay };
    });

    // 2. 質押計算
    const pledgeCalcs = data.movableAssets.map(a => {
        const principal = toNum(a.pledgeAmount) * 10000;
        const monthlyRate = (toNum(a.pledgeRate) / 100) / 12;
        const monthlyInterest = Math.round(principal * monthlyRate);
        return { id: a.id, principal, monthlyInterest };
    });
    const totalPledgeAmount = data.movableAssets.reduce((s, a) => s + toNum(a.pledgeAmount), 0);
    const totalPledgeMonthlyInterest = pledgeCalcs.reduce((s, p) => s + p.monthlyInterest, 0);

    // 3. 收支彙整與明細
    // 薪資計算 (Page 1 連動)
    const monthlySalary = data.family.reduce((s, f) => s + (toNum(f.income) * 10000 / 12), 0);
    const totalRent = houseCalcs.reduce((s, h) => s + toNum(h.rent), 0) + presaleCalcs.reduce((s, p) => s + toNum(p.rent), 0);
    const totalAssetIncome = data.movableAssets.reduce((s, a) => s + toNum(a.monthlyIncome), 0);
    const extraIncome = data.otherIncomes.reduce((s, i) => s + toNum(i.amount), 0);
    const totalIncome = monthlySalary + totalRent + totalAssetIncome + extraIncome;

    const totalHousePay = houseCalcs.reduce((s, h) => s + h.effectivePay, 0);
    const totalPresalePay = presaleCalcs.reduce((s, p) => s + p.effectivePay, 0);
    const totalDebtPay = debtCalcs.reduce((s, d) => s + d.calculatedMonthlyPay, 0);
    const totalLoanPayment = totalHousePay + totalPresalePay + totalDebtPay;
    const totalSupportCost = data.relatives.reduce((s, c) => s + toNum(c.monthlyCost), 0);
    const totalLivingExp = data.livingExpenses.reduce((s, e) => s + toNum(e.amount), 0);
    const totalExpense = totalLoanPayment + totalSupportCost + totalLivingExp + totalPledgeMonthlyInterest;
    const netCashFlow = totalIncome - totalExpense;

    const incomeBreakdown = [
        { label: '薪資收入', value: monthlySalary },
        { label: '房租收益', value: totalRent },
        { label: '投資配息', value: totalAssetIncome },
        { label: '其他收入', value: extraIncome },
    ];
    const expenseBreakdown = [
        { label: '貸款還款', value: totalLoanPayment },
        { label: '扶養支出', value: totalSupportCost },
        { label: '生活開銷', value: totalLivingExp },
        { label: '質押利息', value: totalPledgeMonthlyInterest },
    ];

    // 4. 資產與負債明細
    const totalMovable = data.movableAssets.reduce((s, a) => s + toNum(a.amount), 0);
    const totalDebtPrincipal = data.debts.reduce((s, d) => s + toNum(d.amount), 0);
    const totalCompletedMarket = houseCalcs.reduce((s, h) => s + toNum(h.marketValue), 0);
    const totalPresaleMarket = presaleCalcs.reduce((s, p) => s + p.baseValue, 0);
    const totalLoanBalance = houseCalcs.reduce((s, h) => s + toNum(h.loanBalance), 0);
    const totalPresaleLoan = presaleCalcs.reduce((s, p) => s + toNum(p.expectedLoan), 0);
    const totalLiabilities = totalLoanBalance + totalPresaleLoan + totalDebtPrincipal + totalPledgeAmount;
    const totalAssets = totalCompletedMarket + totalPresaleMarket + totalMovable;
    const netWorth = totalAssets - totalLiabilities;

    const assetBreakdown = [
        { label: '成屋市值', value: totalCompletedMarket },
        { label: '預售價值', value: totalPresaleMarket },
        { label: '動產現值', value: totalMovable },
    ];
    const liabilityBreakdown = [
        { label: '房貸餘額', value: totalLoanBalance + totalPresaleLoan },
        { label: '信用/車貸', value: totalDebtPrincipal },
        { label: '動產質押', value: totalPledgeAmount },
    ];

    // 5. 遺產稅計算 (Page 5)
    const totalRealEstateAssessed = houseCalcs.reduce((s, h) => s + h.estimatedAssessedValue, 0) + presaleCalcs.reduce((s, p) => s + p.estimatedAssessedValue, 0);
    const insuranceAssets = data.movableAssets.filter(a => a.type.includes('保單') || a.type.includes('利變'));
    const normalMovableAssets = data.movableAssets.filter(a => !a.type.includes('保單') && !a.type.includes('利變'));
    const grossEstate = totalRealEstateAssessed + totalMovable; 
    const totalLifeInsuranceFaceValue = data.movableAssets.reduce((s, a) => s + toNum(a.faceValue), 0);

    const autoSpouseCount = data.family.length >= 2 ? 1 : 0; 
    const autoParentCount = data.relatives.filter(p => p.relationship === 'parent' && (p.isDependent !== false)).length; // 預設使用 isDependent
    const autoChildCount = data.relatives.filter(p => p.relationship === 'child' && (p.isDependent !== false)).length;
    const autoSiblingCount = data.relatives.filter(p => p.relationship === 'sibling' && (p.isDependent !== false)).length;
    
    const finalSpouseCount = data.taxPeople.spouse !== '' ? toNum(data.taxPeople.spouse) : autoSpouseCount;
    const finalChildCount = data.taxPeople.children !== '' ? toNum(data.taxPeople.children) : autoChildCount;
    const finalParentCount = data.taxPeople.parents !== '' ? toNum(data.taxPeople.parents) : autoParentCount;
    const finalSiblingCount = data.taxPeople.siblings !== '' ? toNum(data.taxPeople.siblings) : autoSiblingCount;
    const finalHandicapCount = data.taxPeople.handicap !== '' ? toNum(data.taxPeople.handicap) : 0;

    const deductions = 
      toNum(data.taxSettings.exemption) + 
      toNum(data.taxSettings.funeralDeduction) + 
      (finalSpouseCount * toNum(data.taxSettings.spouseDeduction)) +
      (finalChildCount * toNum(data.taxSettings.childDeduction)) +
      (finalParentCount * toNum(data.taxSettings.parentDeduction)) +
      (finalSiblingCount * toNum(data.taxSettings.siblingDeduction)) +
      (finalHandicapCount * toNum(data.taxSettings.handicapDeduction));

    const netTaxableEstate = Math.max(0, grossEstate - totalLiabilities - deductions);
    let estateTax = 0;
    if (netTaxableEstate <= 5000) estateTax = netTaxableEstate * 0.10;
    else if (netTaxableEstate <= 10000) estateTax = (netTaxableEstate * 0.15) - 250;
    else estateTax = (netTaxableEstate * 0.20) - 750;

    // 6. 家庭責任額 (簡易計算：總負債 + 預估10年生活費 - 流動資產)
    const annualLivingCost = (totalExpense - totalLoanPayment - totalPledgeMonthlyInterest) * 12; // 扣除負債後的純生活費
    const familyResponsibility = Math.max(0, (annualLivingCost * 10) + totalLiabilities - totalMovable);

    return {
      totalIncome, totalExpense, netCashFlow, netWorth, totalAssets,
      totalLiabilities, totalLoanPayment, totalPledgeMonthlyInterest,
      incomeBreakdown, expenseBreakdown, assetBreakdown, liabilityBreakdown,
      totalRealEstateAssessed, grossEstate, deductions, netTaxableEstate, estateTax,
      totalLifeInsuranceFaceValue, insuranceAssets, normalMovableAssets,
      spouseCount: finalSpouseCount, childCount: finalChildCount, parentCount: finalParentCount, siblingCount: finalSiblingCount, handicapCount: finalHandicapCount,
      familyResponsibility
    };
  }, [data]);

  // --- 未來資產模擬引擎 (Page 6) ---
  const projection = useMemo(() => {
    // 若沒有生日資料，預設 30 歲開始
    const currentAge = data.family[0].birthday ? calculateAge(data.family[0].birthday) : 30;
    const spouseAge = data.family[1] && data.family[1].birthday ? calculateAge(data.family[1].birthday) : currentAge; // 若無配偶或配偶無生日，暫用本人年齡替代
    
    const yearsToSimulate = 100 - currentAge; 
    const startYear = new Date().getFullYear();
    const rows = [];

    // 初始值
    let currentAssets = {
        realEstate: calculations.totalCompletedMarket + calculations.totalPresaleMarket,
        movable: calculations.totalMovable,
    };
    let currentLiabilities = {
        mortgageBalance: calculations.totalLiabilities - toNum(data.movableAssets.reduce((s,a)=>s+toNum(a.pledgeAmount),0)), 
        pledge: calculations.totalPledgeAmount
    };
    
    // 取得假設參數 (若為空則預設 0 或 1)
    const rates = {
        cpi: toNum(data.assumptions.cpi) / 100,
        reGrowth: toNum(data.assumptions.realEstateGrowth) / 100,
        // 注意：薪資成長率不再全域統一，改用個人設定，這裡僅備用
    };

    // 計算加權平均投資報酬率
    let weightedReturnRate = 0;
    let totalInvested = 0;
    data.movableAssets.forEach(a => {
        const amt = toNum(a.amount);
        const rate = a.returnRate ? toNum(a.returnRate) : 0; 
        weightedReturnRate += amt * rate;
        totalInvested += amt;
    });
    const avgInvRate = totalInvested > 0 ? (weightedReturnRate / totalInvested) / 100 : 0.01;

    // 取得成員個別薪資與成長率
    const selfIncomeBase = toNum(data.family[0].income) * 10000; // 轉為元
    const selfGrowth = toNum(data.family[0].salaryGrowth) / 100;
    
    const spouseIncomeBase = data.family[1] ? toNum(data.family[1].income) * 10000 : 0;
    const spouseGrowth = data.family[1] ? toNum(data.family[1].salaryGrowth) / 100 : 0;

    for (let i = 0; i <= yearsToSimulate; i++) {
        const year = startYear + i;
        const myAge = currentAge + i;
        const spAge = spouseAge + i; // 配偶年齡

        // 1. 收入計算 (含 65 歲退休歸零邏輯)
        // 本人薪資
        let currentSelfSalary = 0;
        if (myAge < 65) {
            currentSelfSalary = selfIncomeBase * Math.pow(1 + selfGrowth, i);
        }
        // 配偶薪資
        let currentSpouseSalary = 0;
        if (spAge < 65) {
            currentSpouseSalary = spouseIncomeBase * Math.pow(1 + spouseGrowth, i);
        }
        
        // 總年收入 (薪資 + 房租 + 股息 + 其他) -> 假設房租與其他收入隨CPI成長，股息隱含在動產複利中不重複計入現金流(或可視為領出花用)
        // 這裡採取：薪資 + (房租+其他)*CPI成長。股息假設再投入(滾入動產成長)。
        const otherIncome = (calculations.totalRent*12 + toNum(data.otherIncomes.reduce((s,x)=>s+toNum(x.amount),0))*12) * Math.pow(1 + rates.cpi, i);
        const yearlyTotalIncome = currentSelfSalary + currentSpouseSalary + otherIncome;

        // 2. 支出計算 (含子女獨立邏輯)
        // 基礎生活費 (扣除房貸與質押利息，因為這些另外算)
        // 原始非負債月支出 = 總月支 - 貸款月付 - 質押月息
        const baseMonthlyExpense = calculations.totalExpense - calculations.totalLoanPayment - calculations.totalPledgeMonthlyInterest;
        
        // 判斷子女是否成年 (減少支出)
        // 先算出「目前」的子女與父母扶養費總額
        const currentDependentCost = data.relatives.reduce((s, r) => s + toNum(r.monthlyCost), 0);
        
        // 算出「未來該年」應扣除的子女扶養費 (已成年者)
        let costReduction = 0;
        data.relatives.forEach(r => {
            if (r.relationship === 'child') {
                const childAge = calculateAge(r.birthday) + i;
                if (childAge >= toNum(data.assumptions.childIndependenceAge)) {
                    costReduction += toNum(r.monthlyCost);
                }
            }
            // 父母百年後? (這裡暫不模擬父母過世，僅模擬子女獨立)
        });

        // 調整後的年支出 = (基礎月支 - 減少額) * 12 * CPI
        const adjustedAnnualExpense = (Math.max(0, baseMonthlyExpense - costReduction)) * 12 * Math.pow(1 + rates.cpi, i);
        
        // 3. 負債支出 (房貸+質押)
        // 房貸餘額遞減
        let currentMortgageBalance = 0;
        let annualMortgagePay = 0;
        if (i === 0) {
            currentMortgageBalance = currentLiabilities.mortgageBalance;
            annualMortgagePay = calculations.totalLoanPayment * 12;
        } else {
            const prev = rows[i-1];
            // 簡易模擬：每年還款額固定，利息隨本金減少，本金償還增加 -> 這裡簡化為餘額線性遞減
            // 若要精確需跑每筆貸款的 amortization。這裡假設每年還本 = 總貸款 / 20年 (粗略)
            // 修正：使用上一年餘額 - (年還款 - 利息)。太複雜，改用更簡單的：假設 20 年還完。
            const reduceAmount = i < 20 ? (currentLiabilities.mortgageBalance / 20) : 0;
            currentMortgageBalance = Math.max(0, prev.mortgageBalance - reduceAmount);
            annualMortgagePay = i < 20 ? (calculations.totalLoanPayment * 12) : 0; // 20年後不需還款
        }

        // 質押利息 (80歲前付息，80歲還本)
        let pledgeBalance = currentLiabilities.pledge;
        let annualPledgePay = calculations.totalPledgeMonthlyInterest * 12;
        
        if (myAge >= toNum(data.assumptions.pledgeEndAge)) {
            pledgeBalance = 0;
            annualPledgePay = 0;
        }

        // 當年總流出
        const yearlyTotalOutflow = adjustedAnnualExpense + annualMortgagePay + annualPledgePay;
        
        // 當年淨現金流 (儲蓄)
        const yearlyNetFlow = yearlyTotalIncome - yearlyTotalOutflow;

        // 4. 資產成長
        // 不動產
        const reValue = currentAssets.realEstate * Math.pow(1 + rates.reGrowth, i);
        
        // 動產 (上一年動產 * (1+報酬率) + 當年儲蓄 - 80歲還款)
        let newMovable = 0;
        if (i === 0) {
            newMovable = currentAssets.movable;
        } else {
            const prevRow = rows[i-1];
            newMovable = prevRow.movable * (1 + avgInvRate) + yearlyNetFlow;
            
            // 80歲那年，動產需扣除質押本金
            if (myAge === toNum(data.assumptions.pledgeEndAge) && rows[i-1].pledgeBalance > 0) {
                newMovable -= currentLiabilities.pledge;
            }
        }

        const totalLiab = currentMortgageBalance + pledgeBalance;
        const netW = reValue + newMovable - totalLiab;

        rows.push({
            year,
            age: myAge,
            realEstate: Math.round(reValue),
            movable: Math.round(newMovable),
            totalAssets: Math.round(reValue + newMovable),
            mortgageBalance: Math.round(currentMortgageBalance),
            pledgeBalance: Math.round(pledgeBalance),
            totalLiabilities: Math.round(totalLiab),
            netWorth: Math.round(netW),
            yearlyIncome: Math.round(yearlyTotalIncome), // 顯示用
            yearlyExpense: Math.round(yearlyTotalOutflow), // 顯示用
            yearlyCashFlow: Math.round(yearlyNetFlow)
        });
    }
    return rows;
  }, [data, calculations]);

  const n = (val) => (val === 0 || !val ? '0' : Math.round(val).toLocaleString());
  const addRow = (type) => {
    const id = Date.now();
    if (type === 'family') setData(p => ({...p, family: [...p.family, { id, role: '新成員', birthday: '', gender: '男', age: 0, income: '' }]}));
    // 修正：新增親屬時關係欄位為空，強制選擇
    if (type === 'support') setData(p => ({...p, relatives: [...p.relatives, { id, relationship: '', name: '', birthday: '', monthlyCost: '', note: '' }]}));
    if (type === 'house') setData(p => ({...p, completedHouses: [...p.completedHouses, { ...initialBaseData.completedHouses[0], id }]}));
    if (type === 'presale') setData(p => ({...p, presaleHouses: [...p.presaleHouses, { ...initialBaseData.presaleHouses[0], id }]}));
    if (type === 'movable') setData(p => ({...p, movableAssets: [...p.movableAssets, { id, type: '自定義資產', amount: '', monthlyIncome: '', pledgeAmount: '', pledgeRate: '', faceValue: '', returnRate: '' }]}));
    if (type === 'debt') setData(p => ({...p, debts: [...p.debts, { id, type: '新增貸款項目', amount: '', rate: '', years: 5 }]}));
    if (type === 'incomeItem') setData(p => ({...p, otherIncomes: [...p.otherIncomes, { id, type: '新增收入項目', amount: '' }]}));
    if (type === 'livingItem') setData(p => ({...p, livingExpenses: [...p.livingExpenses, { id, type: '其他自定義支出', amount: '', icon: 'ShoppingBag' }]}));
  };
  const removeRow = (type, id) => { 
      if(type === 'relatives') setData(p => ({ ...p, relatives: p.relatives.filter(item => item.id !== id) }));
      else setData(p => ({ ...p, [type]: p[type].filter(item => item.id !== id) })); 
  };

  const inputBaseStyle = "bg-pink-50 border border-pink-100 rounded-xl px-4 py-2 text-sm text-slate-700 outline-none focus:bg-white focus:border-pink-300 transition-all shadow-inner font-medium no-spinner";
  const tableInputStyle = "bg-slate-100/80 border border-slate-200/50 rounded-lg px-2 py-1 text-xs text-slate-700 outline-none focus:bg-white focus:border-pink-300 transition-all shadow-inner font-mono no-spinner";
  const labelOnlyStyle = "bg-transparent border-none px-0 py-1 text-xs font-black uppercase tracking-widest text-slate-500 outline-none w-full cursor-default";
  const taxInputStyle = "bg-white/10 border border-orange-400/30 rounded px-2 py-1 text-white font-mono font-bold text-sm text-right w-full outline-none focus:border-orange-400 transition-colors placeholder-white/30 no-spinner";

  return (
    <div className="min-h-screen bg-[#FAF9F9] text-slate-700 font-sans pb-20 selection:bg-pink-100">
      <style>{`.no-spinner::-webkit-inner-spin-button, .no-spinner::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .no-spinner { -moz-appearance: textfield; }`}</style>

      {/* Header & Nav */}
      <div className="fixed inset-0 pointer-events-none overflow-hidden"><div className="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-pink-100/60 blur-[120px] rounded-full"></div><div className="absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] bg-[#C08081]/10 blur-[120px] rounded-full"></div></div>
      <div className="relative z-10 max-w-[1600px] mx-auto p-4 md:p-8">
        <header className="flex flex-col lg:flex-row justify-between items-start lg:items-center gap-8 mb-12 border-b border-pink-100 pb-10">
          <div className="flex items-center gap-4"><div className="w-14 h-14 bg-gradient-to-br from-pink-300 to-[#C08081] rounded-2xl flex items-center justify-center shadow-lg shadow-pink-200 text-white"><Target className="w-8 h-8" /></div><div><h1 className="text-3xl font-black text-slate-800 tracking-tight flex items-center gap-2 uppercase">Insma <span className="text-pink-300">|</span> <span className="text-[#C08081]">資產規劃系統</span></h1><p className="text-[10px] uppercase font-bold tracking-[0.3em] text-slate-400 font-sans">專業資產配置與財務規劃方案</p></div></div><div className="text-[10px] text-slate-300 font-black tracking-widest uppercase bg-white/40 px-4 py-2 rounded-full border border-white/50 font-mono tracking-tighter">精準財務終端 v12.1</div>
        </header>
        <nav className="flex flex-wrap gap-2 mb-12 bg-white p-1.5 rounded-2xl w-fit border border-pink-50 shadow-sm font-sans">
          {[ { id: 'family', label: '家庭成員資料', icon: UserCircle2 }, { id: 'balanceSheet', label: '資產負債表', icon: PieChart }, { id: 'cashFlow', label: '收入支出表', icon: BadgeDollarSign }, { id: 'analysis', label: '總體分析報告', icon: BarChart3 }, { id: 'inheritance', label: '資產傳承與稅務', icon: Scale }, { id: 'projection', label: '生涯資產模擬', icon: LineChart } ].map((tab) => (
            <button key={tab.id} onClick={() => setActiveTab(tab.id)} className={`flex items-center gap-2 px-8 py-3 rounded-xl text-xs font-bold transition-all ${activeTab === tab.id ? 'bg-pink-400 text-white shadow-md' : 'text-slate-400 hover:text-pink-400 hover:bg-pink-50'}`}><tab.icon className="w-4 h-4" />{tab.label}</button>
          ))}
        </nav>

        <main className="animate-in fade-in slide-in-from-bottom-4 duration-700">
          
          {/* Page 1: Family */}
          {activeTab === 'family' && (
            <div className="space-y-16">
              <section className="bg-white border border-pink-50 rounded-[40px] p-10 shadow-sm font-sans">
                {/* ... Family inputs ... */}
                <div className="flex items-center justify-between mb-10"><div className="flex items-center gap-3"><Users className="w-6 h-6 text-pink-500" /><h2 className="text-lg font-black text-slate-800 uppercase tracking-tight font-sans">核心成員參數輸入</h2></div></div>
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">{data.family.map((member, idx) => ( <div key={member.id} className={`p-8 rounded-[32px] border relative group transition-all hover:shadow-md ${idx === 0 ? 'bg-pink-50/20 border-pink-100' : 'bg-slate-50 border-slate-100'}`}><input className={`${labelOnlyStyle} mb-6 text-slate-800 text-sm font-bold font-sans`} value={member.role} readOnly /><div className="grid grid-cols-1 gap-6"><div className="space-y-2"><label className="text-[10px] font-black text-slate-400 uppercase tracking-widest font-sans">年薪資所得 (萬)</label><input type="number" className={inputBaseStyle + " w-full font-mono font-bold"} value={member.income} onChange={(e) => handleInputChange(`family.${idx}.income`, e.target.value)} /></div><div className="space-y-2"><label className="text-[10px] font-black text-slate-400 uppercase tracking-widest font-sans">常態性薪資漲幅 (%)</label><input type="number" className={inputBaseStyle + " w-full font-mono font-bold"} placeholder="每年預估" value={member.salaryGrowth} onChange={(e) => handleInputChange(`family.${idx}.salaryGrowth`, e.target.value)} /></div><div className="space-y-2"><label className="text-[10px] font-black text-slate-400 uppercase tracking-widest font-sans">出生日期</label><input type="date" max="9999-12-31" className={inputBaseStyle + " w-full font-sans"} value={member.birthday} onChange={(e) => handleInputChange(`family.${idx}.birthday`, e.target.value)} /></div></div></div>))}</div>
                {/* 家庭責任額試算 (保持不變) */}
                <div className="mt-8 p-6 bg-slate-50 rounded-2xl border border-slate-100 flex items-center justify-between"><div className="flex flex-col"><h3 className="font-bold text-slate-700 flex items-center gap-2"><ShieldCheck className="w-4 h-4 text-emerald-500" /> 建議家庭責任額 (壽險缺口)</h3><span className="text-xs text-slate-400 mt-1">計算公式：(總負債 + 未來10年生活費) - 現有流動資產</span></div><span className="text-2xl font-mono font-black text-slate-700">{n(calculations.familyResponsibility)} <span className="text-sm">萬</span></span></div>
              </section>

              <section className="bg-white border border-pink-50 rounded-[40px] p-10 shadow-sm font-sans">
                 <div className="flex items-center justify-between mb-10 text-orange-500"><div className="flex items-center gap-3"><div className="w-10 h-10 rounded-xl bg-orange-50 flex items-center justify-center shadow-inner"><HeartHandshake className="w-5 h-5" /></div><h2 className="text-lg font-black text-slate-800 uppercase tracking-tight font-sans">二等親內成員資料 (扶養判斷)</h2></div><button onClick={() => addRow('support')} className="flex items-center gap-2 px-4 py-2 bg-orange-100 text-orange-500 rounded-xl text-[10px] font-black hover:bg-orange-200 transition-all font-sans"><PlusSquare className="w-3.5 h-3.5" /> 新增成員</button></div>
                 <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                    {data.relatives && data.relatives.map((person, idx) => {
                       const age = calculateAge(person.birthday);
                       const isDependent = checkIsDependent(person);
                       return (
                       <div key={person.id} className={`p-8 rounded-[32px] border relative group transition-all hover:shadow-md font-sans ${isDependent ? 'border-orange-200 bg-orange-50/10' : 'border-slate-100 bg-slate-50'}`}>
                          <button onClick={() => removeRow('relatives', person.id)} className="absolute top-6 right-6 p-1 text-slate-300 hover:text-red-400 opacity-0 group-hover:opacity-100 transition-all"><Trash2 className="w-4 h-4" /></button>
                          <div className="flex items-center gap-3 mb-6"><div className="text-orange-400 font-bold"><Heart className="w-4 h-4" /></div><select className="bg-white border border-orange-200 rounded-lg px-2 py-1 text-xs text-orange-600 outline-none focus:border-orange-400" value={person.relationship} onChange={(e) => handleInputChange(`relatives.${idx}.relationship`, e.target.value)}><option value="">請選擇關係</option><option value="parent">父母 (直系尊)</option><option value="grandparent">祖父母 (直系尊)</option><option value="child">子女 (直系卑)</option><option value="sibling">兄弟姐妹 (旁系)</option><option value="other">其他</option></select><input className={`${labelOnlyStyle} text-slate-700 text-sm font-bold font-sans border-b border-dashed border-slate-200`} value={person.name} placeholder="姓名" onChange={(e) => handleInputChange(`relatives.${idx}.name`, e.target.value)} /></div>
                          <div className="space-y-4"><div className="space-y-2"><label className="text-[10px] font-black text-slate-400 uppercase tracking-widest font-sans">出生日期 (年齡: {age}歲)</label><input type="date" max="9999-12-31" className={inputBaseStyle + " w-full bg-white border-slate-200 text-slate-700 font-sans"} value={person.birthday} onChange={(e) => handleInputChange(`relatives.${idx}.birthday`, e.target.value)} /></div><div className="space-y-2"><label className="text-[10px] font-black text-slate-400 uppercase tracking-widest font-sans">每月生活支出 (元)</label><input type="number" className={inputBaseStyle + " w-full bg-white border-slate-200 text-slate-700 font-mono font-black"} value={person.monthlyCost} onChange={(e) => handleInputChange(`relatives.${idx}.monthlyCost`, e.target.value)} /></div><div className="flex items-center justify-between bg-white p-2 rounded-lg border border-slate-100"><span className="text-[10px] font-bold text-slate-400">符合稅法扶養?</span><div className={`px-2 py-1 rounded text-xs font-bold ${isDependent ? 'bg-orange-100 text-orange-500' : 'bg-slate-100 text-slate-400'}`}>{isDependent ? '符合' : '不符合'}</div></div></div>
                       </div>
                    )})}
                    {data.relatives.length === 0 && <div className="col-span-full text-center py-10 text-slate-300 text-xs">尚未新增任何扶養對象</div>}
                 </div>
              </section>
            </div>
          )}

          {/* Page 2 (Balance Sheet) & Page 3 (Cash Flow) are mostly same logic, preserved */}
          {activeTab === 'balanceSheet' && (
             <div className="space-y-12">
               {/* 房產表格 (保持不變) */}
               <section className="space-y-8 font-sans">
                 <div className="flex items-center gap-3 px-4"><Building2 className="w-6 h-6 text-pink-500" /><h2 className="text-xl font-black text-slate-800 tracking-tight font-sans">不動產配置詳情</h2></div>
                 {/* ... table omitted for brevity, use same code ... */}
                 <div className="bg-white border border-pink-50 rounded-[40px] overflow-hidden shadow-sm transition-all hover:shadow-md"><div className="p-8 border-b border-pink-50 bg-pink-50/20 flex justify-between items-center text-xs"><h3 className="font-black text-slate-500 uppercase tracking-widest flex items-center gap-2 font-sans"><Home className="w-4 h-4" /> 1. 成屋項目 (已完工)</h3><button onClick={() => addRow('house')} className="px-5 py-2.5 bg-pink-400 text-white font-black rounded-xl shadow-lg flex items-center gap-2 hover:bg-pink-500 transition-all font-sans"><PlusCircle className="w-4 h-4" /> 新增成屋</button></div><div className="overflow-x-auto"><table className="w-full border-collapse font-sans"><thead><tr className="bg-slate-50 text-slate-400 text-[10px] font-black tracking-widest uppercase text-center font-sans"><th className="px-6 py-5 text-left font-sans">建案案名 / 地址</th><th className="px-4 py-5 font-sans">市值 / 貸款(萬)</th><th className="px-4 py-5 font-sans">利率 / 年期</th><th className="px-6 py-5 min-w-[340px] font-sans">月還款試算 (併列選取)</th><th className="px-4 py-5 font-sans">租金月收</th><th className="px-6 py-5 font-sans">操作</th></tr></thead><tbody className="divide-y divide-pink-50 text-xs text-center font-medium">{data.completedHouses.map((h, idx) => { const { gracePay, amortizePay } = calculateMortgage(h.loanBalance, h.rate, h.loanYear); return ( <tr key={h.id} className="group hover:bg-pink-50/10 transition-colors"><td className="px-6 py-5 text-left space-y-1"><input className={tableInputStyle + " font-bold w-40 font-sans"} placeholder="案名" value={h.name} onChange={(e) => handleInputChange(`completedHouses.${idx}.name`, e.target.value)} /><div className="flex items-center gap-1"><MapPin className="w-3 h-3 text-slate-400" /><input className={tableInputStyle + " text-[10px] w-40 font-sans bg-transparent border-slate-200"} placeholder="地址" value={h.address} onChange={(e) => handleInputChange(`completedHouses.${idx}.address`, e.target.value)} /></div></td><td className="px-4 py-5 space-y-1"><div className="flex items-center justify-center gap-1 text-slate-800 font-bold mb-1 font-sans"><span className="text-[9px] opacity-40 uppercase">市值</span><input type="number" className={tableInputStyle + " w-24 font-bold"} value={h.marketValue} onChange={(e) => handleInputChange(`completedHouses.${idx}.marketValue`, e.target.value)} /></div><div className="flex items-center justify-center gap-1 text-[#C08081] font-bold font-sans"><span className="text-[9px] opacity-40 uppercase">貸款</span><input type="number" className={tableInputStyle + " w-24 font-bold"} value={h.loanBalance} onChange={(e) => handleInputChange(`completedHouses.${idx}.loanBalance`, e.target.value)} /></div></td><td className="px-4 py-5 space-y-1 font-sans"><div className="flex items-center justify-center gap-1 font-bold"><input type="number" step="0.01" className={tableInputStyle + " w-16 font-bold"} value={h.rate} onChange={(e) => handleInputChange(`completedHouses.${idx}.rate`, e.target.value)} />%</div><div className="flex items-center justify-center gap-1"><input type="number" className={tableInputStyle + " w-16 font-bold"} value={h.loanYear} onChange={(e) => handleInputChange(`completedHouses.${idx}.loanYear`, e.target.value)} />y</div></td><td className="px-6 py-5"><div className="flex gap-2 justify-center bg-slate-50/50 p-1.5 rounded-2xl border border-slate-100 shadow-inner font-sans"><button onClick={() => handleInputChange(`completedHouses.${idx}.repayType`, 'grace')} className={`flex-1 p-3 rounded-xl border transition-all flex flex-col items-center gap-1 ${h.repayType === 'grace' ? 'bg-pink-500 border-pink-600 shadow-md text-white scale-[1.02]' : 'bg-white border-slate-100 text-slate-400 hover:border-pink-200'}`}><span className="text-[8px] font-black uppercase tracking-widest font-sans">寬限期僅息</span><span className="font-mono font-black text-sm">{n(gracePay)}</span></button><button onClick={() => handleInputChange(`completedHouses.${idx}.repayType`, 'amortize')} className={`flex-1 p-3 rounded-xl border transition-all flex flex-col items-center gap-1 ${h.repayType === 'amortize' ? 'bg-[#C08081] border-[#A66D6E] shadow-md text-white scale-[1.02]' : 'bg-white border-slate-100 text-slate-400 hover:border-pink-200'}`}><span className="text-[8px] font-black uppercase tracking-widest font-sans">本利攤還</span><span className="font-mono font-black text-sm">{n(amortizePay)}</span></button></div></td><td className="px-4 py-5 font-mono font-bold text-emerald-500"><input type="number" className={tableInputStyle + " w-24 text-emerald-500 font-bold text-sm bg-emerald-50/50 border-emerald-100 font-sans"} value={h.rent} onChange={(e) => handleInputChange(`completedHouses.${idx}.rent`, e.target.value)} /></td><td className="px-6 py-5 text-center"><button onClick={() => removeRow('completedHouses', h.id)} className="text-slate-200 hover:text-red-400 transition-colors"><Trash2 className="w-4 h-4" /></button></td></tr> ); })}</tbody></table></div></div>
                 {/* 預售項目 */}
                 <div className="bg-white border border-[#C08081]/10 rounded-[40px] overflow-hidden shadow-sm transition-all hover:shadow-md font-sans"><div className="p-8 border-b border-pink-50 bg-[#C08081]/5 flex justify-between items-center text-xs"><h3 className="font-black text-[#C08081] uppercase tracking-widest flex items-center gap-2 font-sans"><Construction className="w-4 h-4" /> 2. 預售項目 (壓力測試)</h3><button onClick={() => addRow('presale')} className="px-5 py-2.5 bg-[#C08081] text-white font-black rounded-xl shadow-lg flex items-center gap-2 hover:bg-[#A66D6E] transition-all font-sans"><PlusCircle className="w-4 h-4" /> 新增預售</button></div><div className="overflow-x-auto"><table className="w-full border-collapse font-sans"><thead><tr className="bg-slate-50 text-slate-400 text-[10px] font-black tracking-widest uppercase text-center font-sans"><th className="px-6 py-5 text-left font-sans">案名 / 交屋期 / 地址</th><th className="px-4 py-5 font-sans">合約 / 市價 / 已付(萬)</th><th className="px-6 py-5 font-sans">預計貸款 / 利率 / 年期</th><th className="px-6 py-5 min-w-[340px] font-sans">交屋後還款模擬</th><th className="px-4 py-5 font-sans">預估租金</th><th className="px-6 py-5 font-sans">操作</th></tr></thead><tbody className="divide-y divide-pink-50 text-xs text-center font-medium font-sans">{data.presaleHouses.map((p, idx) => { const { gracePay, amortizePay } = calculateMortgage(p.expectedLoan, p.rate, p.loanYear); return ( <tr key={p.id} className="group hover:bg-pink-50/10 transition-colors"><td className="px-6 py-5 text-left space-y-1"><input className={tableInputStyle + " font-bold w-40 font-sans"} value={p.name} placeholder="案名" onChange={(e) => handleInputChange(`presaleHouses.${idx}.name`, e.target.value)} /><input className={tableInputStyle + " text-[9px] w-40 font-sans"} placeholder="交屋日" value={p.delivery} onChange={(e) => handleInputChange(`presaleHouses.${idx}.delivery`, e.target.value)} /><div className="flex items-center gap-1"><MapPin className="w-3 h-3 text-slate-400" /><input className={tableInputStyle + " text-[10px] w-40 font-sans bg-transparent border-slate-200"} placeholder="地址" value={p.address} onChange={(e) => handleInputChange(`presaleHouses.${idx}.address`, e.target.value)} /></div></td><td className="px-4 py-5 space-y-1 font-sans"><div className="flex gap-1 justify-center"><span className="text-[9px] opacity-40 uppercase">合約</span><input type="number" className={tableInputStyle + " w-20 font-sans"} value={p.contractPrice} onChange={(e) => handleInputChange(`presaleHouses.${idx}.contractPrice`, e.target.value)} /></div><div className="flex gap-1 justify-center"><span className="text-[9px] opacity-40 uppercase text-blue-500">市價</span><input type="number" className={tableInputStyle + " w-20 text-blue-600 font-sans"} value={p.marketValue} onChange={(e) => handleInputChange(`presaleHouses.${idx}.marketValue`, e.target.value)} /></div><div className="flex gap-1 justify-center"><span className="text-[9px] opacity-40 uppercase text-emerald-500">已付</span><input type="number" className={tableInputStyle + " w-20 text-emerald-500 font-sans"} value={p.paidEngineering} onChange={(e) => handleInputChange(`presaleHouses.${idx}.paidEngineering`, e.target.value)} /></div></td><td className="px-6 py-5 space-y-1 font-sans"><div className="flex items-center justify-center gap-1 font-bold"><span className="text-[8px] opacity-40 uppercase font-sans">貸款</span><input type="number" className={tableInputStyle + " w-24 font-black font-mono"} value={p.expectedLoan} onChange={(e) => handleInputChange(`presaleHouses.${idx}.expectedLoan`, e.target.value)} /></div><div className="flex items-center justify-center gap-1 font-sans"><input type="number" step="0.1" className={tableInputStyle + " w-14 text-[#C08081] font-bold"} value={p.rate} onChange={(e) => handleInputChange(`presaleHouses.${idx}.rate`, e.target.value)} />% / <input type="number" className={tableInputStyle + " w-10 font-sans"} value={p.loanYear} onChange={(e) => handleInputChange(`presaleHouses.${idx}.loanYear`, e.target.value)} />y</div></td><td className="px-6 py-5"><div className="flex gap-3 justify-center bg-slate-50/50 p-1.5 rounded-2xl border border-slate-100 shadow-inner font-sans"><button onClick={() => handleInputChange(`presaleHouses.${idx}.repayType`, 'grace')} className={`flex-1 p-3 rounded-xl border transition-all flex flex-col items-center gap-1 ${p.repayType === 'grace' ? 'bg-pink-500 border-pink-600 shadow-md text-white scale-[1.02]' : 'bg-white border-slate-100 text-slate-400 hover:border-pink-200'}`}><span className="text-[8px] font-black uppercase tracking-widest font-sans">寬限模式</span><span className="font-mono font-black text-sm">{n(gracePay)}</span></button><button onClick={() => handleInputChange(`presaleHouses.${idx}.repayType`, 'amortize')} className={`flex-1 p-3 rounded-xl border transition-all flex flex-col items-center gap-1 ${p.repayType === 'amortize' ? 'bg-[#C08081] border-[#A66D6E] shadow-md text-white scale-[1.02]' : 'bg-white border-slate-100 text-slate-400 hover:border-pink-200'}`}><span className="text-[8px] font-black uppercase tracking-widest font-sans">本利攤模式</span><span className="font-mono font-black text-sm">{n(amortizePay)}</span></button></div></td><td className="px-4 py-5 font-mono font-bold text-emerald-500"><input type="number" className={tableInputStyle + " w-24 text-emerald-600 font-bold bg-emerald-50/50 border-emerald-100 font-sans"} value={p.rent} onChange={(e) => handleInputChange(`presaleHouses.${idx}.rent`, e.target.value)} /></td><td className="px-6 py-5 text-center"><button onClick={() => removeRow('presaleHouses', p.id)} className="text-slate-200 hover:text-red-400 transition-colors"><Trash2 className="w-4 h-4" /></button></td></tr> ); })}</tbody></table></div></div>
               </section>
               {/* Movable Assets (Expanded) */}
               <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 text-sm font-sans">
                 <section className="bg-white border border-pink-50 rounded-[40px] p-10 shadow-sm transition-all hover:shadow-md font-sans">
                    <div className="flex items-center justify-between mb-8 text-sm font-sans"><div className="flex items-center gap-3 font-sans"><Wallet className="w-5 h-5 text-pink-500" /><h2 className="font-black text-slate-800 tracking-tight uppercase font-sans">動產配置明細</h2></div><button onClick={() => addRow('movable')} className="p-2 hover:bg-pink-50 rounded-full text-pink-400 transition-all font-sans"><PlusSquare className="w-5 h-5" /></button></div>
                    <div className="space-y-4 font-sans font-medium">
                       {data.movableAssets.map((asset, idx) => {
                          const isAccumulative = asset.type.includes('現金') || asset.type.includes('累積型') || asset.type.includes('利變');
                          const isInsurance = asset.type.includes('利變') || asset.type.includes('保單') || asset.type.includes('儲蓄險');
                          return ( <div key={asset.id} className="p-6 bg-slate-50 rounded-[28px] border border-transparent flex flex-col gap-4 group shadow-sm transition-all hover:bg-slate-100/50 font-sans"><div className="flex items-center justify-between"><div className="flex-1 space-y-2"><input className={`${labelOnlyStyle} text-slate-500 pointer-events-auto font-bold font-sans`} value={asset.type} onChange={(e) => handleInputChange(`movableAssets.${idx}.type`, e.target.value)} /><div className="flex items-center gap-2 font-sans"><span className="text-[10px] text-slate-300 font-bold uppercase tracking-tighter font-sans">帳面總值:</span><input type="number" className={`${inputBaseStyle} py-1 w-24 bg-white font-mono font-black text-slate-800 font-sans`} value={asset.amount} onChange={(e) => handleInputChange(`movableAssets.${idx}.amount`, e.target.value)} /><span className="text-[9px] opacity-30 font-bold font-sans uppercase">萬</span></div>{isInsurance && (<div className="flex items-center gap-2 font-sans"><span className="text-[10px] text-slate-300 font-bold uppercase tracking-tighter font-sans text-orange-400">壽險保額:</span><input type="number" className={`${inputBaseStyle} py-1 w-24 bg-white font-mono font-bold text-orange-500 font-sans`} value={asset.faceValue} placeholder="身故理賠" onChange={(e) => handleInputChange(`movableAssets.${idx}.faceValue`, e.target.value)} /><span className="text-[9px] opacity-30 font-bold font-sans uppercase">萬</span></div>)}</div><div className="flex flex-col gap-2"><div className="flex items-center gap-1 p-2 rounded-xl bg-blue-50/50 border border-blue-100"><Banknote className="w-3 h-3 text-blue-400" /><input type="number" placeholder="質押(萬)" className="w-16 bg-transparent text-right font-mono text-xs text-blue-600 outline-none placeholder:text-blue-200" value={asset.pledgeAmount} onChange={(e) => handleInputChange(`movableAssets.${idx}.pledgeAmount`, e.target.value)} /></div><div className="flex items-center gap-1 p-2 rounded-xl bg-blue-50/50 border border-blue-100"><span className="text-[9px] text-blue-300 font-bold">%</span><input type="number" placeholder="利率" className="w-16 bg-transparent text-right font-mono text-xs text-blue-600 outline-none placeholder:text-blue-200" value={asset.pledgeRate} onChange={(e) => handleInputChange(`movableAssets.${idx}.pledgeRate`, e.target.value)} /></div></div></div><div className="flex justify-between items-center border-t border-slate-100 pt-2">{!isAccumulative ? (<div className="flex items-center gap-1 font-sans"><span className="text-[9px] text-emerald-400 font-black uppercase font-sans">月配息收益</span><input type="number" className={`${inputBaseStyle} py-1 w-20 bg-white text-right font-mono font-bold text-emerald-500 font-sans`} value={asset.monthlyIncome} onChange={(e) => handleInputChange(`movableAssets.${idx}.monthlyIncome`, e.target.value)} /></div>) : <span></span>}<button onClick={() => removeRow('movableAssets', asset.id)} className="text-slate-300 hover:text-red-400 transition-all font-sans"><Trash2 className="w-4 h-4" /></button></div></div> ); })}
                    </div>
                 </section>
                 <section className="bg-white border border-pink-50 rounded-[40px] p-10 shadow-sm transition-all hover:shadow-md font-sans">
                    <div className="flex items-center justify-between mb-8 text-sm font-sans"><div className="flex items-center gap-3 font-sans"><CreditCard className="w-5 h-5 text-[#C08081]" /><h2 className="font-black text-slate-800 tracking-tight uppercase font-sans">非房貸貸款項目</h2></div><button onClick={() => addRow('debt')} className="p-2 hover:bg-pink-50 rounded-full text-[#C08081] transition-all font-sans"><PlusSquare className="w-5 h-5 font-sans" /></button></div>
                    <div className="space-y-4 font-sans font-medium">{data.debts.map((debt, idx) => { const { amortizePay } = calculateMortgage(debt.amount, debt.rate, debt.years); return ( <div key={debt.id} className="p-6 bg-[#C08081]/5 rounded-[28px] group shadow-sm transition-all font-sans"><div className="flex justify-between items-start mb-4 font-sans"><input className={`${labelOnlyStyle} text-[#C08081] pointer-events-auto font-black font-sans`} value={debt.type} onChange={(e) => handleInputChange(`debts.${idx}.type`, e.target.value)} /><button onClick={() => removeRow('debts', debt.id)} className="opacity-0 group-hover:opacity-100 text-slate-300 hover:text-red-400 transition-all font-sans"><Trash2 className="w-3.5 h-3.5 font-sans" /></button></div><div className="grid grid-cols-3 gap-4 mb-4 border-b border-[#C08081]/10 pb-4 text-center font-sans"><div className="space-y-1 font-sans"><span className="text-[9px] opacity-40 font-bold block uppercase font-sans">金額(萬)</span><input type="number" className={`${inputBaseStyle} py-1.5 w-full bg-white text-xs font-mono font-black border-none text-center`} value={debt.amount} onChange={(e) => handleInputChange(`debts.${idx}.amount`, e.target.value)} /></div><div className="space-y-1 font-sans"><span className="text-[9px] opacity-40 font-bold block font-sans">年期(y)</span><input type="number" className={`${inputBaseStyle} py-1.5 w-full bg-white text-xs font-mono border-none text-center`} value={debt.years} onChange={(e) => handleInputChange(`debts.${idx}.years`, e.target.value)} /></div><div className="space-y-1 font-sans"><span className="text-[9px] opacity-40 font-bold block font-sans">利率(%)</span><input type="number" step="0.1" className={`${inputBaseStyle} py-1.5 w-full bg-white text-xs font-mono border-none text-center`} value={debt.rate} onChange={(e) => handleInputChange(`debts.${idx}.rate`, e.target.value)} /></div></div><div className="flex justify-between items-center px-1 font-sans"><span className="text-[9px] font-black text-slate-400 uppercase tracking-tighter font-sans">試算月付金:</span><span className="text-sm font-mono font-black text-[#C08081]">-{n(amortizePay)} 元</span></div></div> ); })}</div>
                 </section>
              </div>
             </div>
          )}

          {activeTab === 'cashFlow' && (
            <div className="space-y-12">
               {/* 保持 CashFlow 不變 */}
               <section className="bg-white border border-pink-50 rounded-[40px] p-10 shadow-sm font-sans">
                <div className="flex items-center gap-3 mb-10 text-emerald-500 font-sans font-bold"><div className="w-10 h-10 rounded-xl bg-gradient-to-br from-emerald-400 to-emerald-500 flex items-center justify-center text-white"><Receipt className="w-5 h-5" /></div><h2 className="text-xl font-black text-slate-800 uppercase tracking-tight tracking-widest font-sans">每月現金流分析概覽</h2></div>
                <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 text-sm font-sans font-medium">
                   <div className="space-y-6 font-sans">
                      <div className="flex justify-between items-center px-2 font-sans"><h3 className="text-xs font-black text-emerald-500 uppercase tracking-widest flex items-center gap-2 font-sans font-bold"><ArrowUpCircle className="w-4 h-4" /> 月收入項目</h3><button onClick={() => addRow('incomeItem')} className="p-1 hover:bg-emerald-50 rounded-lg text-emerald-500 transition-all font-sans"><PlusSquare className="w-5 h-5" /></button></div>
                      <div className="space-y-4 font-sans">
                         {data.family.map((f, i) => ( <div key={`fam-${i}`} className="p-4 bg-emerald-50/30 border border-emerald-100/50 rounded-xl flex justify-between items-center shadow-sm font-sans"><div className="flex items-center gap-3"><div className="p-2 bg-emerald-100 rounded-lg text-emerald-600"><UserCircle2 className="w-4 h-4"/></div><div className="flex flex-col gap-1"><div className="flex items-center gap-2"><span className="text-xs font-bold text-slate-600">{f.role}</span><span className="text-[10px] text-slate-400 bg-white/50 px-1.5 rounded">年薪(萬)</span></div><input type="number" className="bg-white border border-emerald-200 rounded-md px-2 py-0.5 text-xs w-20 font-bold text-slate-700 outline-none focus:border-emerald-400 no-spinner" value={f.income} onChange={(e) => handleInputChange(`family.${i}.income`, e.target.value)} /></div></div><div className="flex flex-col items-end"><span className="text-[9px] font-black text-emerald-600/50 uppercase tracking-widest">換算月薪</span><span className="font-mono font-black text-emerald-600 text-sm">+{n(Math.round((toNum(f.income) * 10000) / 12))}</span></div></div> ))}
                         {/* ... Rents & Investments logic ... */}
                         <div className="p-5 bg-emerald-50/30 border border-emerald-100/50 rounded-2xl shadow-sm font-sans"><div className="flex justify-between items-center mb-3 pb-2 border-b border-emerald-100/50"><div className="flex items-center gap-2"><div className="p-1.5 bg-emerald-100 rounded-lg text-emerald-600"><Home className="w-4 h-4"/></div><span className="text-xs font-bold text-slate-600">房租收益</span></div><span className="font-mono font-black text-emerald-600 text-sm">+{n(Math.round(calculations.totalRent))}</span></div><div className="space-y-2">{data.completedHouses.map((h, i) => ( <div key={`rent-h-${i}`} className="flex justify-between items-center text-xs"><span className="text-slate-500 font-medium truncate max-w-[120px]">{h.name || '未命名成屋'}</span><input type="number" value={h.rent} onChange={(e) => handleInputChange(`completedHouses.${i}.rent`, e.target.value)} className="bg-white border border-emerald-100 rounded-lg p-1 w-20 text-right font-mono font-bold text-emerald-600 outline-none text-xs no-spinner" placeholder="0" /></div> ))}{data.presaleHouses.map((p, i) => ( <div key={`rent-p-${i}`} className="flex justify-between items-center text-xs"><span className="text-slate-500 font-medium truncate max-w-[120px]">{p.name || '未命名預售'} <span className="text-[9px] opacity-50">(預估)</span></span><input type="number" value={p.rent} onChange={(e) => handleInputChange(`presaleHouses.${i}.rent`, e.target.value)} className="bg-white border border-emerald-100 rounded-lg p-1 w-20 text-right font-mono font-bold text-emerald-600 outline-none text-xs no-spinner" placeholder="0" /></div> ))}</div></div>
                         <div className="p-5 bg-emerald-50/30 border border-emerald-100/50 rounded-2xl shadow-sm font-sans"><div className="flex justify-between items-center mb-3 pb-2 border-b border-emerald-100/50"><div className="flex items-center gap-2"><div className="p-1.5 bg-emerald-100 rounded-lg text-emerald-600"><TrendingUp className="w-4 h-4"/></div><span className="text-xs font-bold text-slate-600">投資配息管理</span></div><span className="font-mono font-black text-emerald-600 text-sm">+{n(Math.round(calculations.totalAssetIncome))}</span></div><div className="space-y-2">{data.movableAssets.filter(a => toNum(a.monthlyIncome) > 0).map((a, i) => { const realIndex = data.movableAssets.findIndex(x => x.id === a.id); return ( <div key={`asset-${a.id}`} className="flex justify-between items-center text-xs"><span className="text-slate-500 font-medium truncate max-w-[120px]">{a.type}</span><div className="flex items-center gap-1 bg-white rounded-lg border border-emerald-100 p-1"><input type="number" value={a.monthlyIncome} onChange={(e) => handleInputChange(`movableAssets.${realIndex}.monthlyIncome`, e.target.value)} className="w-16 text-right font-mono font-bold text-emerald-600 outline-none text-xs no-spinner" placeholder="0" /><span className="text-[9px] text-slate-400">元</span></div></div> ); })}</div></div>
                         {data.otherIncomes.map((item, idx) => ( <div key={item.id} className="p-5 bg-white border border-slate-100 rounded-2xl flex items-center gap-4 group shadow-sm hover:border-emerald-200 transition-all font-sans"><input className={`${labelOnlyStyle} flex-1 text-slate-600 text-xs pointer-events-auto font-sans font-bold`} value={item.type} onChange={(e) => handleInputChange(`otherIncomes.${idx}.type`, e.target.value)} /><div className="flex items-center gap-2 font-sans"><input type="number" className={`${inputBaseStyle} py-1 w-24 bg-slate-50 text-right font-mono font-black text-emerald-600 font-sans`} value={item.amount} onChange={(e) => handleInputChange(`otherIncomes.${idx}.amount`, e.target.value)} /><span className="text-[10px] text-slate-400 font-bold font-sans">元</span><button onClick={() => removeRow('otherIncomes', item.id)} className="opacity-0 group-hover:opacity-100 text-slate-300 hover:text-red-400 transition-all font-sans"><Trash2 className="w-4 h-4" /></button></div></div> ))}
                      </div>
                   </div>
                   {/* Right Col */}
                   <div className="space-y-6 font-sans">
                      <div className="flex justify-between items-center px-2 font-sans"><h3 className="text-xs font-black text-[#C08081] uppercase tracking-widest flex items-center gap-2 font-sans font-bold"><ArrowDownCircle className="w-4 h-4" /> 月支出明細</h3><button onClick={() => addRow('livingItem')} className="p-1 hover:bg-pink-50 rounded-lg text-[#C08081] transition-all font-sans"><PlusSquare className="w-5 h-5 font-sans" /></button></div>
                      <div className="space-y-4 font-sans">
                         <div className="p-5 bg-pink-50/40 border border-pink-100/50 rounded-2xl flex flex-col gap-2 shadow-sm font-sans font-medium"><div className="flex justify-between items-center font-sans"><div className="flex flex-col font-sans"><span className="text-[9px] font-black text-[#C08081]/60 uppercase tracking-widest">系統彙總數據</span><span className="text-xs font-bold text-slate-600 font-sans font-bold">房貸、車貸與還本支出</span></div><span className="font-mono font-black text-[#C08081] text-sm">-{n(Math.round(calculations.totalLoanPayment))} 元</span></div>{calculations.totalSupportMonthlyCost > 0 && (<div className="flex justify-between items-center pt-2 border-t border-pink-100/30 font-sans"><span className="text-xs font-bold text-orange-400 font-sans font-bold">扶養與照護預算支出</span><span className="font-mono font-black text-orange-400 text-sm">-{n(calculations.totalSupportMonthlyCost)} 元</span></div>)}{calculations.totalPledgeMonthlyInterest > 0 && (<div className="flex justify-between items-center pt-2 border-t border-pink-100/30 font-sans"><span className="text-xs font-bold text-blue-500 font-sans font-bold">質押利息支出</span><span className="font-mono font-black text-blue-500 text-sm">-{n(calculations.totalPledgeMonthlyInterest)} 元</span></div>)}</div>
                         {data.livingExpenses.map((item, idx) => { const IconComponent = iconMap[item.icon] || ShoppingBag; return ( <div key={item.id} className="p-5 bg-white border border-slate-100 rounded-2xl flex items-center gap-4 group shadow-sm hover:border-pink-200 transition-all font-sans font-medium"><div className="w-8 h-8 rounded-lg bg-pink-50 flex items-center justify-center transition-all group-hover:scale-110 shadow-sm shadow-pink-100 text-pink-400 font-sans"><IconComponent className="w-4 h-4 font-sans" /></div><input className={`${labelOnlyStyle} flex-1 text-slate-600 text-xs pointer-events-auto font-sans font-bold font-sans`} value={item.type} onChange={(e) => handleInputChange(`livingExpenses.${idx}.type`, e.target.value)} /><div className="flex items-center gap-2 font-sans font-medium"><input type="number" className={`${inputBaseStyle} py-1 w-24 bg-slate-50 text-right font-mono font-black text-[#C08081] font-sans`} value={item.amount} onChange={(e) => handleInputChange(`livingExpenses.${idx}.amount`, e.target.value)} /><span className="text-[10px] text-slate-400 font-bold font-sans">元</span><button onClick={() => removeRow('livingExpenses', item.id)} className="opacity-0 group-hover:opacity-100 text-slate-300 hover:text-red-400 transition-all font-sans"><Trash2 className="w-4 h-4" /></button></div></div> ); })}
                      </div>
                   </div>
                </div>
               </section>
            </div>
          )}

          {activeTab === 'analysis' && (
            <div className="space-y-12 animate-in zoom-in-95 duration-500 font-sans">
              <section className="bg-white border border-pink-50 rounded-[48px] p-12 shadow-xl relative overflow-hidden font-sans">
                <div className="absolute top-0 right-0 w-96 h-96 bg-pink-500/5 blur-[120px] rounded-full translate-x-1/4 translate-y-[-1/4] font-sans"></div>
                <div className="flex items-center gap-4 mb-16 font-sans text-slate-800 font-bold"><div className="w-12 h-12 rounded-2xl bg-slate-900 flex items-center justify-center text-white shadow-lg shadow-slate-200 font-sans"><FileSearch className="w-6 h-6" /></div><div className="font-sans"><h2 className="text-2xl font-black text-slate-800 tracking-tight uppercase font-sans">總體資產分析結算報告</h2><p className="text-xs text-slate-400 font-bold tracking-widest uppercase opacity-60 font-mono tracking-tighter font-sans font-bold">Integrated Financial Architecture Decision Support Summary</p></div></div>

                <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 mb-16 font-sans">
                  {/* Left: Net Worth */}
                  <div className="p-10 rounded-[40px] bg-gradient-to-br from-white to-pink-50/30 border border-pink-100 shadow-sm relative group overflow-hidden transition-all hover:shadow-md font-sans">
                    <div className="absolute top-0 right-0 p-8 opacity-5 group-hover:opacity-10 transition-opacity font-sans"><PieChart className="w-32 h-32" /></div>
                    <div className="relative z-10 font-sans">
                      <p className="text-xs font-black text-pink-400 uppercase tracking-[0.3em] mb-4 font-sans font-bold">預估個人淨值結算</p>
                      <h3 className="text-sm font-bold text-slate-400 mb-2 font-sans font-medium">個人總資產減去負債後結餘</h3>
                      <div className="flex items-baseline gap-3 font-sans"><span className="text-7xl font-mono font-black text-slate-800 tracking-tighter font-sans font-black">{n(calculations.netWorth)}</span><span className="text-xl font-bold text-slate-300 uppercase font-sans font-black">萬</span></div>
                      {/* Breakdown Table Left */}
                      <div className="mt-8 pt-6 border-t border-pink-100/50">
                         <h4 className="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-3">資產與負債總覽</h4>
                         <div className="space-y-1">
                            <div className="flex justify-between text-xs font-medium text-slate-600 bg-pink-50/30 p-1 rounded"><span>總資產</span><span className="font-mono">{n(calculations.totalAssets)} 萬</span></div>
                            <div className="flex justify-between text-xs font-medium text-slate-600 pl-2 opacity-70"><span>• 成屋市值</span><span className="font-mono">{n(calculations.totalCompletedMarket)}</span></div>
                            <div className="flex justify-between text-xs font-medium text-slate-600 pl-2 opacity-70"><span>• 預售價值</span><span className="font-mono">{n(calculations.totalPresaleMarket)}</span></div>
                            <div className="flex justify-between text-xs font-medium text-slate-600 pl-2 opacity-70"><span>• 動產現值</span><span className="font-mono">{n(calculations.totalMovable)}</span></div>
                            
                            <div className="flex justify-between text-xs font-medium text-pink-600 bg-pink-100/30 p-1 rounded mt-2"><span>總負債</span><span className="font-mono">{n(calculations.totalLiabilities)} 萬</span></div>
                            <div className="flex justify-between text-xs font-medium text-pink-600 pl-2 opacity-70"><span>• 房貸餘額</span><span className="font-mono">{n(calculations.totalLoanPayment * 12 * 20 / 10000)} (估)</span></div> {/* 簡易顯示 */}
                         </div>
                      </div>
                    </div>
                  </div>

                  {/* Right: Cash Flow */}
                  <div className="p-10 rounded-[40px] bg-slate-900 text-white shadow-2xl relative group overflow-hidden transition-all hover:shadow-emerald-500/10 font-sans">
                    <div className="absolute top-0 right-0 p-8 opacity-10 group-hover:opacity-20 transition-opacity text-emerald-400 font-sans"><TrendingUp className="w-32 h-32" /></div>
                    <div className="relative z-10 font-sans">
                      <div className="flex items-center gap-2 mb-4 font-sans"><span className="w-2 h-2 bg-emerald-400 rounded-full animate-pulse font-sans"></span><p className="text-xs font-black text-emerald-400 uppercase tracking-[0.3em] font-sans font-bold">每月存錢效率分析</p></div>
                      <h3 className="text-sm font-bold text-slate-400 mb-2 font-sans font-medium">扣除所有房產還本壓力後剩餘</h3>
                      <div className="flex items-baseline gap-3 font-sans"><span className={`text-7xl font-mono font-black tracking-tighter font-sans ${calculations.netCashFlow >= 0 ? 'text-emerald-400' : 'text-red-400'}`}>{calculations.netCashFlow >= 0 ? '+' : ''}{n(Math.round(calculations.netCashFlow))}</span><span className="text-xl font-bold text-slate-500 uppercase font-sans font-black">元 / 月</span></div>
                      
                      {/* Breakdown Table Right */}
                      <div className="mt-8 pt-6 border-t border-white/10">
                         <div className="grid grid-cols-2 gap-4">
                            <div>
                                <h4 className="text-[10px] font-black text-slate-500 uppercase tracking-widest mb-3">月收入</h4>
                                <div className="space-y-1">
                                    <div className="flex justify-between text-xs font-medium text-emerald-400"><span>總計</span><span>+{n(Math.round(calculations.totalIncome))}</span></div>
                                    {calculations.incomeBreakdown.map((item, idx) => ( <div key={idx} className="flex justify-between text-[10px] font-medium text-slate-400 pl-1 border-l border-white/10"><span>{item.label}</span><span className="font-mono">+{n(Math.round(item.value))}</span></div> ))}
                                </div>
                            </div>
                            <div>
                                <h4 className="text-[10px] font-black text-slate-500 uppercase tracking-widest mb-3">月支出</h4>
                                <div className="space-y-1">
                                    <div className="flex justify-between text-xs font-medium text-pink-400"><span>總計</span><span>-{n(Math.round(calculations.totalExpense))}</span></div>
                                    {calculations.expenseBreakdown.map((item, idx) => ( <div key={idx} className="flex justify-between text-[10px] font-medium text-slate-400 pl-1 border-l border-white/10"><span>{item.label}</span><span className="font-mono">-{n(Math.round(item.value))}</span></div> ))}
                                </div>
                            </div>
                         </div>
                      </div>
                    </div>
                  </div>
                </div>
              </section>
            </div>
          )}

          {/* 5. Inheritance */}
          {activeTab === 'inheritance' && (
            <div className="space-y-12 animate-in slide-in-from-right-8 duration-500">
              <section className="bg-white border border-slate-200 rounded-[40px] p-8 shadow-sm">
                 <div className="flex items-center gap-3 mb-6"><Settings className="w-5 h-5 text-slate-400" /><h3 className="font-bold text-slate-700">未來經濟環境假設</h3></div>
                 <div className="grid grid-cols-2 md:grid-cols-5 gap-6">
                    <div className="space-y-1"><label className="text-[10px] font-black text-slate-400">CPI 物價指數 (%)</label><input type="number" className={inputBaseStyle + " w-full"} value={data.assumptions.cpi} onChange={(e) => handleInputChange('assumptions.cpi', e.target.value)} /></div>
                    <div className="space-y-1"><label className="text-[10px] font-black text-slate-400">房產年增率 (%)</label><input type="number" className={inputBaseStyle + " w-full"} value={data.assumptions.realEstateGrowth} onChange={(e) => handleInputChange('assumptions.realEstateGrowth', e.target.value)} /></div>
                    <div className="space-y-1"><label className="text-[10px] font-black text-slate-400">質押截止年齡</label><input type="number" className={inputBaseStyle + " w-full"} value={data.assumptions.pledgeEndAge} onChange={(e) => handleInputChange('assumptions.pledgeEndAge', e.target.value)} /></div>
                    <div className="space-y-1"><label className="text-[10px] font-black text-slate-400">子女獨立年齡</label><input type="number" className={inputBaseStyle + " w-full"} value={data.assumptions.childIndependenceAge} onChange={(e) => handleInputChange('assumptions.childIndependenceAge', e.target.value)} /></div>
                 </div>
              </section>

              {/* ... (Inheritance section same as before) ... */}
              <section className="bg-slate-900 rounded-[40px] p-10 shadow-2xl text-white relative overflow-hidden font-sans">
                 <div className="relative z-10">
                    <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-8 mb-12">
                       <div className="flex items-center gap-4"><div className="w-12 h-12 bg-indigo-500 rounded-2xl flex items-center justify-center shadow-lg shadow-indigo-500/30"><Scale className="w-6 h-6 text-white" /></div><div><h2 className="text-2xl font-black tracking-tight">資產傳承稅務試算</h2><p className="text-xs text-indigo-300 font-bold tracking-widest uppercase opacity-80">Estate Tax & Inheritance Planning</p></div></div>
                       <div className="flex gap-4">
                          <div className="px-6 py-3 bg-white/5 rounded-2xl border border-white/10 backdrop-blur-sm"><span className="text-[10px] text-indigo-300 block mb-1 font-bold uppercase tracking-widest">預估遺產總額</span><span className="text-2xl font-mono font-black">{n(calculations.grossEstate)} <span className="text-sm">萬</span></span></div>
                          <div className="px-6 py-3 bg-white/5 rounded-2xl border border-white/10 backdrop-blur-sm"><span className="text-[10px] text-pink-300 block mb-1 font-bold uppercase tracking-widest">扣除總負債</span><span className="text-2xl font-mono font-black text-pink-200">{n(calculations.totalLiabilities)} <span className="text-sm">萬</span></span></div>
                          <div className="px-6 py-3 bg-indigo-600 rounded-2xl border border-indigo-400 shadow-lg shadow-indigo-900/50"><span className="text-[10px] text-white/80 block mb-1 font-bold uppercase tracking-widest">預估應納稅額</span><span className="text-2xl font-mono font-black text-white">{n(Math.round(calculations.estateTax))} <span className="text-sm">萬</span></span></div>
                       </div>
                    </div>
                    {/* ... (Details Grid omitted for brevity but logic is preserved) ... */}
                    <div className="grid grid-cols-1 lg:grid-cols-2 gap-10">
                       <div className="bg-white/5 rounded-3xl p-6 border border-white/10"><div className="flex items-center justify-between mb-6"><h3 className="font-bold flex items-center gap-2 text-indigo-200"><Building2 className="w-4 h-4" /> 不動產繼承 (公告現值)</h3><span className="text-xs bg-indigo-500/20 text-indigo-300 px-2 py-1 rounded-lg">總計 {n(calculations.totalRealEstateAssessed)} 萬</span></div><div className="space-y-3 max-h-[300px] overflow-y-auto pr-2">{[...data.completedHouses, ...data.presaleHouses].map((h, i) => ( <div key={i} className="flex items-center justify-between p-3 bg-black/20 rounded-xl border border-white/5 text-sm"><div className="flex flex-col"><span className="font-bold text-white">{h.name || '未命名物件'}</span><div className="flex items-center gap-1 text-[10px] text-white/40 mt-0.5"><MapPin className="w-3 h-3" /><span>{h.address || '無地址'}</span></div></div><div className="flex flex-col items-end gap-1"><span className="text-[9px] text-indigo-300 uppercase">預估稅基</span><span className="text-white font-mono font-bold">{n(h.estimatedAssessedValue)} 萬</span></div></div> ))}</div></div>
                       <div className="space-y-6">
                          <div className="bg-white/5 rounded-3xl p-6 border border-white/10"><div className="flex items-center justify-between mb-4"><h3 className="font-bold flex items-center gap-2 text-emerald-200"><Wallet className="w-4 h-4" /> 動產與保險</h3><span className="text-xs bg-emerald-500/20 text-emerald-300 px-2 py-1 rounded-lg">總計 {n(calculations.totalMovable)} 萬</span></div><div className="space-y-4"><div><p className="text-[10px] text-white/40 font-bold uppercase tracking-widest mb-1">一般動產</p>{calculations.normalMovableAssets.map((a, i) => ( <div key={i} className="flex justify-between p-2 border-b border-white/5 text-sm"><span className="text-white/80">{a.type}</span><span className="font-mono">{n(a.amount)}</span></div> ))}</div><div><p className="text-[10px] text-orange-300 font-bold uppercase tracking-widest mb-1">利變、分紅保單</p>{calculations.insuranceAssets.map((a, i) => ( <div key={i} className="flex justify-between p-2 border-b border-white/5 text-sm"><span className="text-white/80">{a.type}</span><span className="font-mono">{n(a.amount)}</span></div> ))}</div></div><div className="mt-4 p-3 bg-orange-500/10 border border-orange-500/30 rounded-xl"><div className="flex justify-between items-center mb-1"><span className="text-[10px] text-orange-300">最低稅負制-死亡給付免稅額</span><span className="text-xs font-mono font-bold text-orange-300">{n(data.taxSettings.insuranceExemption)} 萬</span></div><div className="flex justify-between items-center"><span className="text-[10px] text-white/60">總身故保額</span><span className={`text-xs font-mono font-bold ${calculations.totalLifeInsuranceFaceValue > data.taxSettings.insuranceExemption ? 'text-red-400' : 'text-emerald-400'}`}>{n(calculations.totalLifeInsuranceFaceValue)} 萬</span></div></div></div>
                       </div>
                    </div>
                 </div>
              </section>
            </div>
          )}

          {/* Page 6: Projection */}
          {activeTab === 'projection' && (
            <div className="space-y-8 animate-in slide-in-from-right-8 duration-500">
               <div className="flex items-center justify-between">
                  <div className="flex items-center gap-4"><div className="w-12 h-12 bg-blue-500 rounded-2xl flex items-center justify-center shadow-lg shadow-blue-500/30 text-white"><LineChart className="w-6 h-6" /></div><div><h2 className="text-2xl font-black text-slate-800 tracking-tight">生涯資產模擬 (至100歲)</h2><p className="text-xs text-slate-400 font-bold tracking-widest uppercase">含退休後薪資歸零模擬</p></div></div>
                  <div className="flex gap-4 text-xs font-bold text-slate-500">
                     <div className="flex items-center gap-2"><span className="w-3 h-3 rounded-full bg-indigo-500"></span>總資產</div>
                     <div className="flex items-center gap-2"><span className="w-3 h-3 rounded-full bg-pink-400"></span>總負債</div>
                     <div className="flex items-center gap-2"><span className="w-3 h-3 rounded-full bg-emerald-500"></span>淨值</div>
                  </div>
               </div>

               <div className="bg-white border border-slate-200 rounded-[32px] shadow-sm overflow-hidden">
                  <div className="overflow-x-auto">
                     <table className="w-full text-sm text-left">
                        <thead className="text-xs text-slate-500 uppercase bg-slate-50 border-b border-slate-100">
                           <tr>
                              <th className="px-6 py-4 font-black">年度 / 年齡</th>
                              <th className="px-6 py-4 font-black text-indigo-600">房產</th>
                              <th className="px-6 py-4 font-black text-blue-600">動產</th>
                              <th className="px-6 py-4 font-black text-slate-700">總資產</th>
                              <th className="px-6 py-4 font-black text-pink-400">總負債</th>
                              <th className="px-6 py-4 font-black text-emerald-600">淨值</th>
                              <th className="px-6 py-4 font-black text-slate-400">年收入(含薪)</th>
                              <th className="px-6 py-4 font-black text-slate-400">年支出</th>
                              <th className="px-6 py-4 font-black text-slate-700">現金流</th>
                           </tr>
                        </thead>
                        <tbody className="divide-y divide-slate-50">
                           {projection.map((row, idx) => (
                              <tr key={row.year} className="hover:bg-slate-50/50 transition-colors group">
                                 <td className="px-6 py-4 font-bold text-slate-700">{row.year} <span className="text-slate-400 ml-1">({row.age}歲)</span></td>
                                 <td className="px-6 py-4 font-mono text-indigo-600/80">{n(row.realEstate)}</td>
                                 <td className="px-6 py-4 font-mono text-blue-600/80">{n(row.movable)}</td>
                                 <td className="px-6 py-4 font-mono font-bold text-slate-800 bg-slate-50/30">{n(row.totalAssets)}</td>
                                 <td className="px-6 py-4 font-mono text-pink-400/80">{n(row.totalLiabilities)}</td>
                                 <td className="px-6 py-4 font-mono font-black text-emerald-600 bg-emerald-50/10 group-hover:bg-emerald-50/30 transition-colors">{n(row.netWorth)}</td>
                                 <td className="px-6 py-4 font-mono text-xs text-slate-400">+{n(row.yearlyIncome)}</td>
                                 <td className="px-6 py-4 font-mono text-xs text-pink-300">-{n(row.yearlyExpense)}</td>
                                 <td className={`px-6 py-4 font-mono text-xs ${row.yearlyCashFlow >= 0 ? 'text-slate-700 font-bold' : 'text-red-400'}`}>{n(row.yearlyCashFlow)}</td>
                              </tr>
                           ))}
                        </tbody>
                     </table>
                  </div>
               </div>
            </div>
          )}

        </main>
      </div>
      
      <footer className="mt-20 text-center opacity-30 font-sans tracking-widest uppercase font-sans font-bold font-sans font-bold"><p className="text-[9px] font-black text-slate-400 font-sans font-bold">© 2026 Insma Protocol | 財務規劃分析終端 v12.1</p></footer>
    </div>
  );
};

export default App;