/* ===== Flagship: Interactive Financial Triangle Map (#11) ===== */
const { useState:useStateT } = React;

// layers bottom→top per spec: accident/basic → investment → main life → legacy
const TRI_LAYERS = [
  { key:'base',   name:'ประกันพื้นฐาน / อุบัติเหตุ', short:'ฐานความคุ้มครอง', icon:'shieldCheck', color:'#1e3a8a', target:1000000, plan:null },
  { key:'invest', name:'การลงทุน (กองทุน/หุ้น)',     short:'สร้างความมั่งคั่ง', icon:'chartBar',   color:'#2547c4', target:2000000, plan:'planInvest', needKyc:true },
  { key:'life',   name:'ทุนชีวิตหลัก',                short:'คุ้มครองรายได้',   icon:'shield',     color:'#3b6fe0', target:3000000, plan:'needs' },
  { key:'legacy', name:'เสริมมรดก',                   short:'ส่งต่อความมั่งคั่ง',icon:'crown',      color:'#f59e0b', target:5000000, plan:'planLegacy' },
];

// geometry: apex top, 4 bands
function triBands(W,H,apexPad){
  const apexY=apexPad, baseY=H-apexPad, halfBase=(W/2)-apexPad;
  const n=4, bandH=(baseY-apexY)/n;
  const halfAt=y=> ((y-apexY)/(baseY-apexY))*halfBase;
  const cx=W/2; const bands=[];
  // band 0 = top(apex)=legacy ... band 3 = bottom=base. We map layers bottom→top, so reverse.
  for(let i=0;i<n;i++){
    const topY=apexY+i*bandH, botY=topY+bandH;
    const tH=halfAt(topY), bH=halfAt(botY);
    bands.push({ topY, botY, tH, bH, cx, bandH,
      poly:`${cx-tH},${topY} ${cx+tH},${topY} ${cx+bH},${botY} ${cx-bH},${botY}` });
  }
  return bands; // index 0=top
}

