/* ===== After-sales service: Renewals (agent-only + Line OA) ===== */
const { useState:useStateSV } = React;

const RENEWALS = [
  { id:'rn1', cid:'c1', pid:'p1', cust:'สมชาย วัฒนกุล', co:'co1', plan:'ตลอดชีพ', no:'8842310482', prem:48000,  freq:'รายปี', due:'15 มิ.ย. 2568', days:5,   status:'normal' },
  { id:'rn2', cid:'c5', pid:'p7', cust:'ธนกร อินทรพานิช', co:'co1', plan:'ตลอดชีพ', no:'8810229934', prem:420000, freq:'รายปี', due:'22 มิ.ย. 2568', days:12,  status:'normal' },
  { id:'rn3', cid:'c2', pid:'p3', cust:'ปิยะดา ศรีสุข', co:'co2', plan:'ยูนิตลิงค์', no:'7730019945', prem:120000, freq:'รายปี', due:'28 มิ.ย. 2568', days:18,  status:'normal' },
  { id:'rn4', cid:'c4', pid:'p6', cust:'กมลวรรณ พงษ์ไพบูลย์', co:'co5', plan:'สะสมทรัพย์', no:'3310077612', prem:30000, freq:'ราย 6 เดือน', due:'8 ก.ค. 2568', days:28, status:'normal' },
  { id:'rn5', cid:'c6', pid:'p8', cust:'วราภรณ์ จันทร์เพ็ญ', co:'co2', plan:'ชั่วระยะเวลา', no:'7740583310', prem:8000, freq:'รายปี', due:'2 มิ.ย. 2568', days:-8, status:'grace' },
  { id:'rn6', cid:'c3', pid:'p5', cust:'อนุชา เรืองโรจน์', co:'co6', plan:'บำนาญ', no:'9980142200', prem:100000, freq:'รายปี', due:'12 พ.ค. 2568', days:-29, status:'lapsed' },
];

const RN_STATUS = { normal:{l:'รอชำระ',c:'warn'}, grace:{l:'ผ่อนผัน',c:'gold'}, lapsed:{l:'ขาดอายุ',c:'danger'} };

// Line OA message composer popup
const LineSheet = ({rn, onClose, toast}) => {
  const co=COMPANIES.find(c=>c.id===rn.co);
  const templates=[
    {k:'remind', label:'เตือนชำระเบี้ย', text:`เรียนคุณ${rn.cust} กรมธรรม์ ${rn.plan} (${maskPolicy(rn.no)}) จะครบกำหนดชำระเบี้ย ${THB(rn.prem)} ในวันที่ ${rn.due} ครับ หากต้องการต่ออายุหรือสอบถามเพิ่มเติม ติดต่อผมได้เลยนะครับ`},
    {k:'grace',  label:'แจ้งระยะผ่อนผัน', text:`เรียนคุณ${rn.cust} กรมธรรม์ ${maskPolicy(rn.no)} เลยกำหนดชำระแล้ว แต่ยังอยู่ในระยะผ่อนผัน สามารถชำระเบี้ย ${THB(rn.prem)} เพื่อรักษาความคุ้มครองได้ครับ`},
    {k:'thanks', label:'ขอบคุณหลังชำระ', text:`ขอบคุณคุณ${rn.cust} ที่ต่ออายุกรมธรรม์ ${rn.plan} ครับ ความคุ้มครองของคุณยังคงดำเนินต่อเนื่อง หากมีข้อสงสัยติดต่อผมได้ตลอดครับ`},
  ];
  const [sel,setSel]=useStateSV(templates[0].k);
  const [text,setText]=useStateSV(templates[0].text);
  const pick=(t)=>{ setSel(t.k); setText(t.text); };
  return (
    <div className="scrim" onClick={onClose}>
      <div className="sheet slide-up" onClick={e=>e.stopPropagation()}>
        <div className="grab"/>
        <div className="flexrow" style={{gap:12,marginBottom:6}}>
          <div style={{width:42,height:42,borderRadius:12,background:'#06C755',display:'flex',alignItems:'center',justifyContent:'center'}}>
            <svg width="24" height="24" viewBox="0 0 24 24" fill="#fff"><path d="M12 3C6.9 3 3 6.4 3 10.6c0 3.8 3.2 7 7.5 7.6.3.1.7.2.8.5.1.3 0 .7 0 1l-.1.9c0 .3-.2 1 .9.6 1.1-.5 6-3.5 8.2-6C21.5 13.6 22 12.2 22 10.6 22 6.4 18.1 3 12 3z"/></svg>
          </div>
          <div><div style={{fontSize:18,fontWeight:800}}>ส่งข้อความให้ลูกค้า</div><div className="muted" style={{fontSize:13}}>ผ่าน LINE Official Account · ตัวแทนกดส่งเอง</div></div>
        </div>
        <div className="chip-scroll" style={{margin:'14px 0'}}>
          {templates.map(t=>(<button key={t.k} className={"fchip"+(sel===t.k?" on":"")} onClick={()=>pick(t)}>{t.label}</button>))}
        </div>
        <textarea className="input" style={{height:'auto',minHeight:140,lineHeight:1.6}} value={text} onChange={e=>setText(e.target.value)}/>
        <div className="flexrow" style={{gap:10,marginTop:14}}>
          <button className="btn btn-ghost" style={{flex:'0 0 auto'}} onClick={onClose}>ยกเลิก</button>
          <button className="btn block" style={{flex:1,background:'#06C755',color:'#fff'}} onClick={()=>{onClose();toast('ส่งข้อความถึง '+rn.cust+' ทาง LINE แล้ว');}}>
            <Icon name="send" size={19}/> ส่งทาง LINE OA
          </button>
        </div>
      </div>
    </div>
  );
};

