/* ==================================================================
   Admin → Personnel
   ------------------------------------------------------------------
   Manage non-teaching support staff (drivers, sweepers, guards, …) and
   the duties they perform. A person can hold several duties.
   Creates a support_staff user + login credentials in one go (the temp
   password is shown once, to hand over).
   ================================================================== */

const { Icon: PsIcon } = window.AppUI;

const PERSONNEL_DUTIES = [
  "driver", "sweeper", "marketing", "electrician", "plumber",
  "guard", "gateman", "cook", "helper",
];
const dutyLabel = (d) => d.charAt(0).toUpperCase() + d.slice(1);

// Multi-select duty chips.
const DutyChips = ({ value, onChange }) => {
  const toggle = (d) => {
    const set = new Set(value);
    set.has(d) ? set.delete(d) : set.add(d);
    onChange(Array.from(set));
  };
  return (
    <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
      {PERSONNEL_DUTIES.map((d) => {
        const on = value.includes(d);
        return (
          <button key={d} type="button" onClick={() => toggle(d)} aria-pressed={on}
            className={`btn sm round ${on ? "primary" : ""}`}>
            {on && <PsIcon name="check" size={13} />}
            {dutyLabel(d)}
          </button>
        );
      })}
    </div>
  );
};

const PersonnelScreen = () => {
  const [list, setList] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [err, setErr] = React.useState(null);
  const [adding, setAdding] = React.useState(false);
  const [form, setForm] = React.useState({ name: "", phone: "", email: "", password: "", duties: [] });
  const [flash, setFlash] = React.useState(null);          // { name, username, temp_password }
  const [editId, setEditId] = React.useState(null);        // row being duty-edited
  const [editDuties, setEditDuties] = React.useState([]);

  const load = React.useCallback(async () => {
    setLoading(true); setErr(null);
    try { setList((await window.AppApi.get("/admin/personnel")).personnel || []); }
    catch (e) { setErr(e.message); }
    finally { setLoading(false); }
  }, []);
  React.useEffect(() => { load(); }, [load]);

  async function create(e) {
    e.preventDefault();
    setErr(null);
    if (!form.name.trim() || !form.phone.trim()) { setErr("Name and phone are required."); return; }
    try {
      const out = await window.AppApi.post("/admin/personnel", {
        name: form.name.trim(), phone: form.phone.trim(),
        email: form.email.trim() || undefined,
        password: form.password.trim() || undefined,
        duties: form.duties,
      });
      setFlash({ name: out.name, username: out.username, temp_password: out.temp_password });
      setForm({ name: "", phone: "", email: "", password: "", duties: [] });
      setAdding(false);
      load();
    } catch (e) {
      setErr(e.message.includes("phone already") ? "That phone is already registered."
        : e.message.includes("email already") ? "That email is already registered."
        : e.message);
    }
  }

  async function resetPw(p) {
    try {
      const out = await window.AppApi.post(`/admin/personnel/${p.id}/reset-password`, {});
      setFlash({ name: p.name, username: p.username, temp_password: out.temp_password });
    } catch (e) { setErr(e.message); }
  }
  async function toggleActive(p) {
    try {
      if (p.active) await window.AppApi.del(`/admin/personnel/${p.id}`);
      else await window.AppApi.patch(`/admin/personnel/${p.id}`, { active: true });
      load();
    } catch (e) { setErr(e.message); }
  }
  function startEditDuties(p) { setEditId(p.id); setEditDuties(p.duties || []); }
  async function saveDuties(p) {
    try { await window.AppApi.patch(`/admin/personnel/${p.id}`, { duties: editDuties }); setEditId(null); load(); }
    catch (e) { setErr(e.message); }
  }

  const PsBadge = window.AppUI.StatusBadge;
  return (
    <div className="cx-page" style={{ maxWidth: 1100 }}>
      <window.AppUI.PageHeader
        eyebrow="Admin · support staff"
        title="Personnel"
        meta={["Support staff and their duties, with a login for each.",
          !loading && list.length ? `${list.length} on record` : null]}
        actions={!adding && (
          <button className="btn primary" onClick={() => { setAdding(true); setFlash(null); }}>
            <PsIcon name="userPlus" size={15} />Add personnel
          </button>
        )}
      />

      {/* One-time credentials flash */}
      {flash && (
        <div className="ui-alert green" style={{ marginBottom: 20, display: "flex", alignItems: "flex-start", gap: 12 }}>
          <PsIcon name="key" size={16} style={{ marginTop: 2, flexShrink: 0 }} />
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontWeight: 600 }}>Login for {flash.name}</div>
            <div style={{ marginTop: 4, color: "var(--ink-1)" }}>
              Username: <b className="mono">{flash.username}</b> &nbsp;·&nbsp; Temp password: <b className="mono">{flash.temp_password}</b>
            </div>
            <div style={{ color: "var(--ink-3)", fontSize: 12, marginTop: 4 }}>
              Shown once — hand these to the staffer. They sign in with the username (or phone) + this password.
            </div>
          </div>
          <button className="btn ghost sm" onClick={() => setFlash(null)}>Dismiss</button>
        </div>
      )}

      {/* Add form */}
      {adding && (
        <form onSubmit={create} className="cx-card" style={{ marginBottom: 20 }}>
          <div className="cx-card-head">
            <div>
              <div className="cx-card-title">New personnel</div>
              <div className="cx-card-sub">Creates a support-staff login in one go.</div>
            </div>
          </div>
          <div className="cx-grid" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))", gap: 14 }}>
            <div className="field">
              <label className="label">Name</label>
              <input className="input" value={form.name}
                onChange={(e) => setForm({ ...form, name: e.target.value })} placeholder="Full name" />
            </div>
            <div className="field">
              <label className="label">Phone (WhatsApp)</label>
              <input className="input" value={form.phone}
                onChange={(e) => setForm({ ...form, phone: e.target.value })} placeholder="10-digit number" />
            </div>
            <div className="field">
              <label className="label">Email <span className="muted">(optional)</span></label>
              <input className="input" value={form.email}
                onChange={(e) => setForm({ ...form, email: e.target.value })} />
            </div>
            <div className="field">
              <label className="label">Password <span className="muted">(blank = auto)</span></label>
              <input className="input" value={form.password}
                onChange={(e) => setForm({ ...form, password: e.target.value })} placeholder="Auto-generated if blank" />
            </div>
          </div>
          <div style={{ marginTop: 18 }}>
            <div className="ui-section-label" style={{ marginBottom: 8 }}>Duties · pick one or more</div>
            <DutyChips value={form.duties} onChange={(d) => setForm({ ...form, duties: d })} />
          </div>
          {err && <div className="ui-alert red" style={{ marginTop: 14 }}>{err}</div>}
          <div className="cx-card-foot">
            <button type="button" className="btn" onClick={() => { setAdding(false); setErr(null); }}>Cancel</button>
            <button type="submit" className="btn primary"><PsIcon name="check" size={15} />Create personnel</button>
          </div>
        </form>
      )}

      {err && !adding && <div className="ui-alert red" style={{ marginBottom: 14 }}>{err}</div>}

      {/* List */}
      {loading ? <div className="muted">Loading…</div> : list.length === 0 ? (
        <window.AppUI.EmptyState card icon="users" title="No personnel yet"
          hint="Add your first support-staff member above." />
      ) : (
        <div className="cx-tablecard">
        <div className="cx-tablescroll">
        <table className="cx-table">
          <thead>
            <tr>
              <th>Name</th>
              <th>Login</th>
              <th>Duties</th>
              <th>Status</th>
              <th className="actions">Actions</th>
            </tr>
          </thead>
          <tbody>
            {list.map((p) => (
              <tr key={p.id} className={p.active ? "" : "muted-row"}>
                <td>
                  <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                    <window.AppUI.Avatar name={p.name} size="sm" />
                    <div style={{ minWidth: 0 }}>
                      <div className="t-main">{p.name}</div>
                      {p.phone && <div className="t-sub">{p.phone}</div>}
                    </div>
                  </div>
                </td>
                <td><span className="ui-id">{p.username || "—"}</span></td>
                <td>
                  {editId === p.id ? (
                    <div>
                      <DutyChips value={editDuties} onChange={setEditDuties} />
                      <div style={{ marginTop: 8, display: "flex", gap: 6 }}>
                        <button className="btn primary sm" onClick={() => saveDuties(p)}>Save</button>
                        <button className="btn ghost sm" onClick={() => setEditId(null)}>Cancel</button>
                      </div>
                    </div>
                  ) : (
                    <div style={{ display: "flex", flexWrap: "wrap", gap: 4, alignItems: "center" }}>
                      {(p.duties || []).length === 0 && <span className="muted">—</span>}
                      {(p.duties || []).map((d) => (
                        <PsBadge key={d} tone="grey">{dutyLabel(d)}</PsBadge>
                      ))}
                      <button className="btn ghost xs" style={{ marginLeft: 2 }} onClick={() => startEditDuties(p)}>
                        <PsIcon name="edit" size={13} />Edit
                      </button>
                    </div>
                  )}
                </td>
                <td>
                  {p.active
                    ? <PsBadge tone="green" variant="outline">Active</PsBadge>
                    : <PsBadge tone="grey" variant="outline">Disabled</PsBadge>}
                </td>
                <td className="actions">
                  <div style={{ display: "inline-flex", gap: 6 }}>
                    <button className="btn sm" onClick={() => resetPw(p)}><PsIcon name="key" size={14} />Reset password</button>
                    <button className={`btn sm ${p.active ? "danger" : ""}`} onClick={() => toggleActive(p)}>
                      <PsIcon name={p.active ? "ban" : "refresh"} size={14} />
                      {p.active ? "Disable" : "Enable"}
                    </button>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
        </div>
        </div>
      )}
    </div>
  );
};

window.PersonnelScreen = PersonnelScreen;