/* Clear Mint — Wealth pages: Liabilities, Assets, Insurance, Family Vault */
const { MetricCard, ChartCard, DataTable, DonutChart, TrendChart, ProgressBar, Legend, FinancialHealthCard } = window;
const { KpiRow, ChangeCell, StatusPill, ActivityList, Tabs, CategoryBar, CMC } = window;
const Iw = window.CMIcon;
const { G, PU, AM, BL, SL, RD, TEAL, PINK, INDIGO } = CMC;

/* page-local icons reused from kit */
const tint = window.tintFor;

/* ============================ LIABILITIES ============================ */
const LIAB_ICON = { Mortgage:<Iw.House size={18}/>, 'Auto Loan':<Iw.Car size={18}/>, LOC:<Iw.Card size={18}/>,
  'Student Loan':<Iw.Reports size={18}/>, 'Credit Card':<Iw.Card size={18}/>, 'Personal Loan':<Iw.User size={18}/>, 'Line of Credit':<Iw.Card size={18}/> };
const LIAB_COLOR = { Mortgage:RD, 'Auto Loan':AM, LOC:BL, 'Student Loan':PU, 'Credit Card':BL, 'Personal Loan':TEAL };
function PageLiabilities() {
  const CM = window.useStore ? window.useStore() : window.CM;
  const fmt = CM.M0, fmt2 = CM.M;
  const liabs = [].concat(
    (CM.S.liabilities||[]).map(function(l){ return { name:l.name, type:l.type||'Loan', bal:+l.balance||0, rate:l.rate, pay:+l.payment||0, lender:l.lender||'' }; }),
    (CM.S.cards||[]).map(function(c){ return { name:c.name, type:'Credit Card', bal:+c.balance||0, rate:c.apr, pay:Math.max(25,Math.round((+c.balance||0)*0.02)), lender:c.issuer||'', limit:+c.limit||0 }; })
  );
  const total = liabs.reduce((s,l)=>s+l.bal,0);
  const monthly = liabs.reduce((s,l)=>s+l.pay,0);
  const avgRate = liabs.length?(liabs.reduce((s,l)=>s+(+l.rate||0)*l.bal,0)/(total||1)):0;
  const inc = CM.monthlyIncome()||1;
  const dti = Math.round(monthly/inc*100);
  const byType = {};
  liabs.forEach(l=>{ byType[l.type]=(byType[l.type]||0)+l.bal; });
  const pal=[RD,AM,PU,BL,TEAL,PINK,G];
  const typeArr=Object.keys(byType).map((t,i)=>({label:t,value:byType[t],color:pal[i%pal.length]})).sort((a,b)=>b.value-a.value);
  const cols = [
    {header:'Liability', cell:r=><DataTable.Lead thumb={<span style={{color:LIAB_COLOR[r.type]||SL}}>{LIAB_ICON[r.type]||<Iw.Bank size={18}/>}</span>} primary={r.name} sub={r.lender||r.type}/>},
    {header:'Balance', cell:r=><DataTable.Stack strong={fmt(r.bal)} meta={r.limit?('limit '+fmt(r.limit)):r.type}/>},
    {header:'Interest Rate', cell:r=><span className="cm-cell-strong num">{(r.rate!=null?r.rate+'%':'—')}</span>},
    {header:'Monthly Payment', align:'right', cell:r=><span className="cm-cell-strong num">{fmt2(r.pay)}</span>},
  ];
  return (
    <div>
      <KpiRow>
        <MetricCard label="Total Liabilities" labelColor="var(--red-500)" value={fmt(total)}
          art={<span style={{color:'var(--red-100)'}}><Iw.Bolt size={42}/></span>}/>
        <MetricCard label="Monthly Payments" value={fmt(monthly)}
          art={<span style={{color:'var(--mint-100)'}}><Iw.Calendar size={40}/></span>}/>
        <MetricCard label="Avg Interest Rate" value={avgRate.toFixed(2)+'%'}
          art={<span style={{color:'var(--mint-100)'}}><Iw.Dollar size={40}/></span>}/>
        <div className="cm-card cm-card-pad">
          <div className="m-label" style={{color:dti<36?'var(--green-600)':'#B5740F',fontWeight:700,fontSize:13,marginBottom:10}}>Debt-to-Income</div>
          <div className="cm-gauge-wrap">
            <DonutChart size={72} thickness={10} segments={[{value:Math.min(100,dti),color:dti<36?G:AM},{value:Math.max(0,100-dti),color:'var(--mint-100)'}]} center={{value:dti+'%'}}/>
            <div><div style={{fontWeight:800,color:dti<36?G:'#B5740F'}}>{dti<36?'Good':'Watch'}</div><div className="t-caption">Target below 36%</div></div>
          </div>
        </div>
      </KpiRow>

      <ChartCard className="cm-mb-24">
        <DataTable columns={cols} rows={liabs} minWidth={760}/>
      </ChartCard>

      <div className="cm-grid-3">
        <ChartCard title="Liabilities by Type">
          <div className="cm-donut-card" style={{justifyContent:'center'}}>
            <DonutChart size={150} thickness={22} center={{value:fmt(total),label:'Total'}} segments={typeArr}/>
          </div>
          <div style={{marginTop:16}}><Legend items={typeArr.map(t=>({color:t.color,label:t.label,pct:Math.round(t.value/(total||1)*100)+'%',value:fmt(t.value)}))}/></div>
        </ChartCard>
        <ChartCard title="Payments">
          <ActivityList items={liabs.slice(0,5).map(l=>({icon:LIAB_ICON[l.type]||<Iw.Bank size={16}/>,color:LIAB_COLOR[l.type]||SL,title:l.name,sub:l.lender||l.type,amt:fmt2(l.pay),amtColor:'var(--ink-900)'}))}/>
        </ChartCard>
        <ChartCard title="Summary">
          <div>
            {[['Total Liabilities',fmt(total)],['Total Monthly Payments',fmt2(monthly)],['Avg Interest Rate',avgRate.toFixed(2)+'%'],['Accounts',String(liabs.length)]].map((r,i)=>(
              <div key={i} style={{display:'flex',justifyContent:'space-between',padding:'13px 0',borderBottom:'1px solid var(--line)'}}>
                <span className="t-body" style={{color:'var(--ink-500)'}}>{r[0]}</span>
                <span className="num" style={{fontWeight:700,color:'var(--ink-900)'}}>{r[1]}</span>
              </div>
            ))}
            <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',padding:'13px 0'}}>
              <span className="t-body" style={{color:'var(--ink-500)'}}>Debt-to-Income</span>
              <span><span className="num" style={{fontWeight:700,color:'var(--ink-900)',marginRight:8}}>{dti}%</span><StatusPill tone={dti<36?'green':'amber'}>{dti<36?'Good':'Watch'}</StatusPill></span>
            </div>
          </div>
        </ChartCard>
      </div>
    </div>
  );
}
window.PageLiabilities = PageLiabilities;

