/* ===== Planner v2: Investment + Legacy + Product recommendation ===== */
const { useState:useStateP2 } = React;

// ---- Product recommendation block (#7) ----
const PRODUCTS = {
  needs:   [{n:'ประกันชีวิตแบบตลอดชีพ',d:'คุ้มครองยาว + มูลค่าเงินสด',co:'co1',i:'shieldCheck'},{n:'แบบชั่วระยะเวลา (Term)',d:'ทุนสูง เบี้ยต่ำ ปิดช่องว่างได้เร็ว',co:'co3',i:'shield'}],
  retire:  [{n:'ประกันบำนาญ',d:'รับเงินบำนาญหลังเกษียณ + ลดหย่อนภาษี',co:'co6',i:'coins'},{n:'สะสมทรัพย์ระยะยาว',d:'ออมมีวินัย การันตีผลตอบแทน',co:'co4',i:'wallet'}],
  edu:     [{n:'สะสมทรัพย์เพื่อการศึกษา',d:'รับเงินคืนตามช่วงวัยเรียน',co:'co2',i:'seedling'},{n:'ยูนิตลิงค์',d:'เติบโตตามการลงทุน ยืดหยุ่น',co:'co3',i:'chartBar'}],
  tax:     [{n:'ประกันบำนาญ (ลดหย่อนสูงสุด ฿200,000)',d:'ลดหย่อนภาษี + เตรียมเกษียณ',co:'co6',i:'wallet'},{n:'ประกันชีวิต (ลดหย่อน ฿100,000)',d:'คุ้มครอง + สิทธิลดหย่อน',co:'co1',i:'shieldCheck'}],
  invest:  [{n:'ยูนิตลิงค์ (Unit Linked)',d:'ความคุ้มครอง + พอร์ตลงทุนในกองทุน',co:'co3',i:'chartBar'},{n:'กองทุนรวมผ่านพันธมิตร',d:'จัดพอร์ตตามระดับความเสี่ยง',co:'co4',i:'coins'}],
  legacy:  [{n:'ประกันตลอดชีพทุนสูง',d:'สร้างมรดกก้อนใหญ่ส่งต่อทายาท',co:'co1',i:'crown'},{n:'ประกันเพื่อการส่งต่อ (Legacy)',d:'มรดกปลอดภาษี ระบุผู้รับชัดเจน',co:'co6',i:'shieldCheck'}],
};

const ProductRec = ({type, cust, go, toast}) => {
  const list = PRODUCTS[type]||[];
  if(!list.length) return null;
  return (
    <div className="card" style={{border:'1.5px solid var(--gold)',background:'linear-gradient(180deg,var(--gold-50),#fff)'}}>
      <div className="card-h"><div style={{width:34,height:34,borderRadius:10,background:'var(--gold)',display:'flex',alignItems:'center',justifyContent:'center'}}><Icon name="star" size={18} c="#5b3d05"/></div><div className="ch-title">Product ที่เหมาะกับลูกค้า</div></div>
      <div className="stack" style={{gap:10}}>
        {list.map((p,i)=>{
          const co=COMPANIES.find(c=>c.id===p.co);
          return (
            <div key={i} className="card flat" style={{display:'flex',gap:13,alignItems:'center',padding:14}}>
              <div style={{width:42,height:42,borderRadius:12,background:'var(--navy-50)',color:'var(--navy-800)',display:'flex',alignItems:'center',justifyContent:'center',flex:'0 0 auto'}}><Icon name={p.i} size={22}/></div>
              <div style={{flex:1,minWidth:0}}>
                <div style={{fontSize:14.5,fontWeight:700}}>{p.n}</div>
                <div style={{fontSize:12.5,color:'var(--muted)',marginTop:2}}>{p.d} · {co.name}</div>
              </div>
              <button className="btn btn-ghost btn-sm" onClick={()=>cust?go('addPolicy',{cid:cust.id}):toast('เลือกลูกค้าเพื่อเสนอแบบประกัน')}>เสนอ</button>
            </div>
          );
        })}
      </div>
    </div>
  );
};

// local shell + slider helpers
const P2Shell = ({title, sub, back, go, badge, inputs, result}) => (
  <div className="screen">
    <StatusBar/>
    <AppBar onBack={back} title={title} sub={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}}>
        {badge}
        <div className="cols c-2" style={{alignItems:'start'}}>
          <div className="card">{inputs}</div>
          <div className="stack" style={{gap:16}}>{result}</div>
        </div>
      </div>
    </div>
  </div>
);
const P2Stat = ({label, value, color='var(--ink)', big}) => (
  <div className="flexrow" style={{justifyContent:'space-between',alignItems:'baseline',padding:'9px 0'}}>
    <span className="muted" style={{fontSize:14}}>{label}</span>
    <b style={{fontSize:big?22:16,color}}>{value}</b>
  </div>
);

