/* Clear Mint — V6 Financial Roadmap. window.PageRoadmap */
(function(){
const I = window.CMIcon;
const { CMC, tintFor, Ring, Chip, PageHead, V6Tabs } = window;
const { G, PU, AM, BL, SL, RD, TEAL, PINK } = CMC;

const CATC={Debt:RD,Savings:AM,Investments:BL,Housing:PU,Lifestyle:TEAL,Freedom:G};

function StatusBox({ kind, line }){
  if(kind==='progress') return (
    <div><div style={{fontWeight:700,fontSize:13,color:'var(--ink-900)'}}>In Progress</div>
      <div style={{fontSize:12,color:G,fontWeight:700,marginTop:2}}>{line}</div></div>);
  if(kind==='upcoming') return (
    <div><div style={{fontWeight:700,fontSize:13,color:BL}}>Upcoming</div>
      <div style={{fontSize:12,color:'var(--ink-500)',marginTop:2}}>{line}</div></div>);
  return (
    <div><div style={{fontWeight:700,fontSize:13,color:'var(--ink-700)'}}>Planned</div>
      <div style={{fontSize:12,color:'var(--ink-500)',marginTop:2}}>{line}</div></div>);
}

const GOAL_ICON = { Debt:<I.Card size={20}/>, Savings:<I.Goals size={20}/>, Investments:<I.Bars size={20}/>, Housing:<I.House size={20}/>, Lifestyle:<I.Grow size={20}/>, Freedom:<I.Spark size={20}/> };
const usd = n => '$' + Math.round(+n||0).toLocaleString('en-CA');
function relLabel(date){
  if(!date) return { y:'\u2014', yt:'No date set' };
  const d = new Date(date); if(isNaN(d)) return { y:'\u2014', yt:'' };
  const months = Math.round((d - new Date())/2629800000);
  const yt = months<=0 ? 'Now / overdue' : months<12 ? `in ${months} mo` : `in ${Math.round(months/12)} yr`;
  return { y:String(d.getFullYear()), yt };
}

function PageRoadmap(){
  const CM = window.useStore ? window.useStore() : window.CM;
  const [tab,setTab]=React.useState('Roadmap');
  const FD = CM.FD || (d=>String(d));
  // Build the roadmap from REAL goals. Each goal \u2192 a milestone with live progress + status.
  const raw = CM.goalsProgress ? CM.goalsProgress() : (CM.S.goals||[]);
  const items = raw.map(g=>{
    const target=+g.target||0, saved=+g.saved||+g.current||0;
    const pct = g.pct!=null ? g.pct : (target?Math.min(100,Math.round(saved/target*100)):0);
    const date = g.deadline||g.date||null;
    const status = pct>=100?'done':pct>0?'progress':'planned';
    const cat = g.cat||g.category||'Savings';
    return { name:g.name||'Goal', cat, target, saved, remaining:Math.max(0,target-saved), pct, date, status, monthly:+g.monthly||0, rel:relLabel(date) };
  }).sort((a,b)=> (a.date&&b.date) ? (new Date(a.date)-new Date(b.date)) : (b.pct-a.pct));

  const totalTarget=items.reduce((s,i)=>s+i.target,0), totalSaved=items.reduce((s,i)=>s+i.saved,0);
  const overall = totalTarget?Math.round(totalSaved/totalTarget*100):0;
  const counts = { progress:items.filter(i=>i.status==='progress').length, planned:items.filter(i=>i.status==='planned').length, done:items.filter(i=>i.status==='done').length };
  const nextDated = items.filter(i=>i.date && i.status!=='done')[0];
  const catColor = c => CATC[c] || SL;
  const openAddGoal = () => { try{ window.dispatchEvent(new CustomEvent('cm:add-goal')); }catch(e){} };

  if(!items.length){
    return (
      <div>
        <PageHead title="Financial Roadmap" sub="Turn your goals into a dated plan. Add a goal and Mint builds the roadmap around it."
          actions={<button className="v6-btn v6-btn-primary" onClick={openAddGoal}><I.Plus size={15}/>Add Goal</button>}/>
        <div className="cm-card cm-card-pad" style={{textAlign:'center',padding:'56px 20px'}}>
          <div style={{color:G,marginBottom:14,display:'flex',justifyContent:'center'}}><I.Goals size={38}/></div>
          <div className="v6-cardtitle" style={{fontSize:17}}>No goals yet</div>
          <div style={{fontSize:13,color:'var(--ink-500)',marginTop:6,maxWidth:430,marginInline:'auto',lineHeight:1.5}}>Add your first goal \u2014 an emergency fund, a down payment, paying off a card \u2014 and it appears here as a milestone with live progress.</div>
          <button className="v6-btn v6-btn-primary" style={{marginTop:18}} onClick={openAddGoal}><I.Plus size={15}/>Add a goal</button>
        </div>
      </div>
    );
  }

  /* ----- tab panels ----- */
  const Timeline = (
    <div className="cm-card cm-card-pad">
      <div className="v6-cardhead"><div className="v6-cardtitle">Your Roadmap</div></div>
      <div>
        {items.map((m,i)=>{ const last=i===items.length-1; const dot=catColor(m.cat);
          return (
            <div className="v6-rm-row" key={i}>
              <div className="v6-rm-year"><div className="v6-rm-y num">{m.rel.y}</div><div className="v6-rm-yt">{m.rel.yt}</div></div>
              <div className="v6-rm-rail">
                <div className="v6-rm-line" style={{top:i===0?'30px':0,bottom:last?'auto':0,height:last?'30px':'auto'}}/>
                <div className="v6-rm-dot" style={{borderColor:dot, background:m.status==='done'?dot:'#fff'}}/>
              </div>
              <div className="v6-rm-card" style={{borderBottom:last?'none':'1px solid var(--line)'}}>
                <Chip ic={GOAL_ICON[m.cat]||<I.Goals size={20}/>} color={dot} size={48} radius={999}/>
                <div className="v6-rm-main">
                  <div className="v6-rm-name">{m.name}</div>
                  <div className="v6-rm-desc">{usd(m.saved)} of {usd(m.target)}{m.monthly?` \u00b7 ${usd(m.monthly)}/mo`:''}</div>
                  <span className="cm-pill" style={{background:tintFor(dot),color:dot}}>{m.cat}</span>
                </div>
                <div className="v6-rm-impact">
                  <div style={{fontSize:11.5,color:'var(--ink-400)',fontWeight:700}}>{m.status==='done'?'Reached':'Remaining'}</div>
                  <div className="num" style={{fontSize:15,fontWeight:800,color:m.status==='done'?G:'var(--ink-900)',marginTop:2}}>{m.status==='done'?'\u2713':usd(m.remaining)}</div>
                </div>
                <div className="v6-rm-status"><StatusBox kind={m.status==='done'?'progress':m.status==='progress'?'progress':'planned'} line={`${m.pct}% complete`}/></div>
              </div>
            </div>
          );
        })}
      </div>
      <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',marginTop:18}}>
        <button className="cm-btn cm-btn-soft" onClick={openAddGoal}><I.Plus size={15}/>Add Goal</button>
        <span style={{fontSize:12,color:'var(--ink-400)'}}>Built from your {items.length} goal{items.length===1?'':'s'}</span>
      </div>
    </div>
  );

  const Milestones = (
    <div className="cm-card cm-card-pad">
      <div className="v6-cardtitle" style={{marginBottom:14}}>Milestones</div>
      {items.map((m,i)=>(
        <div key={i} style={{display:'flex',gap:12,alignItems:'center',padding:'12px 0',borderBottom:i<items.length-1?'1px solid var(--line)':'none'}}>
          <Chip ic={GOAL_ICON[m.cat]||<I.Goals size={18}/>} color={catColor(m.cat)} size={40} radius={11}/>
          <div style={{flex:1,minWidth:0}}>
            <div style={{display:'flex',justifyContent:'space-between',gap:10}}>
              <span style={{fontWeight:700,fontSize:13.5,color:'var(--ink-900)'}}>{m.name}</span>
              <span className="num" style={{fontSize:12.5,fontWeight:700,color:m.status==='done'?G:'var(--ink-500)'}}>{m.pct}%</span>
            </div>
            <div style={{height:7,borderRadius:6,background:'var(--mint-50)',marginTop:6,overflow:'hidden'}}><div style={{width:m.pct+'%',height:'100%',background:m.status==='done'?G:catColor(m.cat)}}/></div>
            <div style={{fontSize:11.5,color:'var(--ink-400)',marginTop:4}}>{usd(m.saved)} of {usd(m.target)}{m.date?` \u00b7 target ${FD(new Date(m.date))}`:''}</div>
          </div>
        </div>
      ))}
    </div>
  );

  const AllGoals = (
    <div className="cm-card cm-card-pad">
      <div className="v6-cardhead"><div className="v6-cardtitle">All Goals</div><button className="cm-btn cm-btn-soft" onClick={openAddGoal}><I.Plus size={14}/>Add Goal</button></div>
      <div style={{overflowX:'auto'}}>
        <table className="cm-table" style={{minWidth:640}}>
          <thead><tr><th>Goal</th><th>Category</th><th className="right">Target</th><th className="right">Saved</th><th className="right">Progress</th><th>Target date</th></tr></thead>
          <tbody>
            {items.map((m,i)=>(
              <tr key={i}>
                <td><span style={{fontWeight:700,color:'var(--ink-900)'}}>{m.name}</span></td>
                <td><span className="cm-pill" style={{background:tintFor(catColor(m.cat)),color:catColor(m.cat)}}>{m.cat}</span></td>
                <td className="num" style={{textAlign:'right'}}>{usd(m.target)}</td>
                <td className="num" style={{textAlign:'right'}}>{usd(m.saved)}</td>
                <td className="num" style={{textAlign:'right',fontWeight:800,color:m.status==='done'?G:'var(--ink-900)'}}>{m.pct}%</td>
                <td>{m.date?FD(new Date(m.date)):'\u2014'}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );

  const PlanSettings = <PlanSettingsPanel CM={CM}/>;

  const panel = tab==='Milestones'?Milestones : tab==='All Goals'?AllGoals : tab==='Plan Settings'?PlanSettings : Timeline;

  return (
    <div>
      <PageHead title="Financial Roadmap" sub="Your goals, turned into a dated plan with live progress."
        actions={<button className="v6-btn v6-btn-primary" onClick={openAddGoal}><I.Plus size={15}/>Add Goal</button>}/>
      <V6Tabs tabs={['Roadmap','Milestones','All Goals','Plan Settings']} value={tab} onChange={setTab}/>

      <div className="v6-main-side">
        <div style={{display:'flex',flexDirection:'column',gap:20}}>
          {/* KPI row \u2014 all derived */}
          <div className="cm-grid-4">
            {[
              { ic:<I.Goals size={18}/>, c:G, l:'Active Goals', v:String(items.length), f:`${counts.done} reached \u00b7 ${counts.progress} in progress` },
              { ic:<I.Bars size={18}/>, c:BL, l:'Total Saved', v:usd(totalSaved), f:`of ${usd(totalTarget)} targeted` },
              { ic:<I.Calendar size={18}/>, c:AM, l:'Next Milestone', v:nextDated?FD(new Date(nextDated.date)):'\u2014', f:nextDated?nextDated.name:'No dated goals yet', fc:AM },
              { ic:<I.Pie size={18}/>, c:G, l:'Overall Progress', v:overall+'%', f:'Across all goals', fc:G, ring:true },
            ].map((k,i)=>(
              <div className="cm-card cm-card-pad" key={i} style={{display:'flex',gap:12,alignItems:'center'}}>
                {k.ring ? <Ring pct={overall} size={46} stroke={6} color={G}><span/></Ring> : <Chip ic={k.ic} color={k.c} size={44} radius={13}/>}
                <div style={{minWidth:0}}>
                  <div style={{fontSize:12,fontWeight:700,color:'var(--ink-500)'}}>{k.l}</div>
                  <div className="num" style={{fontSize:21,fontWeight:800,color:'var(--ink-900)',letterSpacing:'-.02em',margin:'2px 0'}}>{k.v}</div>
                  <div style={{fontSize:12,color:k.fc||'var(--ink-400)',fontWeight:k.fc?700:500,lineHeight:1.4}}>{k.f}</div>
                </div>
              </div>
            ))}
          </div>
          {panel}
        </div>

        {/* RIGHT */}
        <div style={{display:'flex',flexDirection:'column',gap:20}}>
          <div className="cm-card cm-card-pad">
            <div className="v6-cardtitle" style={{marginBottom:16}}>Plan Progress</div>
            <div style={{display:'flex',gap:16,alignItems:'center'}}>
              <Ring pct={overall} size={84} stroke={9} color={G}/>
              <div><div style={{fontWeight:800,fontSize:13.5,color:'var(--ink-900)'}}>{overall}% Overall</div>
                <div style={{fontSize:12.5,color:'var(--ink-500)',marginTop:3,lineHeight:1.4}}>{usd(totalSaved)} saved toward {usd(totalTarget)}.</div></div>
            </div>
            <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:8,margin:'18px 0 4px',textAlign:'center'}}>
              {[[counts.progress,'In Progress',G],[counts.planned,'Planned',BL],[counts.done,'Reached',SL],[items.length,'Total','var(--ink-900)']].map((s,i)=>(
                <div key={i}><div className="num" style={{fontSize:20,fontWeight:800,color:s[2]}}>{s[0]}</div>
                  <div style={{fontSize:11,color:'var(--ink-400)',fontWeight:600,marginTop:2}}>{s[1]}</div></div>
              ))}
            </div>
          </div>

          <div className="cm-card cm-card-pad">
            <div className="v6-cardtitle" style={{marginBottom:14}}>Closest to the finish line</div>
            {items.filter(i=>i.status!=='done').slice().sort((a,b)=>b.pct-a.pct).slice(0,3).map((r,i,arr)=>(
              <div key={i} style={{display:'flex',gap:11,alignItems:'center',padding:'10px 0',borderBottom:i<arr.length-1?'1px solid var(--line)':'none'}}>
                <Chip ic={GOAL_ICON[r.cat]||<I.Goals size={16}/>} color={catColor(r.cat)} size={32} radius={9}/>
                <div style={{flex:1,minWidth:0,fontSize:12.5,fontWeight:700,color:'var(--ink-900)',lineHeight:1.3}}>{r.name}</div>
                <div style={{textAlign:'right'}}><div className="num" style={{fontWeight:800,fontSize:13.5,color:G}}>{r.pct}%</div>
                  <div style={{fontSize:11,color:'var(--ink-400)'}}>{usd(r.remaining)} to go</div></div>
              </div>
            ))}
            {items.every(i=>i.status==='done') && <div style={{fontSize:12.5,color:'var(--ink-500)',padding:'8px 0'}}>Every goal is complete \u2014 nice work. Add a new one to keep momentum.</div>}
          </div>
        </div>
      </div>
    </div>
  );
}

/* Plan Settings \u2014 editable assumptions persisted to S.settings.plan (all three persistence paths via mutate). */
function PlanSettingsPanel({ CM }){
  const saved = (CM.S.settings && CM.S.settings.plan) || {};
  const [f,setF]=React.useState({
    targetAge: saved.targetAge!=null?String(saved.targetAge):'',
    annualReturn: saved.annualReturn!=null?String(saved.annualReturn):'6',
    inflation: saved.inflation!=null?String(saved.inflation):'2',
    monthlyContribution: saved.monthlyContribution!=null?String(saved.monthlyContribution):'',
  });
  const [note,setNote]=React.useState('');
  const set = k => e => setF(s=>Object.assign({},s,{[k]:e.target.value}));
  const inp={ width:'100%', fontFamily:'inherit', fontSize:13.5, color:'var(--ink-900)', border:'1px solid var(--line)', borderRadius:10, padding:'9px 11px', background:'#fff', outline:'none', boxSizing:'border-box' };
  const lab={ fontSize:11, fontWeight:700, letterSpacing:'.06em', textTransform:'uppercase', color:'var(--ink-400)', margin:'0 0 5px' };
  const save = () => {
    CM.mutate(function(){ CM.S.settings = CM.S.settings || {}; CM.S.settings.plan = {
      targetAge: f.targetAge!==''?(parseInt(f.targetAge,10)||null):null,
      annualReturn: f.annualReturn!==''?(parseFloat(f.annualReturn)||0):null,
      inflation: f.inflation!==''?(parseFloat(f.inflation)||0):null,
      monthlyContribution: f.monthlyContribution!==''?(parseFloat(f.monthlyContribution)||0):null,
    }; });
    setNote('Saved'); setTimeout(()=>setNote(''),1800);
  };
  return (
    <div className="cm-card cm-card-pad">
      <div className="v6-cardtitle">Plan Settings</div>
      <div style={{fontSize:12.5,color:'var(--ink-500)',margin:'4px 0 16px'}}>Assumptions Mint uses when projecting your plan. Saved to your account.</div>
      <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:'13px 14px',maxWidth:520}}>
        <div><div style={lab}>Target FI age</div><input style={inp} value={f.targetAge} onChange={set('targetAge')} inputMode="numeric" placeholder="e.g. 55"/></div>
        <div><div style={lab}>Monthly contribution</div><input style={inp} value={f.monthlyContribution} onChange={set('monthlyContribution')} inputMode="decimal" placeholder="$ / month"/></div>
        <div><div style={lab}>Expected annual return (%)</div><input style={inp} value={f.annualReturn} onChange={set('annualReturn')} inputMode="decimal" placeholder="6"/></div>
        <div><div style={lab}>Inflation (%)</div><input style={inp} value={f.inflation} onChange={set('inflation')} inputMode="decimal" placeholder="2"/></div>
      </div>
      <div style={{display:'flex',alignItems:'center',gap:12,marginTop:18}}>
        <button className="v6-btn v6-btn-primary" onClick={save}>Save settings</button>
        {note && <span style={{color:G,fontWeight:700,fontSize:12.5}}>{note}</span>}
      </div>
    </div>
  );
}
window.PageRoadmap = PageRoadmap;
})();