/* ===== Home tabs: Dashboard(ลูกค้า), Policies, Reports, Me+Billing ===== */
const { useState:useStateH } = React;

const AGENT = { name:'สมชาย ใจดี', code:'AG-22841', title:'ที่ปรึกษาการเงิน', avatar:'#1e40af' };

// ---------- ลูกค้า: customer list with search + filters ----------
const Dashboard = ({go}) => {
  const [q,setQ]=useStateH('');
  const [filter,setFilter]=useStateH('all');
  const due = CUSTOMERS.filter(c=>c.tag==='ครบกำหนด').length;
  const follow = CUSTOMERS.filter(c=>c.tag==='ค้างติดตาม').length;
  const FILTERS=[{k:'all',label:'ทั้งหมด'},{k:'ครบกำหนด',label:'ครบกำหนด'},{k:'ค้างติดตาม',label:'ค้างติดตาม'},{k:'gap',label:'ขาดความคุ้มครอง'}];
  const list = CUSTOMERS.filter(c=>{
    if(q && !c.name.includes(q)) return false;
    if(filter==='gap') return gaps(c).length>0;
    if(filter==='ครบกำหนด'||filter==='ค้างติดตาม') return c.tag===filter;
    return true;
  });
  const followList = CUSTOMERS.filter(c=>c.tag);
  return (
    <div className="screen">
      <StatusBar/>
      <div className="scroll">
        <div className="pad maxw" style={{paddingTop:18}}>
          {/* hero */}
          <div className="flexrow" style={{gap:12}}>
            <div>
              <div style={{fontSize:14,color:'var(--muted)',fontWeight:600}}>สวัสดีตอนเช้า 👋</div>
              <div style={{fontSize:26,fontWeight:800,letterSpacing:'-.02em',marginTop:2}}>{AGENT.name}</div>
            </div>
            <div className="spacer"/>
            <div style={{position:'relative',width:300,maxWidth:'42vw'}}>
              <Icon name="search" size={19} c="var(--muted-2)" style={{position:'absolute',left:15,top:15}}/>
              <input className="input" style={{paddingLeft:46,height:48}} placeholder="ค้นหาลูกค้า…" value={q} onChange={e=>setQ(e.target.value)}/>
            </div>
            <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>

          {/* KPI row */}
          <div className="grid3 stagger" style={{marginTop:20}}>
            <KPI icon="users" val={CUSTOMERS.length} label="ลูกค้าทั้งหมด" color="#1e40af" bg="var(--navy-50)"/>
            <KPI icon="clock" val={due} label="ครบกำหนด" color="#f59e0b" bg="var(--warn-50)"/>
            <KPI icon="alert" val={follow} label="ค้างติดตาม" color="#dc2626" bg="var(--danger-50)"/>
          </div>

          {/* two-column body */}
          <div className="cols c-2" style={{marginTop:20}}>
            {/* left: customer list */}
            <div className="card" style={{padding:'8px 20px 12px'}}>
              <div className="flexrow" style={{padding:'12px 2px 10px'}}>
                <div style={{fontSize:18,fontWeight:700}}>รายชื่อลูกค้า</div>
                <div className="spacer"/>
                <span className="chip gray">{list.length} คน</span>
              </div>
              <div className="chip-scroll" style={{paddingBottom:10}}>
                {FILTERS.map(f=>(
                  <button key={f.k} className={"fchip"+(filter===f.k?" on":"")} onClick={()=>setFilter(f.k)}>{f.label}</button>
                ))}
              </div>
              <div style={{borderTop:'1px solid var(--line-2)'}}>
                {list.map(c=>{
                  const np=c.policies.length; const g=gaps(c).length;
                  return (
                    <button key={c.id} className="row" style={{width:'100%',textAlign:'left'}} onClick={()=>go('customer',{id:c.id})}>
                      <Avatar name={c.name} color={c.avatar}/>
                      <div className="r-main">
                        <div className="r-name">{c.name}</div>
                        <div className="r-sub">{c.job} · อายุ {ageFrom(c.birth)} ปี · {c.phone}</div>
                      </div>
                      {c.tag && <span className={"chip "+(c.tag==='ครบกำหนด'?'warn':'danger')} style={{height:28}}>{c.tag}</span>}
                      <div className="r-meta" style={{display:'flex',alignItems:'center',gap:10,marginLeft:6}}>
                        <div style={{textAlign:'right',minWidth:78}}>
                          <div style={{fontSize:15,fontWeight:700}} className="navy-t">{np} กรมธรรม์</div>
                          {g>0 ? <div style={{fontSize:12,color:'var(--gold-600)',fontWeight:600,marginTop:1}}>ขาด {g} หมวด</div>
                               : <div style={{fontSize:12,color:'var(--ok)',fontWeight:600,marginTop:1}}>คุ้มครองครบ</div>}
                        </div>
                        <Icon name="chevR" size={20} c="var(--muted-2)"/>
                      </div>
                    </button>
                  );
                })}
                {list.length===0 && <div className="center muted" style={{padding:30}}>ไม่พบลูกค้า</div>}
              </div>
            </div>

            {/* right rail */}
            <div className="stack" style={{gap:16}}>
              <button className="navy-panel" style={{textAlign:'left',border:'none'}} onClick={()=>go('addCustomer')}>
                <div className="glow"/>
                <div style={{width:44,height:44,borderRadius:13,background:'rgba(255,255,255,.16)',display:'flex',alignItems:'center',justifyContent:'center'}}><Icon name="plusUser" size={24} c="#fff"/></div>
                <div style={{fontSize:18,fontWeight:700,marginTop:14}}>เพิ่มลูกค้า</div>
                <div style={{fontSize:12.5,color:'rgba(255,255,255,.7)',marginTop:2}}>พร้อมขอความยินยอม PDPA</div>
              </button>
              <button onClick={()=>go('addPolicy',{})} style={{textAlign:'left',background:'linear-gradient(150deg,#fcd34d,var(--gold))',borderRadius:24,padding:22,position:'relative',overflow:'hidden'}}>
                <div style={{width:44,height:44,borderRadius:13,background:'rgba(91,61,5,.16)',display:'flex',alignItems:'center',justifyContent:'center'}}><Icon name="plusDoc" size={24} c="#5b3d05"/></div>
                <div style={{fontSize:18,fontWeight:700,marginTop:14,color:'#5b3d05'}}>เพิ่มกรมธรรม์</div>
                <div style={{fontSize:12.5,color:'#7a5410',marginTop:2}}>สแกนหรือกรอกข้อมูลเอง</div>
              </button>

              <div className="card" style={{padding:'16px 18px'}}>
                <div className="flexrow" style={{marginBottom:6}}>
                  <div style={{fontSize:16,fontWeight:700}}>ต้องติดตามวันนี้</div>
                  <div className="spacer"/><span className="chip warn" style={{height:26}}>{followList.length}</span>
                </div>
                <div>
                  {followList.map(c=>(
                    <button key={c.id} className="row" style={{width:'100%',textAlign:'left',padding:'11px 0'}} onClick={()=>go('customer',{id:c.id})}>
                      <Avatar name={c.name} color={c.avatar} size="sm"/>
                      <div className="r-main"><div className="r-name" style={{fontSize:15}}>{c.name}</div><div className="r-sub">{c.tag}</div></div>
                      <Icon name="chevR" size={18} c="var(--muted-2)"/>
                    </button>
                  ))}
                  {followList.length===0 && <div className="muted center" style={{padding:'14px 0',fontSize:13.5}}>ไม่มีงานค้าง 🎉</div>}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

// ---------- กรมธรรม์: all policies + filters ----------
const PoliciesScreen = ({go}) => {
  const [co,setCo]=useStateH('all');
  const [status,setStatus]=useStateH('all');
  const all=[]; CUSTOMERS.forEach(c=>c.policies.forEach(p=>all.push({...p,cust:c})));
  const usedCo=COMPANIES.filter(x=>all.some(p=>p.co===x.id));
  const statusOf=p=> p.cust.tag==='ครบกำหนด' ? 'due' : 'active';
  const filtered=all.filter(p=>{
    if(co!=='all' && p.co!==co) return false;
    if(status!=='all' && statusOf(p)!==status) return false;
    return true;
  });
  const totalSum = filtered.reduce((s,p)=>s+p.sum,0);
  const totalPrem = filtered.reduce((s,p)=>s+p.premium,0);
  return (
    <div className="screen">
      <StatusBar/>
      <AppBar title="กรมธรรม์" sub={`${all.length} ฉบับในพอร์ต`} right={<div style={{display:'flex',gap:10}}><button className="iconbtn" onClick={()=>go('addPolicy',{})}><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="scroll">
        <div className="pad read-col" style={{paddingTop:4}}>
          <div className="navy-panel stagger" style={{display:'flex',gap:0}}>
            <div className="glow"/>
            <div style={{flex:1}}>
              <div style={{fontSize:13,color:'rgba(255,255,255,.7)'}}>ทุนประกันรวม</div>
              <div style={{fontSize:26,fontWeight:800,marginTop:3}}>{THBshort(totalSum)}</div>
            </div>
            <div style={{width:1,background:'rgba(255,255,255,.18)',margin:'2px 18px'}}/>
            <div style={{flex:1}}>
              <div style={{fontSize:13,color:'rgba(255,255,255,.7)'}}>เบี้ยรวม/ปี</div>
              <div style={{fontSize:26,fontWeight:800,marginTop:3}}>{THBshort(totalPrem)}</div>
            </div>
          </div>

          {/* filters */}
          <div style={{marginTop:16}}>
            <div className="chip-scroll">
              <button className={"fchip"+(co==='all'?" on":"")} onClick={()=>setCo('all')}>ทุกบริษัท</button>
              {usedCo.map(x=>(<button key={x.id} className={"fchip"+(co===x.id?" on":"")} onClick={()=>setCo(x.id)}>{x.name}</button>))}
            </div>
            <div className="chip-scroll" style={{marginTop:8}}>
              {[{k:'all',l:'ทุกสถานะ'},{k:'active',l:'ใช้งาน'},{k:'due',l:'ใกล้ครบกำหนด'}].map(s=>(
                <button key={s.k} className={"fchip"+(status===s.k?" on":"")} onClick={()=>setStatus(s.k)}>{s.l}</button>
              ))}
            </div>
          </div>

          <div className="card" style={{marginTop:14,padding:'4px 18px'}}>
            {filtered.map(p=>{
              const co2=COMPANIES.find(c=>c.id===p.co); const st=statusOf(p);
              return (
                <button key={p.id} className="row" style={{width:'100%',textAlign:'left'}} onClick={()=>go('policy',{cid:p.cust.id,pid:p.id})}>
                  <CompanyBadge co={co2}/>
                  <div className="r-main">
                    <div className="r-name">{p.plan} · {co2.name}</div>
                    <div className="r-sub">{p.cust.name} · เลขที่ {maskPolicy(p.no)}</div>
                  </div>
                  {st==='due' && <span className="chip warn" style={{height:28}}>ใกล้ครบ</span>}
                  <div className="r-meta" style={{marginLeft:8}}>
                    <div style={{fontSize:15,fontWeight:700}}>{THBshort(p.sum)}</div>
                    <div style={{fontSize:12,color:'var(--muted)',marginTop:1}}>{THB(p.premium)}/ปี</div>
                  </div>
                </button>
              );
            })}
            {filtered.length===0 && <div className="center muted" style={{padding:30}}>ไม่พบกรมธรรม์ตามตัวกรอง</div>}
          </div>
        </div>
      </div>
    </div>
  );
};

// ---------- รายงาน: KPIs + charts + pipeline + ranking ----------
const BarChart = ({data, color='var(--navy-700)', h=120}) => {
  const max=Math.max(...data.map(d=>d.v));
  return (
    <div style={{display:'flex',alignItems:'flex-end',gap:10,height:h}}>
      {data.map((d,i)=>(
        <div key={i} style={{flex:1,display:'flex',flexDirection:'column',alignItems:'center',gap:7,height:'100%',justifyContent:'flex-end'}}>
          <div style={{width:'100%',maxWidth:34,height:Math.max(6,d.v/max*(h-26)),borderRadius:'8px 8px 3px 3px',
            background:i===data.length-1?'linear-gradient(180deg,var(--gold),var(--gold-600))':'linear-gradient(180deg,var(--navy-600),var(--navy-800))'}}/>
          <span style={{fontSize:11.5,color:'var(--muted)',fontWeight:600}}>{d.l}</span>
        </div>
      ))}
    </div>
  );
};

const ReportsScreen = ({go, toast}) => {
  const ranked=[...CUSTOMERS].map(c=>({c,p:pyramidFor(c)})).sort((a,b)=>b.p.score-a.p.score);
  const totalPrem=CUSTOMERS.reduce((s,c)=>s+c.policies.reduce((a,p)=>a+p.premium,0),0);
  const due=CUSTOMERS.filter(c=>c.tag==='ครบกำหนด').length;
  const premSeries=[{l:'ม.ค.',v:62},{l:'ก.พ.',v:71},{l:'มี.ค.',v:80},{l:'เม.ย.',v:76},{l:'พ.ค.',v:88},{l:'มิ.ย.',v:96}];
  const pipeline=[{l:'ใหม่',v:4,c:'#64748b'},{l:'ติดต่อ',v:3,c:'#2547c4'},{l:'นำเสนอ',v:2,c:'#7c3aed'},{l:'ยื่นข้อเสนอ',v:2,c:'#f59e0b'},{l:'ปิดได้',v:3,c:'#16a34a'}];
  const pipeMax=Math.max(...pipeline.map(s=>s.v));
  return (
    <div className="screen">
      <StatusBar/>
      <AppBar title="รายงาน" 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}}>
          {/* KPI cards */}
          <div className="grid2 stagger" style={{gridTemplateColumns:'repeat(4,1fr)'}}>
            <KPI icon="users" val={CUSTOMERS.length} label="ลูกค้าในพอร์ต (active)" color="#0d9488" bg="#effdfa"/>
            <KPI icon="wallet" val={THBshort(totalPrem)} label="เบี้ยรวม/ปี" color="#1e40af" bg="var(--navy-50)"/>
            <KPI icon="refresh" val="94%" label="อัตราต่ออายุ" color="#7c3aed" bg="#f5f3ff"/>
            <KPI icon="clock" val={due} label="ครบกำหนด" color="#f59e0b" bg="var(--warn-50)"/>
          </div>

          <div className="cols c-2" style={{marginTop:16}}>
            {/* premium chart */}
            <div className="card">
              <div className="card-h"><div><div className="ch-title">ยอดเบี้ยรับรายเดือน</div><div className="ch-sub">หน่วย: หมื่นบาท · 6 เดือนล่าสุด</div></div><div className="spacer"/><span className="chip ok"><Icon name="chart" size={13}/> +18%</span></div>
              <BarChart data={premSeries}/>
            </div>
            {/* pipeline */}
            <div className="card">
              <div className="card-h"><div className="ch-title">Sales Pipeline</div><div className="spacer"/><button className="chip" onClick={()=>go('pipeline',{})}>เปิดบอร์ด</button></div>
              <div className="stack" style={{gap:12}}>
                {pipeline.map((s,i)=>(
                  <div key={i}>
                    <div className="flexrow" style={{marginBottom:6,fontSize:13.5}}><span style={{fontWeight:600}}>{s.l}</span><div className="spacer"/><b>{s.v} ดีล</b></div>
                    <div className="progress" style={{height:8}}><i style={{width:(s.v/pipeMax*100)+'%',background:s.c}}/></div>
                  </div>
                ))}
              </div>
            </div>
          </div>

          {/* ranking */}
          <div className="flexrow" style={{margin:'22px 2px 12px'}}>
            <div style={{fontSize:18,fontWeight:700}}>พีระมิดการเงินรายลูกค้า</div>
          </div>
          <div className="card" style={{padding:'4px 18px'}}>
            {ranked.map(({c,p})=>(
              <button key={c.id} className="row" style={{width:'100%',textAlign:'left'}} onClick={()=>go('pyramid',{id:c.id})}>
                <Avatar name={c.name} color={c.avatar} size="sm"/>
                <div className="r-main">
                  <div className="r-name">{c.name}</div>
                  <div className="r-sub">{p.gaps>0?`ขาด ${p.gaps} หมวด`:'ความคุ้มครองครบถ้วน'}</div>
                </div>
                <div style={{width:90}}>
                  <div className="progress" style={{height:7}}><i style={{width:p.score+'%',background:p.score>=60?'linear-gradient(90deg,#16a34a,#22c55e)':p.score>=40?'linear-gradient(90deg,#f59e0b,#fbbf24)':'linear-gradient(90deg,#dc2626,#f87171)'}}/></div>
                </div>
                <div style={{width:38,textAlign:'right',fontWeight:800,fontSize:16}} className="navy-t">{p.score}</div>
                <Icon name="chevR" size={18} c="var(--muted-2)"/>
              </button>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

// ---------- ฉัน: profile + Billing ----------
const MeScreen = ({go}) => {
  const items=[
    {i:'user',t:'ข้อมูลส่วนตัว',s:'แก้ไขโปรไฟล์และใบอนุญาต'},
    {i:'shield',t:'ความเป็นส่วนตัว & PDPA',s:'จัดการความยินยอมของลูกค้า'},
    {i:'bell',t:'การแจ้งเตือน',s:'ครบกำหนด · ติดตามงาน'},
    {i:'sliders',t:'ตั้งค่าแอป',s:'ภาษา · การแสดงผล'},
    {i:'info',t:'ช่วยเหลือ & ติดต่อ',s:'คู่มือการใช้งาน'},
  ];
  const receipts=[
    {d:'15 มิ.ย. 2568',a:990},{d:'15 พ.ค. 2568',a:990},{d:'15 เม.ย. 2568',a:990},
  ];
  return (
    <div className="screen">
      <StatusBar/>
      <div className="scroll">
        <div className="pad maxw">
          <div className="cols c-2" style={{alignItems:'start'}}>
            <div className="stack" style={{gap:16}}>
              <div className="navy-panel" style={{display:'flex',alignItems:'center',gap:16}}>
                <div className="glow"/>
                <div className="avatar lg" style={{background:'rgba(255,255,255,.16)',fontSize:26}}>{initials(AGENT.name.split(' ')[1]||AGENT.name)}</div>
                <div>
                  <div style={{fontSize:21,fontWeight:800}}>{AGENT.name}</div>
                  <div style={{fontSize:13.5,color:'rgba(255,255,255,.8)',marginTop:2}}>{AGENT.title} · {AGENT.code}</div>
                  <span className="chip gold" style={{marginTop:8,height:26}}><Icon name="star" size={13}/> ระดับ Platinum</span>
                </div>
              </div>
              <div className="card" style={{padding:'4px 18px'}}>
                {items.map(it=>(
                  <button key={it.t} className="row" style={{width:'100%',textAlign:'left'}}>
                    <div className="iconbtn" style={{boxShadow:'none',background:'var(--navy-50)',color:'var(--navy-800)'}}><Icon name={it.i} size={22}/></div>
                    <div className="r-main"><div className="r-name" style={{fontSize:16}}>{it.t}</div><div className="r-sub">{it.s}</div></div>
                    <Icon name="chevR" size={19} c="var(--muted-2)"/>
                  </button>
                ))}
              </div>
              <button className="btn btn-soft block" style={{color:'var(--danger)'}} onClick={()=>go('login')}><Icon name="logout" size={20}/> ออกจากระบบ</button>
            </div>

            {/* Billing */}
            <div className="stack" style={{gap:16}}>
              <div className="card" style={{padding:0,overflow:'hidden'}}>
                <div style={{background:'linear-gradient(135deg,#1e3a8a,#2547c4)',padding:'20px 20px 18px',color:'#fff',position:'relative',overflow:'hidden'}}>
                  <div style={{position:'absolute',right:-30,top:-40,width:160,height:160,borderRadius:'50%',background:'radial-gradient(circle,rgba(251,191,36,.3),transparent 70%)'}}/>
                  <div className="flexrow"><span className="chip gold" style={{height:26}}>แพ็กเกจปัจจุบัน</span><div className="spacer"/><Icon name="star" size={20} c="var(--gold)"/></div>
                  <div style={{fontSize:25,fontWeight:800,marginTop:12}}>Covera Pro</div>
                  <div style={{display:'flex',alignItems:'baseline',gap:4,marginTop:2}}><span style={{fontSize:22,fontWeight:800,color:'var(--gold)'}}>฿990</span><span style={{fontSize:13,color:'rgba(255,255,255,.7)'}}>/ เดือน</span></div>
                  <div style={{fontSize:12.5,color:'rgba(255,255,255,.75)',marginTop:10,display:'flex',alignItems:'center',gap:6}}><Icon name="refresh" size={14}/> ต่ออายุอัตโนมัติ 15 ก.ค. 2568</div>
                </div>
                <div style={{padding:'16px 20px'}}>
                  <div className="flexrow" style={{fontSize:13.5,marginBottom:8}}><span className="muted">ลูกค้าที่ใช้งาน</span><div className="spacer"/><b>{CUSTOMERS.length} / 100</b></div>
                  <div className="progress" style={{height:8}}><i style={{width:(CUSTOMERS.length)+'%'}}/></div>
                  <div className="grid2" style={{marginTop:14,gap:10}}>
                    <button className="btn btn-primary" onClick={()=>go('billing')}><Icon name="star" size={18}/> อัปเกรด</button>
                    <button className="btn btn-outline" onClick={()=>go('billing')}>จัดการแพ็กเกจ</button>
                  </div>
                </div>
              </div>

              <div className="card" style={{padding:'8px 18px 10px'}}>
                <div className="flexrow" style={{padding:'10px 2px 6px'}}><div style={{fontSize:16,fontWeight:700}}>ใบเสร็จล่าสุด</div><div className="spacer"/><span className="chip gray">ชำระแล้ว</span></div>
                <div style={{borderTop:'1px solid var(--line-2)'}}>
                  {receipts.map((r,i)=>(
                    <div key={i} className="row" style={{padding:'12px 0'}}>
                      <div className="iconbtn" style={{boxShadow:'none',background:'var(--ok-50)',color:'var(--ok)'}}><Icon name="checkCircle" size={20}/></div>
                      <div className="r-main"><div className="r-name" style={{fontSize:15}}>Covera Pro</div><div className="r-sub">{r.d}</div></div>
                      <b style={{fontSize:14.5}}>{THB(r.a)}</b>
                      <button className="iconbtn ghost" style={{width:36,height:36}} onClick={()=>{}}><Icon name="download" size={18} c="var(--muted)"/></button>
                    </div>
                  ))}
                </div>
              </div>
              <div className="center muted" style={{fontSize:12.5}}>Covera v1.0 · เดโม</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { AGENT, BarChart, Dashboard, PoliciesScreen, ReportsScreen, MeScreen });