/* ===== Add customer + PDPA consent + Customer detail ===== */
const { useState:useStateC } = React;

// ---------- Add customer form ----------
const AddCustomer = ({go, back, toast}) => {
  const [f,setF]=useStateC({first:'',last:'',gender:'ชาย',d:'',m:'',y:'',job:'',phone:'',email:''});
  const set=(k,v)=>setF(s=>({...s,[k]:v}));
  const valid = f.first && f.last && f.phone;
  return (
    <div className="screen">
      <StatusBar/>
      <AppBar onBack={back} title="เพิ่มลูกค้า" sub="ขั้นที่ 1 จาก 2 · ข้อมูลพื้นฐาน"/>
      <div className="pad-x wiz-col"><div className="stepper" style={{marginBottom:6}}>
        <div className="st cur"><i style={{width:'100%'}}/></div><div className="st"><i/></div>
      </div></div>
      <div className="scroll">
        <div className="pad wiz-col" style={{paddingTop:14}}>
          <div className="card stagger">
            <div className="grid2">
              <div className="field"><label>ชื่อ</label><input className="input" value={f.first} onChange={e=>set('first',e.target.value)} placeholder="ชื่อจริง"/></div>
              <div className="field"><label>นามสกุล</label><input className="input" value={f.last} onChange={e=>set('last',e.target.value)} placeholder="นามสกุล"/></div>
            </div>
            <div className="field">
              <label>เพศ</label>
              <div className="seg">
                {['ชาย','หญิง','อื่น ๆ'].map(g=>(<button key={g} className={"opt"+(f.gender===g?" active":"")} onClick={()=>set('gender',g)}>{g}</button>))}
              </div>
            </div>
            <div className="field">
              <label>วันเกิด <span className="hint">(พ.ศ.)</span></label>
              <div style={{display:'grid',gridTemplateColumns:'1fr 1.4fr 1.2fr',gap:10}}>
                <input className="input" value={f.d} onChange={e=>set('d',e.target.value)} placeholder="วัน" inputMode="numeric"/>
                <select className="select" value={f.m} onChange={e=>set('m',e.target.value)}>
                  <option value="">เดือน</option>
                  {TH_MONTHS_FULL.map((mo,i)=>(<option key={i} value={i+1}>{mo}</option>))}
                </select>
                <input className="input" value={f.y} onChange={e=>set('y',e.target.value)} placeholder="ปี พ.ศ." inputMode="numeric"/>
              </div>
            </div>
            <div className="field"><label>อาชีพ</label><input className="input" value={f.job} onChange={e=>set('job',e.target.value)} placeholder="เช่น พนักงานบริษัท"/></div>
            <div className="field">
              <label>เบอร์โทรศัพท์</label>
              <div style={{position:'relative'}}><Icon name="phone" size={19} c="var(--muted-2)" style={{position:'absolute',left:15,top:17}}/>
              <input className="input" style={{paddingLeft:46}} value={f.phone} onChange={e=>set('phone',e.target.value)} placeholder="08x-xxx-xxxx" inputMode="tel"/></div>
            </div>
            <div className="field" style={{marginBottom:0}}>
              <label>อีเมล <span className="hint">(ไม่บังคับ)</span></label>
              <div style={{position:'relative'}}><Icon name="mail" size={19} c="var(--muted-2)" style={{position:'absolute',left:15,top:17}}/>
              <input className="input" style={{paddingLeft:46}} value={f.email} onChange={e=>set('email',e.target.value)} placeholder="email@example.com"/></div>
            </div>
          </div>
        </div>
      </div>
      <div className="pad wiz-col" style={{paddingTop:8,paddingBottom:18,boxShadow:'0 -8px 20px rgba(15,23,42,.04)'}}>
        <button className="btn btn-primary block" disabled={!valid} onClick={()=>go('pdpa',{f})}>ถัดไป · ขอความยินยอม <Icon name="arrowR" size={20}/></button>
      </div>
    </div>
  );
};

