/* =========================================================================
   screens-extra.jsx — Worker Profile, Site Detail, Work Stats (analytics)
   ========================================================================= */

/* ====================== WORKER PROFILE ====================== */
function WorkerProfile({ workerId, back, onEdit, openSlip }){
  const { db } = useDB();
  const w = db.workers.find(x=>x.id===workerId);
  if(!w) return <div data-screen><Empty title="ไม่พบคนงาน" action={<Button onClick={back}>กลับ</Button>}/></div>;
  const s = workerStats(db, workerId);
  const dThis = s.byPeriod[0]?.p;

  const tone = s.diligence>=90?'ok':s.diligence>=75?'warn':'bad';
  const toneText = { ok:'text-ok', warn:'text-warn', bad:'text-bad' }[tone];
  const dilLabel = s.diligence>=90?'ขยันมาก':s.diligence>=75?'ปานกลาง':'ควรติดตาม';

  const taskRows = Object.entries(s.taskDays).map(([id,days])=>({ t:workTypeById(id), days })).filter(x=>x.t).sort((a,b)=>b.days-a.days);
  const maxTask = Math.max(1,...taskRows.map(r=>r.days));

  return (
    <div data-screen className="space-y-6">
      <button onClick={back} className="tap text-haze hover:text-chalk flex items-center gap-1.5 text-sm"><Icon name="arrow" size={16} className="rotate-180"/>กลับไปรายชื่อคนงาน</button>

      {/* header */}
      <Card className="relative overflow-hidden grain">
        <div className="absolute top-0 left-0 right-0 h-1.5 brand-strip opacity-80"></div>
        <div className="flex flex-col sm:flex-row sm:items-center gap-5">
          <Avatar name={w.name} photo={w.photo} size={88}/>
          <div className="flex-1 min-w-0">
            <div className="flex items-center gap-2 flex-wrap">
              <h1 className="font-display font-extrabold text-2xl">{w.name}{w.nickname && <span className="text-haze font-semibold text-xl"> ({w.nickname})</span>}</h1>
              <TypeBadge type={w.type}/>
              {w.bankAccount && <Badge tone="haze"><Icon name="money" size={11}/>จ่ายโอน</Badge>}
            </div>
            <div className="text-haze text-sm mt-1.5 flex flex-wrap items-center gap-x-4 gap-y-1">
              <span className="num">{w.code}</span>
              <span>{w.group||'—'}</span>
              {w.phone && <span className="flex items-center gap-1 num"><Icon name="phone" size={13}/>{w.phone}</span>}
              {w.startDate && <span className="flex items-center gap-1"><Icon name="calendar" size={13}/>เริ่มงาน {thaiDate(w.startDate)}</span>}
              {w.nationalId && <span className="flex items-center gap-1 num"><Icon name="user" size={13}/>บัตร ปชช. {w.nationalId}</span>}
              {w.idCard && <button onClick={()=>{ const win=window.open(); if(win) win.document.write('<img src="'+w.idCard+'" style="max-width:100%"/>'); }} className="tap flex items-center gap-1 text-brand hover:underline"><Icon name="slip" size={13}/>ดูสำเนาบัตร</button>}
            </div>
            <div className="text-sm mt-2 num">
              อัตรา <span className="text-chalk font-semibold">{w.type==='daily'?`${baht(w.dailyRate,0)}/วัน`:`${baht(w.monthlyRate,0)}/เดือน`}</span>
              {w.otRate>0 && <span className="text-haze"> · OT {baht(w.otRate,0)}/ชม.</span>}
              {w.bankAccount && <span className="text-haze"> · {w.bankName} {w.bankAccount}</span>}
            </div>
          </div>
          <div className="flex sm:flex-col gap-2">
            <Button variant="dark" icon="edit" onClick={()=>onEdit(w)}>แก้ไข</Button>
            {dThis && <Button icon="slip" onClick={()=>openSlip(w.id, s.byPeriod[0].period)}>ออกสลิป</Button>}
          </div>
        </div>
      </Card>

      {/* stat cards */}
      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
        <Card className="relative overflow-hidden">
          <div className="text-[13px] text-haze font-medium">คะแนนความขยัน</div>
          <div className={`font-display font-bold text-3xl mt-1.5 num ${toneText}`}>{s.diligence}%</div>
          <div className="mt-2"><Progress value={s.diligence} max={100} tone={tone==='ok'?'ok':'hazard'}/></div>
          <div className="text-xs text-haze mt-1.5">{dilLabel} · มาต่อเนื่องสูงสุด {s.bestStreak} วัน</div>
        </Card>
        <Stat label="มาทำงานสะสม" value={`${num(s.dayUnits,1)}`} sub={`เต็มวัน ${s.full} · ครึ่งวัน ${s.half}`} icon="check" tone="ok"/>
        <Stat label="ขาดงานสะสม" value={num(s.absent)} sub={`จาก ${s.logged} วันที่ลงเวลา`} icon="warn" tone={s.absent>3?'bad':'chalk'}/>
        <Stat label="OT สะสม" value={`${num(s.otHours)} ชม.`} sub={`รายได้สะสม ${baht(s.lifetimeNet,0)}`} icon="bolt" tone="hazard"/>
      </div>

      <div className="grid lg:grid-cols-2 gap-6">
        {/* work type breakdown */}
        <Card>
          <h2 className="font-display font-bold text-lg mb-1">ความถนัด / ประเภทงานที่ทำ</h2>
          <p className="text-haze text-sm mb-4">สะสมจากการลงเวลาทั้งหมด (man-days)</p>
          {taskRows.length===0 ? <div className="text-haze text-sm">ยังไม่มีข้อมูลประเภทงาน</div> : (
            <div className="space-y-3">
              {taskRows.slice(0,8).map(({t,days})=>{
                const g = WORK_GROUPS.find(x=>x.key===t.group);
                return (
                  <div key={t.id}>
                    <div className="flex items-center justify-between text-sm mb-1">
                      <span className="flex items-center gap-2 min-w-0"><Badge tone={g?.tone||'haze'}>{g?.th}</Badge><span className="truncate">{t.name}</span></span>
                      <span className="num text-haze shrink-0">{num(days,1)} วัน</span>
                    </div>
                    <Progress value={days} max={maxTask} tone="brand" height={6}/>
                  </div>
                );
              })}
            </div>
          )}
        </Card>

        {/* period history */}
        <Card pad={false}>
          <div className="p-5 pb-3"><h2 className="font-display font-bold text-lg">ประวัติรายงวด</h2><p className="text-haze text-sm">ย้อนหลังตามงวดการจ่าย</p></div>
          <div className="overflow-x-auto">
            <table className="w-full text-sm">
              <thead><tr className="text-left text-haze border-y border-line">
                <th className="font-medium px-5 py-2.5">งวด</th>
                <th className="font-medium px-3 py-2.5 text-center">วัน</th>
                <th className="font-medium px-3 py-2.5 text-center">ขาด</th>
                <th className="font-medium px-5 py-2.5 text-right">สุทธิ</th>
                <th className="px-2"></th>
              </tr></thead>
              <tbody>
                {s.byPeriod.length===0 && <tr><td colSpan={5} className="px-5 py-6 text-center text-haze">ยังไม่มีประวัติ</td></tr>}
                {s.byPeriod.map(({period,p})=>(
                  <tr key={period.id} className="border-b border-line/60 hover:bg-white/[0.02]">
                    <td className="px-5 py-2.5"><div className="font-medium">{period.label.replace('งวดตัด ','ตัด ')}</div><div className="text-xs text-haze num">{period.range}</div></td>
                    <td className="px-3 py-2.5 text-center num">{num(p.dayUnits,1)}</td>
                    <td className="px-3 py-2.5 text-center num">{p.daysAbsent>0?<span className="text-bad">{p.daysAbsent}</span>:'—'}</td>
                    <td className="px-5 py-2.5 text-right num font-semibold text-brand">{baht(p.net,0)}</td>
                    <td className="px-2 py-2.5"><button onClick={()=>openSlip(w.id, period)} className="tap p-1.5 text-haze hover:text-brand" title="ออกสลิป"><Icon name="slip" size={16}/></button></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </Card>
      </div>
    </div>
  );
}

/* ====================== SITE DETAIL ====================== */
function SiteDetail({ siteId, back }){
  const { db } = useDB();
  const s = db.sites.find(x=>x.id===siteId);
  if(!s) return <div data-screen><Empty title="ไม่พบไซต์งาน" action={<Button onClick={back}>กลับ</Button>}/></div>;
  const st = SITE_TYPE[s.type||'construction'];
  const toneText = { brand:'text-brand', hazard:'text-hazard', ok:'text-ok' }[st.tone];
  const all = siteAllPeriods(db, siteId, 8);
  const maxP = Math.max(1, ...all.rows.map(r=>r.total));
  const period = currentPeriod();
  const used = all.rows[0]?.total || 0;
  const budget = s.budget||0;
  const over = budget>0 && used>budget;
  const tasks = workTypeStats(db, period, siteId);
  const maxTaskCost = Math.max(1, ...tasks.map(t=>t.cost));

  // workers currently in site (this period)
  const inSite = {};
  for(const w of db.workers){
    const p = computePayroll(db, w.id, period);
    if(p.bySite[siteId] && p.bySite[siteId].days>0) inSite[w.id] = { w, days:p.bySite[siteId].days, cost:p.bySite[siteId].base+p.bySite[siteId].ot };
  }
  const siteWorkers = Object.values(inSite).sort((a,b)=>b.cost-a.cost);

  return (
    <div data-screen className="space-y-6">
      <button onClick={back} className="tap text-haze hover:text-chalk flex items-center gap-1.5 text-sm"><Icon name="arrow" size={16} className="rotate-180"/>กลับไปไซต์งาน</button>

      <Card className="relative overflow-hidden">
        <div className="absolute top-0 left-0 right-0 h-1.5 brand-strip opacity-80"></div>
        <div className="flex flex-col sm:flex-row sm:items-center gap-4">
          <div className={`w-16 h-16 rounded-xl bg-white/5 border border-line flex items-center justify-center shrink-0 ${toneText}`}><Icon name={st.icon} size={30}/></div>
          <div className="flex-1 min-w-0">
            <div className="flex items-center gap-2 flex-wrap">
              <h1 className="font-display font-extrabold text-2xl">{s.name}</h1>
              <Badge tone={st.tone}>{st.th}</Badge>
              <Badge tone={s.active?'ok':'haze'}>{s.active?'เปิด':'ปิด'}</Badge>
            </div>
            <div className="text-haze text-sm mt-1 flex flex-wrap gap-x-4 gap-y-1">
              <span className="num">{s.code}</span>
              <span className="flex items-center gap-1"><Icon name="pin" size={13}/>{s.location||'—'}</span>
            </div>
          </div>
        </div>
      </Card>

      {/* budget */}
      <div className="grid lg:grid-cols-3 gap-4">
        <Card className="lg:col-span-2">
          <div className="flex items-center justify-between mb-3">
            <h2 className="font-display font-bold text-lg">งบค่าแรง vs ใช้จริง (งวดนี้)</h2>
            <span className="text-sm text-haze">{period.label}</span>
          </div>
          {budget>0 ? (
            <>
              <div className="flex items-end justify-between mb-2">
                <div><div className="text-xs text-haze">ใช้จริง</div><div className={`num font-display font-bold text-3xl ${over?'text-bad':'text-brand'}`}>{baht(used,0)}</div></div>
                <div className="text-right"><div className="text-xs text-haze">งบลิมิต</div><div className="num font-display font-semibold text-lg">{baht(budget,0)}</div></div>
              </div>
              <Progress value={used} max={budget} height={12}/>
              <div className={`mt-2 text-sm flex items-center gap-1.5 ${over?'text-bad':'text-haze'}`}>
                {over ? <><Icon name="warn" size={15}/>เกินงบ {baht(used-budget,0)} ({Math.round(used/budget*100)}%)</> : <>คงเหลือ {baht(budget-used,0)} · ใช้ไป {Math.round(used/budget*100)}%</>}
              </div>
            </>
          ) : <div className="text-haze text-sm py-4">ไซต์นี้ยังไม่ได้ตั้งงบลิมิต — แก้ไขที่หน้าไซต์งานเพื่อเปิดการเตือนงบ</div>}
        </Card>
        <Card>
          <div className="text-[13px] text-haze font-medium">ค่าแรงรวมทุกงวด (8 งวดล่าสุด)</div>
          <div className="num font-display font-bold text-3xl mt-1.5 text-brand">{baht(all.total,0)}</div>
          <div className="text-xs text-haze mt-1">รวมทุกงวดที่มีการลงเวลา</div>
          <div className="mt-3 pt-3 border-t border-line text-sm flex justify-between"><span className="text-haze">คนงานงวดนี้</span><span className="num font-semibold">{siteWorkers.length} คน</span></div>
        </Card>
      </div>

      {/* per-period bars */}
      <Card>
        <h2 className="font-display font-bold text-lg mb-4">ค่าแรงรายงวด (ตัดวิก)</h2>
        <div className="flex items-end gap-2 sm:gap-3 h-48">
          {[...all.rows].reverse().map(r=>{
            const h = (r.total/maxP)*100;
            return (
              <div key={r.period.id} className="flex-1 flex flex-col items-center gap-2 min-w-0">
                <div className="num text-[10px] text-haze">{r.total>0?baht(r.total,0).replace('฿\u202f',''):''}</div>
                <div className="w-full bg-ink rounded-t-md relative flex-1 flex items-end" style={{minHeight:4}}>
                  <div className="w-full rounded-t-md bg-gradient-to-t from-brand-deep to-brand transition-all" style={{height:`${Math.max(h,2)}%`}}></div>
                </div>
                <div className="text-[10px] text-haze text-center leading-tight">{r.period.cutDate.slice(8)}/{TH_MONTHS_SHORT[parseYMD(r.period.cutDate).getMonth()]}</div>
              </div>
            );
          })}
        </div>
      </Card>

      <div className="grid lg:grid-cols-2 gap-6">
        {/* work types this site */}
        <Card>
          <h2 className="font-display font-bold text-lg mb-1">งานที่ทำในไซต์ (งวดนี้)</h2>
          <p className="text-haze text-sm mb-4">แยกตามประเภทงาน + ต้นทุนแรงงาน</p>
          {tasks.length===0 ? <div className="text-haze text-sm">ยังไม่มีข้อมูล</div> : (
            <div className="space-y-3">
              {tasks.map(t=>(
                <div key={t.type.id}>
                  <div className="flex items-center justify-between text-sm mb-1">
                    <span className="truncate">{t.type.name}</span>
                    <span className="num text-haze shrink-0">{num(t.manDays,1)} วัน · {baht(t.cost,0)}</span>
                  </div>
                  <Progress value={t.cost} max={maxTaskCost} tone="hazard" height={6}/>
                </div>
              ))}
            </div>
          )}
        </Card>

        {/* workers in site */}
        <Card pad={false}>
          <div className="p-5 pb-3"><h2 className="font-display font-bold text-lg">คนงานในไซต์ (งวดนี้)</h2></div>
          <div className="divide-y divide-line/60">
            {siteWorkers.length===0 && <div className="px-5 py-6 text-haze text-sm">ยังไม่มีคนงานลงเวลาในไซต์นี้</div>}
            {siteWorkers.map(({w,days,cost})=>(
              <div key={w.id} className="flex items-center gap-3 px-5 py-3">
                <Avatar name={w.name} photo={w.photo} size={36}/>
                <div className="flex-1 min-w-0"><div className="font-medium text-sm truncate">{w.name}</div><div className="text-xs text-haze">{w.group}</div></div>
                <div className="text-right shrink-0"><div className="num text-sm font-semibold">{baht(cost,0)}</div><div className="text-xs text-haze num">{num(days,1)} วัน</div></div>
              </div>
            ))}
          </div>
        </Card>
      </div>
    </div>
  );
}

/* ====================== WORK STATS (สถิติงาน) ====================== */
function WorkStats(){
  const { db } = useDB();
  const [period,setPeriod] = uS(currentPeriod());
  const [siteId,setSiteId] = uS('all');
  const rows = workTypeStats(db, period, siteId);
  const totalCost = rows.reduce((s,r)=>s+r.cost,0);
  const totalDays = rows.reduce((s,r)=>s+r.manDays,0);
  const maxCost = Math.max(1,...rows.map(r=>r.cost));

  // grouping
  const byGroup = {};
  for(const r of rows){ const g=r.type.group; (byGroup[g]=byGroup[g]||[]).push(r); }

  // attention: man-days exceed std benchmark
  const flagged = rows.filter(r=>r.vsStd!==null && r.vsStd>1.15).sort((a,b)=>b.vsStd-a.vsStd);

  return (
    <div data-screen className="space-y-6">
      <PageHead title="สถิติงาน / ประสิทธิภาพ" sub="ติดตามว่างานประเภทไหนใช้แรงงานมาก เทียบกับมาตรฐาน เพื่อจัดคนให้พอดี"
        actions={<div className="flex gap-2">
          <Select value={siteId} onChange={e=>setSiteId(e.target.value)} className="!py-2 min-w-[160px]">
            <option value="all">ทุกไซต์งาน</option>
            {db.sites.map(s=><option key={s.id} value={s.id}>{s.code} · {s.name}</option>)}
          </Select>
          <PeriodPicker value={period} onChange={setPeriod}/>
        </div>} />

      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
        <Stat strip label="ต้นทุนแรงงานรวม" value={baht(totalCost,0)} sub="ตามประเภทงานในงวดนี้" icon="money" tone="brand"/>
        <Stat label="แรงงานรวม (man-days)" value={num(totalDays,1)} sub="วันทำงานสะสม" icon="workers" tone="chalk"/>
        <Stat label="ประเภทงานที่ทำ" value={num(rows.length)} sub="ในงวด/ไซต์ที่เลือก" icon="chart" tone="hazard"/>
        <Stat label="งานช้ากว่ามาตรฐาน" value={num(flagged.length)} sub="ใช้แรงเกิน 15% ของเกณฑ์" icon="warn" tone={flagged.length>0?'bad':'ok'}/>
      </div>

      {flagged.length>0 && (
        <Card className="border-bad/30">
          <div className="flex items-center gap-2 mb-3"><div className="w-9 h-9 rounded-lg bg-bad/12 border border-bad/30 text-bad flex items-center justify-center"><Icon name="warn" size={18}/></div><h2 className="font-display font-bold text-lg">งานที่ควรปรับปรุง / จัดคนเพิ่ม</h2></div>
          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-3">
            {flagged.map(r=>(
              <div key={r.type.id} className="bg-ink border border-bad/20 rounded-lg p-3">
                <div className="text-sm font-medium truncate">{r.type.name}</div>
                <div className="flex items-end justify-between mt-1">
                  <span className="num text-bad font-display font-bold text-xl">{Math.round((r.vsStd-1)*100)}%</span>
                  <span className="text-xs text-haze num text-right">ใช้ {num(r.manDays,1)} วัน<br/>เกณฑ์ {num(r.type.std)} วัน</span>
                </div>
              </div>
            ))}
          </div>
          <div className="text-xs text-haze mt-3 flex items-start gap-2"><Icon name="warn" size={14} className="text-hazard mt-0.5 shrink-0"/>เกณฑ์มาตรฐานเป็นค่าประมาณต่อ 1 หน่วยงาน (เช่น 1 หลัง) — ใช้ดูแนวโน้มว่างานไหนกินแรงเกินปกติ ปรับจำนวนคนหรืออบรมเพิ่มทักษะได้</div>
        </Card>
      )}

      <Card pad={false}>
        <div className="overflow-x-auto">
          <table className="w-full text-sm min-w-[760px]">
            <thead><tr className="text-left text-haze border-b border-line">
              <th className="font-medium px-5 py-3">ประเภทงาน</th>
              <th className="font-medium px-3 py-3 text-center">คน</th>
              <th className="font-medium px-3 py-3 text-right">แรงงาน (วัน)</th>
              <th className="font-medium px-3 py-3 text-right">ต้นทุน</th>
              <th className="font-medium px-5 py-3 w-48">สัดส่วน / เทียบมาตรฐาน</th>
            </tr></thead>
            <tbody>
              {rows.length===0 && <tr><td colSpan={5} className="px-5 py-10 text-center text-haze">ยังไม่มีการลงเวลาในงวด/ไซต์นี้</td></tr>}
              {WORK_GROUPS.map(g=>{
                const list = byGroup[g.key]; if(!list) return null;
                return (
                  <React.Fragment key={g.key}>
                    <tr className="bg-ink/40"><td colSpan={5} className="px-5 py-1.5"><Badge tone={g.tone}>{g.th}</Badge></td></tr>
                    {list.map(r=>{
                      const slow = r.vsStd!==null && r.vsStd>1.15;
                      const ok = r.vsStd!==null && r.vsStd<=1.15;
                      return (
                        <tr key={r.type.id} className="border-b border-line/60 hover:bg-white/[0.02]">
                          <td className="px-5 py-3 font-medium">{r.type.name}</td>
                          <td className="px-3 py-3 text-center num">{r.workerCount}</td>
                          <td className="px-3 py-3 text-right num">{num(r.manDays,1)}</td>
                          <td className="px-3 py-3 text-right num font-semibold">{baht(r.cost,0)}</td>
                          <td className="px-5 py-3">
                            <Progress value={r.cost} max={maxCost} tone="brand" height={6}/>
                            {r.vsStd!==null
                              ? <div className={`text-xs mt-1 num ${slow?'text-bad':'text-ok'}`}>{slow?'ช้ากว่าเกณฑ์':'ตามเกณฑ์'} · {num(r.manDays,1)}/{num(r.type.std)} วัน</div>
                              : <div className="text-xs mt-1 text-haze">ไม่มีเกณฑ์เทียบ</div>}
                          </td>
                        </tr>
                      );
                    })}
                  </React.Fragment>
                );
              })}
            </tbody>
          </table>
        </div>
      </Card>
    </div>
  );
}

Object.assign(window, { WorkerProfile, SiteDetail, WorkStats });