/* ===== Sales: Lead Pipeline (4-column Kanban + drag & drop) ===== */
const { useState:useStateS } = React;

// #12 — 4 funnel columns
const STAGES = [
  { k:'new',     label:'ลูกค้าใหม่',   color:'#2547c4', sub:'ใหม่ + ติดต่อแล้ว' },
  { k:'present', label:'นำเสนอ',       color:'#7c3aed', sub:'นำเสนอแผน' },
  { k:'propose', label:'ยื่นข้อเสนอ',  color:'#f59e0b', sub:'รอการตัดสินใจ' },
  { k:'won',     label:'ปิดการขาย',    color:'#16a34a', sub:'ขายได้' },
];
const SEED_LEADS = [
  { id:'l1', name:'มานี รักดี',        stage:'new',     value:48000,  src:'แนะนำต่อ',  phone:'081-111-2233', av:'#0891b2', followup:false },
  { id:'l2', name:'วีระ สุขใจ',         stage:'new',     value:180000, src:'งานสัมมนา', phone:'089-444-5566', av:'#7c3aed', followup:false },
  { id:'l3', name:'ธีรพงษ์ มั่นคง',     stage:'new',     value:60000,  src:'โซเชียล',   phone:'062-777-8899', av:'#ea580c', followup:true },
  { id:'l4', name:'สุภาพร ทองดี',       stage:'present', value:36000,  src:'แนะนำต่อ',  phone:'090-222-1144', av:'#db2777', followup:false },
  { id:'l5', name:'ชัยวัฒน์ พูนทรัพย์',  stage:'present', value:240000, src:'ลูกค้าเก่า', phone:'081-333-9090', av:'#1e40af', followup:false },
  { id:'l6', name:'อรทัย แสงทอง',       stage:'propose', value:90000,  src:'งานสัมมนา', phone:'086-555-2020', av:'#0d9488', followup:false },
  { id:'l7', name:'ประวิทย์ ใจกว้าง',   stage:'propose', value:120000, src:'แนะนำต่อ',  phone:'095-888-1212', av:'#b45309', followup:true },
  { id:'l8', name:'กนกพร วงศ์ทอง',      stage:'won',     value:75000,  src:'ลูกค้าเก่า', phone:'083-606-7070', av:'#16a34a', followup:false },
  { id:'l9', name:'สมเกียรติ ดีงาม',    stage:'won',     value:300000, src:'แนะนำต่อ',  phone:'081-909-3030', av:'#4f46e5', followup:false },
];

