// cost-tab.jsx
// 「コスト試算」タブ。GitHub版cost.html の計算ロジック完全移植 + プロパン地域モード対応。

const { useMemo: useMemoCost } = React;
const { CATS: CATS_C } = window.HOUSE_DATA;

// 累積コスト計算（GitHub cost.html と同一ロジック）
function calcCumulative(selection, tweaks) {
  const er = tweaks.elecRise / 100;
  const gr = tweaks.gasRise / 100;
  const f  = tweaks.family;
  const hh = tweaks.homeHours;

  let initialTotal = 0;
  let annualTotal  = 0;
  CATS_C.forEach(c => {
    const o = getOption(c.id, selection[c.id]);
    initialTotal += o.init;
    annualTotal  += o.annual;
  });

  const adj = 1 + (f - 2) * 0.08 + hh * 0.01;
  const yrs = [1, 3, 5, 10, 15, 20];
  const vals = yrs.map(y => {
    let s = 0;
    for (let i = 1; i <= y; i++) {
      s += annualTotal * adj * Math.pow(1 + (er + gr) * 0.5, i);
    }
    return initialTotal + s;
  });
  return { yrs, vals, initialTotal, annualTotal, adj };
}

// ─── コスト棒グラフ ───
function CostBars({ yrs, vals }) {
  const max = Math.max(...vals);
  return (
    <div style={{display:'flex', gap:'10px', alignItems:'flex-end', height:'180px', padding:'0 6px'}}>
      {yrs.map((y,i) => {
        const h = (vals[i]/max) * 160;
        return (
          <div key={i} style={{flex:1, display:'flex', flexDirection:'column', alignItems:'center', gap:'5px'}}>
            <div style={{fontSize:'11px', color:'var(--blue)', fontWeight:700, fontFamily:'var(--mono)'}}>
              ¥{Math.round(vals[i])}
            </div>
            <div style={{
              width:'100%',
              height:`${h}px`,
              background:'linear-gradient(180deg, rgba(91,156,246,.7), rgba(91,156,246,.3))',
              borderRadius:'4px 4px 0 0',
              border:'1px solid rgba(91,156,246,.4)',
              borderBottom:'none',
              minHeight:'4px',
              transition:'height .4s'
            }}/>
            <div style={{fontSize:'10px', color:'var(--text3)', fontFamily:'var(--mono)'}}>{y}年</div>
          </div>
        );
      })}
    </div>
  );
}

