/* ===== Financial Pyramid: wizard (6 steps) + overview ===== */
const { useState:useStateY } = React;

const PY_LAYERS = [
  { key:'legacy', name:'มรดก',  en:'Legacy',     icon:'crown',    color:'#f59e0b' },
  { key:'invest', name:'ลงทุน', en:'Investment', icon:'chartBar', color:'#3b6fe0' },
  { key:'save',   name:'ออม',   en:'Saving',     icon:'coins',    color:'#2547c4' },
  { key:'base',   name:'ฐาน',   en:'Foundation', icon:'shieldCheck', color:'#1e3a8a' },
];

// SVG pyramid (4 bands), data: {base,save,invest,legacy}
const PyramidSVG = ({data, w=320, h=300, active, onTap}) => {
  const cx=w/2, gap=6, bands=4, h1=(h-gap*3)/bands;
  const apexW=0.18; // truncation fraction at top
  const halfAt = y => apexW*(w/2) + (y/h)*((1-apexW)*(w/2));
  const rows=[];
  for(let i=0;i<bands;i++){
    const yTop=i*(h1+gap), yBot=yTop+h1;
    const wt=halfAt(yTop), wb=halfAt(yBot);
    rows.push({ layer:PY_LAYERS[i], pts:`${cx-wt},${yTop} ${cx+wt},${yTop} ${cx+wb},${yBot} ${cx-wb},${yBot}`, cy:(yTop+yBot)/2 });
  }
  return (
    <svg viewBox={`0 0 ${w} ${h}`} width="100%" style={{display:'block',overflow:'visible'}}>
      <defs>
        {PY_LAYERS.map(l=>(<linearGradient key={l.key} id={'pg-'+l.key} x1="0" y1="0" x2="0" y2="1"><stop offset="0" stopColor={l.color}/><stop offset="1" stopColor={l.color} stopOpacity=".82"/></linearGradient>))}
      </defs>
      {rows.map((r,i)=>{
        const val=data[r.layer.key]; const on=active===r.layer.key;
        return (
          <g key={i} onClick={()=>onTap&&onTap(r.layer.key)} style={{cursor:onTap?'pointer':'default'}}>
            <polygon points={r.pts} fill={`url(#pg-${r.layer.key})`} stroke="#fff" strokeWidth="2"
              style={{filter:on?'drop-shadow(0 6px 14px rgba(30,58,138,.35))':'none',transform:on?'scale(1.03)':'scale(1)',transformOrigin:`${cx}px ${r.cy}px`,transition:'.2s'}}/>
            <text x={cx} y={r.cy-3} fontSize="16" fontWeight="800" fill="#fff" textAnchor="middle">{r.layer.name}</text>
            <text x={cx} y={r.cy+15} fontSize="12" fill="rgba(255,255,255,.85)" textAnchor="middle">{val}%</text>
          </g>
        );
      })}
    </svg>
  );
};

