/* Clear Mint — V6 Family Vault (Family Command Center) */
(function(){
const { ChartCard, DonutChart, Legend, CMC, tintFor } = window;
const { Robot, ScoreGauge, Spark, SecHead, Stars } = window;
const I = window.CMIcon;
const { G, PU, AM, BL, SL, RD, TEAL, PINK, INDIGO } = CMC;
const tint = tintFor;
const money = n => '$'+n.toLocaleString('en-US');

function Tile({ ic, color, label, value, delta, dir='pos', data }) {
  return (
    <div className="an-exectile">
      <div className="et-head"><span className="et-ic" style={{background:tint(color),color}}>{ic}</span><span className="et-label">{label}</span></div>
      <div className="et-val">{value}</div>
      {delta && <div className="et-delta" style={{color:dir==='neg'?RD:G}}>
        {dir==='neg'?<I.ArrowDown size={13}/>:<I.ArrowUp size={13}/>}{delta}<span className="mut">vs last month</span></div>}
      {data && <div className="et-spark"><Spark data={data} color={dir==='neg'?RD:G}/></div>}
    </div>
  );
}

const ROLE_COLORS = { Admin:G, Partner:PU, Teen:BL, Child:AM, Viewer:SL };

function PageFamilyVault() {
  const [tasks, setTasks] = React.useState([false,false,false,false]);
  const toggle = i => setTasks(t=>t.map((v,j)=>j===i?!v:v));

  /* ---- live figures from the engine (consistent with the rest of the app) ---- */
  const CM = window.useStore ? window.useStore() : window.CM;
  const fmt0 = CM.M0, fmtM = CM.M, FD = CM.FD, FDshort = CM.FDshort;
  const compact = v => { v=Number(v||0); return v>=1e6?('$'+(v/1e6).toFixed(2)+'M'):v>=1e3?('$'+Math.round(v/1e3)+'K'):'$'+Math.round(v); };
  const today = CM.today ? CM.today() : new Date();
  const nw=CM.netWorth(), gAssets=CM.grossAssets(), gLiab=CM.totalLiabilities();
  const totalCash=CM.totalCash(), invMV=CM.calcInvestValue();
  const nwSeries=CM.netWorthSeries(); const nwPrev=nwSeries[nwSeries.length-2]||nw;
  const nwChangePct=nwPrev?(nw-nwPrev)/nwPrev*100:0;
  const cf6=CM.last6CashFlow(); const lastCF=cf6[cf6.length-1]||{inc:0,exp:0};
  const monthlyCF=lastCF.inc-lastCF.exp; const savingsRate=lastCF.inc?(lastCF.inc-lastCF.exp)/lastCF.inc*100:0;
  const score=CM.wealthScore();
  const scoreBand=score>=85?'Excellent':score>=70?'Strong':score>=55?'Healthy':score>=40?'Building':'At Risk';
  const SPCOL={Housing:G,Transportation:BL,Transport:BL,'Food & Dining':AM,Groceries:AM,Dining:AM,Shopping:PU,Utilities:TEAL,Insurance:PINK,Entertainment:RD,Subscriptions:INDIGO,Kids:PU,Other:SL,Healthcare:PINK,Travel:AM,Education:BL};
  const spReal=CM.spendingByCategory(7,true);
  const spendSegD=spReal.items.map(it=>({label:it.label,value:it.value,color:SPCOL[it.label]||SL}));
  const goalsReal=CM.goalsProgress();
  const subsReal=(CM.S.subscriptions||[]).filter(s=>s.active!==false);
  const subAnnual=subsReal.reduce((s,x)=>s+(+x.price||0),0)*12;

  const ROLE_INITIALS=m=>(m.name||'').split(' ').map(w=>w[0]).slice(0,2).join('').toUpperCase();
  const membersD=(CM.S.family||[]).map(m=>({ name:m.name, sub: /self/i.test(m.relation||'')?'You':(m.age?('Age '+m.age):(m.relation||m.role||'Member')), role:m.role||'Viewer', av:ROLE_INITIALS(m), color:ROLE_COLORS[m.role]||SL }));

  const BILL_IC={ Housing:[<I.House size={16}/>,G], Utilities:[<I.Bolt size={16}/>,AM], Insurance:[<I.Car size={16}/>,RD], 'Credit Card Payment':[<I.Card size={16}/>,PU], Kids:[<I.Goals size={16}/>,BL] };
  const upBills=CM.upcomingBills();
  const billsD=upBills.slice(0,5).map(b=>{ const due=b.dueDate?new Date(b.dueDate):null; const days=due?Math.round((due-today)/86400000):null; const m=BILL_IC[b.cat]||[<I.Subscriptions size={16}/>,BL]; return { name:b.desc||b.name||'Bill', when:due?('Due '+FDshort(due)):'', amt:fmtM(b.amount), days: days!=null?(days+' day'+(days===1?'':'s')):'', tone: days!=null&&days<=3?'amber':'slate', ic:m[0], c:m[1] }; });
  const billTotalStr=fmtM(upBills.reduce((s,b)=>s+(+b.amount||0),0));

  const GOAL_IC=[<I.Plane size={16}/>,<I.House size={16}/>,<I.Goals size={16}/>,<I.Shield size={16}/>,<I.Grow size={16}/>,<I.Wallet size={16}/>];
  const GOAL_C=[AM,G,BL,TEAL,PU,PINK];
  const goalsD=goalsReal.map((g,i)=>({ name:g.name, cur:g.saved, tgt:g.target, color:GOAL_C[i%GOAL_C.length], ic:GOAL_IC[i%GOAL_IC.length] }));

  const ACCT_IC={ Chequing:[<I.Accounts size={16}/>,G], Savings:[<I.Wallet size={16}/>,TEAL] };
  const accountsD=(CM.S.accounts||[]).map(a=>{ const m=ACCT_IC[a.type]||[<I.Bank size={16}/>,AM]; return { name:a.name, bal:fmtM(a.balance), d:(a.bank||a.type||''), ic:m[0], c:m[1] }; });
  accountsD.push({ name:'Investment Portfolio', bal:fmtM(invMV), d:(CM.S.investments||[]).length+' holdings', ic:<I.Investments size={16}/>, c:PU });
  const accountsTotalStr=fmtM(totalCash+invMV);

  const vault=CM.S.vault||[];
  const CATLABEL={ insurance:'Insurance', tax:'Tax Documents', other:'Other', will:'Legal Documents', bank:'Bank Statements' };
  const DCOLOR={ insurance:TEAL, tax:AM, other:BL, will:PU, bank:G };
  const FOLDER_IC={ insurance:<I.Shield size={20}/>, tax:<I.Reports size={20}/>, other:<I.File size={20}/>, will:<I.File size={20}/>, bank:<I.Bank size={20}/> };
  const folderMap={}; vault.forEach(d=>{ const c=(d.cat||'other'); folderMap[c]=(folderMap[c]||0)+1; });
  const foldersD=Object.keys(folderMap).map(c=>({ name:CATLABEL[c]||c, count:folderMap[c]+' document'+(folderMap[c]>1?'s':''), ic:FOLDER_IC[c]||<I.File size={20}/> }));
  const docsD=vault.map(d=>({ name:d.name, cat:CATLABEL[d.cat]||d.cat||'Other', by:d.by||'Family', date: d.date?FD(new Date(d.date)):'', access: /will|tax/i.test(d.cat||'')?'Partners':'All Members', c:DCOLOR[d.cat]||SL }));

  const famInsightsD=[
    { pose:'r2-5', tag: savingsRate>=20?'Great job!':'Keep going', color:G, text:`Your family savings rate is ${savingsRate.toFixed(0)}% this month.` },
    { pose:'r1-10', tag:'Top Category', color:RD, text:`${spReal.items[0]?spReal.items[0].label:'Housing'} is your biggest expense at ${spReal.items[0]?spReal.items[0].pct:0}% of spending.` },
    { pose:'r1-10', tag:'Opportunity', color:BL, text:`Reviewing ${subsReal.length} subscriptions (${fmt0(subAnnual)}/yr) could free up cash.` },
  ];

  const ins=CM.S.insurance||[];
  const insCoverage=ins.reduce((s,p)=>s+(+p.coverage||0),0);
  const insTypesLabel=([...new Set(ins.map(p=>String(p.type||'').toLowerCase()))].filter(Boolean).map(t=>t.charAt(0).toUpperCase()+t.slice(1)).join(', ')) || 'No policies on file';
  const famCount=(CM.S.family||[]).length;
  const estateD=[
    { ic:<I.User size={18}/>, c:PU, name:'Beneficiaries', sub:`${famCount} family members on file`, status:'Up to date', tone:'green' },
    { ic:<I.File size={18}/>, c:G, name:'Wills', sub:'Both partners · notarized', status:'Complete', tone:'green' },
    { ic:<I.Shield size={18}/>, c:TEAL, name:'Insurance Coverage', sub:insTypesLabel, status:compact(insCoverage)+' total', tone:'green' },
    { ic:<I.Lock size={18}/>, c:AM, name:'Power of Attorney', sub:'Financial & medical', status:'Review soon', tone:'amber' },
    { ic:<I.Bell size={18}/>, c:BL, name:'Emergency Contacts', sub:'On file', status:'Up to date', tone:'green' },
  ];

  const members = membersD;
  const spend = spendSegD;
  const spendTotal = spend.reduce((s,x)=>s+x.value,0);
  const bills = billsD;
  const goals = goalsD;
  const workspace = [
    { ic:<I.Budget size={16}/>, c:G, name:'Shared Budget', sub:'Plan and manage together' },
    { ic:<I.Calendar size={16}/>, c:BL, name:'Family Calendar', sub:'View events and payments' },
    { ic:<I.Goals size={16}/>, c:PU, name:'Shared Goals', sub:'Work towards family goals' },
    { ic:<I.Wallet size={16}/>, c:AM, name:'Virtual Allowances', sub:"Manage kids' allowances" },
    { ic:<I.Shield size={16}/>, c:TEAL, name:'Spending Rules', sub:'Set limits and guidelines' },
    { ic:<I.File size={16}/>, c:PINK, name:'Shared Notes', sub:'Plan and communicate' },
  ];
  const taskList = [];
  const accounts = accountsD;
  const activity = [];
  const anns = [];
  const folders = foldersD;
  const docs = docsD;
  const famInsights = famInsightsD;
  const estate = estateD;

  return (
    <div>
      {/* HERO */}
      <div className="cm-card cm-card-pad cm-mb-24" style={{background:'linear-gradient(180deg,#FBFAF6,#F4F8F1)',position:'relative',overflow:'hidden'}}>
        <div className="cm-hero3">
          <Robot pose="r2-1" size={130}/>
          <div style={{minWidth:0}}>
            <div style={{fontFamily:'var(--font-serif)',fontSize:24,fontWeight:700,color:'var(--ink-900)'}}>Your Family Financial Overview</div>
            <div className="t-body" style={{color:'var(--ink-500)',marginTop:4,marginBottom:18}}>Everything in one place. Everyone on the same page.</div>
            <div className="cm-kpi5">
              <Tile ic={<I.Investments size={16}/>} color={G} label="Family Net Worth" value={compact(nw)} delta={Math.abs(nwChangePct).toFixed(2)+'%'} dir={nwChangePct>=0?'pos':'neg'} data={nwSeries.slice(-7)}/>
              <Tile ic={<I.Transfer size={16}/>} color={BL} label="Monthly Cash Flow" value={(monthlyCF>=0?'+':'-')+compact(Math.abs(monthlyCF))} data={cf6.map(m=>(m.inc-m.exp)/100)}/>
              <Tile ic={<I.Wallet size={16}/>} color={TEAL} label="Total Assets" value={compact(gAssets)} data={nwSeries.slice(-7).map(v=>v+gLiab)}/>
              <Tile ic={<I.Card size={16}/>} color={RD} label="Total Liabilities" value={compact(gLiab)} dir="neg" data={[gLiab*1.05,gLiab*1.04,gLiab*1.03,gLiab*1.02,gLiab*1.01,gLiab*1.004,gLiab]}/>
              <Tile ic={<I.Goals size={16}/>} color={PU} label="Savings Rate" value={savingsRate.toFixed(1)+'%'} data={cf6.map(m=>m.inc?(m.inc-m.exp)/m.inc*100:0)}/>
            </div>
          </div>
          <div className="vh-score">
            <div className="t-caption" style={{fontWeight:700,color:'var(--ink-700)',marginBottom:4}}>Family Health Score</div>
            <ScoreGauge score={score} size={168} label={scoreBand}/>
            <div className="t-caption" style={{marginTop:6,color:'var(--green-600)',fontWeight:800,cursor:'pointer'}}>View details →</div>
          </div>
        </div>
      </div>

      {/* spending / bills / goals */}
      <div className="cm-grid-3a cm-mb-24">
        <ChartCard title="Family Spending" action={<span className="t-caption">This month</span>}>
          <div className="cm-donut-card">
            <DonutChart size={148} thickness={20} segments={spend} center={{value:money(spendTotal),label:'Total Spent'}}/>
            <div style={{flex:1,minWidth:130}}><Legend items={spend.map(s=>({color:s.color,label:s.label,pct:Math.round(s.value/spendTotal*100)+'%'}))}/></div>
          </div>
        </ChartCard>
        <ChartCard title="Upcoming Bills" action={<span className="link" style={{fontSize:12.5,fontWeight:800,color:'var(--green-600)'}}>View all</span>}>
          {bills.map((b,i)=>(
            <div className="cm-act" key={i}>
              <div className="cm-act-ic" style={{background:tint(b.c),color:b.c}}>{b.ic}</div>
              <div className="cm-act-body"><div className="cm-act-title">{b.name}</div><div className="cm-act-sub">{b.when}</div></div>
              <div className="cm-act-right"><div className="cm-act-amt num" style={{color:'var(--ink-900)'}}>{b.amt}</div>
                <div style={{fontSize:11,fontWeight:700,color:b.tone==='amber'?'#B5740F':'var(--ink-400)',marginTop:2}}>{b.days}</div></div>
            </div>
          ))}
          <div style={{display:'flex',justifyContent:'space-between',marginTop:14,paddingTop:14,borderTop:'1px solid var(--line)'}}>
            <span className="t-caption" style={{fontWeight:700}}>Total Upcoming</span><span className="num" style={{fontWeight:800,color:'var(--ink-900)'}}>{billTotalStr}</span>
          </div>
        </ChartCard>
        <ChartCard title="Family Goals" action={<span className="link" style={{fontSize:12.5,fontWeight:800,color:'var(--green-600)'}}>View all</span>}>
          {goals.map((g,i)=>{
            const pct=Math.round(g.cur/g.tgt*100);
            return (
              <div className="cm-goalrow" key={i}>
                <span className="g-ic" style={{background:tint(g.color),color:g.color}}>{g.ic}</span>
                <div className="g-main">
                  <div className="g-top"><span className="g-name">{g.name}</span><span className="g-fig num">{pct}%</span></div>
                  <div className="pb-track" style={{height:7,borderRadius:999,background:'var(--line)',overflow:'hidden'}}>
                    <div style={{width:pct+'%',height:'100%',borderRadius:999,background:g.color}}/>
                  </div>
                </div>
              </div>
            );
          })}
        </ChartCard>
      </div>

      {/* members / workspace / tasks */}
      <div className="cm-grid-3a cm-mb-24">
        <ChartCard title="Family Members" action={<button className="cm-btn cm-btn-soft" style={{padding:'7px 12px'}}>Manage</button>}>
          {members.map((m,i)=>(
            <div className="cm-member" key={i}>
              <span className="cm-member-av" style={{background:m.color}}>{m.av}</span>
              <div className="cm-member-body"><div className="cm-member-name">{m.name}</div><div className="cm-member-role">{m.sub}</div></div>
              <span className="cm-roletag" style={{background:tint(ROLE_COLORS[m.role]),color:ROLE_COLORS[m.role]}}>{m.role}</span>
            </div>
          ))}
          <button className="cm-btn cm-btn-soft" style={{width:'100%',justifyContent:'center',marginTop:14}}><I.Plus size={15}/>Invite Member</button>
        </ChartCard>
        <ChartCard title="Collaborative Workspace">
          <div style={{display:'flex',justifyContent:'center',marginBottom:14}}>
            <Robot pose="r1-5" size={92} float="float2"/>
          </div>
          <div className="cm-ws">
            {workspace.map((w,i)=>(
              <div className="cm-ws-tile" key={i}>
                <span className="w-ic" style={{background:tint(w.c),color:w.c}}>{w.ic}</span>
                <div><div className="w-name">{w.name}</div><div className="w-sub">{w.sub}</div></div>
              </div>
            ))}
          </div>
        </ChartCard>
        <ChartCard title="Pending Tasks" action={<span className="link" style={{fontSize:12.5,fontWeight:800,color:'var(--green-600)'}}>View all</span>}>
          {taskList.map((t,i)=>(
            <div className={`cm-task ${tasks[i]?'done':''}`} key={i}>
              <span className="box" onClick={()=>toggle(i)}><I.Check size={13}/></span>
              <div className="cm-task-body"><div className="cm-task-title">{t.t}</div><div className="cm-task-sub">Assigned to {t.who} · {t.due}</div></div>
            </div>
          ))}
        </ChartCard>
      </div>

      {/* accounts / activity / announcements */}
      <div className="cm-grid-3a cm-mb-24">
        <ChartCard title="Accounts Overview" action={<span className="link" style={{fontSize:12.5,fontWeight:800,color:'var(--green-600)'}}>View all</span>}>
          {accounts.map((a,i)=>(
            <div className="cm-act" key={i}>
              <div className="cm-act-ic" style={{background:tint(a.c),color:a.c}}>{a.ic}</div>
              <div className="cm-act-body"><div className="cm-act-title">{a.name}</div></div>
              <div className="cm-act-right"><div className="cm-act-amt num" style={{color:'var(--ink-900)'}}>{a.bal}</div>
                <div style={{fontSize:11,fontWeight:700,color:'var(--ink-400)',marginTop:2}}>{a.d}</div></div>
            </div>
          ))}
          <div style={{display:'flex',justifyContent:'space-between',marginTop:14,paddingTop:14,borderTop:'1px solid var(--line)'}}>
            <span className="t-caption" style={{fontWeight:700}}>Total Balance</span><span className="num" style={{fontWeight:800,color:'var(--ink-900)'}}>{accountsTotalStr}</span>
          </div>
        </ChartCard>
        <ChartCard title="Recent Activity" action={<span className="link" style={{fontSize:12.5,fontWeight:800,color:'var(--green-600)'}}>View all</span>}>
          {activity.map((a,i)=>(
            <div className="cm-act" key={i}>
              <span className="cm-member-av" style={{background:a.c,width:34,height:34,flex:'0 0 34px',fontSize:12}}>{a.av}</span>
              <div className="cm-act-body"><div className="cm-act-title" style={{fontWeight:600}}><b style={{fontWeight:800}}>{a.who}</b> {a.t}</div><div className="cm-act-sub">{a.sub}</div></div>
              <div className="cm-act-date">{a.when}</div>
            </div>
          ))}
        </ChartCard>
        <ChartCard title="Announcements" action={<span className="link" style={{fontSize:12.5,fontWeight:800,color:'var(--green-600)'}}>Add new</span>}>
          {anns.map((a,i)=>(
            <div className={`cm-ann ${a.feat?'feat':''}`} key={i}>
              <div className="a-title">{a.title}</div>
              <div className="a-body">{a.body}</div>
              <div className="a-meta">Added by {a.meta}</div>
            </div>
          ))}
        </ChartCard>
      </div>

      {/* documents / AI family insights */}
      <div className="cm-grid-2c cm-mb-24">
        <ChartCard title="Family Documents" action={<span className="link" style={{fontSize:12.5,fontWeight:800,color:'var(--green-600)'}}>View all</span>}>
          <div className="cm-folders">
            {folders.map((f,i)=>(
              <div className="cm-folder" key={i}><span className="f-ic">{f.ic}</span><div className="f-name">{f.name}</div><div className="f-count">{f.count}</div></div>
            ))}
          </div>
          <table className="cm-table">
            <thead><tr><th>Document</th><th>Category</th><th>Uploaded by</th><th>Date</th><th className="right">Access</th></tr></thead>
            <tbody>
              {docs.map((d,i)=>(
                <tr key={i}>
                  <td><div className="cm-cell-lead"><div className="cm-cell-thumb" style={{background:tint(d.c),color:d.c}}><I.File size={18}/></div>
                    <div className="cm-cell-primary">{d.name}</div></div></td>
                  <td><span className="cm-cell-meta" style={{color:'var(--ink-500)'}}>{d.cat}</span></td>
                  <td><span className="cm-cell-meta" style={{color:'var(--ink-500)'}}>{d.by}</span></td>
                  <td><span className="cm-cell-meta" style={{color:'var(--ink-500)'}}>{d.date}</span></td>
                  <td style={{textAlign:'right'}}><span className="cm-pill cm-pill-slate">{d.access}</span></td>
                </tr>
              ))}
            </tbody>
          </table>
        </ChartCard>
        <ChartCard title="AI Family Insights" action={<span className="t-caption">Personalized for your family</span>}>
          <div style={{display:'flex',justifyContent:'center',marginBottom:6}}><Robot pose="r2-1" size={86} float="float2"/></div>
          {famInsights.map((s,i)=>(
            <div className="cm-rec" key={i}>
              <Robot pose={s.pose} size={34} float={false} style={{flex:'0 0 34px'}}/>
              <div className="cm-rec-body"><div className="cm-rec-title" style={{color:s.color}}>{s.tag}</div><div className="cm-rec-sub">{s.text}</div></div>
            </div>
          ))}
          <button className="cm-btn cm-btn-soft" style={{width:'100%',justifyContent:'center',marginTop:14}}>View all insights</button>
        </ChartCard>
      </div>

      {/* ESTATE PLANNING */}
      <SecHead eyebrow="Estate Planning" title="Protect your family's future"/>
      <div className="cm-card cm-card-pad cm-mb-24">
        <div className="cm-estate">
          <div className="cm-card-dark" style={{padding:'22px 20px',textAlign:'center',width:230}}>
            <Robot pose="r1-7" size={104} float="float2"/>
            <div style={{fontFamily:'var(--font-serif)',fontSize:18,fontWeight:700,color:'#FBFAF6',marginTop:8}}>Estate Readiness</div>
            <div style={{margin:'10px 0'}}><Stars n={4} size={18}/></div>
            <div className="t-caption" style={{color:'rgba(234,240,234,.75)'}}>4 of 5 areas complete. One needs review.</div>
          </div>
          <div className="est-grid" style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:14}}>
            {estate.map((e,i)=>(
              <div key={i} style={{display:'flex',alignItems:'center',gap:13,border:'1px solid var(--line)',borderRadius:12,padding:'14px 16px'}}>
                <span className="cm-rec-ic" style={{background:tint(e.c),color:e.c}}>{e.ic}</span>
                <div style={{flex:1,minWidth:0}}><div className="cm-rec-title">{e.name}</div><div className="cm-rec-sub">{e.sub}</div></div>
                <span className={`cm-pill cm-pill-${e.tone}`}>{e.status}</span>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* FEATURE STRIP */}
      <div className="cm-featstrip">
        {[
          { ic:<I.Shield size={18}/>, t:'Secure & Private', s:"Bank-level security to protect your family's data." },
          { ic:<I.User size={18}/>, t:'Role-Based Access', s:'Control what each member can see and do.' },
          { ic:<I.Heart size={18}/>, t:'Collaborate Easily', s:"Work together towards your family's goals." },
          { ic:<I.Grow size={18}/>, t:'Plan for the Future', s:'Build a stronger financial future together.' },
        ].map((f,i)=>(
          <div className="cm-feat" key={i}><span className="fi">{f.ic}</span><div><div className="ft">{f.t}</div><div className="fs">{f.s}</div></div></div>
        ))}
      </div>
    </div>
  );
}
window.PageFamilyVault = PageFamilyVault;
})();