// ---------- PDPA consent ----------
const PDPA = ({go, back, params, toast}) => {
  const f=params.f;
  const [c1,setC1]=useStateC(false);
  const c2=false;
  const [signed,setSigned]=useStateC(false);
  const valid = c1 && signed;
  const save=()=>{
    const nc={ id:'c'+(CUSTOMERS.length+1), name:`${f.first} ${f.last}`, gender:f.gender,
      birth:{d:+f.d||1,m:+f.m||1,y:+f.y||2535}, job:f.job||'-', phone:f.phone, email:f.email||'-',
      avatar:AV_COLORS[CUSTOMERS.length%AV_COLORS.length], tag:'',
      coverage:{life:0,ci:0,health:c2?0:0,accident:0,income:0,property:0}, income:40000,
      policies:[], consent:{general:c1,health:c2} };
    CUSTOMERS.unshift(nc);
    toast('บันทึกลูกค้าและความยินยอมแล้ว');
    go('customer',{id:nc.id, replace:true});
  };
  return (
    <div className="screen">
      <StatusBar/>
      <AppBar onBack={back} title="ความยินยอม PDPA" sub="ขั้นที่ 2 จาก 2 · การคุ้มครองข้อมูล"/>
      <div className="pad-x wiz-col"><div className="stepper" style={{marginBottom:6}}>
        <div className="st done"><i style={{width:'100%'}}/></div><div className="st cur"><i style={{width:'100%'}}/></div>
      </div></div>
      <div className="scroll">
        <div className="pad wiz-col" style={{paddingTop:14}}>
          {/* summary */}
          <div className="card stagger" style={{padding:0,overflow:'hidden'}}>
            <div style={{background:'var(--navy-50)',padding:'16px 20px',display:'flex',gap:12,alignItems:'center'}}>
              <div style={{width:42,height:42,borderRadius:13,background:'var(--navy-700)',display:'flex',alignItems:'center',justifyContent:'center'}}><Icon name="shield" size={23} c="#fff"/></div>
              <div><div style={{fontWeight:700,fontSize:16}}>หนังสือให้ความยินยอม</div><div style={{fontSize:12.5,color:'var(--muted)'}}>ตาม พ.ร.บ.คุ้มครองข้อมูลส่วนบุคคล</div></div>
            </div>
            <div style={{padding:'18px 20px'}}>
              {[
                {h:'ใครเป็นผู้เก็บ',b:'บริษัท คอเวร่า จำกัด และตัวแทนผู้ได้รับมอบหมาย'},
                {h:'เก็บข้อมูลอะไร',b:'ชื่อ-สกุล วันเกิด อาชีพ ข้อมูลติดต่อ และข้อมูลกรมธรรม์'},
                {h:'เพื่อวัตถุประสงค์ใด',b:'วิเคราะห์ความคุ้มครอง นำเสนอแบบประกัน และให้บริการหลังการขาย'},
                {h:'สิทธิของท่าน',b:'ขอเข้าถึง แก้ไข ลบ หรือถอนความยินยอมได้ทุกเมื่อ'},
              ].map((r,i)=>(
                <div key={i} style={{display:'flex',gap:12,padding:'9px 0',borderTop:i?'1px solid var(--line-2)':'none'}}>
                  <Icon name="check" size={18} c="var(--ok)" style={{marginTop:2,flex:'0 0 auto'}}/>
                  <div><div style={{fontWeight:700,fontSize:14.5}}>{r.h}</div><div style={{fontSize:13,color:'var(--muted)',marginTop:1,lineHeight:1.45}}>{r.b}</div></div>
                </div>
              ))}
            </div>
          </div>

          {/* consents — personal data only (v2) */}
          <div className="stack" style={{gap:12,marginTop:16}}>
            <button className={"check"+(c1?" on":"")} onClick={()=>setC1(!c1)}>
              <div className="box">{c1 && <Icon name="check" size={17} c="#fff"/>}</div>
              <div><div className="c-title">ยินยอมเก็บและใช้ข้อมูลส่วนบุคคล</div><div className="c-desc">ชื่อ-สกุล วันเกิด อาชีพ ข้อมูลติดต่อ และรายละเอียดกรมธรรม์ เพื่อวิเคราะห์ความคุ้มครองและนำเสนอแบบประกัน <b style={{color:'var(--danger)'}}>(จำเป็น)</b></div></div>
            </button>
          </div>

          {/* signature */}
          <div className="card" style={{marginTop:16}}>
            <div className="card-h"><div className="ch-title">ลายเซ็นผู้ให้ความยินยอม</div><div className="spacer"/><span className="chip gray">{f.first} {f.last}</span></div>
            <SignaturePad onChange={setSigned}/>
          </div>
        </div>
      </div>
      <div className="pad wiz-col" style={{paddingTop:8,paddingBottom:18}}>
        {!valid && <div className="center" style={{fontSize:12.5,color:'var(--muted)',marginBottom:10}}>ต้องยินยอมข้อมูลทั่วไปและเซ็นชื่อก่อนยืนยัน</div>}
        <button className="btn btn-primary block" disabled={!valid} onClick={save}><Icon name="checkCircle" size={20}/> ยืนยันและบันทึก</button>
      </div>
    </div>
  );
};