// ─── 設備別コスト比較表 ───
function ComparisonTable({ selection, tweaks }) {
  const er = tweaks.elecRise / 100;
  const gr = tweaks.gasRise / 100;
  const f  = tweaks.family;
  const hh = tweaks.homeHours;
  const adj = 1 + (f - 2) * 0.08 + hh * 0.01;

  const Chip = ({v}) => {
    const color = v >= 4 ? 'var(--green)' : v >= 3 ? '#a3e635' : 'var(--amber)';
    const bg = v >= 4 ? 'rgba(45,217,143,.12)' : v >= 3 ? 'rgba(163,230,53,.1)' : 'rgba(240,165,0,.12)';
    return (
      <span style={{
        display:'inline-block', padding:'2px 7px', borderRadius:'4px',
        fontSize:'10px', fontWeight:700, fontFamily:'var(--mono)',
        background:bg, color, border:`1px solid ${color}30`
      }}>{v}/5</span>
    );
  };

  return (
    <div style={{
      background:'var(--surface)',
      border:'1px solid var(--border)',
      borderRadius:'10px',
      overflow:'hidden'
    }}>
      <div style={{overflowX:'auto'}}>
        <table style={{width:'100%', borderCollapse:'collapse', fontSize:'12px', minWidth:'780px'}}>
          <thead>
            <tr style={{background:'var(--surface2)'}}>
              {['設備','選択','初期','年間','10年累積','時短','清掃','コスト','将来性'].map(h => (
                <th key={h} style={{
                  padding:'10px 12px', textAlign:'left',
                  fontFamily:'var(--mono)', fontSize:'10px',
                  color:'var(--text3)', letterSpacing:'.05em', fontWeight:600,
                  borderBottom:'1px solid var(--border2)',
                  whiteSpace:'nowrap'
                }}>{h}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {CATS_C.map(c => {
              const o = getOption(c.id, selection[c.id]);
              const a10 = o.annual * adj * (1 + (er+gr) * 0.5) * 10;
              return (
                <tr key={c.id} style={{borderBottom:'1px solid var(--border)'}}>
                  <td style={{padding:'9px 12px', color:'var(--text2)'}}>{c.icon} {c.label}</td>
                  <td style={{padding:'9px 12px', color:'var(--text)'}}>
                    {o.label}
                    <div style={{fontSize:'10px', color:'var(--text3)', marginTop:'2px'}}>{o.maker}</div>
                  </td>
                  <td style={{padding:'9px 12px', fontFamily:'var(--mono)', color:'var(--text)'}}>¥{o.init}万</td>
                  <td style={{padding:'9px 12px', fontFamily:'var(--mono)', color: o.annual < 0 ? 'var(--green)' : 'var(--text)'}}>
                    {o.annual < 0 ? `-¥${Math.abs(o.annual)}万` : `¥${o.annual}万`}
                  </td>
                  <td style={{padding:'9px 12px', fontFamily:'var(--mono)', color:'var(--blue)', fontWeight:600}}>¥{Math.round(o.init + a10)}万</td>
                  <td style={{padding:'9px 12px'}}><Chip v={o.scores.time}/></td>
                  <td style={{padding:'9px 12px'}}><Chip v={o.scores.clean}/></td>
                  <td style={{padding:'9px 12px'}}><Chip v={o.scores.cost}/></td>
                  <td style={{padding:'9px 12px'}}><Chip v={o.scores.future}/></td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}

// ─── プロパン地域 判定文 ───
function getPropaneVerdict(selection) {
  const targets = ['cooking','hotwater','laundry','solar'];
  const caut = targets.filter(catId => {
    const opt = getOption(catId, selection[catId]);
    return opt?.p?.r === 'caution';
  }).length;

  if (caut === 0) {
    return {
      level:'good',
      heading:'この選択で進めるのが今回の標準案です',
      body:'IH、エコキュート、電気の洗濯乾燥で日常のLPガス使用を外します。停電対策はガス契約を残すことではなく、カセットこんろ、照明、充電、水の備えを別に持つ方針で整理します。'
    };
  } else if (caut === 1) {
    return {
      level:'mid',
      heading:'標準案から一部外れています',
      body:'注意表示のある設備だけ理由を確認してください。料理のこだわりや乾燥速度など明確な理由がなければ、給湯、調理、洗濯乾燥は電気側へ戻します。'
    };
  } else {
    return {
      level:'warn',
      heading:'今回の前提から外れるガス設備が多いです',
      body:'LPガスを残すほど契約、配管、料金確認が増えます。まず給湯をエコキュートへ戻し、次に調理と乾燥を見直してから例外だけ残します。'
    };
  }
}

// ─── プロパンガイドセクション ───
function PropaneGuide({ selection }) {
  const v = getPropaneVerdict(selection);
  const colorMap = {
    good: {c:'var(--green)', bg:'rgba(45,217,143,.06)', bd:'rgba(45,217,143,.25)'},
    mid:  {c:'var(--amber)', bg:'rgba(240,165,0,.06)',  bd:'rgba(240,165,0,.25)'},
    warn: {c:'var(--red)',   bg:'rgba(240,88,88,.06)',  bd:'rgba(240,88,88,.25)'},
  };
  const col = colorMap[v.level];

  return (
    <div>
      <SecHead icon="📋" title="プロパンガス地域での判断ガイド"
        sub="今回の基準は「ガスを残す理由があるか」を先に見ることです。理由がなければ、給湯・調理・洗濯乾燥を電気でまとめます。" />

      {/* 判定ボックス */}
      <div style={{
        background: col.bg,
        border: `1px solid ${col.bd}`,
        borderRadius:'10px',
        padding:'16px 18px',
        marginBottom:'18px'
      }}>
        <div style={{fontSize:'13px', fontWeight:700, color:col.c, marginBottom:'8px'}}>
          {v.level === 'good' ? '✓ ' : v.level === 'mid' ? '⚠ ' : '⚠ '}{v.heading}
        </div>
        <div style={{fontSize:'12px', color:'var(--text2)', lineHeight:1.75}}>{v.body}</div>
      </div>

      {/* 推奨 vs 注意の2カラム */}
      <div className="mobile-stack" style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:'12px', marginBottom:'18px'}}>
        <div style={{
          background:'rgba(45,217,143,.05)',
          border:'1px solid rgba(45,217,143,.2)',
          borderRadius:'10px',
          padding:'16px'
        }}>
          <div style={{fontSize:'13px', fontWeight:700, color:'var(--green)', marginBottom:'12px'}}>
            ✓ 標準案に入れるもの
          </div>
          {[
            ['給湯（エコキュート）','毎日使う給湯を電気に寄せる。屋外置場と沸き上げ設定まで決める。'],
            ['IHコンロ','調理だけのガス契約を残さず、掃除しやすいキッチンにする。'],
            ['乾燥付きドラム','干す作業を減らし、ガス乾燥用の配管と契約を増やさない。'],
            ['食洗機と床掃除ロボ','電気で家事時間を削る。容量、基地、収納動線を図面に入れる。'],
          ].map(([t,b],i) => (
            <div key={i} style={{marginBottom:'10px'}}>
              <div style={{fontSize:'11px', fontWeight:700, color:'var(--text)', marginBottom:'2px'}}>{t}</div>
              <div style={{fontSize:'11px', color:'var(--text2)', lineHeight:1.6}}>{b}</div>
            </div>
          ))}
        </div>

        <div style={{
          background:'rgba(240,165,0,.05)',
          border:'1px solid rgba(240,165,0,.2)',
          borderRadius:'10px',
          padding:'16px'
        }}>
          <div style={{fontSize:'13px', fontWeight:700, color:'var(--amber)', marginBottom:'12px'}}>
            ⚠ 例外として比較するもの
          </div>
          {[
            ['ガス乾燥機','乾燥速度を最優先する時だけ、LPガス料金と工事費込みで比較する。'],
            ['ガスコンロ','料理の火力感や鍋の自由度が重要なら残す理由になる。非常時だけなら備蓄で補う。'],
            ['太陽光なし','屋根条件、影、見積が悪ければ見送る。ただし将来用の配線ルートは残す。'],
            ['タンクレストイレ','掃除性と見た目は良い。予算を詰める時は最後に調整する。'],
          ].map(([t,b],i) => (
            <div key={i} style={{marginBottom:'10px'}}>
              <div style={{fontSize:'11px', fontWeight:700, color:'var(--text)', marginBottom:'2px'}}>{t}</div>
              <div style={{fontSize:'11px', color:'var(--text2)', lineHeight:1.6}}>{b}</div>
            </div>
          ))}
        </div>
      </div>

      {/* 採用判断テーブル */}
      <SecHead icon="📊" title="採用判断を図面に落とす"
        sub="お金の比較だけで終わらせず、後付けしにくい準備を先に押さえます。" />
      <div style={{
        background:'var(--surface)',
        border:'1px solid var(--border)',
        borderRadius:'10px',
        overflowX:'auto',
        marginBottom:'8px'
      }}>
        <table style={{width:'100%', minWidth:'560px', borderCollapse:'collapse', fontSize:'12px'}}>
          <thead>
            <tr style={{background:'var(--surface2)'}}>
              {['項目','今回の採用','理由','家づくりで先に確保'].map(h => (
                <th key={h} style={{
                  padding:'10px 14px', textAlign:'left',
                  fontFamily:'var(--mono)', fontSize:'10px',
                  color:'var(--text3)', letterSpacing:'.05em',
                  borderBottom:'1px solid var(--border2)'
                }}>{h}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {[
              ['給湯','エコキュート','LPガスを常用しない基礎設備','タンク、ヒートポンプ室外機、配管経路'],
              ['調理','200V IH','掃除しやすくガス契約を増やさない','IH回路、調理家電用コンセント'],
              ['洗濯乾燥','乾燥付きドラム','干す作業を減らす効果が大きい','搬入幅、扉開き、衣類収納'],
              ['食器','大容量食洗機','食後の家事を短くする','食洗機幅、食器収納、分別ごみ置場'],
              ['床掃除','水拭き対応ロボ','掃除頻度を機械に移す','基地コンセント、床配線、家具形状'],
            ].map((row,i) => (
              <tr key={i} style={{borderBottom:'1px solid var(--border)'}}>
                <td style={{padding:'10px 14px', color:'var(--text2)'}}>{row[0]}</td>
                <td style={{padding:'10px 14px', color:'var(--green)', fontWeight:600}}>{row[1]}</td>
                <td style={{padding:'10px 14px', color:'var(--text2)'}}>{row[2]}</td>
                <td style={{padding:'10px 14px', color:'var(--blue)'}}>{row[3]}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      <div style={{fontSize:'10px', color:'var(--text3)', marginTop:'8px'}}>料金比較をする時は、LPガス単価、電気料金プラン、補助対象型番を見積書で確認します。</div>
    </div>
  );
}


function SolarPayback({ selection }) {
  const solar = getOption('solar', selection.solar);
  if (solar.id !== 'solarOn') return null;
  const years = solar.annual < 0 ? (solar.init / Math.abs(solar.annual)) : null;
  return (
    <div style={{background:'var(--surface)', border:'1px solid var(--border)', borderRadius:'10px', padding:'14px 16px', marginBottom:'18px'}}>
      <div style={{fontSize:'12px', fontWeight:700, color:'var(--green)', marginBottom:'6px'}}>☀️ 太陽光の回収試算（概算）</div>
      <div style={{fontSize:'12px', color:'var(--text2)', lineHeight:1.7}}>初期費用 ¥{solar.init}万 ÷ 年間削減 {Math.abs(solar.annual)}万 = <b style={{color:'var(--text)'}}>{years ? years.toFixed(1) : '—'}年</b>。
      売電単価・自家消費率で変動するため、実行時は見積書の実測値で再計算してください。</div>
    </div>
  );
}
function RecommendedModels(){
  const rows=[
    ['エコキュート','三菱 SRT-S376U / ダイキン EQX37YFV','370Lクラスで4人家族の給湯をカバーしやすく、夜間沸き上げ運用に適合'],
    ['IH（3口）','Panasonic KZ-AN36S / 三菱 CS-T321HNSR','清掃性・同時調理性能のバランスが高い'],
    ['IH（2口+ラジエント）','Panasonic KZ-G32AST / 日立 HT-M60S','2口中心の調理に十分で初期費用を抑えやすい'],
    ['ドラム式洗乾','Panasonic NA-LX129D / 日立 BD-SX130K','ヒートポンプ乾燥で時短効果が大きく、毎日運用しやすい'],
    ['食洗機60cm','Panasonic NP-60MS8S','鍋まで入る容量があり手洗い削減効果が高い'],
  ];
  return <div style={{background:'var(--surface)', border:'1px solid var(--border)', borderRadius:'10px', padding:'14px 16px', marginBottom:'18px'}}><div style={{fontSize:'12px', fontWeight:700, color:'var(--blue)', marginBottom:'8px'}}>🧾 設備おすすめ型番（候補）</div>{rows.map((r,i)=><div key={i} style={{fontSize:'11px', marginBottom:'8px', color:'var(--text2)'}}><b style={{color:'var(--text)'}}>{r[0]}</b>：{r[1]}<br/>{r[2]}</div>)}</div>
}

// ─── メインタブ ───
function CostTab({ selection, tweaks }) {
  const { yrs, vals, initialTotal, annualTotal } = useMemoCost(() => calcCumulative(selection, tweaks), [selection, tweaks]);
  const cost10 = Math.round(vals[3]);

  return (
    <div>
      <SecHead icon="💰" title="光熱費・維持費の累積コスト（概算）"
        sub="初期費用込み。料金上昇率・家族人数・在宅時間を加味した概算。Tweaksパネルで条件を調整できます。" />

      <div className="mobile-stat-grid" style={{display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:'10px', marginBottom:'18px'}}>
        <StatBox label="初期投資合計" value={`¥${initialTotal}`} unit="万円" color="var(--text)" />
        <StatBox label="年間ランニング" value={`¥${annualTotal.toFixed(1)}`} unit="万/年" color="var(--amber)" sub="設備合計" />
        <StatBox label="10年総額目安" value={`¥${cost10}`} unit="万円" color="var(--green)" sub="初期費用込み" />
      </div>

      {/* グラフ */}
      <div style={{
        background:'var(--surface)',
        border:'1px solid var(--border)',
        borderRadius:'10px',
        padding:'20px',
        marginBottom:'22px'
      }}>
        <div style={{fontSize:'10px', color:'var(--text3)', fontFamily:'var(--mono)', marginBottom:'14px', letterSpacing:'.05em'}}>
          CUMULATIVE TOTAL COST — 累積総コスト推移（万円）
        </div>
        <CostBars yrs={yrs} vals={vals} />
      </div>

      {/* 設備別 比較表 */}
      <SecHead icon="📊" title="設備別コスト比較表"
        sub="現在の選択構成の各設備の初期・年間・10年累積コストと各軸スコア。" />
      <div style={{marginBottom:'22px'}}>
        <ComparisonTable selection={selection} tweaks={tweaks} />
      </div>

      <SolarPayback selection={selection} />
      <RecommendedModels />

      {/* 今回の基準ガイド */}
      <PropaneGuide selection={selection} />

      {/* 前提条件 */}
      <div style={{
        background:'var(--surface)',
        border:'1px solid var(--border)',
        borderRadius:'10px',
        padding:'14px 16px',
        marginTop:'18px'
      }}>
        <div style={{fontSize:'11px', fontWeight:700, color:'var(--amber)', marginBottom:'8px', fontFamily:'var(--mono)', letterSpacing:'.05em'}}>
          ⚠ 試算の前提条件
        </div>
        <div style={{display:'flex', flexDirection:'column', gap:'5px'}}>
          {[
            `電気上昇率 ${tweaks.elecRise}%/年、ガス上昇率 ${tweaks.gasRise}%/年で試算`,
            `家族${tweaks.family}人 (在宅${tweaks.homeHours}h/日) を前提に補正係数を適用`,
            '設備メンテナンス費・修繕積立は別途計上が必要',
            '金利・減税・補助額は含まず。見積時点の対象制度を別途確認',
            '設備判断はLPガス地域 + 基本オール電化を基準にしています',
          ].map((t,i) => (
            <div key={i} style={{display:'flex', gap:'8px'}}>
              <span style={{color:'var(--text3)', fontSize:'11px'}}>•</span>
              <span style={{fontSize:'11px', color:'var(--text2)', lineHeight:1.6}}>{t}</span>
            </div>
          ))}
        </div>
      </div>

      {/* 住宅設備 知識メモ */}
      <div style={{
        background:'var(--surface)',
        border:'1px solid var(--border)',
        borderRadius:'10px',
        padding:'16px 18px',
        marginTop:'18px'
      }}>
        <div style={{fontSize:'11px', fontWeight:700, color:'var(--blue)', marginBottom:'12px', fontFamily:'var(--mono)', letterSpacing:'.05em'}}>
          📚 住宅設備 知識メモ
        </div>
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:'10px'}}>
          {[
            {icon:'☀️', title:'太陽光は蓄電池セットが前提・経済合理性は低い', body:'旧FIT廃止→新制度は24円×4年→8.3円×6年。蓄電池なしは自家消費率30%で非合理。セット（7kW+蓄電池10kWh）で275万円・年19万円便益・回収14〜15年。しかし蓄電池は10〜15年で交換（100万円超）→生涯損益マイナスになりやすい。訪問販売・無料設置に注意。補助金活用必須。'},
            {icon:'🚿', title:'エコキュートの交換費', body:'10〜15年で故障の可能性あり。交換目安は10〜20万円台。訪問販売で40万円超は高すぎ（くらしのマーケットで相見積もり）。'},
            {icon:'🏠', title:'家づくり後悔ポイント', body:'書斎不足・窓位置・収納動線・FP紹介の不要保険。夫婦で資金計画を共有する。建てた後の費用（固定資産税・外壁塗装）も計画に。'},
            {icon:'❄️', title:'高気密高断熱の実力', body:'C値0.1・UA値0.26の家（35坪）で6畳エアコン1台＋電気代月7,700円の事例あり。大手HMより地域工務店でC値の実測値を確認。'},
            {icon:'🏗️', title:'コスト削減の実例', body:'4,500万円→3,000万円（▲1,500万円）の体験談あり。小さな家・施主施工・材木工場直営工務店との直接交渉が効果的。'},
          ].map((item,i) => (
            <div key={i} style={{
              background:'var(--bg)',
              border:'1px solid var(--border)',
              borderRadius:'8px',
              padding:'10px 12px'
            }}>
              <div style={{fontSize:'13px', fontWeight:600, color:'var(--text)', marginBottom:'5px'}}>{item.icon} {item.title}</div>
              <div style={{fontSize:'11px', color:'var(--text2)', lineHeight:1.65}}>{item.body}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

window.CostTab = CostTab;