/* global React, Icon, Button, Field, Dialog, PortalSelect, Tag, PageHead, FilterBar, Pager, PAGE_SIZES, useToast, Check, SectionCard,
   AUTH_JOB_POSITIONS, genTempPassword, useSortableTable */

const { useState, useMemo } = React;

// ── Role permissions info (read-only) ─────────────────────────────────────────
const PERM_COLS = [
  { key: "create", label: "新增" },
  { key: "edit",   label: "編輯" },
  { key: "view",   label: "檢視" },
  { key: "delete", label: "刪除" },
];

const RolePermsInfo = ({ roles, roleLabels, rolePermissions }) => {
  if (!roles || !roles.length) return null;
  return (
    <div style={{ marginTop: 20, fontSize: "var(--fs-12)" }}>
      <div style={{ fontWeight: "var(--fw-medium)", color: "var(--fg-3)", marginBottom: 8, display: "flex", alignItems: "center", gap: 5 }}>
        <Icon name="info" size={12} />
        角色存取權限詳情
      </div>
      {roles.map(role => {
        const groups = rolePermissions[role];
        if (!groups) return null;
        const modCount = groups.reduce((n, g) => n + g.modules.length, 0);
        return (
          <SectionCard
            key={role}
            title={roleLabels[role]}
            summary={`${roleLabels[role]} — ${modCount} 個功能項目`}
            defaultOpen={false}
          >
            <table style={{ width: "100%", borderCollapse: "separate", borderSpacing: 0 }}>
              <thead>
                <tr>
                  <th style={{ padding: "6px 10px", borderBottom: "1px solid var(--border-1)" }} />
                  {PERM_COLS.map(c => (
                    <th key={c.key} style={{ padding: "6px 10px", fontSize: "var(--fs-11)", fontWeight: "var(--fw-semibold)", color: "var(--fg-2)", textAlign: "center", width: 60, borderBottom: "1px solid var(--border-1)" }}>{c.label}</th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {groups.flatMap((group, gi) => [
                  <tr key={`cat-${gi}`}>
                    <td colSpan={5} style={{
                      padding: gi === 0 ? "5px 10px 2px" : "10px 10px 2px",
                      fontSize: "var(--fs-11)",
                      fontWeight: "var(--fw-semibold)",
                      color: "var(--fg-4)",
                      textTransform: "uppercase",
                      letterSpacing: "0.05em",
                      ...(gi > 0 ? { borderTop: "1px solid var(--border-1)" } : {}),
                    }}>{group.category}</td>
                  </tr>,
                  ...group.modules.map((mod, mi) => (
                    <tr key={`${gi}-${mi}`}>
                      <td style={{ padding: "6px 20px", color: "var(--fg-1)" }}>{mod.name}</td>
                      {PERM_COLS.map(c => (
                        <td key={c.key} style={{ padding: "6px 10px", textAlign: "center", width: 60 }}>
                          <Check checked={mod.perms[c.key]} readOnly />
                        </td>
                      ))}
                    </tr>
                  )),
                ])}
              </tbody>
            </table>
          </SectionCard>
        );
      })}
    </div>
  );
};

// ── Role chips display ─────────────────────────────────────────────────────────
const RoleChips = ({ roles, roleLabels }) => (
  <div style={{ display: "flex", gap: 3, flexWrap: "wrap" }}>
    {roles.map(r => (
      <span key={r} className={"role-pill" + (r === "SYS_ADMIN" ? " role-pill--admin" : "")}>
        {roleLabels[r] || r}
      </span>
    ))}
  </div>
);

// ── User Form (Add / Edit — full-page L2) ──────────────────────────────────────
const UserForm = ({ mode, initial, roles, roleLabels, rolePermissions, departments, onCancel, onSave }) => {
  const isEdit = mode === "edit";
  const [name,   setName]   = useState(initial?.name || "");
  const [email,  setEmail]  = useState(initial?.email || "");
  const [dept,   setDept]   = useState(initial?.department || "");
  const [pos,    setPos]    = useState(initial?.jobPosition || "");
  const [selectedRoles, setSelectedRoles] = useState(initial?.roles || []);
  const [errors, setErrors] = useState({});

  const validate = () => {
    const e = {};
    if (!name.trim()) e.name = "請輸入姓名";
    if (!isEdit) {
      if (!email.trim()) e.email = "請輸入 Email";
      else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) e.email = "Email 格式不正確";
    }
    if (!dept)                e.dept  = "請選擇部門";
    if (!pos)                 e.pos   = "請選擇職位";
    if (!selectedRoles.length) e.roles = "至少選擇一個系統存取角色";
    return e;
  };

  const canSave = name.trim() && (isEdit || email.trim()) && dept && pos && selectedRoles.length > 0;

  const handleSave = () => {
    const e = validate();
    if (Object.keys(e).length) { setErrors(e); return; }
    onSave({ name: name.trim(), email: email.trim().toLowerCase(), department: dept, jobPosition: pos, roles: selectedRoles });
  };

  return (
    <>
      <PageHead
        crumbs={[
          { label: "帳號與權限" },
          { label: "使用者管理", onClick: onCancel },
          { label: isEdit ? "編輯" : "新增", current: true },
        ]}
        title={isEdit ? "編輯帳號" : "新增帳號"}
        actions={<>
          <Button variant="default" onClick={onCancel}>取消</Button>
          <Button variant="primary" onClick={handleSave} disabled={!canSave}>
            {isEdit ? "儲存變更" : "確認建立"}
          </Button>
        </>}
      />

      <div className="card af-form">
        <div className="card__body">

          {/* 密碼提示（僅新增模式） */}
          {!isEdit && (
            <InfoNote style={{ marginBottom: 20 }}>
              帳號建立後，系統將自動寄送通知信至帳號 Email，信中含一組臨時密碼。帳號持有者首次登入須強制更改密碼。
            </InfoNote>
          )}

          {/* 姓名 */}
          <div className="form-row">
            <span className="lab req">姓名</span>
            <div>
              <Field
                value={name}
                onChange={e => { setName(e.target.value); setErrors(er => ({ ...er, name: undefined })); }}
                placeholder="請輸入姓名"
                error={!!errors.name}
                style={{ maxWidth: 320 }}
              />
              {errors.name && <div className="help err">{errors.name}</div>}
            </div>
          </div>

          {/* Email */}
          <div className="form-row">
            <span className={"lab" + (!isEdit ? " req" : "")}>Email 帳號</span>
            <div>
              {isEdit
                ? <Field value={initial.email} disabled style={{ maxWidth: 320 }} />
                : <>
                    <Field
                      value={email}
                      onChange={e => { setEmail(e.target.value); setErrors(er => ({ ...er, email: undefined })); }}
                      placeholder="請輸入 Email"
                      error={!!errors.email}
                      style={{ maxWidth: 320 }}
                    />
                    {errors.email && <div className="help err">{errors.email}</div>}
                  </>
              }
            </div>
          </div>

          {/* 部門 */}
          <div className="form-row">
            <span className="lab req">部門</span>
            <div>
              <PortalSelect
                value={dept}
                onChange={v => { setDept(v); setErrors(er => ({ ...er, dept: undefined })); }}
                options={departments.map(d => ({ value: d, label: d }))}
                placeholder="請選擇部門"
                triggerClassName={"field-trigger" + (errors.dept ? " field-trigger--error" : "")}
                triggerStyle={{ maxWidth: 320 }}
              />
              {errors.dept && <div className="help err">{errors.dept}</div>}
            </div>
          </div>

          {/* 職位 */}
          <div className="form-row">
            <span className="lab req">職位</span>
            <div>
              <PortalSelect
                value={pos}
                onChange={v => { setPos(v); setErrors(er => ({ ...er, pos: undefined })); }}
                options={AUTH_JOB_POSITIONS.map(p => ({ value: p, label: p }))}
                placeholder="請選擇職位"
                triggerClassName={"field-trigger" + (errors.pos ? " field-trigger--error" : "")}
                triggerStyle={{ maxWidth: 320 }}
              />
              {errors.pos && <div className="help err">{errors.pos}</div>}
            </div>
          </div>

          {/* 系統存取角色 */}
          <div className="form-row">
            <span className="lab req">系統存取角色</span>
            <div>
              <PortalSelect
                multi={true}
                expandDisplay={true}
                value={selectedRoles}
                onChange={vals => { setSelectedRoles(vals); setErrors(er => ({ ...er, roles: undefined })); }}
                options={roles.map(r => ({ value: r, label: roleLabels[r] }))}
                placeholder="請選擇系統存取角色（可多選）"
                triggerClassName={"field-trigger" + (errors.roles ? " field-trigger--error" : "")}
                triggerStyle={{ maxWidth: 320 }}
              />
              {errors.roles && <div className="help err">{errors.roles}</div>}
              <RolePermsInfo roles={selectedRoles} roleLabels={roleLabels} rolePermissions={rolePermissions} />
            </div>
          </div>

        </div>
      </div>
    </>
  );
};

// ── Confirm Dialog ────────────────────────────────────────────────────────────
const ConfirmDialog = ({ title, body, cancelLabel = "取消", confirmLabel, variant = "primary", onClose, onConfirm }) => (
  <Dialog
    open
    title={title}
    onClose={onClose}
    footer={<>
      <Button variant="text" onClick={onClose}>{cancelLabel}</Button>
      <Button variant={variant} onClick={onConfirm}>{confirmLabel}</Button>
    </>}
  >
    <div style={{ lineHeight: 1.6 }}>{body}</div>
  </Dialog>
);

// ── User List ─────────────────────────────────────────────────────────────────
const UserList = ({ users, roles, roleLabels, rolePermissions, departments, isSysAdmin, onUpdateUser, onAddUser, sectionLabel, titleLabel, onGoMailPreview }) => {
  const { push: showToast } = useToast();

  const [screen, setScreen] = useState(null); // null | "add" | { type: "edit", user }
  const [dialog, setDialog] = useState(null);

  const [searchQ,        setSearchQ]        = useState("");
  const [filterDepts,    setFilterDepts]    = useState([]);
  const [filterRoles,    setFilterRoles]    = useState([]);
  const [filterStatuses, setFilterStatuses] = useState([]);
  const [page,     setPage]     = useState(1);
  const [pageSize, setPageSize] = useState(PAGE_SIZES[0]);
  const { SortHead, applySortTo } = useSortableTable("name", "asc");

  const filtered = useMemo(() => {
    return users.filter(u => {
      if (searchQ) {
        const q = searchQ.toLowerCase();
        if (!u.name.toLowerCase().includes(q) && !u.email.toLowerCase().includes(q)) return false;
      }
      if (filterDepts.length && !filterDepts.includes(u.department)) return false;
      if (filterRoles.length && !u.roles.some(r => filterRoles.includes(r))) return false;
      if (filterStatuses.length && !filterStatuses.includes(u.status)) return false;
      return true;
    });
  }, [users, searchQ, filterDepts, filterRoles, filterStatuses]);

  const sorted = useMemo(() => applySortTo(filtered), [filtered, applySortTo]);
  const paged = sorted.slice((page - 1) * pageSize, page * pageSize);

  // ── Screen: Add ──────────────────────────────────────────────────────────────
  if (screen === "add") {
    return (
      <UserForm
        mode="add"
        initial={null}
        roles={roles}
        roleLabels={roleLabels}
        rolePermissions={rolePermissions}
        departments={departments}
        onCancel={() => setScreen(null)}
        onSave={(data) => {
          const tempPw = genTempPassword();
          const newUser = {
            id: "user-" + Date.now(),
            name: data.name, email: data.email,
            password: tempPw, tempPassword: tempPw,
            department: data.department, jobPosition: data.jobPosition,
            roles: data.roles,
            status: "active", mustChangePassword: true,
          };
          onAddUser(newUser);
          setScreen(null);
          showToast({
            kind: "success",
            msg: `帳號已建立，通知信已寄出至 ${data.email}`,
          });
        }}
      />
    );
  }

  // ── Screen: Edit ─────────────────────────────────────────────────────────────
  if (screen?.type === "edit") {
    return (
      <UserForm
        mode="edit"
        initial={screen.user}
        roles={roles}
        roleLabels={roleLabels}
        rolePermissions={rolePermissions}
        departments={departments}
        onCancel={() => setScreen(null)}
        onSave={(data) => {
          onUpdateUser({ ...screen.user, ...data });
          setScreen(null);
          showToast({ kind: "success", msg: "帳號資料已更新" });
        }}
      />
    );
  }

  // ── Screen: List ─────────────────────────────────────────────────────────────
  return (
    <>
      <PageHead
        section={sectionLabel}
        title={titleLabel}
        actions={isSysAdmin && (
          <Button variant="primary" icon="plus" onClick={() => setScreen("add")}>
            新增帳號
          </Button>
        )}
      />

      <FilterBar
        filters={[
          { type: "search", placeholder: "搜尋姓名 / Email", value: searchQ, onChange: v => { setSearchQ(v); setPage(1); } },
          { type: "chip", label: "部門", value: filterDepts, options: departments.map(d => ({ value: d, label: d })), onChange: v => { setFilterDepts(v); setPage(1); }, multi: true },
          { type: "chip", label: "系統存取角色", value: filterRoles, options: roles.map(r => ({ value: r, label: roleLabels[r] })), onChange: v => { setFilterRoles(v); setPage(1); }, multi: true },
          { type: "chip", label: "狀態", value: filterStatuses, options: [{ value: "active", label: "啟用" }, { value: "disabled", label: "停用" }], onChange: v => { setFilterStatuses(v); setPage(1); }, multi: true },
        ]}
      />

      <div className="card">
        <div className="tbl-wrap">
          <table className="tbl">
            <thead>
              <tr>
                <th><SortHead colKey="name" label="姓名" /></th>
                <th><SortHead colKey="email" label="Email" /></th>
                <th><SortHead colKey="department" label="部門" /></th>
                <th><SortHead colKey="jobPosition" label="職位" /></th>
                <th><SortHead colKey="role" label="系統存取角色" /></th>
                <th><SortHead colKey="status" label="狀態" /></th>
                {isSysAdmin && <th className="center" style={{ width: 200 }}>功能</th>}
              </tr>
            </thead>
            <tbody>
              {filtered.length === 0 ? (
                <tr><td colSpan={isSysAdmin ? 7 : 6} style={{ textAlign: "center", color: "var(--fg-4)", padding: "40px 0" }}>無符合結果</td></tr>
              ) : paged.map(u => (
                <tr key={u.id}>
                  <td style={{ fontWeight: "var(--fw-medium)" }}>{u.name}</td>
                  <td style={{ fontFamily: "var(--font-mono)" }}>{u.email}</td>
                  <td>{u.department}</td>
                  <td>{u.jobPosition}</td>
                  <td><RoleChips roles={u.roles} roleLabels={roleLabels} /></td>
                  <td>
                    <Tag variant={u.status === "active" ? "approved" : "draft"}>
                      {u.status === "active" ? "啟用" : "停用"}
                    </Tag>
                  </td>
                  {isSysAdmin && (
                    <td className="center">
                      <div className="actions">
                        {u.status === "active" && (
                          <>
                            <button className="row-act" onClick={() => setScreen({ type: "edit", user: u })}>編輯</button>
                            <button className="row-act row-act--danger" onClick={() => setDialog({ type: "disable", user: u })}>停用</button>
                          </>
                        )}
                        {u.status === "disabled" && (
                          <button className="row-act" onClick={() => setDialog({ type: "enable", user: u })}>啟用</button>
                        )}
                        <button className="row-act" onClick={() => setDialog({ type: "reset", user: u })}>重設密碼</button>
                      </div>
                    </td>
                  )}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <Pager total={filtered.length} page={page} pageSize={pageSize}
          onPageChange={setPage} onSizeChange={s => { setPageSize(s); setPage(1); }} />
      </div>

      {/* Confirm Dialogs */}
      {dialog?.type === "disable" && (
        <ConfirmDialog
          title="停用帳號"
          body={<span>停用後 <b>{dialog.user.name}</b> 將無法登入，歷史資料保留。</span>}
          confirmLabel="確認停用"
          variant="danger"
          onClose={() => setDialog(null)}
          onConfirm={() => {
            onUpdateUser({ ...dialog.user, status: "disabled" });
            setDialog(null);
            showToast({ kind: "success", msg: `${dialog.user.name} 的帳號已停用` });
          }}
        />
      )}
      {dialog?.type === "enable" && (
        <ConfirmDialog
          title="啟用帳號"
          body={<span>確定重新啟用 <b>{dialog.user.name}</b> 的帳號？</span>}
          confirmLabel="確認啟用"
          variant="primary"
          onClose={() => setDialog(null)}
          onConfirm={() => {
            onUpdateUser({ ...dialog.user, status: "active" });
            setDialog(null);
            showToast({ kind: "success", msg: `${dialog.user.name} 的帳號已重新啟用` });
          }}
        />
      )}
      {dialog?.type === "reset" && (
        <ConfirmDialog
          title="重設密碼"
          body={<span>系統將重新產生臨時密碼並寄至 <b>{dialog.user.email}</b>，使用者下次登入須強制改密碼。</span>}
          confirmLabel="確認重設"
          variant="danger"
          onClose={() => setDialog(null)}
          onConfirm={() => {
            const tempPw = genTempPassword();
            const userId = dialog.user.id;
            const userEmail = dialog.user.email;
            onUpdateUser({ ...dialog.user, mustChangePassword: true, tempPassword: tempPw });
            setDialog(null);
            showToast({
              kind: "success",
              msg: `密碼已重設，通知信已寄出至 ${userEmail}`,
            });
          }}
        />
      )}
    </>
  );
};

Object.assign(window, { UserList });