// tab-plan.jsx — 26-week phase plan + task tracking
const { useState } = React;

function TabPlan(){
  const R = window.RAISE;
  const { TopBar } = window.RaiseShell;
  const [phases, setPhases] = useState(()=> R.phases.map(p=>({...p, tasks:p.tasks.map(t=>({...t}))})));
  const stColor = { active:'var(--primary)', upcoming:'var(--border-strong)' };

  const toggle = (pi,ti)=> setPhases(ps=> ps.map((p,i)=> i!==pi ? p : {
    ...p, tasks:p.tasks.map((t,j)=> j!==ti?t:{...t,done:!t.done})
  }));
  const pct = (p)=> Math.round(p.tasks.filter(t=>t.done).length / p.tasks.length * 100);

  return (
    <>
      <TopBar title="Master Plan" sub="26-week raise · Week 1 of 26">
        <div className="qpill">Phase <b>1 · Foundation</b></div>
        <div className="qpill acc">Target <b>$10M</b></div>
      </TopBar>
      <div className="plan scroll">
        <div className="planhead">
          {phases.map((p,i)=>(
            <div key={p.id} className="phasebar">
              <div className="ptop" style={{background:p.status==='active'?'var(--primary)':'var(--border-strong)'}}/>
              <div className="pin">
                <div className="pwk">{p.weeks}</div>
                <div className="pnm">{p.name}</div>
                <div className="ppct">{pct(p)}% · {p.tasks.filter(t=>t.done).length}/{p.tasks.length} done</div>
                <span className="track" style={{marginTop:7}}><i style={{width:pct(p)+'%',background:p.status==='active'?'var(--primary)':'var(--ink-3)'}}/></span>
              </div>
            </div>
          ))}
        </div>

        {phases.map((p,pi)=>(
          <div key={p.id} className={'phaseblock'+(p.status!=='active'?' up':'')}>
            <div className="pbh">
              <h2>{p.name}</h2>
              <span className="pbw">{p.weeks}</span>
              {p.status==='active' && <span className="sbadge mono" style={{color:'var(--primary-2)',background:'var(--primary-tint)'}}>Active</span>}
              <span className="pbs">{p.summary}</span>
            </div>
            <div className="tasks">
              {p.tasks.map((t,ti)=>(
                <div key={ti} className={'task'+(t.done?' done':'')} onClick={()=>toggle(pi,ti)}>
                  <span className="tk">{t.done && '✓'}</span>
                  <span className="tl">{t.t}</span>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
    </>
  );
}
window.TabPlan = TabPlan;