/* ===== Billing / packages ===== */
const { useState:useStateB } = React;

const PLANS = [
  { id:'starter', name:'Starter', price:0, priceLabel:'ฟรี', color:'#64748b',
    feats:['ลูกค้าสูงสุด 20 ราย','บันทึกกรมธรรม์','วิเคราะห์ความคุ้มครองพื้นฐาน'] },
  { id:'pro', name:'Covera Pro', price:990, priceLabel:'฿990', color:'#1e40af',
    feats:['ลูกค้าสูงสุด 100 ราย','พีระมิดการเงิน + โหมดนำเสนอ','รายงานและ Pipeline','มุมมองลูกค้า (Portal)'] },
  { id:'team', name:'Team', price:2490, priceLabel:'฿2,490', color:'#7c3aed',
    feats:['ลูกค้าไม่จำกัด','หลายตัวแทน + แชร์ลูกค้า','Admin ตั้งค่าแพ็กเกจ','เชื่อมต่อ API'] },
];

const BillingScreen = ({back, toast}) => {
  const current='pro';
  const [sel,setSel]=useStateB('pro');
  const receipts=[
    {d:'15 มิ.ย. 2568',a:990,plan:'Covera Pro'},
    {d:'15 พ.ค. 2568',a:990,plan:'Covera Pro'},
    {d:'15 เม.ย. 2568',a:990,plan:'Covera Pro'},
    {d:'15 มี.ค. 2568',a:990,plan:'Covera Pro'},
  ];
  return (
    <div className="screen">
      <StatusBar/>
      <AppBar onBack={back} title="แพ็กเกจของฉัน" sub="จัดการแพ็กเกจและการชำระเงิน"/>
      <div className="scroll">
        <div className="pad maxw" style={{paddingTop:4}}>
          {/* current status banner */}
          <div className="navy-panel" style={{display:'flex',alignItems:'center',gap:16}}>
            <div className="glow"/>
            <div style={{width:52,height:52,borderRadius:15,background:'rgba(251,191,36,.2)',display:'flex',alignItems:'center',justifyContent:'center'}}><Icon name="star" size={26} c="var(--gold)"/></div>
            <div style={{flex:1}}>
              <div style={{fontSize:13,color:'rgba(255,255,255,.7)'}}>แพ็กเกจปัจจุบัน</div>
              <div style={{fontSize:21,fontWeight:800}}>Covera Pro · ฿990/เดือน</div>
            </div>
            <div style={{textAlign:'right'}}>
              <div style={{fontSize:12.5,color:'rgba(255,255,255,.7)'}}>ต่ออายุ</div>
              <div style={{fontSize:15,fontWeight:700}}>15 ก.ค. 2568</div>
            </div>
          </div>

          {/* plan cards */}
          <div className="flexrow" style={{margin:'22px 2px 12px'}}><div style={{fontSize:18,fontWeight:700}}>เลือกแพ็กเกจ</div></div>
          <div className="cols" style={{gridTemplateColumns:'repeat(3,1fr)'}}>
            {PLANS.map(p=>{
              const isCur=p.id===current; const on=sel===p.id;
              return (
                <button key={p.id} onClick={()=>setSel(p.id)} className="card" style={{textAlign:'left',padding:20,border:on?`2px solid ${p.color}`:'2px solid transparent',position:'relative'}}>
                  {isCur && <span className="chip" style={{position:'absolute',top:16,right:16,height:26,background:p.color,color:'#fff'}}>ใช้งานอยู่</span>}
                  <div style={{width:40,height:40,borderRadius:12,background:p.color+'18',color:p.color,display:'flex',alignItems:'center',justifyContent:'center'}}><Icon name={p.id==='team'?'users':p.id==='pro'?'shieldCheck':'user'} size={22}/></div>
                  <div style={{fontSize:18,fontWeight:800,marginTop:14}}>{p.name}</div>
                  <div style={{display:'flex',alignItems:'baseline',gap:4,marginTop:2}}>
                    <span style={{fontSize:26,fontWeight:800,color:p.color}}>{p.priceLabel}</span>
                    {p.price>0 && <span className="muted" style={{fontSize:13}}>/ เดือน</span>}
                  </div>
                  <div className="divider" style={{margin:'14px 0'}}/>
                  <div className="stack" style={{gap:9}}>
                    {p.feats.map((f,i)=>(<div key={i} className="flexrow" style={{gap:9,alignItems:'flex-start'}}><Icon name="check" size={17} c={p.color} style={{marginTop:1,flex:'0 0 auto'}}/><span style={{fontSize:13.5,lineHeight:1.4}}>{f}</span></div>))}
                  </div>
                  <div style={{marginTop:16}}>
                    {isCur
                      ? <div className="btn btn-soft block" style={{cursor:'default',color:'var(--muted)'}}>แพ็กเกจปัจจุบัน</div>
                      : <div className={"btn block "+(p.price>990?'btn-primary':'btn-outline')} >{p.price>990?'อัปเกรด':'เปลี่ยนแพ็กเกจ'}</div>}
                  </div>
                </button>
              );
            })}
          </div>

          {sel!==current && (
            <button className="btn btn-primary block btn-lg" style={{marginTop:18}} onClick={()=>toast('ส่งคำขอเปลี่ยนเป็นแพ็กเกจ '+PLANS.find(p=>p.id===sel).name+' แล้ว')}>
              <Icon name="star" size={20}/> ยืนยันเปลี่ยนเป็น {PLANS.find(p=>p.id===sel).name}
            </button>
          )}

          {/* receipts */}
          <div className="flexrow" style={{margin:'24px 2px 12px'}}><div style={{fontSize:18,fontWeight:700}}>ประวัติการชำระเงิน</div><div className="spacer"/><button className="chip" onClick={()=>toast('ดาวน์โหลดใบเสร็จทั้งหมดแล้ว')}><Icon name="download" size={14}/> ทั้งหมด</button></div>
          <div className="card" style={{padding:'4px 18px'}}>
            {receipts.map((r,i)=>(
              <div key={i} className="row">
                <div className="iconbtn" style={{boxShadow:'none',background:'var(--ok-50)',color:'var(--ok)'}}><Icon name="checkCircle" size={21}/></div>
                <div className="r-main"><div className="r-name">{r.plan}</div><div className="r-sub">{r.d} · ชำระผ่านบัตรเครดิต ••• 4242</div></div>
                <b style={{fontSize:15}}>{THB(r.a)}</b>
                <button className="iconbtn ghost" onClick={()=>toast('กำลังดาวน์โหลดใบเสร็จ')}><Icon name="download" size={19} c="var(--muted)"/></button>
              </div>
            ))}
          </div>
          <div style={{height:10}}/>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { PLANS, BillingScreen });