/* ===== Customer public view: OTP gate + read-only portal ===== */
const { useState:useStateCV } = React;

const CustomerView = ({go, back, params, toast}) => {
  const c=CUSTOMERS.find(x=>x.id===params.id);
  const py=pyramidFor(c);
  const [authed,setAuthed]=useStateCV(false);
  const pct=coveragePct(c);

  if(!authed){
    return (
      <div className="screen" style={{background:'linear-gradient(170deg,#1e3a8a,#0f1b3a)'}}>
        <StatusBar onNavy/>
        <div className="flexrow" style={{padding:'8px 20px'}}>
          <button className="iconbtn ghost" style={{color:'#fff'}} onClick={back}><Icon name="arrowL" size={22}/></button>
        </div>
        <div className="scroll web-center">
          <div className="pad form-col" style={{paddingTop:20,paddingBottom:40}}>
            <div className="center slide-up"><Wordmark light/></div>
            <div className="center slide-up" style={{marginTop:40}}>
              <div style={{fontSize:26,fontWeight:800,color:'#fff'}}>สวัสดีคุณ {c.name.split(' ')[0]}</div>
              <div style={{fontSize:15.5,color:'rgba(255,255,255,.75)',marginTop:8,lineHeight:1.55}}>ตัวแทนของคุณแชร์สรุปความคุ้มครอง<br/>กรอกรหัส OTP ที่ส่งไปยังเบอร์ <b style={{color:'#fff'}}>{c.phone.slice(0,3)}-xxx-{c.phone.slice(-4)}</b></div>
            </div>
            <div className="card slide-up" style={{marginTop:30,padding:'30px 22px',animationDelay:'.06s'}}>
              <OtpEntry onComplete={()=>setAuthed(true)}/>
            </div>
            <div className="center" style={{marginTop:18}}><span className="chip" style={{background:'rgba(255,255,255,.14)',color:'#fff',height:32}}><Icon name="lock" size={14}/> ปลอดภัย · อ่านอย่างเดียว</span></div>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="screen">
      {/* friendly navy header */}
      <div style={{background:'linear-gradient(160deg,#1e3a8a,#1e40af)',color:'#fff',paddingBottom:24,borderRadius:'0 0 28px 28px'}}>
        <StatusBar onNavy/>
        <div className="flexrow" style={{padding:'4px 22px 0'}}>
          <button className="iconbtn ghost" style={{color:'#fff'}} onClick={back}><Icon name="arrowL" size={22}/></button>
          <div className="spacer"/>
          <Wordmark light size={20}/>
        </div>
        <div className="pad" style={{paddingTop:10,paddingBottom:0}}>
          <div className="flexrow" style={{gap:14}}>
            <div className="avatar lg" style={{background:'rgba(255,255,255,.18)'}}>{initials(c.name)}</div>
            <div>
              <div style={{fontSize:13,color:'rgba(255,255,255,.7)'}}>สรุปความคุ้มครองของ</div>
              <div style={{fontSize:22,fontWeight:800}}>{c.name}</div>
              <div style={{fontSize:13,color:'rgba(255,255,255,.7)',marginTop:2}}>ดูแลโดย {AGENT.name}</div>
            </div>
          </div>
        </div>
      </div>

      <div className="scroll">
        <div className="pad" style={{paddingTop:18}}>
          {/* score + pyramid */}
          <div className="card stagger" style={{display:'flex',alignItems:'center',gap:8}}>
            <div style={{flex:1}}>
              <div className="muted" style={{fontSize:13.5}}>คะแนนสุขภาพการเงิน</div>
              <div style={{display:'flex',alignItems:'baseline',gap:4,marginTop:4}}><span style={{fontSize:40,fontWeight:800}} className="navy-t">{py.score}</span><span className="muted" style={{fontWeight:700}}>/100</span></div>
              <span className={"chip "+(py.score>=60?'ok':'warn')} style={{marginTop:8}}>{py.score>=60?'อยู่ในเกณฑ์ดี':'มีจุดที่ควรเสริม'}</span>
            </div>
            <div style={{width:130}}><PyramidSVG data={py} w={280} h={220}/></div>
          </div>

          {/* coverage ring */}
          <div className="card" style={{marginTop:14,display:'flex',alignItems:'center',gap:18}}>
            <Ring pct={pct} size={120} stroke={12} color={pct>=70?'#16a34a':'var(--navy-700)'}>
              <div style={{fontSize:27,fontWeight:800}} className="navy-t">{pct}%</div>
              <div style={{fontSize:11,color:'var(--muted)'}}>คุ้มครองรวม</div>
            </Ring>
            <div style={{flex:1}}>
              <div style={{fontSize:16,fontWeight:700,marginBottom:6}}>ความคุ้มครองของคุณ</div>
              <div className="muted" style={{fontSize:13.5,lineHeight:1.55}}>คุณมีความคุ้มครอง {CATS.length-gaps(c).length} จาก {CATS.length} หมวด{gaps(c).length>0&&` · ยังมี ${gaps(c).length} หมวดที่แนะนำให้เสริม`}</div>
            </div>
          </div>

          {/* categories simple */}
          <div className="flexrow" style={{margin:'22px 2px 12px'}}><div style={{fontSize:17,fontWeight:700}}>ความคุ้มครอง 6 หมวด</div></div>
          <div className="card" style={{padding:'4px 18px'}}>
            {CATS.map((cat,i)=>{const has=(c.coverage[cat.key]||0)>0;return(
              <div key={cat.key} className="row" style={{padding:'13px 0'}}>
                <div style={{width:40,height:40,borderRadius:12,background:has?cat.color+'18':'var(--gold-50)',color:has?cat.color:'var(--gold-600)',display:'flex',alignItems:'center',justifyContent:'center'}}><Icon name={cat.icon} size={21}/></div>
                <div className="r-main"><div className="r-name" style={{fontSize:15.5}}>{cat.name}</div><div className="r-sub">{has?'มีความคุ้มครอง':'แนะนำให้เพิ่ม'}</div></div>
                {has?<b className="navy-t">{THBshort(c.coverage[cat.key])}</b>:<Icon name="alert" size={20} c="var(--gold-600)"/>}
              </div>
            );})}
          </div>

          {/* policies */}
          <div className="flexrow" style={{margin:'22px 2px 12px'}}><div style={{fontSize:17,fontWeight:700}}>กรมธรรม์ของคุณ ({c.policies.length})</div></div>
          <div className="stack" style={{gap:12}}>
            {c.policies.map(p=>{const co=COMPANIES.find(x=>x.id===p.co);return(
              <div key={p.id} className="card flat" style={{display:'flex',alignItems:'center',gap:14}}>
                <CompanyBadge co={co}/>
                <div style={{flex:1}}><div style={{fontSize:15.5,fontWeight:700}}>{p.plan}</div><div className="muted" style={{fontSize:13}}>{co.name} · เลขที่ {maskPolicy(p.no)}</div></div>
                <div style={{textAlign:'right'}}><div style={{fontSize:15,fontWeight:800}}>{THBshort(p.sum)}</div><div className="muted" style={{fontSize:12}}>ทุนประกัน</div></div>
              </div>
            );})}
            {c.policies.length===0 && <div className="card flat center muted" style={{padding:24}}>ยังไม่มีกรมธรรม์</div>}
          </div>

          <div className="card" style={{marginTop:18,background:'var(--navy-50)',boxShadow:'none',display:'flex',gap:14,alignItems:'center'}}>
            <div className="avatar" style={{background:AGENT.avatar}}>{initials(AGENT.name.split(' ')[1]||AGENT.name)}</div>
            <div style={{flex:1}}><div style={{fontSize:14.5,fontWeight:700}}>มีคำถาม? ติดต่อตัวแทนของคุณ</div><div className="muted" style={{fontSize:12.5}}>{AGENT.name} · {AGENT.title}</div></div>
            <button className="iconbtn" style={{background:'var(--ok)',color:'#fff'}} onClick={()=>toast('กำลังโทรหาตัวแทน')}><Icon name="phone" size={21}/></button>
          </div>

          <div className="center muted" style={{margin:'22px 0 6px',fontSize:12.5,lineHeight:1.6}}>
            <Icon name="lock" size={14}/> มุมมองนี้แสดงผลแบบอ่านอย่างเดียว<br/>ข้อมูลของคุณได้รับการคุ้มครองตาม PDPA
          </div>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { CustomerView });