/* ===== Add policy wizard (4 steps) + Policy detail ===== */
const { useState:useStateP } = React;

const StepBar = ({step, labels}) => (
  <div className="pad-x wiz-col" style={{paddingTop:2}}>
    <div className="stepper" style={{marginBottom:8}}>
      {labels.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} จาก {labels.length}</span>
      <span style={{fontSize:12.5,fontWeight:700}} className="navy-t">{labels[step]}</span>
    </div>
  </div>
);

const AddPolicy = ({go, back, params, toast}) => {
  const labels=['เลือกบริษัท','ถ่ายรูป','ข้อมูลหลัก','ความคุ้มครองเพิ่ม'];
  const [step,setStep]=useStateP(0);
  const [cid,setCid]=useStateP(params.cid||'');
  const [co,setCo]=useStateP('');
  const [scan,setScan]=useStateP(null); // 'photo' | 'manual'
  const [d,setD]=useStateP({plan:'',sum:'',premium:'',freq:'รายปี'});
  const [riders,setRiders]=useStateP([]);
  const setF=(k,v)=>setD(s=>({...s,[k]:v}));
  const RIDERS=[{n:'โรคร้ายแรง',s:1000000},{n:'สุขภาพเหมาจ่าย',s:1000000},{n:'อุบัติเหตุ (PA)',s:500000},{n:'ชดเชยรายได้',s:30000},{n:'ค่าชดเชยนอนโรงพยาบาล',s:2000}];
  const toggleRider=r=>setRiders(rs=>rs.find(x=>x.n===r.n)?rs.filter(x=>x.n!==r.n):[...rs,r]);

  const canNext = step===0 ? (co && cid) : step===1 ? scan : step===2 ? (d.plan&&d.sum&&d.premium) : true;
  const next=()=>{ if(step<3) setStep(step+1); else save(); };
  const prev=()=>{ if(step>0) setStep(step-1); else back(); };

  const save=()=>{
    const cust=CUSTOMERS.find(c=>c.id===cid);
    const np={ id:'p'+Date.now(), co, plan:d.plan, no:'77'+Math.floor(10000000+Math.random()*89999999),
      sum:+d.sum, premium:+d.premium, freq:d.freq, start:2568, years:1, riders, bene:[{n:cust.name,rel:'ผู้เอาประกัน',pct:100}] };
    cust.policies.push(np);
    // bump coverage life
    cust.coverage.life=Math.max(cust.coverage.life,+d.sum);
    riders.forEach(r=>{ if(r.n.includes('โรค'))cust.coverage.ci=Math.max(cust.coverage.ci,r.s); if(r.n.includes('สุขภาพ')||r.n.includes('โรงพยาบาล'))cust.coverage.health=Math.max(cust.coverage.health,r.s); if(r.n.includes('อุบัติเหตุ'))cust.coverage.accident=Math.max(cust.coverage.accident,r.s); if(r.n.includes('ชดเชย'))cust.coverage.income=Math.max(cust.coverage.income,r.s); });
    toast('บันทึกกรมธรรม์เรียบร้อย');
    go('policy',{cid,pid:np.id,replace:true});
  };

  return (
    <div className="screen">
      <StatusBar/>
      <AppBar onBack={prev} title="เพิ่มกรมธรรม์"/>
      <StepBar step={step} labels={labels}/>
      <div className="scroll">
        <div className="pad wiz-col" style={{paddingTop:14}}>
          {step===0 && (
            <div className="fade-in">
              {!params.cid && (
                <div className="field"><label>เลือกลูกค้า</label>
                  <select className="select" value={cid} onChange={e=>setCid(e.target.value)}>
                    <option value="">— เลือกลูกค้า —</option>
                    {CUSTOMERS.map(c=>(<option key={c.id} value={c.id}>{c.name}</option>))}
                  </select>
                </div>
              )}
              {params.cid && <div className="chip" style={{marginBottom:14}}><Icon name="user" size={14}/> {CUSTOMERS.find(c=>c.id===cid)?.name}</div>}
              <div style={{fontSize:15,fontWeight:700,margin:'4px 2px 12px'}}>บริษัทประกัน</div>
              <div className="grid2" style={{gap:12}}>
                {COMPANIES.map(c=>(
                  <button key={c.id} className="card flat" style={{display:'flex',alignItems:'center',gap:12,padding:16,border:co===c.id?'2px solid var(--navy-700)':'1.5px solid var(--line)',background:co===c.id?'var(--navy-50)':'#fff'}} onClick={()=>setCo(c.id)}>
                    <CompanyBadge co={c}/>
                    <div style={{flex:1,textAlign:'left',fontSize:14.5,fontWeight:700,lineHeight:1.25}}>{c.name}</div>
                    {co===c.id && <Icon name="checkCircle" size={20} c="var(--navy-700)"/>}
                  </button>
                ))}
              </div>
            </div>
          )}

          {step===1 && (
            <div className="fade-in">
              <div className="card" style={{padding:0,overflow:'hidden'}}>
                <div style={{height:300,background:'linear-gradient(160deg,#0f1b3a,#1e3a8a)',position:'relative',display:'flex',alignItems:'center',justifyContent:'center'}}>
                  {/* viewfinder */}
                  {[['top','left'],['top','right'],['bottom','left'],['bottom','right']].map(([v,h],i)=>(
                    <span key={i} style={{position:'absolute',[v]:24,[h]:24,width:34,height:34,[`border${v[0].toUpperCase()+v.slice(1)}`]:'3px solid rgba(251,191,36,.9)',[`border${h[0].toUpperCase()+h.slice(1)}`]:'3px solid rgba(251,191,36,.9)',borderRadius:v==='top'&&h==='left'?'10px 0 0 0':v==='top'?'0 10px 0 0':h==='left'?'0 0 0 10px':'0 0 10px 0'}}/>
                  ))}
                  <div style={{textAlign:'center',color:'rgba(255,255,255,.85)'}}>
                    <Icon name="doc" size={56} c="rgba(255,255,255,.5)"/>
                    <div style={{fontSize:14,marginTop:12}}>วางหน้ากรมธรรม์ในกรอบ</div>
                  </div>
                  {scan==='photo' && <div style={{position:'absolute',inset:0,background:'rgba(22,163,74,.18)',display:'flex',alignItems:'center',justifyContent:'center'}}><span className="chip ok" style={{height:38,fontSize:15,background:'#fff'}}><Icon name="checkCircle" size={20}/> อ่านข้อมูลสำเร็จ</span></div>}
                </div>
                <div style={{padding:18}}>
                  <div className="flexrow" style={{gap:7,marginBottom:12,color:'var(--muted)',fontSize:12.5,justifyContent:'center'}}><Icon name="info" size={14}/> รองรับการอ่านข้อมูลอัตโนมัติด้วย Google OCR</div>
                  <button className="btn btn-primary block" onClick={()=>{toast('กำลังอ่านข้อมูลด้วย Google OCR…'); setTimeout(()=>{setScan('photo');toast('อ่านข้อมูลสำเร็จ — ดึงข้อมูลอัตโนมัติ');setD({plan:'ตลอดชีพ',sum:'1000000',premium:'36000',freq:'รายปี'});},700);}}><Icon name="camera" size={22}/> ถ่ายรูปกรมธรรม์ (OCR)</button>
                  <div style={{display:'flex',alignItems:'center',gap:12,margin:'14px 0',color:'var(--muted-2)'}}><div style={{flex:1,height:1,background:'var(--line)'}}/>หรือ<div style={{flex:1,height:1,background:'var(--line)'}}/></div>
                  <button className="btn btn-outline block" onClick={()=>setScan('manual')} style={scan==='manual'?{borderColor:'var(--navy-700)',background:'var(--navy-50)'}:null}><Icon name="keyboard" size={22}/> กรอกเอง</button>
                </div>
              </div>
              {scan && <div className="chip ok" style={{marginTop:14,height:34}}><Icon name="check" size={15}/> {scan==='photo'?'ดึงข้อมูลจากรูปแล้ว ปรับแก้ได้ในขั้นถัดไป':'พร้อมกรอกข้อมูลเอง'}</div>}
            </div>
          )}

          {step===2 && (
            <div className="fade-in card">
              <div className="field"><label>แบบประกัน</label>
                <select className="select" value={d.plan} onChange={e=>setF('plan',e.target.value)}>
                  <option value="">— เลือกแบบประกัน —</option>
                  {PLAN_TYPES.map(p=>(<option key={p}>{p}</option>))}
                </select>
              </div>
              <div className="field"><label>ทุนประกัน (฿)</label>
                <div style={{position:'relative'}}><span style={{position:'absolute',left:16,top:14,fontSize:17,fontWeight:700,color:'var(--muted-2)'}}>฿</span>
                <input className="input" style={{paddingLeft:34,fontWeight:700}} value={d.sum?(+d.sum).toLocaleString('en-US'):''} onChange={e=>setF('sum',e.target.value.replace(/[^0-9]/g,''))} placeholder="1,000,000" inputMode="numeric"/></div>
              </div>
              <div className="field"><label>เบี้ยประกัน (฿)</label>
                <div style={{position:'relative'}}><span style={{position:'absolute',left:16,top:14,fontSize:17,fontWeight:700,color:'var(--muted-2)'}}>฿</span>
                <input className="input" style={{paddingLeft:34,fontWeight:700}} value={d.premium?(+d.premium).toLocaleString('en-US'):''} onChange={e=>setF('premium',e.target.value.replace(/[^0-9]/g,''))} placeholder="36,000" inputMode="numeric"/></div>
              </div>
              <div className="field" style={{marginBottom:0}}><label>งวดชำระ</label>
                <div className="seg" style={{flexWrap:'wrap',gap:8}}>
                  {FREQ.map(fr=>(<button key={fr} className={"opt"+(d.freq===fr?" active":"")} style={{flex:'1 1 44%',minWidth:0}} onClick={()=>setF('freq',fr)}>{fr}</button>))}
                </div>
              </div>
            </div>
          )}

          {step===3 && (
            <div className="fade-in">
              <div style={{fontSize:14,color:'var(--muted)',margin:'0 2px 14px',lineHeight:1.5}}>เลือกความคุ้มครองเพิ่มเติม (สัญญาเพิ่มเติม) ที่แนบกับกรมธรรม์นี้</div>
              <div className="stack" style={{gap:10}}>
                {RIDERS.map(r=>{const on=riders.find(x=>x.n===r.n);return(
                  <button key={r.n} className={"check"+(on?" on":"")} onClick={()=>toggleRider(r)} style={{padding:14}}>
                    <div className="box" style={{borderRadius:7}}>{on && <Icon name="check" size={16} c="#fff"/>}</div>
                    <div style={{flex:1}}><div className="c-title">{r.n}</div><div className="c-desc">ทุน {THBshort(r.s)}</div></div>
                  </button>
                );})}
              </div>
              <div className="card" style={{marginTop:16,background:'var(--navy-50)',boxShadow:'none'}}>
                <div className="flexrow"><span style={{fontSize:14,fontWeight:700}}>สรุป</span><div className="spacer"/><span className="chip">{riders.length} สัญญาเพิ่มเติม</span></div>
                <div className="divider" style={{margin:'12px 0'}}/>
                <div className="flexrow" style={{justifyContent:'space-between',fontSize:14}}><span className="muted">แบบประกัน</span><b>{d.plan||'-'}</b></div>
                <div className="flexrow" style={{justifyContent:'space-between',fontSize:14,marginTop:7}}><span className="muted">ทุนประกัน</span><b>{d.sum?THB(+d.sum):'-'}</b></div>
                <div className="flexrow" style={{justifyContent:'space-between',fontSize:14,marginTop:7}}><span className="muted">เบี้ย/{d.freq}</span><b>{d.premium?THB(+d.premium):'-'}</b></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)'}}>
        {step>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}} disabled={!canNext} onClick={next}>
          {step<3 ? <>ถัดไป <Icon name="arrowR" size={20}/></> : <><Icon name="checkCircle" size={20}/> บันทึกกรมธรรม์</>}
        </button>
      </div>
    </div>
  );
};

