/* =========================================================================
   screens-plan.jsx — วางแผนงานรายวัน (จัดคนงานลงหน้างาน)
   - ใช้รายชื่อคนงาน + หน้างาน + ประเภทงาน "เดิม" ที่มีอยู่ในระบบ (ไม่สร้างใหม่)
   - เก็บแผนในตาราง plans แยกต่างหาก — ไม่กระทบการลงเวลา/เงินเดือนจริง
   ========================================================================= */
const { useState: plS } = React;

function WorkPlanner(){
  const { db, upsertPlan, removePlan } = useDB();
  const [date, setDate] = plS(ymd(TODAY));
  const dt = parseYMD(date);
  const workers = db.workers.filter(w=>w.active);
  const plans = (db.plans||[]).filter(p=>p.date===date);
  const planMap = {}; plans.forEach(p=>{ planMap[p.workerId]=p; });

  const setField = (w, patch)=>{
    const ex = planMap[w.id];
    upsertPlan(ex ? { ...ex, ...patch } : { date, workerId:w.id, siteId:'', taskId:'', note:'', ...patch });
  };
  const clearPlan = (w)=>{ const ex=planMap[w.id]; if(ex) removePlan(ex.id); };
  const goDay = (delta)=> setDate(ymd(new Date(dt.getFullYear(),dt.getMonth(),dt.getDate()+delta)));
  const copyYesterday = ()=>{
    const prev = ymd(new Date(dt.getFullYear(),dt.getMonth(),dt.getDate()-1));
    const prevPlans = (db.plans||[]).filter(p=>p.date===prev && (p.siteId||p.taskId));
    if(prevPlans.length===0){ alert('เมื่อวานไม่มีแผนให้คัดลอก'); return; }
    if(!confirm(`คัดลอกแผนจากเมื่อวาน (${prevPlans.length} คน) มาที่ ${thaiDate(date)}?`)) return;
    prevPlans.forEach(p=> upsertPlan({ date, workerId:p.workerId, siteId:p.siteId, taskId:p.taskId, note:p.note }));
  };

  const assignedCount = plans.filter(p=>p.siteId).length;
  const activeSites = db.sites.filter(s=>s.active);
  const bySite = db.sites.map(s=>({ site:s, list: plans.filter(p=>p.siteId===s.id).map(p=>db.workers.find(w=>w.id===p.workerId)).filter(Boolean) })).filter(g=>g.list.length>0);
  const unassigned = workers.filter(w=>!planMap[w.id] || !planMap[w.id].siteId);

  return (
    <div data-screen>
      <PageHead title="วางแผนงานรายวัน" sub="จัดว่าใครไปทำงานที่ไหน/อะไร ในแต่ละวัน — ดึงรายชื่อคนงาน + หน้างานเดิม · ไม่กระทบการลงเวลาจริง"
        actions={<Button variant="dark" icon="history" onClick={copyYesterday}>คัดลอกจากเมื่อวาน</Button>} />

      {/* แถบวันที่ */}
      <Card className="mb-4">
        <div className="flex flex-wrap items-center gap-3">
          <button onClick={()=>goDay(-1)} className="tap w-9 h-9 rounded-lg bg-ink border border-line text-haze hover:text-chalk shrink-0">←</button>
          <div className="text-center min-w-[150px]">
            <div className="text-xs text-haze">{TH_DOW[dt.getDay()]} · วันที่วางแผน</div>
            <div className="font-display font-bold">{thaiDate(date)}</div>
          </div>
          <button onClick={()=>goDay(1)} className="tap w-9 h-9 rounded-lg bg-ink border border-line text-haze hover:text-chalk shrink-0">→</button>
          <Input type="date" value={date} onChange={e=>setDate(e.target.value)} className="[color-scheme:dark] !py-2 w-44"/>
          <div className="flex-1"></div>
          <Badge tone={assignedCount>0?'ok':'warn'}>จัดแล้ว {assignedCount}/{workers.length} คน</Badge>
        </div>
      </Card>

      <div className="grid lg:grid-cols-[1fr_320px] gap-6">
        {/* จัดคนงานลงหน้างาน */}
        <Card className="!p-0 overflow-hidden">
          <div className="p-4 border-b border-line font-display font-bold">จัดคนงานลงหน้างาน</div>
          {workers.length===0 ? <Empty title="ยังไม่มีคนงาน" sub="เพิ่มคนงานในหน้า 'คนงาน' ก่อน"/> : (
            <div className="divide-y divide-line/60">
              {workers.map(w=>{
                const p = planMap[w.id]||{};
                return (
                  <div key={w.id} className="flex flex-wrap items-center gap-3 px-4 py-3">
                    <div className="flex items-center gap-2 w-40 shrink-0">
                      <Avatar name={w.nickname||w.name} photo={w.photo} size={34}/>
                      <div className="min-w-0"><div className="font-medium text-sm truncate">{w.nickname||w.name}</div><div className="text-[10px] text-haze truncate">{w.group||''}</div></div>
                    </div>
                    <div className="w-44 shrink-0"><Select value={p.siteId||''} onChange={e=>setField(w,{siteId:e.target.value})} className="!py-2"><option value="">— เลือกหน้างาน —</option>{activeSites.map(s=><option key={s.id} value={s.id}>{s.name}</option>)}</Select></div>
                    <div className="w-44 shrink-0"><WorkTypeSelect value={p.taskId} onChange={v=>setField(w,{taskId:v})} className="!py-2"/></div>
                    <div className="flex-1 min-w-[140px]"><Input value={p.note||''} onChange={e=>setField(w,{note:e.target.value})} placeholder="หมายเหตุ (เช่น ไปกับรถพี่ตู่ / นัด 7 โมง)" className="!py-2 text-sm"/></div>
                    {(p.siteId||p.taskId||p.note) && <button onClick={()=>clearPlan(w)} className="tap p-2 text-haze hover:text-bad rounded shrink-0" title="ล้างแผนของคนนี้"><Icon name="trash" size={16}/></button>}
                  </div>
                );
              })}
            </div>
          )}
        </Card>

        {/* สรุปตามหน้างาน */}
        <div className="space-y-4">
          <Card>
            <div className="font-display font-bold mb-3">สรุปตามหน้างาน</div>
            {bySite.length===0 ? <div className="text-haze text-sm">ยังไม่ได้จัดใครลงหน้างาน</div> : (
              <div className="space-y-3">
                {bySite.map(g=>(
                  <div key={g.site.id} className="bg-ink border border-line rounded-lg p-3">
                    <div className="flex items-center justify-between gap-2 mb-1"><span className="font-medium text-sm">{g.site.name}</span><Badge tone="brand">{g.list.length} คน</Badge></div>
                    <div className="text-xs text-haze">{g.list.map(w=>w.nickname||w.name).join(', ')}</div>
                  </div>
                ))}
              </div>
            )}
          </Card>
          {unassigned.length>0 && (
            <Card>
              <div className="text-sm"><span className="text-haze">ยังไม่ได้จัด ({unassigned.length} คน): </span><span className="text-chalk">{unassigned.map(w=>w.nickname||w.name).join(', ')}</span></div>
            </Card>
          )}
        </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"/>
        นี่คือ "แผนล่วงหน้า" ว่าพรุ่งนี้/วันไหนใครไปทำงานที่ไหน — <b className="text-chalk font-medium">แยกจากการลงเวลาจริง</b> (หน้า "ลงเวลาเข้างาน") · ดึงรายชื่อ + หน้างานเดิมมาใช้ ไม่กระทบข้อมูลค่าแรง/เงินเดือน
      </div>
    </div>
  );
}

Object.assign(window, { WorkPlanner });