// ---------- Customer detail ----------
const SalesSheet = ({customer, onClose, toast, go}) => (
  <div className="scrim" onClick={onClose}>
    <div className="sheet slide-up" onClick={e=>e.stopPropagation()}>
      <div className="grab"/>
      <div style={{fontSize:19,fontWeight:700,marginBottom:4}}>การติดตามการขาย</div>
      <div className="muted" style={{fontSize:13.5,marginBottom:18}}>{customer.name}</div>
      <div className="stack" style={{gap:10}}>
        <button className="btn btn-soft block" style={{justifyContent:'flex-start'}} onClick={()=>{onClose();toast('กำลังโทร '+customer.phone);}}><div className="iconbtn" style={{boxShadow:'none',background:'var(--ok-50)',color:'var(--ok)'}}><Icon name="phone" size={21}/></div> โทรหา <span className="muted" style={{fontWeight:600}}>{customer.phone}</span></button>
        <button className="btn btn-soft block" style={{justifyContent:'flex-start'}} onClick={()=>{onClose();toast('สร้างนัดหมายแล้ว');}}><div className="iconbtn" style={{boxShadow:'none',background:'var(--navy-50)',color:'var(--navy-800)'}}><Icon name="calendar" size={21}/></div> นัดหมายพบลูกค้า</button>
        <button className="btn btn-soft block" style={{justifyContent:'flex-start'}} onClick={()=>{onClose();go('present',{id:customer.id});}}><div className="iconbtn" style={{boxShadow:'none',background:'var(--gold-50)',color:'var(--gold-600)'}}><Icon name="send" size={21}/></div> ส่งลิงก์สรุป / นำเสนอ</button>
      </div>
      <button className="btn btn-ghost block" style={{marginTop:14}} onClick={onClose}>ปิด</button>
    </div>
  </div>
);

