/* ===== KYC / Risk assessment questionnaire ===== */
const { useState:useStateK } = React;

const KYC_Q = [
  { q:'อายุของลูกค้า', opts:[['ต่ำกว่า 30 ปี',4],['30–45 ปี',3],['46–55 ปี',2],['มากกว่า 55 ปี',1]] },
  { q:'ระยะเวลาที่ลงทุนได้', opts:[['มากกว่า 10 ปี',4],['5–10 ปี',3],['1–5 ปี',2],['น้อยกว่า 1 ปี',1]] },
  { q:'สัดส่วนเงินลงทุนต่อความมั่งคั่ง', opts:[['น้อยกว่า 25%',4],['25–50%',3],['50–75%',2],['มากกว่า 75%',1]] },
  { q:'ประสบการณ์การลงทุน', opts:[['หุ้น/อนุพันธ์',4],['กองทุนรวม',3],['ตราสารหนี้',2],['เงินฝากเท่านั้น',1]] },
  { q:'หากพอร์ตขาดทุน 20% ใน 1 เดือน จะทำอย่างไร', opts:[['ซื้อเพิ่ม',4],['ถือต่อ',3],['ขายบางส่วน',2],['ขายทั้งหมด',1]] },
  { q:'เป้าหมายการลงทุนหลัก', opts:[['เติบโตสูงสุด รับความเสี่ยงได้',4],['เติบโตปานกลาง',3],['รักษาเงินต้น+ผลตอบแทนบ้าง',2],['รักษาเงินต้นเป็นหลัก',1]] },
];

function riskProfile(score){
  // score 6..24
  if(score<=10) return { level:'อนุรักษ์นิยม', en:'Conservative', tier:1, color:'#0d9488', desc:'รับความเสี่ยงได้น้อย เน้นรักษาเงินต้น', mix:[['ตราสารหนี้/เงินฝาก',80],['หุ้น/กองทุนหุ้น',20]] };
  if(score<=15) return { level:'ปานกลางค่อนข้างต่ำ', en:'Moderate', tier:2, color:'#2547c4', desc:'รับความเสี่ยงได้ปานกลาง สมดุลระหว่างเติบโตและมั่นคง', mix:[['ตราสารหนี้',55],['หุ้น/กองทุน',35],['ทางเลือก',10]] };
  if(score<=20) return { level:'ปานกลางค่อนข้างสูง', en:'Growth', tier:3, color:'#7c3aed', desc:'รับความเสี่ยงได้สูง เน้นการเติบโตของเงินลงทุน', mix:[['หุ้น/กองทุนหุ้น',60],['ตราสารหนี้',25],['ทางเลือก',15]] };
  return { level:'เชิงรุก', en:'Aggressive', tier:4, color:'#dc2626', desc:'รับความเสี่ยงได้สูงมาก มุ่งผลตอบแทนสูงสุด', mix:[['หุ้น/กองทุนหุ้น',75],['ทางเลือก/ต่างประเทศ',20],['ตราสารหนี้',5]] };
}