const TriangleMap = ({go, back, params, toast}) => {
  const [cid,setCid]=useStateT(params.cid||CUSTOMERS[0].id);
  const cust=CUSTOMERS.find(c=>c.id===cid);
  const [mode,setMode]=useStateT('send'); // 'send' | 'live'
  const [open,setOpen]=useStateT(null); // layer key being edited
  // current values per layer (seed from customer coverage)
  const seed=()=>({
    base:   Math.min(100, Math.round(((cust.coverage.accident||0)+(cust.coverage.health||0))/2 /TRI_LAYERS[0].target*100)),
    invest: cust.id==='c5'?70:cust.id==='c3'?55:25,
    life:   Math.min(100, Math.round((cust.coverage.life||0)/TRI_LAYERS[2].target*100)),
    legacy: cust.id==='c5'?60:cust.id==='c3'?35:10,
  });
  const [vals,setVals]=useStateT(seed());
  React.useEffect(()=>{ setVals(seed()); },[cid]);

  const W=360,H=360, bands=triBands(W,H,14);
  // bands index0=top → legacy; map layer order: bottom→top is TRI_LAYERS[0..3]; top band corresponds to TRI_LAYERS[3]
  const layerForBandTop = bi => TRI_LAYERS[3-bi];

  const score=Math.round(TRI_LAYERS.reduce((a,l,i)=>{
    const w=[0.35,0.2,0.3,0.15][i]; return a+(vals[l.key]||0)*w;
  },0));
  const gaps=TRI_LAYERS.filter(l=>(vals[l.key]||0)<50);

  const setLayer=(k,pct)=>setVals(v=>({...v,[k]:Math.max(0,Math.min(100,pct))}));

  const openLayer=TRI_LAYERS.find(l=>l.key===open);

  return (
    <div className="screen">
      <StatusBar/>
      <AppBar onBack={back} title="พีระมิดวางแผนการเงิน" sub="แตะแต่ละชั้นเพื่อวางแผนทีละจุด"
        right={<button className="iconbtn" onClick={()=>go('notifications')} style={{position:'relative'}}><Icon name="bell" size={23}/><span style={{position:'absolute',top:9,right:10,width:9,height:9,borderRadius:9,background:'var(--gold)',border:'2px solid #fff'}}/></button>}/>
      <div className="scroll">
        <div className="pad maxw" style={{paddingTop:4}}>
          {/* controls */}
          <div className="flexrow" style={{gap:12,flexWrap:'wrap'}}>
            <div style={{position:'relative',minWidth:200,flex:'0 1 280px'}}>
              <Icon name="user" size={18} c="var(--muted-2)" style={{position:'absolute',left:14,top:16,zIndex:1}}/>
              <select className="select" style={{paddingLeft:42}} value={cid} onChange={e=>setCid(e.target.value)}>
                {CUSTOMERS.map(c=>(<option key={c.id} value={c.id}>{c.name}</option>))}
              </select>
            </div>
            <div className="spacer"/>
            <div className="seg" style={{flex:'0 0 auto',width:300}}>
              <button className={"opt"+(mode==='send'?" active":"")} onClick={()=>setMode('send')}><Icon name="send" size={16}/> ส่งแผนให้ลูกค้า</button>
              <button className={"opt"+(mode==='live'?" active":"")} onClick={()=>setMode('live')}><Icon name="users" size={16}/> วางแผนสด</button>
            </div>
          </div>

          {mode==='live' && (
            <div className="card flat" style={{display:'flex',gap:10,alignItems:'center',background:'#ecfdf5',border:'none',marginTop:14}}>
              <span style={{width:10,height:10,borderRadius:99,background:'#16a34a',boxShadow:'0 0 0 0 rgba(22,163,74,.5)',animation:'pulseDot 1.4s infinite'}}/>
              <div style={{fontSize:13.5,color:'#15803d',fontWeight:600}}>โหมดวางแผนสด — กำลังวางแผนร่วมกับ {cust.name.split(' ')[0]} แบบเรียลไทม์</div>
            </div>
          )}

          <div className="cols c-2" style={{alignItems:'start',marginTop:16}}>
            {/* triangle */}
            <div className="card" style={{paddingTop:26}}>
              <svg viewBox={`0 0 ${W} ${H}`} width="100%" style={{display:'block',overflow:'visible'}}>
                <defs>
                  {bands.map((b,bi)=>{ const l=layerForBandTop(bi); return (
                    <clipPath key={bi} id={'cb'+bi}><polygon points={b.poly}/></clipPath>
                  );})}
                  {TRI_LAYERS.map(l=>(<linearGradient key={l.key} id={'tg'+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>
                {bands.map((b,bi)=>{
                  const l=layerForBandTop(bi); const pct=vals[l.key]||0; const gap=pct<50;
                  const fillH=b.bandH*(pct/100); const fillY=b.botY-fillH;
                  return (
                    <g key={bi} onClick={()=>setOpen(l.key)} style={{cursor:'pointer'}}>
                      {/* light base */}
                      <g clipPath={`url(#cb${bi})`}>
                        <rect x={b.cx-b.bH} y={b.topY} width={b.bH*2} height={b.bandH} fill={l.color} opacity="0.1"/>
                        <rect x={b.cx-b.bH} y={fillY} width={b.bH*2} height={fillH} fill={`url(#tg${l.key})`}/>
                      </g>
                      <polygon points={b.poly} fill="none" stroke={open===l.key?'#0f172a':(gap?'#e7c558':'#fff')} strokeWidth={open===l.key?2.6:(gap?2.2:2)} strokeDasharray={gap&&pct===0?'5 4':'none'}/>
                      <text x={b.cx} y={(b.topY+b.botY)/2-2} fontSize={bi===0?12:13.5} fontWeight="800" fill={pct>55?'#fff':'#1a2238'} textAnchor="middle" style={{pointerEvents:'none'}}>{l.short}</text>
                      <text x={b.cx} y={(b.topY+b.botY)/2+15} fontSize="11.5" fill={pct>55?'rgba(255,255,255,.85)':'var(--muted)'} textAnchor="middle" style={{pointerEvents:'none'}}>{pct}%</text>
                    </g>
                  );
                })}
              </svg>
              <div className="flexrow" style={{justifyContent:'center',gap:8,marginTop:8}}>
                <span className="chip gray"><Icon name="info" size={13}/> แตะชั้นเพื่อวางแผน</span>
              </div>
            </div>

            {/* side: score + layer list */}
            <div className="stack" style={{gap:16}}>
              <div className="navy-panel" style={{textAlign:'center'}}>
                <div className="glow"/>
                <div style={{fontSize:13,color:'rgba(255,255,255,.7)'}}>คะแนนความมั่นคงการเงิน</div>
                <div style={{display:'flex',alignItems:'baseline',gap:5,justifyContent:'center',marginTop:4}}><span style={{fontSize:46,fontWeight:800}}>{score}</span><span style={{color:'rgba(255,255,255,.6)',fontWeight:700}}>/100</span></div>
                <div className="progress gold" style={{marginTop:12,background:'rgba(255,255,255,.18)'}}><i style={{width:score+'%'}}/></div>
              </div>
              <div className="card" style={{padding:'6px 18px'}}>
                {TRI_LAYERS.slice().reverse().map(l=>{
                  const pct=vals[l.key]||0; const gap=pct<50;
                  return (
                    <button key={l.key} className="row" style={{width:'100%',textAlign:'left'}} onClick={()=>setOpen(l.key)}>
                      <div style={{width:40,height:40,borderRadius:12,background:l.color+'18',color:l.color,display:'flex',alignItems:'center',justifyContent:'center',flex:'0 0 auto'}}><Icon name={l.icon} size={21}/></div>
                      <div className="r-main"><div className="r-name" style={{fontSize:14.5}}>{l.name}</div><div className="r-sub">{gap?'ยังมีช่องว่าง':'วางแผนครบถ้วน'}</div></div>
                      <div style={{width:54}}><div className="progress" style={{height:7}}><i style={{width:pct+'%',background:gap?'var(--gold)':l.color}}/></div></div>
                      {gap?<span className="chip warn" style={{height:24,fontSize:11}}>{pct}%</span>:<Icon name="checkCircle" size={20} c="var(--ok)"/>}
                    </button>
                  );
                })}
              </div>
              {gaps.length>0 && <div className="card flat" style={{display:'flex',gap:11,alignItems:'center',background:'var(--gold-50)'}}><Icon name="alert" size={20} c="var(--gold-600)"/><div style={{fontSize:13,color:'#7a5410',lineHeight:1.5}}>ยังมี {gaps.length} ชั้นที่ต้องเสริม: {gaps.map(g=>g.short).join(' · ')}</div></div>}
              {mode==='send'
                ? <button className="btn btn-primary block btn-lg" onClick={()=>go('present',{id:cid})}><Icon name="send" size={20}/> ส่งแผนให้ลูกค้า</button>
                : <button className="btn btn-gold block btn-lg" onClick={()=>toast('บันทึกแผนที่วางร่วมกับลูกค้าแล้ว')}><Icon name="checkCircle" size={20}/> บันทึกแผนที่วางร่วมกัน</button>}
            </div>
          </div>
        </div>
      </div>

      {/* layer planning panel */}
      {openLayer && (
        <div className="scrim" onClick={()=>setOpen(null)}>
          <div className="sheet slide-up" onClick={e=>e.stopPropagation()}>
            <div className="grab"/>
            <div className="flexrow" style={{gap:12,marginBottom:16}}>
              <div style={{width:46,height:46,borderRadius:13,background:openLayer.color+'18',color:openLayer.color,display:'flex',alignItems:'center',justifyContent:'center'}}><Icon name={openLayer.icon} size={24}/></div>
              <div><div style={{fontSize:18,fontWeight:800}}>{openLayer.name}</div><div className="muted" style={{fontSize:13}}>วางแผนเฉพาะชั้นนี้</div></div>
              <div className="spacer"/>
              <button className="iconbtn ghost" onClick={()=>setOpen(null)}><Icon name="close" size={22}/></button>
            </div>
            <div className="field">
              <label className="flexrow" style={{justifyContent:'space-between'}}><span>ความครบถ้วนของชั้นนี้</span><b className="navy-t" style={{fontSize:16}}>{vals[openLayer.key]}%</b></label>
              <input type="range" min="0" max="100" step="5" value={vals[openLayer.key]} onChange={e=>setLayer(openLayer.key,+e.target.value)} style={{width:'100%',accentColor:openLayer.color,height:30}}/>
            </div>
            <div className="card flat" style={{background:'var(--bg)',marginBottom:14}}>
              <div className="flexrow" style={{justifyContent:'space-between',fontSize:13.5}}><span className="muted">เป้าหมายแนะนำ</span><b>{THB(openLayer.target)}</b></div>
              <div className="flexrow" style={{justifyContent:'space-between',fontSize:13.5,marginTop:7}}><span className="muted">วางแผนแล้ว</span><b style={{color:openLayer.color}}>{THB(Math.round(openLayer.target*vals[openLayer.key]/100))}</b></div>
            </div>
            {openLayer.needKyc && <div className="card flat" style={{display:'flex',gap:10,alignItems:'center',background:'var(--navy-50)',marginBottom:14}}><Icon name="shieldCheck" size={18} c="var(--navy-800)"/><div style={{fontSize:12.5,color:'var(--navy-800)',lineHeight:1.45}}>ชั้นการลงทุนควรผ่านแบบประเมินความเสี่ยง (KYC) ก่อนจัดพอร์ต</div></div>}
            <div className="grid2" style={{gap:10}}>
              <button className="btn btn-outline" onClick={()=>{ setOpen(null); openLayer.needKyc?go('kyc',{cid,next:'planInvest'}):go(openLayer.plan||'needs',{cid}); }}>
                <Icon name="sliders" size={18}/> เครื่องมือเต็ม
              </button>
              <button className="btn btn-primary" onClick={()=>{toast('อัปเดตชั้น'+openLayer.short+'แล้ว');setOpen(null);}}><Icon name="check" size={18}/> บันทึกชั้นนี้</button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

Object.assign(window, { TRI_LAYERS, TriangleMap });