/* ===== Referral (multi-referral + search + upline/downline tree) ===== */
const { useState:useStateRef } = React;

// referrer customer id → list of referred people
const SEED_REF = {
  c1:[{name:'จิราภา ทองสุข',phone:'081-234-9999',status:'lead'},{name:'พงศกร ใจดี',phone:'089-100-2030',status:'customer'}],
  c5:[{name:'พิชิต ก้าวหน้า',phone:'089-555-1212',status:'contacted'},{name:'วันเพ็ญ มีสุข',phone:'062-303-1010',status:'lead'},{name:'อำพล รุ่งเรือง',phone:'081-707-8080',status:'customer'}],
  c3:[{name:'มาลี รุ่งเรือง',phone:'062-808-3434',status:'customer'}],
};
const REF_STATUS={ lead:{l:'รายชื่อใหม่',c:'gray'}, contacted:{l:'ติดต่อแล้ว',c:'gold'}, customer:{l:'เป็นลูกค้า',c:'ok'} };

const ReferralScreen = ({back, go, toast}) => {
  const [data,setData]=useStateRef(SEED_REF);
  const [q,setQ]=useStateRef('');
  const [openAdd,setOpenAdd]=useStateRef(null); // referrer id to add under
  const [nm,setNm]=useStateRef(''); const [ph,setPh]=useStateRef('');
  const [view,setView]=useStateRef('list'); // 'list' | 'tree'

  const referrers=CUSTOMERS.filter(c=>data[c.id]&&data[c.id].length);
  const allRows=[]; Object.entries(data).forEach(([cid,arr])=>arr.forEach(r=>allRows.push({...r,by:CUSTOMERS.find(c=>c.id===cid)?.name,byId:cid})));
  const filtered=allRows.filter(r=>!q||r.name.includes(q)||(r.by||'').includes(q));
  const totalRef=allRows.length, becameCust=allRows.filter(r=>r.status==='customer').length;

  const addUnder=(cid)=>{ if(!nm)return; setData(d=>({...d,[cid]:[...(d[cid]||[]),{name:nm,phone:ph,status:'lead'}]})); toast('เพิ่มผู้ถูกแนะนำแล้ว'); setNm('');setPh('');setOpenAdd(null); };

  return (
    <div className="screen">
      <StatusBar/>
      <AppBar onBack={back} title="แนะนำต่อ (Referral)" sub="เครือข่ายการแนะนำของลูกค้า"
        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}}>
          {/* KPIs + view toggle */}
          <div className="flexrow" style={{gap:12,flexWrap:'wrap',marginBottom:14}}>
            <span className="chip"><Icon name="users" size={14}/> ผู้แนะนำ {referrers.length} คน</span>
            <span className="chip gold"><Icon name="send" size={14}/> ถูกแนะนำ {totalRef} ราย</span>
            <span className="chip ok"><Icon name="checkCircle" size={14}/> ปิดได้ {becameCust} ราย</span>
            <div className="spacer"/>
            <div className="seg" style={{width:200,flex:'0 0 auto'}}>
              <button className={"opt"+(view==='list'?" active":"")} onClick={()=>setView('list')}>รายการ</button>
              <button className={"opt"+(view==='tree'?" active":"")} onClick={()=>setView('tree')}>ผังเครือข่าย</button>
            </div>
          </div>

          {view==='list' ? (
            <div className="cols c-2" style={{alignItems:'start'}}>
              {/* referrers + add */}
              <div className="card" style={{padding:'8px 18px 14px'}}>
                <div className="flexrow" style={{padding:'10px 2px 10px'}}><div style={{fontSize:16,fontWeight:700}}>ลูกค้าผู้แนะนำ</div><div className="spacer"/><span className="chip gray">{referrers.length}</span></div>
                <div style={{position:'relative',marginBottom:10}}>
                  <Icon name="search" size={18} c="var(--muted-2)" style={{position:'absolute',left:14,top:15}}/>
                  <input className="input" style={{paddingLeft:42,height:46}} placeholder="ค้นหาชื่อผู้แนะนำ/ผู้ถูกแนะนำ" value={q} onChange={e=>setQ(e.target.value)}/>
                </div>
                <div className="stack" style={{gap:10}}>
                  {CUSTOMERS.map(c=>{
                    const arr=data[c.id]||[];
                    return (
                      <div key={c.id} className="card flat" style={{padding:14}}>
                        <div className="flexrow" style={{gap:11}}>
                          <Avatar name={c.name} color={c.avatar} size="sm"/>
                          <div style={{flex:1,minWidth:0}}><div style={{fontSize:14.5,fontWeight:700}}>{c.name}</div><div style={{fontSize:12,color:'var(--muted)'}}>แนะนำแล้ว {arr.length} ราย</div></div>
                          <button className="btn btn-ghost btn-sm" onClick={()=>setOpenAdd(openAdd===c.id?null:c.id)}><Icon name="plus" size={15}/> เพิ่ม</button>
                        </div>
                        {openAdd===c.id && (
                          <div style={{marginTop:12,paddingTop:12,borderTop:'1px solid var(--line-2)'}}>
                            <div className="grid2" style={{gap:10}}>
                              <input className="input" style={{height:46}} placeholder="ชื่อผู้ถูกแนะนำ" value={nm} onChange={e=>setNm(e.target.value)}/>
                              <input className="input" style={{height:46}} placeholder="เบอร์โทร" value={ph} onChange={e=>setPh(e.target.value)} inputMode="tel"/>
                            </div>
                            <button className="btn btn-primary block btn-sm" style={{marginTop:10}} disabled={!nm} onClick={()=>addUnder(c.id)}><Icon name="check" size={16}/> บันทึก</button>
                          </div>
                        )}
                        {arr.length>0 && (
                          <div className="stack" style={{gap:0,marginTop:8}}>
                            {arr.filter(r=>!q||r.name.includes(q)||c.name.includes(q)).map((r,i)=>{
                              const st=REF_STATUS[r.status];
                              return (
                                <div key={i} className="flexrow" style={{gap:10,padding:'9px 0',borderTop:i?'1px solid var(--line-2)':'none'}}>
                                  <div style={{width:30,height:30,borderRadius:9,background:'var(--navy-50)',color:'var(--navy-800)',display:'flex',alignItems:'center',justifyContent:'center',fontSize:13,fontWeight:700,flex:'0 0 auto'}}>{r.name.charAt(0)}</div>
                                  <div style={{flex:1,minWidth:0}}><div style={{fontSize:13.5,fontWeight:600}}>{r.name}</div><div style={{fontSize:11.5,color:'var(--muted)'}}>{r.phone}</div></div>
                                  <span className={"chip "+st.c} style={{height:24,fontSize:11}}>{st.l}</span>
                                </div>
                              );
                            })}
                          </div>
                        )}
                      </div>
                    );
                  })}
                </div>
              </div>
              {/* search results / summary */}
              <div className="stack" style={{gap:16}}>
                <div className="card">
                  <div className="card-h"><div className="ch-title">{q?'ผลการค้นหา':'ผู้ถูกแนะนำทั้งหมด'}</div><div className="spacer"/><span className="chip gray">{filtered.length}</span></div>
                  <div className="stack" style={{gap:0}}>
                    {filtered.map((r,i)=>{const st=REF_STATUS[r.status];return(
                      <div key={i} className="row" style={{padding:'12px 0'}}>
                        <div style={{width:36,height:36,borderRadius:11,background:'var(--navy-50)',color:'var(--navy-800)',display:'flex',alignItems:'center',justifyContent:'center',fontWeight:700,flex:'0 0 auto'}}>{r.name.charAt(0)}</div>
                        <div className="r-main"><div className="r-name" style={{fontSize:14.5}}>{r.name}</div><div className="r-sub">แนะนำโดย {r.by} · {r.phone}</div></div>
                        <span className={"chip "+st.c} style={{height:26}}>{st.l}</span>
                      </div>
                    );})}
                    {filtered.length===0 && <div className="center muted" style={{padding:24}}>ไม่พบรายชื่อ</div>}
                  </div>
                </div>
              </div>
            </div>
          ) : (
            /* upline/downline tree */
            <div className="card" style={{padding:'22px 18px'}}>
              <div className="flexrow" style={{marginBottom:18}}><div style={{fontSize:16,fontWeight:700}}>ผังความสัมพันธ์ Upline / Downline</div><div className="spacer"/><span className="chip gray"><Icon name="users" size={13}/> ตัวแทน {AGENT.name.split(' ')[1]||''}</span></div>
              {/* agent root */}
              <div className="flexrow" style={{gap:12,marginBottom:6}}>
                <div className="avatar" style={{background:AGENT.avatar}}>{initials(AGENT.name.split(' ')[1]||AGENT.name)}</div>
                <div><div style={{fontSize:15,fontWeight:800}}>{AGENT.name}</div><div style={{fontSize:12,color:'var(--muted)'}}>ตัวแทน (Upline สูงสุด)</div></div>
              </div>
              <div className="reftree">
                {referrers.map(c=>{
                  const arr=data[c.id]||[];
                  return (
                    <div key={c.id} className="refbranch">
                      <div className="flexrow" style={{gap:11,padding:'8px 0'}}>
                        <span className="refline"/>
                        <Avatar name={c.name} color={c.avatar} size="sm"/>
                        <div style={{flex:1}}><div style={{fontSize:14,fontWeight:700}}>{c.name}</div><div style={{fontSize:11.5,color:'var(--muted)'}}>ผู้แนะนำ · downline {arr.length} ราย</div></div>
                      </div>
                      <div className="refchildren">
                        {arr.map((r,i)=>{const st=REF_STATUS[r.status];return(
                          <div key={i} className="flexrow" style={{gap:10,padding:'6px 0'}}>
                            <span className="refline child"/>
                            <div style={{width:28,height:28,borderRadius:8,background:st.c==='ok'?'var(--ok-50)':'var(--bg)',color:st.c==='ok'?'var(--ok)':'var(--muted)',display:'flex',alignItems:'center',justifyContent:'center',fontSize:12,fontWeight:700,flex:'0 0 auto'}}>{r.name.charAt(0)}</div>
                            <div style={{flex:1}}><span style={{fontSize:13.5,fontWeight:600}}>{r.name}</span></div>
                            <span className={"chip "+st.c} style={{height:22,fontSize:10.5}}>{st.l}</span>
                          </div>
                        );})}
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { ReferralScreen });