const CustomerDetail = ({go, back, params, toast}) => {
  const c=CUSTOMERS.find(x=>x.id===params.id);
  const [sheet,setSheet]=useStateC(false);
  if(!c) return <div className="screen"><StatusBar/><AppBar onBack={back} title="ไม่พบลูกค้า"/></div>;
  const pct=coveragePct(c); const t=targets(c); const gp=gaps(c);
  return (
    <div className="screen">
      <StatusBar/>
      <AppBar onBack={back} title="รายละเอียดลูกค้า" right={<button className="iconbtn"><Icon name="edit" size={21}/></button>}/>
      <div className="scroll">
        <div className="pad maxw" style={{paddingTop:4}}>
          {/* profile */}
          <div className="flexrow stagger" style={{gap:14}}>
            <Avatar name={c.name} color={c.avatar} size="lg"/>
            <div style={{flex:1}}>
              <div style={{fontSize:22,fontWeight:800,letterSpacing:'-.01em'}}>{c.name}</div>
              <div style={{fontSize:13.5,color:'var(--muted)',marginTop:2}}>{c.job} · {c.gender} · อายุ {ageFrom(c.birth)} ปี</div>
              <div style={{display:'flex',gap:8,marginTop:8}}>
                <span className="chip"><Icon name="phone" size={13}/> {c.phone}</span>
                {c.consent?.health===false||c.consent?.general?<span className="chip ok"><Icon name="shield" size={13}/> PDPA</span>:<span className="chip ok"><Icon name="shield" size={13}/> PDPA</span>}
              </div>
            </div>
          </div>

          <div className="cols c-detail" style={{marginTop:18}}>
          <div className="stack" style={{gap:14}}>
          {/* coverage ring */}
          <div className="card" style={{display:'flex',alignItems:'center',gap:20}}>
            <Ring pct={pct} size={132} stroke={13} color={pct>=70?'#16a34a':pct>=40?'var(--navy-700)':'#f59e0b'}>
              <div style={{fontSize:30,fontWeight:800,lineHeight:1}} className="navy-t">{pct}%</div>
              <div style={{fontSize:11.5,color:'var(--muted)',marginTop:2}}>คุ้มครองรวม</div>
            </Ring>
            <div style={{flex:1}}>
              <div style={{fontSize:15,fontWeight:700,marginBottom:8}}>สรุปความคุ้มครอง</div>
              <div className="stack" style={{gap:7}}>
                <div className="flexrow" style={{gap:8}}><span style={{width:9,height:9,borderRadius:9,background:'var(--ok)'}}/><span style={{fontSize:13.5}} className="muted">มีแล้ว {CATS.length-gp.length} หมวด</span></div>
                <div className="flexrow" style={{gap:8}}><span style={{width:9,height:9,borderRadius:9,background:'var(--gold)'}}/><span style={{fontSize:13.5}} className="muted">ยังขาด {gp.length} หมวด</span></div>
                <div className="flexrow" style={{gap:8}}><span style={{width:9,height:9,borderRadius:9,background:'var(--navy-700)'}}/><span style={{fontSize:13.5}} className="muted">{c.policies.length} กรมธรรม์ในมือ</span></div>
              </div>
            </div>
          </div>

          {/* gap callout */}
          {gp.length>0 && (
            <div className="card" style={{background:'linear-gradient(120deg,var(--gold-50),#fff)',border:'1.5px solid var(--gold)'}}>
              <div style={{display:'flex',gap:12,alignItems:'flex-start'}}>
                <div style={{width:40,height:40,borderRadius:12,background:'var(--gold)',display:'flex',alignItems:'center',justifyContent:'center',flex:'0 0 auto'}}><Icon name="alert" size={22} c="#5b3d05"/></div>
                <div style={{flex:1}}>
                  <div style={{fontWeight:700,fontSize:15.5,color:'#7a5410'}}>โอกาสปิดช่องว่าง {gp.length} หมวด</div>
                  <div style={{fontSize:13,color:'#8a6420',marginTop:3,lineHeight:1.5}}>ลูกค้ายังไม่มี: {gp.map(g=>g.name).join(' · ')}</div>
                  <button className="btn btn-gold btn-sm" style={{marginTop:12}} onClick={()=>go('present',{id:c.id})}><Icon name="chart" size={17}/> นำเสนอแผนเติมเต็ม</button>
                </div>
              </div>
            </div>
          )}

          {/* sales actions */}
          <div className="card" style={{padding:16}}>
            <div style={{fontSize:14,fontWeight:700,marginBottom:12}}>การติดตามการขาย</div>
            <div className="grid2" style={{gap:10}}>
              <button className="btn btn-soft btn-sm" onClick={()=>toast('กำลังโทร '+c.phone)}><Icon name="phone" size={18} c="var(--ok)"/> โทร</button>
              <button className="btn btn-soft btn-sm" onClick={()=>toast('สร้างนัดหมายแล้ว')}><Icon name="calendar" size={18} c="var(--navy-800)"/> นัดหมาย</button>
            </div>
            <button className="btn btn-primary block" style={{marginTop:10}} onClick={()=>setSheet(true)}><Icon name="send" size={19}/> Sales Action</button>
            <button className="btn btn-outline block" style={{marginTop:10}} onClick={()=>go('needs',{cid:c.id})}><Icon name="shieldCheck" size={19}/> คำนวณทุนที่ควรมี</button>
            <button className="btn btn-outline block" style={{marginTop:10}} onClick={()=>go('pyramid',{id:c.id})}><Icon name="chartBar" size={19}/> พีระมิดการเงิน</button>
          </div>
          </div>{/* end left */}

          <div className="stack" style={{gap:0}}>{/* right */}
          {/* 6 categories */}
          <div className="flexrow" style={{margin:'2px 2px 12px'}}><div style={{fontSize:18,fontWeight:700}}>ความคุ้มครอง 6 หมวด</div></div>
          <div className="grid2" style={{gap:12}}>
            {CATS.map(cat=>{
              const amt=c.coverage[cat.key]||0; const has=amt>0;
              return (
                <div key={cat.key} className={"catcard"+(has?"":" gap")}>
                  <div className="flexrow" style={{gap:9}}>
                    <div className="cc-ico" style={{background:has?cat.color+'18':'var(--gold-50)',color:has?cat.color:'var(--gold-600)'}}><Icon name={cat.icon} size={21}/></div>
                    <div style={{flex:1}}><div className="cc-name">{cat.name}</div></div>
                    {has?<Icon name="checkCircle" size={20} c="var(--ok)"/>:<span className="chip warn" style={{height:24,fontSize:11}}>ขาด</span>}
                  </div>
                  <div className={"cc-amt"+(has?"":" muted")}>{has?THBshort(amt):'ยังไม่มี'}</div>
                  <div className="progress" style={{height:6}}><i style={{width:Math.min(100,amt/t[cat.key]*100)+'%',background:has?cat.color:'var(--gold)'}}/></div>
                </div>
              );
            })}
          </div>

          {/* policies */}
          <div className="flexrow" style={{margin:'22px 2px 12px'}}>
            <div style={{fontSize:18,fontWeight:700}}>กรมธรรม์ ({c.policies.length})</div><div className="spacer"/>
            <button className="chip" onClick={()=>go('addPolicy',{cid:c.id})}><Icon name="plus" size={14}/> เพิ่ม</button>
          </div>
          <div className="card" style={{padding:'4px 18px'}}>
            {c.policies.length===0 && <div className="center muted" style={{padding:'26px 0'}}>ยังไม่มีกรมธรรม์ — กด “เพิ่ม” เพื่อเริ่ม</div>}
            {c.policies.map(p=>{const co=COMPANIES.find(x=>x.id===p.co);return(
              <button key={p.id} className="row" style={{width:'100%',textAlign:'left'}} onClick={()=>go('policy',{cid:c.id,pid:p.id})}>
                <CompanyBadge co={co}/>
                <div className="r-main"><div className="r-name">{p.plan}</div><div className="r-sub">{co.name} · {maskPolicy(p.no)}</div></div>
                <div className="r-meta"><div style={{fontSize:15,fontWeight:700}}>{THBshort(p.sum)}</div><div style={{fontSize:12,color:'var(--muted)'}}>{THB(p.premium)}/ปี</div></div>
                <Icon name="chevR" size={18} c="var(--muted-2)"/>
              </button>
            );})}
          </div>

          <div style={{height:8}}/>
          </div>{/* end right */}
          </div>{/* end cols */}
        </div>
      </div>
      {sheet && <SalesSheet customer={c} onClose={()=>setSheet(false)} toast={toast} go={go}/>}
    </div>
  );
};

Object.assign(window, { AddCustomer, PDPA, CustomerDetail });