// ---------- Pyramid overview ----------
const PyramidOverview = ({go, back, params, toast}) => {
  const c=CUSTOMERS.find(x=>x.id===params.id);
  const py=pyramidFor(c);
  const [active,setActive]=useStateY(null);
  const metrics=[
    {k:'base',label:'ความแข็งแรงของฐาน',sub:'ความคุ้มครองพื้นฐาน',val:py.base,color:'#1e3a8a'},
    {k:'save',label:'ความคืบหน้าเป้าออม',sub:'เงินสำรอง & เกษียณ',val:py.save,color:'#2547c4'},
    {k:'invest',label:'การกระจายการลงทุน',sub:'พอร์ตและความเสี่ยง',val:py.invest,color:'#3b6fe0'},
  ];
  const scoreColor=py.score>=60?'#16a34a':py.score>=40?'#f59e0b':'#dc2626';
  return (
    <div className="screen">
      <StatusBar/>
      <AppBar onBack={back} title="พีระมิดการเงิน" sub={c.name}/>
      <div className="scroll">
        <div className="pad read-col" style={{paddingTop:4}}>
          {/* score + pyramid */}
          <div className="navy-panel stagger" style={{paddingBottom:18}}>
            <div className="glow"/>
            <div className="flexrow" style={{gap:16,marginBottom:6}}>
              <div>
                <div style={{fontSize:13,color:'rgba(255,255,255,.7)'}}>คะแนนสุขภาพการเงิน</div>
                <div style={{display:'flex',alignItems:'baseline',gap:5,marginTop:2}}><span style={{fontSize:46,fontWeight:800,letterSpacing:'-.02em'}}>{py.score}</span><span style={{color:'rgba(255,255,255,.6)',fontWeight:700}}>/100</span></div>
                <span className="chip" style={{background:scoreColor,color:'#fff',marginTop:6}}>{py.score>=60?'แข็งแรง':py.score>=40?'ปานกลาง':'ต้องเสริม'}</span>
              </div>
              <div className="spacer"/>
              <div style={{width:170}}><PyramidSVG data={py} w={300} h={250} active={active} onTap={setActive}/></div>
            </div>
          </div>

          {/* layer legend */}
          <div className="grid2" style={{marginTop:14,gap:12}}>
            {PY_LAYERS.map(l=>(
              <button key={l.key} className="card flat" style={{padding:14,display:'flex',gap:11,alignItems:'center',borderColor:active===l.key?l.color:'var(--line)',borderWidth:active===l.key?2:1.5}} onClick={()=>setActive(active===l.key?null:l.key)}>
                <div style={{width:38,height:38,borderRadius:11,background:l.color+'18',color:l.color,display:'flex',alignItems:'center',justifyContent:'center',flex:'0 0 auto'}}><Icon name={l.icon} size={20}/></div>
                <div style={{textAlign:'left',flex:1}}><div style={{fontSize:14.5,fontWeight:700}}>{l.name}</div><div style={{fontSize:12,color:'var(--muted)'}}>{l.en}</div></div>
                <div style={{fontSize:18,fontWeight:800,color:l.color}}>{py[l.key]}</div>
              </button>
            ))}
          </div>

          {/* health indicators */}
          <div className="flexrow" style={{margin:'22px 2px 12px'}}><div style={{fontSize:18,fontWeight:700}}>ตัวชี้วัดสุขภาพการเงิน</div></div>
          <div className="card stack" style={{gap:18}}>
            {metrics.map(m=>(
              <div key={m.k}>
                <div className="flexrow" style={{marginBottom:8}}>
                  <div><div style={{fontSize:15,fontWeight:700}}>{m.label}</div><div style={{fontSize:12.5,color:'var(--muted)'}}>{m.sub}</div></div>
                  <div className="spacer"/><div style={{fontSize:18,fontWeight:800,color:m.color}}>{m.val}%</div>
                </div>
                <div className="progress" style={{height:9}}><i style={{width:m.val+'%',background:m.color}}/></div>
              </div>
            ))}
          </div>

          {/* gap reminder */}
          {py.gaps>0 && (
            <div className="card" style={{marginTop:14,display:'flex',gap:12,alignItems:'center',background:'var(--gold-50)',border:'1.5px solid var(--gold)'}}>
              <Icon name="alert" size={24} c="var(--gold-600)"/>
              <div style={{flex:1,fontSize:13.5,color:'#7a5410',lineHeight:1.5}}>ฐานพีระมิดยังไม่แข็งแรง — ขาดความคุ้มครอง {py.gaps} หมวด ควรเสริมก่อนขยับชั้นบน</div>
            </div>
          )}

          <div className="grid2" style={{marginTop:16,gap:12}}>
            <button className="btn btn-outline" onClick={()=>go('pyramidWizard',{id:c.id})}><Icon name="refresh" size={19}/> ประเมินใหม่</button>
            <button className="btn btn-primary" onClick={()=>go('present',{id:c.id})}><Icon name="chart" size={19}/> โหมดนำเสนอ</button>
          </div>
          <div style={{height:8}}/>
        </div>
      </div>
    </div>
  );
};