// ---------- Investment plan (requires KYC) ----------
const InvestmentPlan = ({go, back, params, toast}) => {
  const cust = params.cid && CUSTOMERS.find(c=>c.id===params.cid);
  // if no risk profile passed, gate through KYC
  if(!params.risk){
    return (
      <div className="screen">
        <StatusBar/>
        <AppBar onBack={back} title="วางแผนการลงทุน" sub={cust?cust.name:'Investment Planning'}/>
        <div className="scroll"><div className="pad wiz-col web-center" style={{paddingTop:30}}>
          <div className="card" style={{textAlign:'center',padding:'34px 26px'}}>
            <div style={{width:72,height:72,borderRadius:20,background:'var(--navy-50)',color:'var(--navy-800)',display:'flex',alignItems:'center',justifyContent:'center',margin:'0 auto 18px'}}><Icon name="shieldCheck" size={36}/></div>
            <div style={{fontSize:21,fontWeight:800}}>ต้องประเมินความเสี่ยงก่อน</div>
            <div className="muted" style={{fontSize:14.5,marginTop:8,lineHeight:1.55}}>การวางแผนการลงทุนต้องผ่านแบบประเมิน KYC / Suitability เพื่อจัดระดับความเสี่ยงที่เหมาะสมกับลูกค้าก่อน</div>
            <button className="btn btn-primary block btn-lg" style={{marginTop:22}} onClick={()=>go('kyc',{cid:params.cid,next:'planInvest'})}><Icon name="target" size={20}/> เริ่มแบบประเมินความเสี่ยง</button>
          </div>
        </div></div>
      </div>
    );
  }
  const tierMix={ Conservative:[80,20,0], Moderate:[55,35,10], Growth:[25,60,15], Aggressive:[5,75,20] };
  const ret={ Conservative:3, Moderate:5, Growth:7, Aggressive:9 };
  const [lump,setLump]=useStateP2(500000);
  const [monthly,setMonthly]=useStateP2(10000);
  const [years,setYears]=useStateP2(10);
  const r=ret[params.risk]/100;
  const fvLump=lump*Math.pow(1+r,years);
  const fvMon=monthly*12*((Math.pow(1+r,years)-1)/r);
  const total=Math.round(fvLump+fvMon);
  const invested=lump+monthly*12*years;
  const gain=total-invested;
  const mix=tierMix[params.risk];
  const mixLabels=['ตราสารหนี้/เงินฝาก','หุ้น/กองทุนหุ้น','สินทรัพย์ทางเลือก'];
  const mixColors=['#0d9488','#2547c4','#f59e0b'];
  return (
    <P2Shell title="วางแผนการลงทุน" sub={cust?cust.name:'Investment Planning'} back={back} go={go}
      badge={<div className="card flat" style={{display:'flex',gap:12,alignItems:'center',background:'var(--navy-50)',border:'none',marginBottom:16}}>
        <Icon name="shieldCheck" size={20} c="var(--navy-800)"/>
        <div style={{fontSize:13.5,color:'var(--navy-800)',fontWeight:600}}>ระดับความเสี่ยง: <b>{params.riskTH||params.risk}</b> · ผลตอบแทนคาดหวัง ~{ret[params.risk]}%/ปี</div>
        <div className="spacer"/><button className="chip" onClick={()=>go('kyc',{cid:params.cid,next:'planInvest'})}>ประเมินใหม่</button>
      </div>}
      inputs={<>
        <PlnSlider label="เงินลงทุนตั้งต้น" val={lump} min={0} max={10000000} step={100000} onCh={setLump}/>
        <PlnSlider label="ลงทุนเพิ่มต่อเดือน" val={monthly} min={0} max={200000} step={1000} onCh={setMonthly}/>
        <PlnSlider label="ระยะเวลาลงทุน" val={years} min={1} max={30} step={1} money={false} unit="ปี" onCh={setYears}/>
        <div className="divider"/>
        <div style={{fontSize:13,fontWeight:700,color:'var(--muted)',marginBottom:10}}>สัดส่วนพอร์ตที่แนะนำ</div>
        <div className="stack" style={{gap:11}}>
          {mix.map((p,i)=> p>0 && (
            <div key={i}><div className="flexrow" style={{marginBottom:5,fontSize:13}}><span style={{fontWeight:600}}>{mixLabels[i]}</span><div className="spacer"/><b>{p}%</b></div>
            <div className="progress" style={{height:8}}><i style={{width:p+'%',background:mixColors[i]}}/></div></div>
          ))}
        </div>
      </>}
      result={<>
        <div className="navy-panel">
          <div className="glow"/>
          <div style={{fontSize:13,color:'rgba(255,255,255,.7)'}}>มูลค่าพอร์ตที่คาดการณ์ ({years} ปี)</div>
          <div style={{fontSize:36,fontWeight:800,marginTop:4,color:'var(--gold)'}}>{THB(total)}</div>
          <div style={{fontSize:13,color:'rgba(255,255,255,.75)',marginTop:4}}>กำไรคาดหวัง {THB(gain)}</div>
        </div>
        <div className="card">
          <P2Stat label="เงินลงทุนรวม" value={THB(invested)}/>
          <P2Stat label="ผลตอบแทนคาดหวัง" value={THB(gain)} color="var(--ok)"/>
          <div className="divider"/>
          <P2Stat label="มูลค่าปลายทาง" value={THB(total)} big color="var(--navy-800)"/>
        </div>
        <ProductRec type="invest" cust={cust} go={go} toast={toast}/>
      </>}/>
  );
};

