// 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",
  };

  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"; });
    // 自住
    const [value, setValue] = React.useState(function () { return lsGet(K.value) || dftValue; });
    const [debt, setDebt] = React.useState(function () { return lsGet(K.debt) || dftDebt; });
    const [rate, setRate] = React.useState(function () { return lsGet(K.rate) || dftRate; });
    const [pay, setPay] = React.useState(function () { return lsGet(K.pay) || dftPay; });
    const [income, setIncome] = React.useState(function () { return lsGet(K.income) || 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"; });

    function persist(setter, key) { return function (e) { const v = e.target.value; setter(v); lsSet(key, v); }; }
    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");
    }

    // 自住計算
    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;

    // 投資計算
    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" ? (
                <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="你估的目前市價(預設帶 Helm 的房產)"><Input amount affix="NT$" inputMode="decimal" value={fmt(V)} onChange={persist(setValue, K.value)} /></Field>
                    <Field label="房貸餘額" hint="預設帶你的房貸"><Input amount affix="NT$" inputMode="decimal" value={fmt(DEBT)} onChange={persist(setDebt, K.debt)} /></Field>
                    <Field label="房貸年利率(%)"><Input inputMode="decimal" value={rate} onChange={persist(setRate, K.rate)} /></Field>
                    <Field label="房貸月付" hint="算負擔率用"><Input amount affix="NT$" inputMode="decimal" value={fmt(PAY)} onChange={persist(setPay, K.pay)} /></Field>
                    <Field label="月收入" hint="算負擔率用(預設帶現金流收入)"><Input amount affix="NT$" inputMode="decimal" value={fmt(INC)} onChange={persist(setIncome, K.income)} /></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>
              ) : (
                <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">粗估、給方向用。自住房是「居住」不是投資,工具不估市價(你最清楚自己的房)。投資模式是假設試算,沒算交易稅費(契稅/代書/仲介)、房地合一稅、利率變動與增值(增值無法保證)。台灣租金報酬率普遍偏低,當方向參考。</p>
            </div>
          </div>
        </div>
      </div>
    );
  }

  window.PropertyScreen = PropertyScreen;
})();