// ---------- Pyramid wizard (6 steps) ----------
const PySlider=({label,val,min,max,step,unit,onCh})=>(
  <div className="field"><label className="flexrow" style={{justifyContent:'space-between'}}><span>{label}</span><b className="navy-t" style={{fontSize:16}}>{(+val).toLocaleString('en-US')} {unit}</b></label>
    <input type="range" min={min} max={max} step={step} value={val} onChange={e=>onCh(+e.target.value)} style={{width:'100%',accentColor:'var(--navy-700)',height:30}}/>
  </div>
);
const PyramidWizard = ({go, back, params, toast}) => {
  const c=CUSTOMERS.find(x=>x.id===params.id);
  const steps=['ข้อมูลพื้นฐาน','ฐาน · ความคุ้มครอง','ออม · เป้าหมาย','ลงทุน','มรดก','สรุป'];
  const [s,setS]=useStateY(0);
  const [v,setV]=useStateY({income:c.income,depend:1,emergency:6,risk:'ปานกลาง',will:false,retire:60});
  const set=(k,val)=>setV(o=>({...o,[k]:val}));
  const py=pyramidFor(c);
  const next=()=>{ if(s<5) setS(s+1); else { toast('บันทึกการประเมินแล้ว'); go('pyramid',{id:c.id,replace:true}); } };
  const prev=()=>{ if(s>0) setS(s-1); else back(); };
  const Slider=PySlider;
  return (
    <div className="screen">
      <StatusBar/>
      <AppBar onBack={prev} title="ประเมินการเงิน" sub={c.name}/>
      <StepBar step={s} labels={steps}/>
      <div className="scroll">
        <div className="pad wiz-col" style={{paddingTop:14}}>
          <div className="flexrow" style={{gap:11,marginBottom:16}}>
            <div style={{width:44,height:44,borderRadius:13,background:'var(--navy-50)',color:'var(--navy-800)',display:'flex',alignItems:'center',justifyContent:'center'}}>
              <Icon name={['user','shieldCheck','coins','chartBar','crown','checkCircle'][s]} size={24}/>
            </div>
            <div><div style={{fontSize:19,fontWeight:800}}>{steps[s]}</div><div style={{fontSize:13,color:'var(--muted)'}}>ขั้นที่ {s+1} จาก 6</div></div>
          </div>

          <div className="card fade-in">
            {s===0 && (<>
              <Slider label="รายได้ต่อเดือน" val={v.income} min={15000} max={500000} step={5000} unit="฿" onCh={x=>set('income',x)}/>
              <div className="field"><label>จำนวนผู้ที่ต้องดูแล</label><div className="seg">{[0,1,2,3,'4+'].map(n=>(<button key={n} className={"opt"+(String(v.depend)===String(n)?" active":"")} onClick={()=>set('depend',n)}>{n}</button>))}</div></div>
              <div className="field" style={{marginBottom:0}}><label>มีเงินสำรองฉุกเฉินกี่เดือน</label><Slider label="" val={v.emergency} min={0} max={12} step={1} unit="เดือน" onCh={x=>set('emergency',x)}/></div>
            </>)}
            {s===1 && (<>
              <div style={{fontSize:13.5,color:'var(--muted)',marginBottom:14,lineHeight:1.5}}>ความคุ้มครองที่เป็นฐานของพีระมิด — ตรวจว่าครบทั้ง 6 หมวดหรือยัง</div>
              <div className="grid2" style={{gap:10}}>
                {CATS.map(cat=>{const has=(c.coverage[cat.key]||0)>0;return(
                  <div key={cat.key} className="flexrow" style={{gap:9,padding:'10px 12px',borderRadius:12,background:has?'var(--ok-50)':'var(--gold-50)'}}>
                    <Icon name={has?'checkCircle':'alert'} size={19} c={has?'var(--ok)':'var(--gold-600)'}/>
                    <span style={{fontSize:13.5,fontWeight:600}}>{cat.name}</span>
                  </div>
                );})}
              </div>
              <div className="card flat" style={{marginTop:14,background:'var(--bg)',textAlign:'center',padding:14}}>คะแนนฐานปัจจุบัน <b className="navy-t" style={{fontSize:18}}>{py.base}/100</b></div>
            </>)}
            {s===2 && (<>
              <Slider label="เป้าเงินเกษียณ" val={6000000} min={1000000} max={30000000} step={500000} unit="฿" onCh={()=>{}}/>
              <Slider label="อายุที่อยากเกษียณ" val={v.retire} min={50} max={70} step={1} unit="ปี" onCh={x=>set('retire',x)}/>
              <div className="card flat" style={{marginTop:6,background:'var(--bg)',textAlign:'center',padding:14,marginBottom:0}}>ความคืบหน้าการออม <b className="navy-t" style={{fontSize:18}}>{py.save}%</b></div>
            </>)}
            {s===3 && (<>
              <div className="field"><label>ระดับความเสี่ยงที่รับได้</label><div className="seg">{['ต่ำ','ปานกลาง','สูง'].map(r=>(<button key={r} className={"opt"+(v.risk===r?" active":"")} onClick={()=>set('risk',r)}>{r}</button>))}</div></div>
              <Slider label="สัดส่วนลงทุนต่อรายได้" val={15} min={0} max={50} step={5} unit="%" onCh={()=>{}}/>
              <div className="card flat" style={{marginTop:6,background:'var(--bg)',textAlign:'center',padding:14,marginBottom:0}}>การกระจายลงทุน <b className="navy-t" style={{fontSize:18}}>{py.invest}%</b></div>
            </>)}
            {s===4 && (<>
              <button className={"check"+(v.will?" on":"")} onClick={()=>set('will',!v.will)} style={{marginBottom:12}}><div className="box">{v.will&&<Icon name="check" size={16} c="#fff"/>}</div><div><div className="c-title">มีพินัยกรรมแล้ว</div><div className="c-desc">วางแผนส่งต่อทรัพย์สินตามเจตนา</div></div></button>
              <Slider label="มูลค่ามรดกที่ต้องการส่งต่อ" val={5000000} min={0} max={50000000} step={1000000} unit="฿" onCh={()=>{}}/>
              <div className="card flat" style={{marginTop:6,background:'var(--bg)',textAlign:'center',padding:14,marginBottom:0}}>การวางแผนมรดก <b className="navy-t" style={{fontSize:18}}>{py.legacy}%</b></div>
            </>)}
            {s===5 && (<div style={{textAlign:'center',padding:'6px 0'}}>
              <div style={{width:130,margin:'0 auto'}}><PyramidSVG data={py} w={300} h={230}/></div>
              <div style={{fontSize:15,fontWeight:700,marginTop:14}}>คะแนนสุขภาพการเงิน</div>
              <div style={{fontSize:44,fontWeight:800}} className="navy-t">{py.score}<span style={{fontSize:18,color:'var(--muted)'}}>/100</span></div>
              <div className="muted" style={{fontSize:13.5,marginTop:6,lineHeight:1.5}}>ประเมินครบทั้ง 4 ชั้นแล้ว<br/>กดบันทึกเพื่อดูพีระมิดฉบับเต็มและนำเสนอ</div>
            </div>)}
          </div>
        </div>
      </div>
      <div className="pad wiz-col" style={{paddingTop:8,paddingBottom:18,display:'flex',gap:12,boxShadow:'0 -8px 20px rgba(15,23,42,.04)'}}>
        {s>0 && <button className="btn btn-soft" style={{flex:'0 0 auto',width:64,padding:0}} onClick={prev}><Icon name="arrowL" size={22}/></button>}
        <button className="btn btn-primary" style={{flex:1}} onClick={next}>{s<5?<>ถัดไป <Icon name="arrowR" size={20}/></>:<><Icon name="checkCircle" size={20}/> บันทึกและดูพีระมิด</>}</button>
      </div>
    </div>
  );
};

Object.assign(window, { PY_LAYERS, PyramidSVG, PyramidOverview, PyramidWizard });