const KycScreen = ({go, back, params, toast}) => {
  const cust = params.cid && CUSTOMERS.find(c=>c.id===params.cid);
  const next = params.next || 'planInvest'; // where to go after KYC
  const [ans,setAns]=useStateK({});
  const [step,setStep]=useStateK(0);
  const done = Object.keys(ans).length===KYC_Q.length;
  const score = Object.values(ans).reduce((a,b)=>a+b,0);
  const showResult = step>=KYC_Q.length;
  const profile = riskProfile(score);

  const pick=(qi,val)=>{ setAns(a=>({...a,[qi]:val})); setTimeout(()=>setStep(s=>Math.min(KYC_Q.length,s+1)),200); };

  return (
    <div className="screen">
      <StatusBar/>
      <AppBar onBack={back} title="แบบประเมินความเสี่ยง (KYC)" sub={cust?cust.name:'จัดระดับความเสี่ยงผู้ลงทุน'}
        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>}/>
      {!showResult && (
        <div className="pad-x wiz-col" style={{paddingTop:2}}>
          <div className="stepper" style={{marginBottom:8}}>
            {KYC_Q.map((_,i)=>(<div key={i} className={"st "+(i<step?'done':i===step?'cur':'')}><i style={{width:i<=step?'100%':'0'}}/></div>))}
          </div>
          <div className="flexrow" style={{justifyContent:'space-between',marginBottom:4}}>
            <span style={{fontSize:12.5,color:'var(--muted)',fontWeight:600}}>ข้อ {step+1} จาก {KYC_Q.length}</span>
            <span style={{fontSize:12.5,fontWeight:700}} className="navy-t">KYC / Suitability</span>
          </div>
        </div>
      )}
      <div className="scroll">
        <div className="pad wiz-col" style={{paddingTop:14}}>
          {!showResult ? (
            <div className="card fade-in" key={step}>
              <div style={{fontSize:19,fontWeight:800,lineHeight:1.4,marginBottom:18}}>{KYC_Q[step].q}</div>
              <div className="stack" style={{gap:10}}>
                {KYC_Q[step].opts.map(([label,val],i)=>{
                  const on=ans[step]===val;
                  return (
                    <button key={i} className={"check"+(on?" on":"")} style={{padding:'15px 16px'}} onClick={()=>pick(step,val)}>
                      <div className="box" style={{borderRadius:99}}>{on && <Icon name="check" size={16} c="#fff"/>}</div>
                      <div className="c-title" style={{fontWeight:600}}>{label}</div>
                    </button>
                  );
                })}
              </div>
              {step>0 && <button className="btn btn-ghost block" style={{marginTop:16}} onClick={()=>setStep(step-1)}><Icon name="arrowL" size={18}/> ย้อนกลับ</button>}
            </div>
          ) : (
            <div className="fade-in">
              <div className="navy-panel" style={{textAlign:'center',paddingTop:28,paddingBottom:28}}>
                <div className="glow"/>
                <div style={{fontSize:13,color:'rgba(255,255,255,.7)',letterSpacing:'.04em'}}>ระดับความเสี่ยงที่เหมาะสม</div>
                <div style={{fontSize:34,fontWeight:800,marginTop:8,color:'#fff'}}>{profile.level}</div>
                <div style={{fontSize:14,color:'rgba(255,255,255,.7)',marginTop:2}}>{profile.en} · ระดับ {profile.tier}/4</div>
                <div style={{display:'flex',gap:6,justifyContent:'center',marginTop:16}}>
                  {[1,2,3,4].map(t=>(<span key={t} style={{width:46,height:6,borderRadius:99,background:t<=profile.tier?'var(--gold)':'rgba(255,255,255,.18)'}}/>))}
                </div>
              </div>
              <div className="card" style={{marginTop:16}}>
                <div style={{fontSize:14.5,lineHeight:1.6,color:'var(--ink-2)'}}>{profile.desc}</div>
                <div className="divider"/>
                <div style={{fontSize:14,fontWeight:700,marginBottom:12}}>สัดส่วนการลงทุนที่แนะนำ</div>
                <div className="stack" style={{gap:12}}>
                  {profile.mix.map(([name,pct],i)=>(
                    <div key={i}>
                      <div className="flexrow" style={{marginBottom:6,fontSize:13.5}}><span style={{fontWeight:600}}>{name}</span><div className="spacer"/><b>{pct}%</b></div>
                      <div className="progress" style={{height:9}}><i style={{width:pct+'%',background:profile.color}}/></div>
                    </div>
                  ))}
                </div>
              </div>
              <div className="card flat" style={{marginTop:14,display:'flex',gap:10,alignItems:'center',background:'var(--bg)'}}>
                <Icon name="info" size={19} c="var(--muted)"/>
                <div style={{fontSize:12.5,color:'var(--muted)',lineHeight:1.5}}>คะแนนรวม {score}/24 · แบบประเมินนี้ใช้จัดประเภทผู้ลงทุนตามเกณฑ์ความเหมาะสม (Suitability)</div>
              </div>
              <button className="btn btn-primary block btn-lg" style={{marginTop:16}} onClick={()=>go(next,{cid:params.cid,risk:profile.en,riskLevel:profile.tier,riskTH:profile.level,replace:true})}>
                ดำเนินการวางแผนการลงทุน <Icon name="arrowR" size={20}/>
              </button>
              <button className="btn btn-ghost block" style={{marginTop:10}} onClick={()=>{setAns({});setStep(0);}}>ทำแบบประเมินใหม่</button>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { KYC_Q, riskProfile, KycScreen });