/* ============================ ASSETS ============================ */
const ASSETS = [
  {ic:<Iw.Accounts size={18}/>,c:G,name:'Checking Account',sub:'Chase Total Checking',cat:'Cash & Bank',acct:'Chase Bank',desc:'•••• 1234',val:'$18,750.24',dir:'pos',pct:'2.3%',amt:'+$425.17',date:'—',alloc:'1.5%'},
  {ic:<Iw.Wallet size={18}/>,c:RD,name:'Emergency Fund',sub:'Marcus by Goldman Sachs',cat:'Cash & Bank',acct:'Marcus',desc:'•••• 5678',val:'$35,000.00',dir:'pos',pct:'0.8%',amt:'+$280.00',date:'—',alloc:'2.8%'},
  {ic:<Iw.Bars size={18}/>,c:G,name:'Brokerage Account',sub:'Vanguard Brokerage',cat:'Investments',acct:'Vanguard',desc:'•••• 2468',val:'$412,350.75',dir:'pos',pct:'6.2%',amt:'+$24,123.40',date:'Jun 12, 2020',alloc:'32.6%'},
  {ic:<Iw.Pie size={18}/>,c:PU,name:'Roth IRA',sub:'Vanguard Roth IRA',cat:'Investments',acct:'Vanguard',desc:'•••• 1357',val:'$125,680.30',dir:'pos',pct:'5.1%',amt:'+$6,102.45',date:'Jan 5, 2019',alloc:'9.9%'},
  {ic:<Iw.Home size={18}/>,c:G,name:'Primary Residence',sub:'123 Maple Grove Dr.',cat:'Real Estate',acct:'Home',desc:'Owner-occupied',val:'$650,000.00',dir:'pos',pct:'3.1%',amt:'+$19,500.00',date:'May 10, 2018',alloc:'51.4%'},
  {ic:<Iw.Car size={18}/>,c:AM,name:'2021 Toyota RAV4 XLE',sub:'Vehicle',cat:'Vehicles',acct:'Personal Vehicle',desc:'VIN: 2T3P1RFV6MC123456',val:'$26,800.00',dir:'neg',pct:'1.2%',amt:'-$325.00',date:'Mar 3, 2021',alloc:'2.1%'},
  {ic:<Iw.Gold size={18}/>,c:AM,name:'Gold Holdings',sub:'Physical Gold',cat:'Other Assets',acct:'Safe Deposit Box',desc:'Box #2041',val:'$8,250.00',dir:'pos',pct:'2.7%',amt:'+$215.00',date:'Apr 18, 2022',alloc:'0.7%'},
  {ic:<Iw.Art size={18}/>,c:PU,name:'Art Collection',sub:'Various Pieces',cat:'Other Assets',acct:'Personal Collection',desc:'5 Items',val:'$7,568.71',dir:'pos',pct:'0.5%',amt:'+$37.21',date:'—',alloc:'0.6%'},
];
function PageAssets() {
  const CM = window.useStore ? window.useStore() : window.CM;
  const fmt = CM.M0, fmt2 = CM.M;
  const [tab, setTab] = React.useState('All Assets');
  const rowsAll = [].concat(
    (CM.S.accounts||[]).map(a=>({name:a.name, cat:'Cash & Bank', sub:(a.bank||'')+(a.last4?' ····'+a.last4:''), val:+a.balance||0, c:AM, ic:<Iw.Wallet size={18}/>})),
    (CM.S.investments||[]).map(v=>({name:v.symbol||v.name, cat:'Investments', sub:(v.name!==v.symbol?v.name:'')||v.account||'', val:(v.marketValue!=null?+v.marketValue:(+v.shares||0)*(+v.currentPrice||0)), c:G, ic:<Iw.Investments size={18}/>})),
    // Investment accounts imported from statements (Phase 3) — surfaced as assets at render time,
    // NOT stored in S.assets (no double-count). Tagged kind/source/registered.
    (CM.S.investmentAccounts||[]).map(a=>({name:a.planName||a.planType, cat:'Investments', sub:(a.source||'Statement')+(a.planType?(' · '+a.planType):'')+(a.registered?' · Registered':''), val:+a.balance||0, c:G, ic:<Iw.Investments size={18}/>, kind:'investment-account', source:a.source, registered:!!a.registered, fromStatement:true})),
    (CM.S.assets||[]).map(a=>{const re=/real estate|home|property/i.test(a.type||'');const ve=/vehicle|car|auto/i.test(a.type||'');return {name:a.name, cat:re?'Real Estate':ve?'Vehicles':'Other Assets', sub:a.type||'', val:+a.value||0, c:re?PU:ve?BL:SL, ic:re?<Iw.House size={18}/>:ve?<Iw.Car size={18}/>:<Iw.Art size={18}/>};})
  );
  const total = rowsAll.reduce((s,r)=>s+r.val,0)||1;
  rowsAll.forEach(r=>{ r.alloc=Math.round(r.val/total*100)+'%'; });
  const rows = tab==='All Assets'?rowsAll:rowsAll.filter(a=>a.cat===tab);
  const segs = CM.assetSegments();
  const b = nwBitsA(CM);
  const cols = [
    {header:'Asset', cell:r=><DataTable.Lead thumb={<span style={{color:r.c}}>{r.ic}</span>} primary={r.name} sub={r.sub}/>},
    {header:'Category', cell:r=><span className="cm-cell-meta" style={{fontSize:13,color:'var(--ink-500)',fontWeight:600}}>{r.cat}</span>},
    {header:'Current Value', cell:r=><span className="cm-cell-strong num">{fmt2(r.val)}</span>},
    {header:'Allocation', align:'right', cell:r=><span className="cm-cell-strong num" style={{fontWeight:600}}>{r.alloc}</span>},
  ];
  return (
    <div>
      <KpiRow>
        <MetricCard label="Total Assets" labelColor="var(--green-600)" value={fmt(b.assets)}
          art={<DonutChart size={56} thickness={9} segments={[{value:74,color:G},{value:26,color:'var(--mint-100)'}]}/>}/>
        <MetricCard label="Total Liabilities" labelColor="var(--red-500)" value={fmt(b.liab)}
          art={<DonutChart size={56} thickness={9} segments={[{value:33,color:RD},{value:67,color:'var(--red-100)'}]}/>}/>
        <MetricCard label="Net Worth" labelColor="var(--green-600)" value={fmt(b.nw)}
          art={<div style={{width:84}}><TrendChart data={CM.netWorthSeries()} width={84} height={42} color={G} pad={{l:2,r:2,t:6,b:6}} showDots={false}/></div>}/>
        <div className="cm-card cm-card-pad">
          <div className="m-label" style={{color:'var(--green-600)',fontWeight:700,fontSize:13,marginBottom:14}}>Asset Allocation</div>
          <div style={{display:'flex',alignItems:'center',gap:18}}>
            <DonutChart size={78} thickness={13} segments={segs}/>
            <div style={{display:'flex',flexDirection:'column',gap:7}}>
              {segs.map((x,i)=>(
                <div key={i} style={{display:'flex',alignItems:'center',gap:8,fontSize:12.5}}>
                  <span style={{width:8,height:8,borderRadius:'50%',background:x.color}}/>
                  <span className="num" style={{fontWeight:700,color:'var(--ink-900)',minWidth:30}}>{Math.round(x.value/(b.assets||1)*100)+'%'}</span>
                  <span style={{color:'var(--ink-500)',fontWeight:600}}>{x.label}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </KpiRow>

      <ChartCard className="cm-mb-24">
        <Tabs tabs={['All Assets','Cash & Bank','Investments','Real Estate','Vehicles','Other Assets']}
          value={tab} onChange={setTab}/>
        <div style={{height:18}}/>
        <DataTable columns={cols} rows={rows} minWidth={720}/>
      </ChartCard>

      <div className="cm-grid-2a">
        <ChartCard title="Asset Allocation">
          <div className="cm-donut-card" style={{justifyContent:'center'}}>
            <DonutChart size={150} thickness={22} center={{value:fmt(b.assets),label:'Total Assets'}} segments={segs}/>
          </div>
          <div style={{marginTop:16}}><Legend items={segs.map(s=>({color:s.color,label:s.label,pct:Math.round(s.value/(b.assets||1)*100)+'%',value:fmt(s.value)}))}/></div>
        </ChartCard>
        <ChartCard title="Top Asset Categories">
          <div style={{paddingTop:4}}>
            {segs.map((s,i)=><CategoryBar key={i} color={s.color} label={s.label} value={fmt(s.value)} pct={Math.round(s.value/(b.assets||1)*100)+'%'} width={Math.round(s.value/Math.max.apply(null,segs.map(x=>x.value))*100)}/>)}
          </div>
        </ChartCard>
      </div>
    </div>
  );
}
window.PageAssets = PageAssets;
function nwBitsA(CM){ const assets=CM.grossAssets(), liab=CM.totalLiabilities(); return { assets:assets, liab:liab, nw:CM.netWorth() }; }

/* ============================ INSURANCE ============================ */
function PageInsurance() {
  const policies = [
    {ic:<Iw.Car size={20}/>,c:AM,name:'Auto Insurance',carrier:'Geico',coverage:'$100,000',premium:'$128',renew:'Aug 12, 2025',status:'Active'},
    {ic:<Iw.House size={20}/>,c:G,name:'Homeowners',carrier:'State Farm',coverage:'$750,000',premium:'$184',renew:'Jun 15, 2025',status:'Active'},
    {ic:<Iw.Shield size={20}/>,c:BL,name:'Term Life',carrier:'Northwestern Mutual',coverage:'$1,000,000',premium:'$96',renew:'Jan 1, 2026',status:'Active'},
    {ic:<Iw.Heart size={20}/>,c:RD,name:'Health Insurance',carrier:'Blue Cross',coverage:'$500,000',premium:'$420',renew:'Dec 31, 2025',status:'Active'},
  ];
  return (
    <div>
      <KpiRow>
        <MetricCard label="Total Coverage" labelColor="var(--green-600)" value="$2.35M" sub="across 4 policies"/>
        <MetricCard label="Monthly Premiums" value="$828" delta={{dir:'pos',text:'on budget'}} sub="$9,936 / yr"/>
        <MetricCard label="Active Policies" value="4" sub="all current"/>
        <MetricCard label="Next Renewal" labelColor="var(--red-500)" value="Jun 15" sub="Homeowners"/>
      </KpiRow>
      <div className="cm-grid-2">
        {policies.map((p,i)=>(
          <div className="cm-tile" key={i}>
            <div className="cm-tile-head">
              <span className="cm-tile-ic" style={{background:tint(p.c),color:p.c}}>{p.ic}</span>
              <div style={{flex:1}}>
                <div className="t-h2" style={{fontSize:16}}>{p.name}</div>
                <div className="t-caption">{p.carrier}</div>
              </div>
              <StatusPill tone="green" icon={<Iw.Check size={12}/>}>{p.status}</StatusPill>
            </div>
            <div style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr',gap:12,paddingTop:14,borderTop:'1px solid var(--line)'}}>
              <div className="cm-ministat"><div className="v num">{p.coverage}</div><div className="k">Coverage</div></div>
              <div className="cm-ministat"><div className="v num">{p.premium}</div><div className="k">Monthly</div></div>
              <div className="cm-ministat"><div className="v num" style={{fontSize:15}}>{p.renew}</div><div className="k">Renews</div></div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}
window.PageInsurance = PageInsurance;

/* ============================ FAMILY VAULT ============================ */
function PageVault() {
  const folders = [
    {ic:<Iw.Shield size={20}/>,c:G,name:'Legal',count:12},
    {ic:<Iw.Heart size={20}/>,c:RD,name:'Medical',count:8},
    {ic:<Iw.House size={20}/>,c:AM,name:'Property',count:9},
    {ic:<Iw.Wallet size={20}/>,c:PU,name:'Financial',count:14},
    {ic:<Iw.Shield size={20}/>,c:BL,name:'Insurance',count:6},
    {ic:<Iw.User size={20}/>,c:TEAL,name:'Personal',count:5},
  ];
  return (
    <div>
      <KpiRow>
        <MetricCard label="Documents" labelColor="var(--green-600)" value="54" sub="6 folders"/>
        <MetricCard label="Shared" value="12" sub="with family"/>
        <MetricCard label="Storage Used" value="2.4 GB" sub="of 15 GB"/>
        <MetricCard label="Recently Added" value="5" sub="this week"/>
      </KpiRow>
      <div className="cm-grid-2b">
        <ChartCard title="Folders" action={<button className="cm-btn cm-btn-ghost"><Iw.Plus size={16}/>New Folder</button>}>
          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:14}}>
            {folders.map((f,i)=>(
              <div key={i} style={{display:'flex',alignItems:'center',gap:12,padding:14,border:'1px solid var(--line)',borderRadius:12,cursor:'pointer'}}>
                <span className="cm-tile-ic" style={{width:38,height:38,flex:'0 0 38px',background:tint(f.c),color:f.c}}><Iw.Folder size={18}/></span>
                <div style={{flex:1}}><div className="t-h3">{f.name}</div><div className="t-caption num">{f.count} files</div></div>
                <Iw.ChevR size={16} className="cm-chev"/>
              </div>
            ))}
          </div>
        </ChartCard>
        <ChartCard title="Recent Documents" action={<a className="t-label text-green" style={{cursor:'pointer'}}>View All</a>}>
          <ActivityList items={[
            {icon:<Iw.File size={16}/>,color:G,title:'Mortgage Agreement.pdf',sub:'Property · 2.1 MB',date:'May 28',right:<Iw.ChevR size={16} className="cm-chev"/>},
            {icon:<Iw.File size={16}/>,color:RD,title:'Health Records 2025.pdf',sub:'Medical · 4.8 MB',date:'May 24',right:<Iw.ChevR size={16} className="cm-chev"/>},
            {icon:<Iw.File size={16}/>,color:PU,title:'Tax Return 2024.pdf',sub:'Financial · 1.3 MB',date:'May 20',right:<Iw.ChevR size={16} className="cm-chev"/>},
            {icon:<Iw.File size={16}/>,color:BL,title:'Auto Policy.pdf',sub:'Insurance · 0.9 MB',date:'May 18',right:<Iw.ChevR size={16} className="cm-chev"/>},
          ]}/>
        </ChartCard>
      </div>
    </div>
  );
}
window.PageVault = PageVault;