// ---------- Legacy plan ----------
const LegacyPlan = ({go, back, params, toast}) => {
  const cust = params.cid && CUSTOMERS.find(c=>c.id===params.cid);
  const [estate,setEstate]=useStateP2(10000000);
  const [heirs,setHeirs]=useStateP2(2);
  const [existing,setExisting]=useStateP2(2000000);
  const [hasWill,setHasWill]=useStateP2(false);
  // estate tax in TH applies >100M at 10% (lineal 5%); simplify: 5% over 100M
  const taxable=Math.max(0,estate-100000000);
  const estTax=Math.round(taxable*0.05);
  const target=Math.max(0, estate*0.15 + estTax - existing); // suggested life cover for legacy + liquidity
  const perHeir=Math.round(estate/Math.max(1,heirs));
  return (
    <P2Shell title="วางแผนมรดก" sub={cust?cust.name:'Legacy Planning'} back={back} go={go}
      inputs={<>
        <PlnSlider label="มูลค่าทรัพย์สินรวม" val={estate} min={1000000} max={200000000} step={1000000} onCh={setEstate}/>
        <PlnSlider label="จำนวนทายาท" val={heirs} min={1} max={8} step={1} money={false} unit="คน" onCh={setHeirs}/>
        <PlnSlider label="ประกัน/สภาพคล่องที่มีเพื่อมรดก" val={existing} min={0} max={50000000} step={500000} onCh={setExisting}/>
        <button className={"check"+(hasWill?" on":"")} style={{marginTop:6}} onClick={()=>setHasWill(!hasWill)}>
          <div className="box">{hasWill && <Icon name="check" size={16} c="#fff"/>}</div>
          <div><div className="c-title">มีพินัยกรรมแล้ว</div><div className="c-desc">ระบุการส่งต่อทรัพย์สินตามเจตนา</div></div>
        </button>
      </>}
      result={<>
        <div className="navy-panel">
          <div className="glow"/>
          <div style={{fontSize:13,color:'rgba(255,255,255,.7)'}}>ทุนประกันเพื่อมรดกที่แนะนำ</div>
          <div style={{fontSize:34,fontWeight:800,marginTop:4,color:'var(--gold)'}}>{THB(target)}</div>
          <div style={{fontSize:13,color:'rgba(255,255,255,.75)',marginTop:4}}>เพื่อเสริมสภาพคล่องและส่งต่อปลอดภาระ</div>
        </div>
        <div className="card">
          <P2Stat label="มูลค่าทรัพย์สินรวม" value={THB(estate)}/>
          <P2Stat label="ภาษีมรดกประมาณการ" value={THB(estTax)} color={estTax>0?'var(--danger)':'var(--ok)'}/>
          <P2Stat label="แบ่งต่อทายาท (เฉลี่ย/คน)" value={THB(perHeir)}/>
          <div className="divider"/>
          <P2Stat label="พินัยกรรม" value={hasWill?'มีแล้ว':'ยังไม่มี — แนะนำจัดทำ'} color={hasWill?'var(--ok)':'var(--gold-600)'}/>
        </div>
        {!hasWill && <div className="card flat" style={{display:'flex',gap:12,alignItems:'center',background:'var(--gold-50)'}}><Icon name="info" size={20} c="var(--gold-600)"/><div style={{fontSize:13,color:'#7a5410',lineHeight:1.5}}>แนะนำจัดทำพินัยกรรมควบคู่กับประกันเพื่อให้การส่งต่อมรดกชัดเจนและปลอดข้อพิพาท</div></div>}
        <ProductRec type="legacy" cust={cust} go={go} toast={toast}/>
      </>}/>
  );
};

Object.assign(window, { PRODUCTS, ProductRec, P2Shell, P2Stat, InvestmentPlan, LegacyPlan });