// Employee Mapping page — left: org tree showing position assignment status, right: employee list

const EmployeeMappingPage = ({ users, setUsers, positions, departments, divisions, auditLog, setAuditLog, tenant, canEdit }) => {
  const toast = useToast();
  const [selectedPos, setSelectedPos] = useState(null);
  const [selectedUser, setSelectedUser] = useState(null);
  const [filterAssign, setFilterAssign] = useState("all");
  const [filterStatus, setFilterStatus] = useState("active");
  const [divFilter, setDivFilter] = useState("");
  const [q, setQ] = useState("");
  const [warning, setWarning] = useState(null);

  const audit = (a, r, who="ธนพร อัศวิน") => setAuditLog(p => [{ id:"a"+Math.random().toString(36).slice(2,7), scope:"tenant", tenant_id:tenant.id, action:a, reason:r, performed_by:who, at: nowStamp() }, ...p]);

  // Compute assignment maps
  const assignedPosIds = useMemo(() => new Set(users.flatMap(u => u.positions)), [users]);
  const userByPos = useMemo(() => {
    const m = {};
    users.forEach(u => u.positions.forEach(pid => m[pid] = u));
    return m;
  }, [users]);

  const filteredPositions = positions.filter(p => {
    if (divFilter && p.division_id !== divFilter) return false;
    if (filterAssign === "unassigned" && assignedPosIds.has(p.id)) return false;
    if (filterAssign === "assigned" && !assignedPosIds.has(p.id)) return false;
    return true;
  });

  const filteredUsers = users.filter(u => {
    if (filterStatus !== "all" && u.status !== filterStatus) return false;
    if (q && !(u.full_name+u.email+u.employee_code).toLowerCase().includes(q.toLowerCase())) return false;
    return true;
  });

  const assign = () => {
    if (!selectedPos || !selectedUser) {
      toast({ kind:"warn", msg:"กรุณาเลือกตำแหน่งและพนักงาน" });
      return;
    }
    const existing = userByPos[selectedPos.id];
    if (existing && existing.id !== selectedUser.id) {
      setWarning({ pos: selectedPos, existing, newUser: selectedUser });
      return;
    }
    if (selectedUser.status === "inactive") {
      toast({ kind:"warn", msg:"พนักงานสถานะ Inactive ไม่สามารถผูกตำแหน่งใหม่ได้" });
      return;
    }
    performAssign(selectedUser, selectedPos);
  };

  const performAssign = (u, p, prevUser) => {
    setUsers(prev => prev.map(x => {
      if (prevUser && x.id === prevUser.id) return { ...x, positions: x.positions.filter(pid => pid !== p.id) };
      if (x.id === u.id) return { ...x, positions: [...new Set([...x.positions, p.id])] };
      return x;
    }));
    audit("create", `ผูกตำแหน่ง ${p.name} ↔ ${u.full_name}${prevUser?` (แทนที่ ${prevUser.full_name})`:""}`);
    toast({ kind:"success", msg:`ผูกตำแหน่ง ${p.name} ให้ ${u.full_name} แล้ว` });
    setSelectedPos(null);
    setSelectedUser(null);
  };

  const unassign = (u, p, reason) => {
    setUsers(prev => prev.map(x => x.id === u.id ? { ...x, positions: x.positions.filter(pid => pid !== p.id) } : x));
    audit("delete", `ยกเลิกการผูกตำแหน่ง ${p.name} ของ ${u.full_name} — ${reason}`);
    toast({ kind:"success", msg:"ยกเลิกการผูกตำแหน่งแล้ว" });
  };

  const [unassignFor, setUnassignFor] = useState(null);
  const [addEmployee, setAddEmployee] = useState(false);

  const summary = {
    totalPositions: positions.length,
    assigned: positions.filter(p => assignedPosIds.has(p.id)).length,
    unassigned: positions.filter(p => !assignedPosIds.has(p.id)).length,
    multiPos: users.filter(u => u.positions.length > 1).length,
  };

  return (
    <div className="p-6">
      <PageHeader title="Employee Mapping" subtitle="ผูกพนักงานกับตำแหน่งในผังองค์กร — หนึ่งตำแหน่งหนึ่งผู้รับผิดชอบ"
        right={canEdit ? <Button icon="plus" onClick={()=>setAddEmployee(true)}>เพิ่มพนักงานใหม่</Button> : <Badge color="slate" icon="eye">อ่านอย่างเดียว</Badge>}/>

      {!canEdit && (
        <div className="mb-4 px-4 py-2.5 rounded-xl bg-slate-50 border border-slate-200 text-slate-700 text-[12.5px] flex items-center gap-2.5">
          <Icon name="shield" size={14} className="text-slate-500"/>
          <span>คุณกำลังดูข้อมูล Employee Mapping แบบ <strong>อ่านอย่างเดียว</strong> · ติดต่อ Company Admin เพื่อขอสิทธิ์ผูก-ยกเลิกผูกตำแหน่ง</span>
        </div>
      )}

      {/* summary cards */}
      <div className="grid grid-cols-4 gap-3 mb-4">
        <KpiCard icon="network" tone="indigo" label="ตำแหน่งทั้งหมด" value={summary.totalPositions} trend={`${departments.length} แผนก`}/>
        <KpiCard icon="checkCircle" tone="emerald" label="มีผู้รับผิดชอบ" value={summary.assigned} trend={`${Math.round(summary.assigned/summary.totalPositions*100)}%`}/>
        <KpiCard icon="alert" tone="amber" label="ยังไม่มีผู้รับผิดชอบ" value={summary.unassigned} trend="ตำแหน่งว่าง"/>
        <KpiCard icon="users" tone="violet" label="พนักงานหลายตำแหน่ง" value={summary.multiPos} trend="ถือมากกว่า 1 ตำแหน่ง"/>
      </div>

      {/* Action bar */}
      <div className="bg-white rounded-2xl border border-ink-100 px-4 py-3 mb-4 flex items-center gap-3 flex-wrap">
        <div className="flex items-center gap-2 text-[12.5px] flex-wrap">
          <span className="text-ink-500">เลือกตำแหน่ง:</span>
          {selectedPos ? <PositionChip pos={selectedPos} onClear={()=>setSelectedPos(null)}/> : <Badge color="slate">ยังไม่ได้เลือก</Badge>}
          <span className="text-ink-300">+</span>
          <span className="text-ink-500">เลือกพนักงาน:</span>
          {selectedUser ? <span className="inline-flex items-center gap-1.5 px-2 py-1 bg-white border border-ink-200 rounded-lg text-[11.5px] shadow-sm"><Avatar name={selectedUser.full_name} size={18}/><span className="font-medium">{selectedUser.full_name}</span><button onClick={()=>setSelectedUser(null)} className="text-ink-400 hover:text-rose-500"><Icon name="x" size={11}/></button></span> : <Badge color="slate">ยังไม่ได้เลือก</Badge>}
        </div>
        <div className="ml-auto flex items-center gap-2">
          <Button variant="secondary" onClick={()=>{ setSelectedPos(null); setSelectedUser(null); }}>ล้าง</Button>
          <Button disabled={!selectedPos || !selectedUser || !canEdit} onClick={assign} icon="link">{canEdit ? "Assign" : "อ่านอย่างเดียว"}</Button>
        </div>
      </div>

      <div className="grid grid-cols-12 gap-4">
        {/* Left — Org tree with assignment indicator */}
        <div className="col-span-12 lg:col-span-6 bg-white rounded-2xl border border-ink-100 overflow-hidden">
          <div className="px-4 py-3 border-b border-ink-100 flex items-center gap-2 flex-wrap">
            <Icon name="network" size={14} className="text-ink-500"/>
            <div className="text-[13px] font-semibold text-ink-900">ตำแหน่งในผังองค์กร</div>
            <div className="ml-auto flex items-center gap-1.5">
              <Select value={divFilter} onChange={e=>setDivFilter(e.target.value)} className="!w-[140px]">
                <option value="">ทุก Division</option>
                {divisions.map(d => <option key={d.id} value={d.id}>{d.name}</option>)}
              </Select>
              <Segmented value={filterAssign} onChange={setFilterAssign} options={[
                { value:"all", label:"ทั้งหมด" },
                { value:"assigned", label:"มีผู้รับ" },
                { value:"unassigned", label:"ว่าง" },
              ]}/>
            </div>
          </div>
          <div className="max-h-[600px] overflow-y-auto thin-scroll p-2 space-y-3">
            {divisions.filter(div => !divFilter || div.id === divFilter).map(div => {
              const deps = departments.filter(d => d.division_id === div.id);
              return (
                <div key={div.id}>
                  <div className="text-[11px] uppercase tracking-wider text-indigo-700 font-semibold px-2 mb-1">{div.name}</div>
                  <div className="space-y-1">
                    {deps.map(dp => (
                      <div key={dp.id} className="rounded-lg border border-ink-100 bg-ink-50/40 p-2">
                        <div className="text-[11.5px] font-semibold text-ink-700 px-1 mb-1">{dp.name}</div>
                        <div className="grid grid-cols-1 gap-1">
                          {filteredPositions.filter(p => p.department_id === dp.id).map(p => {
                            const u = userByPos[p.id];
                            const sel = selectedPos?.id === p.id;
                            return (
                              <button key={p.id} onClick={()=>setSelectedPos(p)}
                                className={`flex items-center gap-2 px-2 py-1.5 rounded-md text-left transition border ${sel?"bg-brand-50 border-brand-300":"bg-white border-ink-100 hover:bg-ink-50"}`}>
                                <div className="flex-1 min-w-0">
                                  <div className="text-[12px] font-medium text-ink-900 truncate">{p.name}</div>
                                  <div className="text-[10.5px] truncate">
                                    {u ? <span className="text-emerald-700 flex items-center gap-1"><Icon name="checkCircle" size={10}/>{u.full_name}</span>
                                       : <span className="text-amber-700 flex items-center gap-1"><Icon name="alert" size={10}/>ยังไม่มีผู้รับผิดชอบ</span>}
                                  </div>
                                </div>
                                {u ? (
                                  <Badge color="emerald">Assigned</Badge>
                                ) : (
                                  <Badge color="amber">Unassigned</Badge>
                                )}
                                {u && canEdit && (
                                  <button onClick={(e)=>{ e.stopPropagation(); setUnassignFor({user:u, pos:p}); }} className="p-1 text-rose-500 hover:bg-rose-50 rounded"><Icon name="trash" size={11}/></button>
                                )}
                              </button>
                            );
                          })}
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              );
            })}
          </div>
        </div>

        {/* Right — Employee list */}
        <div className="col-span-12 lg:col-span-6 bg-white rounded-2xl border border-ink-100 overflow-hidden">
          <div className="px-4 py-3 border-b border-ink-100 flex items-center gap-2 flex-wrap">
            <Icon name="users" size={14} className="text-ink-500"/>
            <div className="text-[13px] font-semibold text-ink-900">พนักงานในบริษัท</div>
            <div className="ml-auto flex items-center gap-1.5">
              <div className="relative">
                <Icon name="search" size={12} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-ink-400"/>
                <input value={q} onChange={e=>setQ(e.target.value)} placeholder="ค้นหา…"
                  className="h-7 pl-7 pr-2 w-[150px] text-[12px] border border-ink-200 rounded-md focus:border-brand-500 ring-focus"/>
              </div>
              <Segmented value={filterStatus} onChange={setFilterStatus} options={[
                { value:"active", label:"Active" },
                { value:"inactive", label:"Inactive" },
                { value:"all", label:"All" },
              ]}/>
            </div>
          </div>
          <div className="max-h-[600px] overflow-y-auto thin-scroll divide-y divide-ink-100">
            {filteredUsers.map(u => {
              const sel = selectedUser?.id === u.id;
              const posNames = u.positions.map(pid => positions.find(p=>p.id===pid)?.name).filter(Boolean);
              return (
                <button key={u.id} onClick={()=>setSelectedUser(u)}
                  className={`w-full text-left px-3 py-2.5 transition flex items-center gap-3 ${sel?"bg-brand-50":"hover:bg-ink-50"}`}>
                  <Avatar name={u.full_name} size={32}/>
                  <div className="flex-1 min-w-0">
                    <div className="text-[12.5px] font-semibold text-ink-900 truncate">{u.full_name}</div>
                    <div className="text-[10.5px] text-ink-500 font-mono truncate">{u.employee_code} · {u.email}</div>
                    <div className="text-[10.5px] mt-0.5 truncate">
                      {posNames.length ? <span className="text-ink-600">ดำรงตำแหน่ง: {posNames.join(", ")}</span>
                                       : <span className="text-amber-600">ยังไม่ผูกตำแหน่ง</span>}
                    </div>
                  </div>
                  <div className="text-right">
                    <Badge color={u.status==="active"?"emerald":"slate"}>{u.status}</Badge>
                    {u.positions.length > 1 && <div className="text-[10px] text-violet-600 mt-1">+{u.positions.length-1} อื่นๆ</div>}
                  </div>
                </button>
              );
            })}
          </div>
        </div>
      </div>

      {/* Replace existing assignee warning */}
      <Modal open={!!warning} onClose={()=>setWarning(null)} title="ตำแหน่งนี้มีผู้รับผิดชอบอยู่แล้ว"
        subtitle="ต้องการเปลี่ยนผู้รับผิดชอบหรือไม่"
        footer={<>
          <Button variant="secondary" onClick={()=>setWarning(null)}>ยกเลิก</Button>
          <Button variant="warn" onClick={()=>{
            performAssign(warning.newUser, warning.pos, warning.existing);
            setWarning(null);
          }}>เปลี่ยนผู้รับผิดชอบ</Button>
        </>}>
        {warning && (
          <div className="space-y-3">
            <div className="rounded-lg bg-rose-50 border border-rose-100 p-3 flex items-center gap-3">
              <Avatar name={warning.existing.full_name} size={36}/>
              <div className="flex-1"><div className="text-[10px] text-rose-600 uppercase tracking-wider">ปัจจุบัน</div><div className="font-semibold text-rose-900">{warning.existing.full_name}</div><div className="text-[11px] text-rose-700">{warning.existing.email}</div></div>
            </div>
            <div className="flex items-center gap-2 text-ink-400 px-3"><Icon name="arrowDown" size={14}/></div>
            <div className="rounded-lg bg-emerald-50 border border-emerald-100 p-3 flex items-center gap-3">
              <Avatar name={warning.newUser.full_name} size={36}/>
              <div className="flex-1"><div className="text-[10px] text-emerald-600 uppercase tracking-wider">ใหม่</div><div className="font-semibold text-emerald-900">{warning.newUser.full_name}</div><div className="text-[11px] text-emerald-700">{warning.newUser.email}</div></div>
            </div>
            <div className="text-[12px] text-ink-600">ตำแหน่ง: <strong>{warning.pos.name}</strong></div>
          </div>
        )}
      </Modal>

      <ReasonModal open={!!unassignFor} onClose={()=>setUnassignFor(null)}
        onConfirm={(r)=>{ unassign(unassignFor.user, unassignFor.pos, r); setUnassignFor(null); }}
        title="ยกเลิกการผูกตำแหน่ง" subtitle={`${unassignFor?.user.full_name} ↔ ${unassignFor?.pos.name}`}
        confirmLabel="ยกเลิกการผูก" placeholder="โปรดระบุเหตุผล" tone="warn"/>

      {/* Add employee modal */}
      <AddEmployeeModal open={addEmployee} onClose={()=>setAddEmployee(false)}
        onAdd={(payload)=>{
          const newU = { id:"u"+Date.now(), positions:[], status:"active", system_role:"employee", ...payload };
          setUsers(prev => [...prev, newU]);
          audit("create", `เพิ่มพนักงาน ${newU.full_name}`);
          toast({ kind:"success", msg:`เพิ่ม ${newU.full_name} แล้ว` });
          setAddEmployee(false);
        }}/>
    </div>
  );
};

// Self-contained Add Employee modal
const AddEmployeeModal = ({ open, onClose, onAdd }) => {
  const [f, setF] = useState({ full_name:"", employee_code:"", email:"", phone:"", system_role:"employee" });
  useEffect(() => { if (open) setF({ full_name:"", employee_code:"", email:"", phone:"", system_role:"employee" }); }, [open]);
  const set = (k,v) => setF(p=>({ ...p, [k]:v }));
  const valid = f.full_name && f.employee_code && f.email;
  return (
    <Modal open={open} onClose={onClose} title="เพิ่มพนักงานใหม่" subtitle="หลังเพิ่มแล้วไปผูกตำแหน่งได้ที่แผงด้านซ้าย" width={520}
      footer={<>
        <Button variant="secondary" onClick={onClose}>ยกเลิก</Button>
        <Button disabled={!valid} onClick={()=>onAdd(f)} icon="check">เพิ่มพนักงาน</Button>
      </>}>
      <div className="grid grid-cols-2 gap-3">
        <Field label="ชื่อ-นามสกุล" required className="col-span-2"><Input value={f.full_name} onChange={e=>set("full_name", e.target.value)} placeholder="เช่น สมหญิง ใจดี"/></Field>
        <Field label="รหัสพนักงาน" required><Input value={f.employee_code} onChange={e=>set("employee_code", e.target.value.toUpperCase())} className="font-mono uppercase" placeholder="ABC-0099"/></Field>
        <Field label="System Role">
          <Select value={f.system_role} onChange={e=>set("system_role", e.target.value)}>
            <option value="admin">Admin</option>
            <option value="manager">Manager</option>
            <option value="employee">Employee</option>
            <option value="viewer">Viewer</option>
          </Select>
        </Field>
        <Field label="อีเมล" required className="col-span-2"><Input type="email" value={f.email} onChange={e=>set("email", e.target.value)}/></Field>
        <Field label="โทรศัพท์" className="col-span-2"><Input value={f.phone} onChange={e=>set("phone", e.target.value)} placeholder="08x-xxx-xxxx"/></Field>
      </div>
    </Modal>
  );
};

Object.assign(window, { EmployeeMappingPage });