// Helm — 房地產試算。兩模式:自住(房屋淨值/貸款成數/負擔率/資產集中度/年持有成本)/ 投資(租金報酬率/現金流/包租公)。
//   自住接 Helm 的房產+房貸+收入;投資是假設試算。誠實:自住房是居住非投資;台灣租金報酬率低、扣房貸常負現金流(靠增值=投機)。
//   純前端。欄位記憶 localStorage helm-re-*。
(function () {
  const NS = window.HelmDesignSystem_9613a7;
  const { Field, Input } = NS;
  function fmt(n) { return Math.round(n || 0).toLocaleString("en-US"); }
  function wan(n) { return (Math.round((n || 0) / 1e4)).toLocaleString("en-US"); }
  function num(v) { return parseFloat(String(v).replace(/,/g, "")) || 0; }
  function lsGet(k) { return window.HelmPrefs ? window.HelmPrefs.get(k) : (function () { try { return localStorage.getItem(k); } catch (e) { return null; } })(); }
  function lsSet(k, v) { if (window.HelmPrefs) window.HelmPrefs.set(k, v); else { try { localStorage.setItem(k, v); } catch (e) {} } }
  function lsDel(k) { if (window.HelmPrefs) window.HelmPrefs.del(k); else { try { localStorage.removeItem(k); } catch (e) {} } }

  const K = {
    mode: "helm-re-mode",
    value: "helm-re-value", debt: "helm-re-debt", rate: "helm-re-rate", pay: "helm-re-pay", income: "helm-re-income", tax: "helm-re-tax", upkeep: "helm-re-upkeep",
    price: "helm-re-price", down: "helm-re-down", irate: "helm-re-irate", iyears: "helm-re-iyears", rent: "helm-re-rent", vac: "helm-re-vac", icost: "helm-re-icost",
    cost: "helm-re-cost", hold: "helm-re-hold", self6: "helm-re-self6", feeded: "helm-re-feeded", landinc: "helm-re-landinc", landtax: "helm-re-landtax", agentpct: "helm-re-agentpct", otherfee: "helm-re-otherfee", remy: "helm-re-remy", graceyr: "helm-re-graceyr", rinv: "helm-re-rinv", rhome: "helm-re-rhome", rentas: "helm-re-rentas", ocy: "helm-re-ocy",
  };

  function PropertyScreen({ onClose }) {
    const H = window.HELM || {};
    const cf = H.cashflow || {};
    // 自住:從 Helm 帶入房產 + 房貸 + 收入
    const homeVal = (H.assets || []).filter(function (a) { return /房|宅|地產/.test((a.cat || "") + (a.name || "")); }).reduce(function (s, a) { return s + (a.twd || 0); }, 0);
    const mortItem = (H.liabilities || []).filter(function (l) { return /房/.test((l.cat || "") + (l.name || "")); })[0] || null;
    const dftValue = String(Math.round(homeVal || 0));
    const dftDebt = String(Math.round(mortItem ? mortItem.twd || 0 : 0));
    const dftRate = String(mortItem ? mortItem.loanRate || 0 : 2);
    const dftPay = String(Math.round(mortItem ? mortItem.loanPay || 0 : 0));
    const dftIncome = String(Math.round(cf.incomeSum || 0));
    const totalAssets = H.totalAssets || homeVal || 0;

    const [mode, setMode] = React.useState(function () { return lsGet(K.mode) || "own"; });
    // 自住 —— 房屋市值/房貸/月收入「全同步」:一律以明細·現金流為準,不凍結 localStorage(只有一間房,自動對應)
    const [value, setValue] = React.useState(dftValue);
    const [debt, setDebt] = React.useState(dftDebt);
    const [rate, setRate] = React.useState(dftRate);
    const [pay, setPay] = React.useState(dftPay);
    const [income, setIncome] = React.useState(dftIncome);
    const [tax, setTax] = React.useState(function () { return lsGet(K.tax) || "30000"; });
    const [upkeep, setUpkeep] = React.useState(function () { return lsGet(K.upkeep) || String(Math.round((num(dftValue) || 0) * 0.005)); });
    // 投資
    const [price, setPrice] = React.useState(function () { return lsGet(K.price) || "10000000"; });
    const [down, setDown] = React.useState(function () { return lsGet(K.down) || "3000000"; });
    const [irate, setIrate] = React.useState(function () { return lsGet(K.irate) || "2.2"; });
    const [iyears, setIyears] = React.useState(function () { return lsGet(K.iyears) || "30"; });
    const [rent, setRent] = React.useState(function () { return lsGet(K.rent) || "25000"; });
    const [vac, setVac] = React.useState(function () { return lsGet(K.vac) || "5"; });
    const [icost, setIcost] = React.useState(function () { return lsGet(K.icost) || "60000"; });
    // 賣房/房地合一(自住延伸)
    const [cost, setCost] = React.useState(function () { return lsGet(K.cost) || dftValue; });           // 取得成本預設帶市值(獲利 0 起步)
    const [hold, setHold] = React.useState(function () { return lsGet(K.hold) || "5"; });
    const [self6, setSelf6] = React.useState(function () { return lsGet(K.self6) === "1"; });
    const [feeded, setFeeded] = React.useState(function () { return lsGet(K.feeded) || String(Math.round(Math.min(num(dftValue) * 0.03, 300000))); });
    const [landinc, setLandinc] = React.useState(function () { return lsGet(K.landinc) || "0"; });
    const [landtax, setLandtax] = React.useState(function () { return lsGet(K.landtax) || "0"; });
    const [agentpct, setAgentpct] = React.useState(function () { return lsGet(K.agentpct) || "4"; });
    const [otherfee, setOtherfee] = React.useState(function () { return lsGet(K.otherfee) || "50000"; });
    // 房貸體質
    const [remy, setRemy] = React.useState(function () { return lsGet(K.remy) || "20"; });
    const [graceyr, setGraceyr] = React.useState(function () { return lsGet(K.graceyr) || "0"; });
    // 解鎖決策(假設)
    const [rinv, setRinv] = React.useState(function () { return lsGet(K.rinv) || "5"; });
    const [rhome, setRhome] = React.useState(function () { return lsGet(K.rhome) || "2.5"; });
    const [rentas, setRentas] = React.useState(function () { return lsGet(K.rentas) || "20000"; });
    const [ocy, setOcy] = React.useState(function () { return lsGet(K.ocy) || "10"; });

    function persist(setter, key) { return function (e) { const v = e.target.value; setter(v); lsSet(key, v); }; }
    function live(setter) { return function (e) { setter(e.target.value); }; }   // 同步欄位:可暫改試算、不存(下次開回到明細最新)
    // 全同步:明細/現金流一變(房產市值、房貸、收入),這裡跟著更新
    React.useEffect(function () { setValue(dftValue); setDebt(dftDebt); setRate(dftRate); setPay(dftPay); setIncome(dftIncome); }, [dftValue, dftDebt, dftRate, dftPay, dftIncome]);
    function pickMode(m) { setMode(m); lsSet(K.mode, m); }
    function resetAll() {
      Object.keys(K).forEach(function (k) { lsDel(K[k]); });
      setMode("own"); setValue(dftValue); setDebt(dftDebt); setRate(dftRate); setPay(dftPay); setIncome(dftIncome); setTax("30000"); setUpkeep(String(Math.round((num(dftValue) || 0) * 0.005)));
      setPrice("10000000"); setDown("3000000"); setIrate("2.2"); setIyears("30"); setRent("25000"); setVac("5"); setIcost("60000");
      setCost(dftValue); setHold("5"); setSelf6(false); setFeeded(String(Math.round(Math.min(num(dftValue) * 0.03, 300000)))); setLandinc("0"); setLandtax("0"); setAgentpct("4"); setOtherfee("50000");
      setRemy("20"); setGraceyr("0"); setRinv("5"); setRhome("2.5"); setRentas("20000"); setOcy("10");
    }

    // 自住計算
    const V = num(value), DEBT = num(debt), RATE = num(rate), PAY = num(pay), INC = num(income), TAX = num(tax), UP = num(upkeep);
    const equity = Math.max(0, V - DEBT);
    const ltv = V > 0 ? Math.round(DEBT / V * 100) : 0;
    const burden = INC > 0 ? Math.round(PAY / INC * 100) : 0;
    const concen = totalAssets > 0 ? Math.round(V / totalAssets * 100) : 0;
    const annualInterest = DEBT * RATE / 100;
    const annualHolding = annualInterest + TAX + UP;

    // 賣房/房地合一 + 房貸體質 + 解鎖(property-engine,公式經 node 驗算)
    const PR = window.HelmProperty || {};
    const COST = num(cost), HOLD = num(hold), FEE = num(feeded), LANDINC = num(landinc), LANDTAX = num(landtax), AGENTPCT = num(agentpct), OTHERFEE = num(otherfee);
    const cgt = PR.capitalGainsTax ? PR.capitalGainsTax({ salePrice: V, cost: COST, expenses: FEE, landIncrement: LANDINC, holdYears: HOLD, selfUse: self6 }) : { taxable: 0, rate: 0, tax: 0, mode: "" };
    const sale = PR.netSaleProceeds ? PR.netSaleProceeds({ salePrice: V, mortgage: DEBT, capTax: cgt.tax, landTax: LANDTAX, agentFeePct: AGENTPCT, otherFees: OTHERFEE }) : { agentFee: 0, net: 0 };
    const REMY = num(remy) || 20, GRACEY = num(graceyr);
    const am = PR.amort ? PR.amort(DEBT, RATE, REMY, 10) : { pay: 0, firstInterest: 0, firstPrincipal: 0, balAfter: 0, totalInterest: 0 };
    const sens = PR.rateSensitivity ? PR.rateSensitivity(DEBT, RATE, REMY, [1, 2]) : [{ pay: 0, deltaPay: 0 }, { pay: 0, deltaPay: 0 }];
    const gr = (PR.grace && GRACEY > 0) ? PR.grace(DEBT, RATE, REMY, GRACEY) : null;
    const netWorth = H.netWorth != null ? H.netWorth : (totalAssets - (H.totalLiab || 0));
    const con = PR.concentration ? PR.concentration(V, netWorth, DEBT) : { pct: concen, equity: equity, equitySharePct: 0 };
    const ocYears = num(ocy) || 10;
    const balAfterOc = PR.remainingBalance ? PR.remainingBalance(am.pay, RATE, Math.max(0, REMY - ocYears) * 12) : 0;
    const oc = PR.opportunityCost ? PR.opportunityCost({ netProceeds: sale.net, rInvestPct: num(rinv) || 5, homeValue: V, rHomePct: num(rhome) || 2.5, annualRent: num(rentas) * 12, years: ocYears, mortgage: DEBT, monthlyPay: am.pay, mortgageBalanceAfter: balAfterOc }) : { fvInvest: 0, sellNet: 0, keepNet: 0, breakevenPct: 0, years: 10 };
    function setSelf6p(v) { setSelf6(v); lsSet(K.self6, v ? "1" : "0"); }

    // 投資計算
    const PRICE = num(price), DOWN = num(down), IRATE = num(irate), IYEARS = num(iyears), RENT = num(rent), VAC = num(vac), ICOST = num(icost);
    const loan = Math.max(0, PRICE - DOWN);
    const rm = IRATE / 100 / 12, NN = IYEARS * 12;
    const mPay = (rm > 0 && NN > 0) ? loan * rm / (1 - Math.pow(1 + rm, -NN)) : (NN > 0 ? loan / NN : 0);
    const effRent = RENT * (1 - VAC / 100);
    const grossYield = PRICE > 0 ? RENT * 12 / PRICE * 100 : 0;
    const netYield = PRICE > 0 ? (effRent * 12 - ICOST) / PRICE * 100 : 0;
    const mCashflow = effRent - mPay - ICOST / 12;
    const coc = DOWN > 0 ? (effRent * 12 - ICOST - mPay * 12) / DOWN * 100 : 0;

    return (
      <div className="fpage" role="dialog" aria-modal="true" aria-label="房地產試算">
        <div className="fpage__panel">
          <header className="fpage__bar">
            <button className="fpage__cancel" onClick={onClose}><i className="ph ph-arrow-left" aria-hidden="true" />返回</button>
            <span className="fpage__title">房地產試算</span>
            <span aria-hidden="true" />
          </header>
          <div className="fpage__scroll">
            <div className="fpage__body">

              <div className="fire-seg" role="tablist">
                <button type="button" role="tab" aria-selected={mode === "own"} className={"fire-seg__btn" + (mode === "own" ? " is-on" : "")} onClick={function () { pickMode("own"); }}>自住</button>
                <button type="button" role="tab" aria-selected={mode === "invest"} className={"fire-seg__btn" + (mode === "invest" ? " is-on" : "")} onClick={function () { pickMode("invest"); }}>投資(收租)</button>
              </div>

              {mode === "own" ? (
                <React.Fragment>
                <div className="re-sync"><i className="ph ph-link-simple" aria-hidden="true" /><span>房屋市值、房貸、月收入<b>已和「明細 / 現金流」同步</b>——在那邊改、這裡就跟著變。下面的試算欄位(取得成本、假設報酬…)才是手動填。</span></div>
                <section className="fpage__card">
                  <div className="fpage__card-head"><span className="t-overline">自住 · 房屋淨值</span></div>
                  <div className="fx-now"><span className="fx-now__unit">你真正擁有約</span><span className="fx-now__rate t-num">{wan(equity)} 萬</span></div>
                  <div className="goal__nums"><span className="t-num">貸款成數(LTV) {ltv}%</span><span className="goal__pct t-num">房貸負擔率 {burden}%</span></div>

                  <div className="fire-desc">
                    <p><b>這是什麼</b>:你的自住房「真正屬於你的部分」= 市值 − 房貸。房貸每月遞減,這塊會慢慢長大。</p>
                    <p><b>怎麼看</b>:LTV(貸款成數)越低越穩;房貸負擔率(月付/月收入)<b>建議 &lt; 30%</b>。</p>
                  </div>

                  <div className="tax-break">
                    <div className="tax-row"><span>市值</span><span className="t-num">{fmt(V)}</span></div>
                    <div className="tax-row"><span>− 房貸餘額</span><span className="t-num">{fmt(DEBT)}</span></div>
                    <div className="tax-row tax-row--sum"><span>= 房屋淨值</span><span className="t-num">{fmt(equity)}</span></div>
                    <div className="tax-row"><span>每年持有成本(房貸利息+稅+修繕,不含還本)</span><span className="t-num">{fmt(annualHolding)}</span></div>
                  </div>

                  {concen >= 70 && (
                    <div className="fx-advice fx-advice--high">
                      <span className="fx-advice__tag">⚠️ 資產集中度 {concen}%</span>
                      <span className="fx-advice__txt">你約 <b>{concen}%</b> 的資產壓在這一間房。自住房是必需、不用賣,但這提醒你:<b>別再加碼房地產</b>,接下來把錢養到流動資產(現金/股票)去分散風險。</span>
                    </div>
                  )}
                  {burden > 40 ? (
                    <div className="fx-advice fx-advice--high"><span className="fx-advice__txt">房貸負擔率 {burden}% 偏高(&gt;40%),日子會比較緊,留意現金流。</span></div>
                  ) : burden > 30 ? (
                    <div className="fx-advice fx-advice--mid"><span className="fx-advice__txt">房貸負擔率 {burden}% 還行(30–40%),不算輕鬆但可控。</span></div>
                  ) : (
                    <div className="fx-advice fx-advice--low"><span className="fx-advice__txt">房貸負擔率 {burden}% 健康(&lt; 30%)。</span></div>
                  )}

                  <div className="fpage__fields">
                    <Field label="房屋市值" hint="🔗 同步明細的房產(永久要改去明細改)"><Input amount affix="NT$" inputMode="decimal" value={fmt(V)} onChange={live(setValue)} /></Field>
                    <Field label="房貸餘額" hint="🔗 同步明細的房貸負債"><Input amount affix="NT$" inputMode="decimal" value={fmt(DEBT)} onChange={live(setDebt)} /></Field>
                    <Field label="房貸年利率(%)"><Input inputMode="decimal" value={rate} onChange={live(setRate)} /></Field>
                    <Field label="房貸月付" hint="算負擔率用"><Input amount affix="NT$" inputMode="decimal" value={fmt(PAY)} onChange={live(setPay)} /></Field>
                    <Field label="月收入" hint="🔗 同步現金流的收入"><Input amount affix="NT$" inputMode="decimal" value={fmt(INC)} onChange={live(setIncome)} /></Field>
                    <Field label="房屋稅+地價稅/年" hint="自住稅率低:房屋稅約評定現值1.2%、地價稅0.2%,看你的稅單"><Input amount affix="NT$" inputMode="decimal" value={fmt(TAX)} onChange={persist(setTax, K.tax)} /></Field>
                    <Field label="修繕+管理+雜支/年" hint="抓房價約 0.5–1%(預設 0.5%)"><Input amount affix="NT$" inputMode="decimal" value={fmt(UP)} onChange={persist(setUpkeep, K.upkeep)} /></Field>
                  </div>
                </section>

                {/* 卡A 房地合一稅 + 賣房實拿 */}
                <section className="fpage__card">
                  <div className="fpage__card-head"><span className="t-overline">如果賣掉 · 房地合一稅 + 實拿</span></div>
                  <div className="fx-now"><span className="fx-now__unit">扣完稅費後實際入袋約</span><span className="fx-now__rate t-num">{wan(sale.net)} 萬</span></div>
                  <div className="fire-desc"><p><b>這是什麼</b>:你帳面賺的 ≠ 口袋拿的。賣房要先扣<b>房地合一稅</b>(看持有幾年、是不是自住)、土增稅、仲介費,剩下才是真正入袋。</p></div>
                  <label className="re-chk"><input type="checkbox" checked={self6} onChange={function (e) { setSelf6p(e.target.checked); }} /><span>符合<b>自住</b>:本人/配偶/未成年子女設籍+居住<b>連續滿 6 年</b>、前 6 年沒出租營業、6 年內沒用過(→ 課稅所得 400 萬內免稅、超過部分 10%)</span></label>
                  <div className="tax-break">
                    <div className="tax-row"><span>成交價</span><span className="t-num">{fmt(V)}</span></div>
                    <div className="tax-row"><span>− 取得成本</span><span className="t-num">{fmt(COST)}</span></div>
                    <div className="tax-row"><span>− 可舉證費用</span><span className="t-num">{fmt(FEE)}</span></div>
                    <div className="tax-row"><span>− 土地漲價總數額</span><span className="t-num">{fmt(LANDINC)}</span></div>
                    <div className="tax-row tax-row--sum"><span>= 課稅所得</span><span className="t-num">{fmt(cgt.taxable)}</span></div>
                    <div className="tax-row"><span>適用{self6 ? "(自住優惠)" : "(持有 " + HOLD + " 年)"}</span><span className="t-num">{cgt.tax === 0 && self6 ? "免稅" : Math.round(cgt.rate * 100) + "%"}</span></div>
                    <div className="tax-row tax-row--sum"><span>= 房地合一稅</span><span className="t-num">{fmt(cgt.tax)}</span></div>
                  </div>
                  <div className="tax-break">
                    <div className="tax-row"><span>成交價 − 房貸 {wan(DEBT)} 萬</span><span className="t-num">{fmt(V - DEBT)}</span></div>
                    <div className="tax-row"><span>− 房地合一稅</span><span className="t-num">{fmt(cgt.tax)}</span></div>
                    <div className="tax-row"><span>− 土地增值稅</span><span className="t-num">{fmt(LANDTAX)}</span></div>
                    <div className="tax-row"><span>− 仲介費 {AGENTPCT}%</span><span className="t-num">{fmt(sale.agentFee)}</span></div>
                    <div className="tax-row"><span>− 其他規費</span><span className="t-num">{fmt(OTHERFEE)}</span></div>
                    <div className="tax-row tax-row--sum"><span>= 賣房實拿</span><span className="t-num">{fmt(sale.net)}</span></div>
                  </div>
                  <div className="fx-advice fx-advice--mid"><span className="fx-advice__txt">持有越久稅率越低(≤2年 45% → &gt;10年 15%);自住滿 6 年最省(400 萬免稅)。土增稅/土地漲價總數額要查地政,不確定先留 0、稅會高估、偏保守。<b>數字是估算,實際以國稅局核定為準。</b></span></div>
                  <div className="fpage__fields">
                    <Field label="預估成交價" hint="預設帶市值,可改你想賣的價"><Input amount affix="NT$" inputMode="decimal" value={fmt(V)} onChange={live(setValue)} /></Field>
                    <Field label="當初取得成本" hint="買進價 + 可計入的裝潢"><Input amount affix="NT$" inputMode="decimal" value={fmt(COST)} onChange={persist(setCost, K.cost)} /></Field>
                    <Field label="持有年數"><Input inputMode="numeric" value={hold} onChange={persist(setHold, K.hold)} /></Field>
                    <Field label="可舉證費用" hint="仲介/代書/契稅/裝修(要發票);無法舉證按成交 3%、上限 30 萬"><Input amount affix="NT$" inputMode="decimal" value={fmt(FEE)} onChange={persist(setFeeded, K.feeded)} /></Field>
                    <Field label="土地漲價總數額" hint="查土增稅試算/地政,不確定先 0"><Input amount affix="NT$" inputMode="decimal" value={fmt(LANDINC)} onChange={persist(setLandinc, K.landinc)} /></Field>
                    <Field label="土地增值稅" hint="另計;查地政或土增稅單,不確定先 0"><Input amount affix="NT$" inputMode="decimal" value={fmt(LANDTAX)} onChange={persist(setLandtax, K.landtax)} /></Field>
                    <Field label="仲介費(%)" hint="賣方常見 1–4%,可議"><Input inputMode="decimal" value={agentpct} onChange={persist(setAgentpct, K.agentpct)} /></Field>
                    <Field label="其他規費" hint="代書/塗銷/履保等"><Input amount affix="NT$" inputMode="decimal" value={fmt(OTHERFEE)} onChange={persist(setOtherfee, K.otherfee)} /></Field>
                  </div>
                </section>

                {/* 卡B 房貸體質 · 攤還/寬限/升息 */}
                <section className="fpage__card">
                  <div className="fpage__card-head"><span className="t-overline">房貸體質 · 攤還 / 寬限 / 升息</span></div>
                  <div className="fx-now"><span className="fx-now__unit">剩 {REMY} 年本息攤,月付約</span><span className="fx-now__rate t-num">{fmt(am.pay)}</span></div>
                  <div className="fire-desc"><p><b>怎麼看</b>:月付裡多少在繳利息、多少在還本金?<b>升息</b>月付會多多少?<b>寬限期</b>(只繳息)到期會跳多痛?</p></div>
                  <div className="tax-break">
                    <div className="tax-row"><span>首月:利息 / 本金</span><span className="t-num">{fmt(am.firstInterest)} / {fmt(am.firstPrincipal)}</span></div>
                    <div className="tax-row"><span>10 年後還剩本金</span><span className="t-num">{fmt(am.balAfter)}</span></div>
                    <div className="tax-row"><span>整段總利息</span><span className="t-num">{fmt(am.totalInterest)}</span></div>
                  </div>
                  <div className="tax-break">
                    <div className="tax-row"><span>利率 +1%(到 {(RATE + 1).toFixed(1)}%)月付</span><span className="t-num">{fmt(sens[0].pay)} <span className="re-up">+{fmt(sens[0].deltaPay)}</span></span></div>
                    <div className="tax-row"><span>利率 +2%(到 {(RATE + 2).toFixed(1)}%)月付</span><span className="t-num">{fmt(sens[1].pay)} <span className="re-up">+{fmt(sens[1].deltaPay)}</span></span></div>
                  </div>
                  {gr && (
                    <div className="tax-break">
                      <div className="tax-row"><span>寬限 {graceyr} 年只繳息,月付</span><span className="t-num">{fmt(gr.ioPay)}</span></div>
                      <div className="tax-row"><span>寬限到期後月付</span><span className="t-num">{fmt(gr.afterPay)} <span className="re-up">跳 +{fmt(gr.jumpVsIO)}</span></span></div>
                      <div className="tax-row"><span>整段多付的利息</span><span className="t-num">+{fmt(gr.extraInterest)}</span></div>
                    </div>
                  )}
                  <div className="fx-advice fx-advice--mid"><span className="fx-advice__txt">{gr
                    ? "寬限期不是『比較省』——是前期輕鬆、總利息更多、到期月付跳一階(這裡跳約 " + fmt(gr.jumpVsIO) + "/月)。先想好到期扛不扛得住。"
                    : "升息很有感:利率每多 1%,這筆月付就多約 " + fmt(sens[0].deltaPay) + "。想看寬限期把下面年數填 >0。"}</span></div>
                  <div className="fpage__fields">
                    <Field label="房貸餘額"><Input amount affix="NT$" inputMode="decimal" value={fmt(DEBT)} onChange={live(setDebt)} /></Field>
                    <Field label="房貸年利率(%)"><Input inputMode="decimal" value={rate} onChange={live(setRate)} /></Field>
                    <Field label="剩餘年限" hint="還要繳幾年"><Input inputMode="numeric" value={remy} onChange={persist(setRemy, K.remy)} /></Field>
                    <Field label="寬限期年數" hint="只繳息的年數,沒有填 0"><Input inputMode="numeric" value={graceyr} onChange={persist(setGraceyr, K.graceyr)} /></Field>
                  </div>
                </section>

                {/* 卡C 解鎖集中度 · 留/賣/活化 */}
                <section className="fpage__card">
                  <div className="fpage__card-head"><span className="t-overline">解鎖這 {concen}% · 留 / 賣 / 活化</span></div>
                  <div className="fire-desc"><p>你的房子市值約佔<b>總資產的 {concen}%</b>(房子 {wan(V)} 萬、你真正擁有 {wan(equity)} 萬)。過 70% 就值得正視——但<b>自住房本來就特殊,不是非賣不可</b>。三條路、誠實兩面,你自己決定:</p></div>
                  <div className="re-path">
                    <div className="re-path__h"><span className="re-path__n">①</span> 留著自住</div>
                    <p className="re-path__b"><b className="re-good">好</b>:最穩、零交易成本、生活安定。<b className="re-bad">代價</b>:這 {wan(equity)} 萬淨值鎖在房子裡、集中單一地段,急用變現慢。</p>
                  </div>
                  <div className="re-path">
                    <div className="re-path__h"><span className="re-path__n">②</span> 賣掉換流動</div>
                    <p className="re-path__b"><b className="re-good">好</b>:實拿約 <b>{wan(sale.net)} 萬</b>可投資、分散。<b className="re-bad">代價</b>:稅費不可逆、要改租屋(算租金)、賭「投資報酬 &gt; 房價漲幅」。</p>
                    <div className="tax-break">
                      <div className="tax-row"><span>賣掉投資 {oc.years} 年 − 房租(假設 {rinv}%)</span><span className="t-num">{wan(oc.sellNet)} 萬</span></div>
                      <div className="tax-row"><span>留著:房子淨值 − 房貸利息(房價 {rhome}%)</span><span className="t-num">{wan(oc.keepNet)} 萬</span></div>
                      <div className="tax-row tax-row--sum"><span>賣掉要打平,需年化報酬</span><span className="t-num">{oc.breakevenPct}%</span></div>
                    </div>
                  </div>
                  <div className="re-path">
                    <div className="re-path__h"><span className="re-path__n">③</span> 部分活化(不賣)</div>
                    <p className="re-path__b"><b className="re-good">好</b>:增貸/以房養老取出部分資金、人還住裡面。<b className="re-bad">代價</b>:要付利息、減少留給家人的資產;本質是「借錢投資」,槓桿放大賺也放大賠。</p>
                  </div>
                  <div className="fx-advice fx-advice--mid"><span className="fx-advice__tag">💡 誠實</span><span className="fx-advice__txt">這是教育試算、不是叫你賣或不賣。<b>房貸槓桿</b>會放大房子的漲跌——房價漲時「留著」不容易輸(打平要 {oc.breakevenPct}%/年),但跌時虧損一樣被放大、風險更大,別只看單邊。報酬/房價都假設、不保證,兩邊都假設你照常付房貸 / 房租。</span></div>
                  <div className="fpage__fields">
                    <Field label="投資報酬假設(%)" hint="分散投資長期,保守抓 5%"><Input inputMode="decimal" value={rinv} onChange={persist(setRinv, K.rinv)} /></Field>
                    <Field label="房價增值假設(%)" hint="保守抓 2–3%,不保證"><Input inputMode="decimal" value={rhome} onChange={persist(setRhome, K.rhome)} /></Field>
                    <Field label="若賣掉改租屋的月租"><Input amount affix="NT$" inputMode="decimal" value={fmt(num(rentas))} onChange={persist(setRentas, K.rentas)} /></Field>
                    <Field label="對照年數"><Input inputMode="numeric" value={ocy} onChange={persist(setOcy, K.ocy)} /></Field>
                  </div>
                </section>
                </React.Fragment>
              ) : (
                <section className="fpage__card">
                  <div className="fpage__card-head"><span className="t-overline">投資 · 收租試算</span><span className="fpage__card-hint">假設試算 · 數字是範例</span></div>
                  <div className="fx-now"><span className="fx-now__unit">每月現金流</span><span className={"fx-now__rate t-num " + (mCashflow >= 0 ? "fx-pl--up" : "fx-pl--down")}>{mCashflow >= 0 ? "+" : "−"}{fmt(Math.abs(mCashflow))}</span></div>
                  <div className="goal__nums"><span className="t-num">表面報酬 {grossYield.toFixed(1)}%</span><span className="goal__pct t-num">淨報酬 {netYield.toFixed(1)}%</span></div>

                  <div className="fire-desc">
                    <p><b>這是什麼</b>:買一間房收租划不划算。<b>表面報酬</b>=年租金÷房價;<b>淨報酬</b>=扣掉稅/管理/修繕後÷房價;<b>月現金流</b>=月租 − 月房貸 − 月持有成本(負的代表每月要倒貼)。</p>
                    <p><b>自備款報酬率</b>(現金投報)= 一年淨賺 ÷ 自備款 = <b>{coc.toFixed(1)}%</b>。</p>
                  </div>

                  <div className="tax-break">
                    <div className="tax-row"><span>月租(扣 {VAC}% 空置)</span><span className="t-num">{fmt(effRent)}</span></div>
                    <div className="tax-row"><span>− 月房貸(貸 {wan(loan)} 萬 / {IYEARS} 年 / {IRATE}%)</span><span className="t-num">{fmt(mPay)}</span></div>
                    <div className="tax-row"><span>− 月持有成本(稅+管理+修繕)</span><span className="t-num">{fmt(ICOST / 12)}</span></div>
                    <div className="tax-row tax-row--sum"><span>= 每月現金流</span><span className="t-num">{mCashflow >= 0 ? "+" : "−"}{fmt(Math.abs(mCashflow))}</span></div>
                  </div>

                  <div className={"fx-advice " + (mCashflow >= 0 && netYield >= 3 ? "fx-advice--low" : "fx-advice--mid")}>
                    <span className="fx-advice__tag">💡 誠實提醒</span>
                    <span className="fx-advice__txt">{mCashflow < 0
                      ? "這組假設下你每月要倒貼約 " + fmt(Math.abs(mCashflow)) + " 元——等於你是在『賭房子增值』,不是賺租金。台灣租金報酬率本來就低(表面常 2–3%)。同樣的自備款放股票/ETF(長期 ~5%)還能隨時變現、不用扛貸款風險。要做可以,但要清楚你賭的是什麼。"
                      : "這組假設下有正現金流,在台灣算不錯。但仍要把『增值不確定、流動性差、要管理租客』算進去;跟把錢放 ETF(~5% 且能變現)比一比再決定。"}</span>
                  </div>

                  <div className="fpage__fields">
                    <Field label="房屋總價"><Input amount affix="NT$" inputMode="decimal" value={fmt(PRICE)} onChange={persist(setPrice, K.price)} /></Field>
                    <Field label="自備款" hint="頭期款 + 雜費"><Input amount affix="NT$" inputMode="decimal" value={fmt(DOWN)} onChange={persist(setDown, K.down)} /></Field>
                    <Field label="貸款年利率(%)"><Input inputMode="decimal" value={irate} onChange={persist(setIrate, K.irate)} /></Field>
                    <Field label="貸款年限"><Input inputMode="numeric" value={iyears} onChange={persist(setIyears, K.iyears)} /></Field>
                    <Field label="每月租金"><Input amount affix="NT$" inputMode="decimal" value={fmt(RENT)} onChange={persist(setRent, K.rent)} /></Field>
                    <Field label="空置率(%)" hint="一年抓幾個月租不出去,常用 5–8%"><Input inputMode="decimal" value={vac} onChange={persist(setVac, K.vac)} /></Field>
                    <Field label="管理+修繕+稅/年"><Input amount affix="NT$" inputMode="decimal" value={fmt(ICOST)} onChange={persist(setIcost, K.icost)} /></Field>
                  </div>
                </section>
              )}

              <button type="button" className="fire-reset" onClick={resetAll}><i className="ph ph-arrow-counter-clockwise" aria-hidden="true" /> 回復預設值</button>
              <p className="fx-disclaim">粗估、給方向用。自住模式的賣房稅費(房地合一/土增/仲介)為估算,稅率截至 2026-06、實際以國稅局核定為準;土增稅與土地漲價總數額需查地政。投資模式是假設試算。增值無法保證、台灣租金報酬率普遍偏低,都當方向參考,不構成投資/稅務/法律建議。</p>
            </div>
          </div>
        </div>
      </div>
    );
  }

  window.PropertyScreen = PropertyScreen;
})();