const RenewalScreen = ({back, go, toast}) => {
  const [win,setWin]=useStateSV(30);
  const [line,setLine]=useStateSV(null);
  const list=RENEWALS.filter(r=>r.days<=win).sort((a,b)=>a.days-b.days);
  const totalPrem=list.reduce((a,r)=>a+r.prem,0);
  const lapsed=RENEWALS.filter(r=>r.status==='lapsed').length;
  const grace=RENEWALS.filter(r=>r.status==='grace').length;
  return (
    <div className="screen">
      <StatusBar/>
      <AppBar onBack={back} title="ต่ออายุ / เบี้ยครบกำหนด" sub="Renewals — สำหรับตัวแทนติดตามเอง"
        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}}>
          {/* agent-only note */}
          <div className="card flat" style={{display:'flex',gap:12,alignItems:'center',background:'var(--navy-50)',border:'none',marginBottom:16}}>
            <Icon name="info" size={20} c="var(--navy-800)"/>
            <div style={{fontSize:13,color:'var(--navy-800)',lineHeight:1.5,fontWeight:500}}>การแจ้งเตือนนี้สำหรับ<b>ตัวแทนเท่านั้น</b> ระบบไม่ส่งถึงลูกค้าอัตโนมัติ — ตัวแทนเลือกส่งข้อความเองผ่าน LINE OA</div>
          </div>
          {/* KPIs */}
          <div className="grid3 stagger">
            <KPI icon="clock" val={RENEWALS.filter(r=>r.status==='normal').length} label="ใกล้ครบกำหนด (30 วัน)" color="#f59e0b" bg="var(--warn-50)"/>
            <KPI icon="alert" val={grace} label="อยู่ระหว่างผ่อนผัน" color="#d97706" bg="var(--gold-50)"/>
            <KPI icon="x" val={lapsed} label="ขาดอายุ" color="#dc2626" bg="var(--danger-50)"/>
          </div>

          {/* window filter */}
          <div className="chip-scroll" style={{marginTop:16}}>
            {[{k:7,l:'ภายใน 7 วัน'},{k:15,l:'ภายใน 15 วัน'},{k:30,l:'ภายใน 30 วัน'},{k:9999,l:'รวมผ่อนผัน/ขาดอายุ'}].map(o=>(
              <button key={o.k} className={"fchip"+(win===o.k?" on":"")} onClick={()=>setWin(o.k)}>{o.l}</button>
            ))}
            <div className="spacer"/>
            <span className="chip gray" style={{flex:'0 0 auto'}}>รวมเบี้ย {THBshort(totalPrem)}</span>
          </div>

          <div className="stack" style={{gap:12,marginTop:14}}>
            {list.map(r=>{
              const co=COMPANIES.find(c=>c.id===r.co); const st=RN_STATUS[r.status];
              const overdue=r.days<0;
              return (
                <div key={r.id} className="card" style={{padding:16,display:'flex',gap:14,alignItems:'center',borderLeft:`4px solid var(--${st.c==='danger'?'danger':st.c==='gold'?'gold':'warn'})`}}>
                  <CompanyBadge co={co}/>
                  <div style={{flex:1,minWidth:0}}>
                    <div className="flexrow" style={{gap:8}}>
                      <span style={{fontSize:15.5,fontWeight:700}}>{r.cust}</span>
                      <span className={"chip "+st.c} style={{height:24,fontSize:11.5}}>{st.l}</span>
                    </div>
                    <div style={{fontSize:13,color:'var(--muted)',marginTop:3}}>{r.plan} · {co.name} · {maskPolicy(r.no)}</div>
                    <div style={{fontSize:12.5,marginTop:5,color:overdue?'var(--danger)':'var(--ink-2)',fontWeight:600}}>
                      <Icon name="calendar" size={13} style={{verticalAlign:'-2px'}}/> ครบกำหนด {r.due} · {overdue?(r.status==='grace'?`ผ่อนผัน เกิน ${-r.days} วัน`:`เกิน ${-r.days} วัน`):`อีก ${r.days} วัน`}
                    </div>
                  </div>
                  <div style={{textAlign:'right'}}>
                    <div style={{fontSize:16,fontWeight:800}}>{THB(r.prem)}</div>
                    <div style={{fontSize:11.5,color:'var(--muted)'}}>{r.freq}</div>
                  </div>
                  <div style={{display:'flex',gap:8,marginLeft:4}}>
                    <button className="iconbtn" style={{background:'var(--ok-50)',color:'var(--ok)',boxShadow:'none'}} onClick={()=>toast('กำลังโทรหา '+r.cust)}><Icon name="phone" size={20}/></button>
                    <button className="iconbtn" style={{background:'#e7f9ef',color:'#06C755',boxShadow:'none'}} onClick={()=>setLine(r)} title="ส่ง LINE OA"><Icon name="send" size={19}/></button>
                  </div>
                </div>
              );
            })}
            {list.length===0 && <div className="card center muted" style={{padding:30}}>ไม่มีกรมธรรม์ครบกำหนดในช่วงนี้</div>}
          </div>
        </div>
      </div>
      {line && <LineSheet rn={line} onClose={()=>setLine(null)} toast={toast}/>}
    </div>
  );
};

Object.assign(window, { RENEWALS, RenewalScreen });