// ---------- Policy detail ----------
const PolicyDetail = ({go, back, params}) => {
  const c=CUSTOMERS.find(x=>x.id===params.cid);
  const p=c?.policies.find(x=>x.id===params.pid);
  if(!p) return <div className="screen"><StatusBar/><AppBar onBack={back} title="ไม่พบกรมธรรม์"/></div>;
  const co=COMPANIES.find(x=>x.id===p.co);
  const held=Math.max(1, 2568-p.start);
  const span=Math.max(held+3, 15);
  const tl=[]; for(let y=1;y<=span;y++){ tl.push({ y:p.start+y, paid:p.premium*y, cv:Math.round(p.sum*(0.028*y+0.0011*y*y)) }); }
  const curCV=tl[held-1]?.cv||0;
  const paidTotal=p.premium*held;
  return (
    <div className="screen">
      <StatusBar/>
      <AppBar onBack={back} title="รายละเอียดกรมธรรม์" right={<button className="iconbtn"><Icon name="download" size={21}/></button>}/>
      <div className="scroll">
        <div className="pad read-col" style={{paddingTop:4}}>
          {/* header card */}
          <div className="navy-panel stagger">
            <div className="glow"/>
            <div className="flexrow" style={{gap:12}}>
              <div style={{width:48,height:48,borderRadius:13,background:'#fff',display:'flex',alignItems:'center',justifyContent:'center',color:co.color,fontWeight:700,fontSize:13}}>{co.init}</div>
              <div style={{flex:1}}><div style={{fontSize:18,fontWeight:800}}>{p.plan}</div><div style={{fontSize:13,color:'rgba(255,255,255,.75)'}}>{co.name}</div></div>
              <span className="chip" style={{background:'rgba(255,255,255,.16)',color:'#fff'}}>ใช้งาน</span>
            </div>
            <div className="flexrow" style={{gap:8,marginTop:16,color:'rgba(255,255,255,.85)',fontSize:13.5}}>
              <Icon name="lock" size={15}/> เลขกรมธรรม์ <b style={{letterSpacing:'1px'}}>{maskPolicy(p.no)}</b>
              <div className="spacer"/><span style={{color:'rgba(255,255,255,.6)'}}>{c.name}</span>
            </div>
          </div>

          {/* KPIs */}
          <div className="grid3 stagger" style={{marginTop:14}}>
            <div className="kpi"><div className="k-label">ทุนประกัน</div><div className="k-val" style={{fontSize:21}}>{THBshort(p.sum)}</div></div>
            <div className="kpi"><div className="k-label">เบี้ย/ปี</div><div className="k-val" style={{fontSize:21}}>{THBshort(p.premium)}</div></div>
            <div className="kpi"><div className="k-label">มูลค่าเวนคืน</div><div className="k-val" style={{fontSize:21,color:'var(--gold-600)'}}>{THBshort(curCV)}</div></div>
          </div>

          {/* CV timeline */}
          <div className="card" style={{marginTop:14}}>
            <div className="card-h"><div><div className="ch-title">มูลค่าเวนคืนตามปี (CV Timeline)</div><div className="ch-sub">เบี้ยสะสม เทียบกับ มูลค่าเวนคืน</div></div></div>
            <CVChart data={tl}/>
            <div className="flexrow" style={{gap:18,marginTop:10,justifyContent:'center'}}>
              <span style={{display:'flex',alignItems:'center',gap:7,fontSize:13}}><span style={{width:18,height:3,background:'#1e40af',borderRadius:2,display:'inline-block'}}/> มูลค่าเวนคืน</span>
              <span style={{display:'flex',alignItems:'center',gap:7,fontSize:13}}><span style={{width:18,height:0,borderTop:'2.4px dashed #94a3b8',display:'inline-block'}}/> เบี้ยสะสม</span>
            </div>
            <div className="card flat" style={{marginTop:14,background:'var(--bg)',padding:14,display:'flex',gap:14}}>
              <div style={{flex:1}}><div className="muted" style={{fontSize:12.5}}>เบี้ยที่ชำระแล้ว ({held} ปี)</div><div style={{fontSize:17,fontWeight:800,marginTop:2}}>{THB(paidTotal)}</div></div>
              <div style={{width:1,background:'var(--line)'}}/>
              <div style={{flex:1}}><div className="muted" style={{fontSize:12.5}}>มูลค่าเวนคืนปัจจุบัน</div><div style={{fontSize:17,fontWeight:800,marginTop:2}} className="gold-t">{THB(curCV)}</div></div>
            </div>
          </div>

          {/* riders */}
          {p.riders.length>0 && (
            <div className="card" style={{marginTop:14}}>
              <div className="card-h"><div className="ch-title">ความคุ้มครองเพิ่มเติม</div></div>
              <div className="stack" style={{gap:0}}>
                {p.riders.map((r,i)=>(<div key={i} className="flexrow" style={{justifyContent:'space-between',padding:'11px 0',borderTop:i?'1px solid var(--line-2)':'none'}}><span style={{fontSize:14.5,fontWeight:600}}>{r.n}</span><b className="navy-t">{THBshort(r.s)}</b></div>))}
              </div>
            </div>
          )}

          {/* beneficiaries */}
          <div className="card" style={{marginTop:14}}>
            <div className="card-h"><div className="ch-title">ผู้รับผลประโยชน์</div><div className="spacer"/><span className="chip gray">{p.bene.length} คน</span></div>
            <div className="stack" style={{gap:0}}>
              {p.bene.map((b,i)=>(
                <div key={i} className="row" style={{padding:'12px 0'}}>
                  <Avatar name={b.n} color={AV_COLORS[(i+2)%AV_COLORS.length]} size="sm"/>
                  <div className="r-main"><div className="r-name" style={{fontSize:15.5}}>{b.n}</div><div className="r-sub">{b.rel}</div></div>
                  <span className="chip gold" style={{height:30}}>{b.pct}%</span>
                </div>
              ))}
            </div>
          </div>
          <div style={{height:8}}/>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { StepBar, AddPolicy, PolicyDetail });