const PipelineScreen = ({back, go, toast}) => {
  const [leads,setLeads]=useStateS(SEED_LEADS);
  const [drag,setDrag]=useStateS(null);
  const [over,setOver]=useStateS(null);
  const [onlyFollow,setOnlyFollow]=useStateS(false);

  const move=(id,dir)=>setLeads(ls=>ls.map(l=>{
    if(l.id!==id) return l;
    const i=STAGES.findIndex(s=>s.k===l.stage); const ni=Math.max(0,Math.min(STAGES.length-1,i+dir));
    return {...l,stage:STAGES[ni].k};
  }));
  const drop=(stageK)=>{ if(drag) setLeads(ls=>ls.map(l=>l.id===drag?{...l,stage:stageK}:l)); setDrag(null); setOver(null); };
  const toggleFollow=(id)=>setLeads(ls=>ls.map(l=>l.id===id?{...l,followup:!l.followup}:l));

  const total=leads.filter(l=>l.stage!=='won').reduce((a,l)=>a+l.value,0);
  const won=leads.filter(l=>l.stage==='won').reduce((a,l)=>a+l.value,0);
  const followN=leads.filter(l=>l.followup).length;

  return (
    <div className="screen">
      <StatusBar/>
      <AppBar onBack={back} title="Lead Pipeline" sub="ลากการ์ดเพื่อเปลี่ยนขั้น"
        right={<div style={{display:'flex',gap:10}}><button className="iconbtn" onClick={()=>toast('เพิ่ม Lead ใหม่')}><Icon name="plus" size={22}/></button><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>}/>
      <div className="pad-x" style={{paddingTop:2,paddingBottom:12}}>
        <div className="flexrow" style={{gap:10,flexWrap:'wrap'}}>
          <span className="chip"><Icon name="wallet" size={14}/> ในไปป์ {THBshort(total)}</span>
          <span className="chip ok"><Icon name="checkCircle" size={14}/> ปิดได้ {THBshort(won)}</span>
          <button className={"fchip"+(onlyFollow?" on":"")} style={{height:30}} onClick={()=>setOnlyFollow(!onlyFollow)}><Icon name="clock" size={13}/> ติดตาม {followN}</button>
          <div className="spacer"/>
          <span className="chip gray">{leads.length} ดีล</span>
        </div>
      </div>
      <div className="kanban">
        {STAGES.map(st=>{
          const items=leads.filter(l=>l.stage===st.k && (!onlyFollow||l.followup));
          const sum=leads.filter(l=>l.stage===st.k).reduce((a,l)=>a+l.value,0);
          const i0=STAGES.findIndex(s=>s.k===st.k);
          return (
            <div key={st.k} className={"kcol"+(over===st.k?" over":"")}
              onDragOver={e=>{e.preventDefault();setOver(st.k);}} onDragLeave={()=>setOver(o=>o===st.k?null:o)} onDrop={()=>drop(st.k)}>
              <div className="kcol-h">
                <span style={{width:9,height:9,borderRadius:9,background:st.color}}/>
                <span style={{fontWeight:700,fontSize:14.5}}>{st.label}</span>
                <span className="chip gray" style={{height:22,fontSize:11,marginLeft:'auto'}}>{items.length}</span>
              </div>
              <div className="kcol-sub">{st.sub} · {THBshort(sum)}</div>
              <div className="kcol-body">
                {items.map(l=>(
                  <div key={l.id} className="kcard" draggable
                    onDragStart={()=>setDrag(l.id)} onDragEnd={()=>{setDrag(null);setOver(null);}}
                    style={{borderLeft:`3px solid ${l.followup?'#f59e0b':st.color}`,opacity:drag===l.id?.5:1}}>
                    <div className="flexrow" style={{gap:10}}>
                      <Avatar name={l.name} color={l.av} size="sm"/>
                      <div style={{flex:1,minWidth:0}}>
                        <div style={{fontSize:14.5,fontWeight:700,whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>{l.name}</div>
                        <div style={{fontSize:12,color:'var(--muted)'}}>{l.src}</div>
                      </div>
                      {l.followup && <span className="chip warn" style={{height:22,fontSize:10.5}}>ติดตาม</span>}
                    </div>
                    {st.k==='won' ? (
                      <button className="btn btn-sm block" style={{marginTop:10,background:'var(--ok-50)',color:'var(--ok)'}} onClick={()=>go('addPolicy',{})}><Icon name="plusDoc" size={16}/> เพิ่มกรมธรรม์เข้าพีระมิด</button>
                    ) : (
                      <div className="flexrow" style={{marginTop:10}}>
                        <b className="navy-t" style={{fontSize:14}}>{THBshort(l.value)}</b>
                        <div className="spacer"/>
                        <div style={{display:'flex',gap:5}}>
                          <button className="kmove" disabled={i0===0} onClick={()=>move(l.id,-1)}><Icon name="chevL" size={15}/></button>
                          <button className={"kmove"+(l.followup?" on":"")} onClick={()=>toggleFollow(l.id)} title="ติดตามภายหลัง" style={l.followup?{background:'var(--warn-50)',color:'var(--warn)'}:null}><Icon name="clock" size={14}/></button>
                          <button className="kmove" onClick={()=>move(l.id,1)}><Icon name="chevR" size={15}/></button>
                        </div>
                      </div>
                    )}
                  </div>
                ))}
                {items.length===0 && <div className="kempty">— ว่าง —</div>}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

Object.assign(window, { STAGES, PipelineScreen });