/* global React, Icon, Button, Field, Dialog, PageHead, Pager, PAGE_SIZES, useToast, useSortableTable */

const { useState, useMemo } = React;

// ── Add / Edit dialog ─────────────────────────────────────────────────────────
const DeptFormDialog = ({ mode, initial, existingNames, onClose, onSave }) => {
  const [name, setName] = useState(initial || "");
  const [error, setError] = useState("");

  const handleSave = () => {
    const trimmed = name.trim();
    if (!trimmed) { setError("請輸入部門名稱"); return; }
    if (existingNames.filter(n => n !== initial).includes(trimmed)) {
      setError("此部門名稱已存在"); return;
    }
    onSave(trimmed);
  };

  return (
    <Dialog
      open
      title={mode === "add" ? "新增部門" : "編輯部門"}
      onClose={onClose}
      footer={<>
        <Button variant="text" onClick={onClose}>取消</Button>
        <Button variant="primary" onClick={handleSave}>確認</Button>
      </>}
    >
      <div className="dialog__field-row">
        <span className="dialog__field-label dialog__field-label--req">部門名稱</span>
        <div className="dialog__field-body">
          <Field
            value={name}
            onChange={e => { setName(e.target.value); setError(""); }}
            onKeyDown={e => { if (e.key === "Enter") handleSave(); if (e.key === "Escape") onClose(); }}
            placeholder="請輸入部門名稱"
            error={!!error}
            style={{ width: "100%" }}
          />
          {error && <div style={{ fontSize: "var(--fs-12)", color: "var(--danger)", marginTop: 4 }}>{error}</div>}
        </div>
      </div>
    </Dialog>
  );
};

// ── 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>
      {confirmLabel && <Button variant={variant} onClick={onConfirm}>{confirmLabel}</Button>}
    </>}
  >
    <div style={{ lineHeight: 1.6 }}>{body}</div>
  </Dialog>
);

// ── DeptList (L1) ─────────────────────────────────────────────────────────────
const DeptList = ({ depts, users, isSysAdmin, onAddDept, onUpdateDept, onDeleteDept, sectionLabel, titleLabel }) => {
  const { push: showToast } = useToast();
  const [formDialog, setFormDialog] = useState(null); // null | { mode: "add" } | { mode: "edit", name }
  const [dialog,     setDialog]     = useState(null);
  const [page,       setPage]       = useState(1);
  const [pageSize,   setPageSize]   = useState(PAGE_SIZES[0]);
  const { SortHead, applySortTo } = useSortableTable("name", "asc");

  const countUsers = (deptName) => (users || []).filter(u => u.department === deptName).length;

  const handleDelete = (name) => {
    const count = countUsers(name);
    if (count > 0) {
      setDialog({ type: "blocked", name, count });
    } else {
      setDialog({ type: "confirm", name });
    }
  };

  const sorted = useMemo(() => applySortTo(depts, (d, key) =>
    key === "count" ? countUsers(d) : (d ?? "")
  ), [depts, users, applySortTo]);
  const paged = sorted.slice((page - 1) * pageSize, page * pageSize);

  return (
    <>
      <PageHead
        section={sectionLabel}
        title={titleLabel}
        actions={isSysAdmin && (
          <Button variant="primary" icon="plus" onClick={() => setFormDialog({ mode: "add" })}>
            新增部門
          </Button>
        )}
      />

      <div className="card">
        <div className="tbl-wrap">
          <table className="tbl">
            <thead>
              <tr>
                <th><SortHead colKey="name" label="部門名稱" /></th>
                <th className="num" style={{ width: 120 }}><SortHead colKey="count" label="使用人數" /></th>
                {isSysAdmin && <th className="center" style={{ width: 160 }}>功能</th>}
              </tr>
            </thead>
            <tbody>
              {paged.length === 0 ? (
                <tr><td colSpan={isSysAdmin ? 3 : 2} style={{ textAlign: "center", color: "var(--fg-4)", padding: "40px 0" }}>尚無部門</td></tr>
              ) : paged.map(name => (
                <tr key={name}>
                  <td style={{ fontWeight: "var(--fw-medium)" }}>{name}</td>
                  <td className="num">{countUsers(name)} 人</td>
                  {isSysAdmin && (
                    <td className="center">
                      <div className="actions">
                        <button className="row-act" onClick={() => setFormDialog({ mode: "edit", name })}>編輯</button>
                        <button className="row-act row-act--danger" onClick={() => handleDelete(name)}>刪除</button>
                      </div>
                    </td>
                  )}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <Pager total={depts.length} page={page} pageSize={pageSize}
          onPageChange={setPage} onSizeChange={s => { setPageSize(s); setPage(1); }} />
      </div>

      {/* Add / Edit dialog */}
      {formDialog && (
        <DeptFormDialog
          mode={formDialog.mode}
          initial={formDialog.mode === "edit" ? formDialog.name : ""}
          existingNames={depts}
          onClose={() => setFormDialog(null)}
          onSave={(newName) => {
            if (formDialog.mode === "add") {
              onAddDept(newName);
              showToast({ kind: "success", msg: "部門已新增" });
            } else {
              onUpdateDept(formDialog.name, newName);
              showToast({ kind: "success", msg: "部門名稱已更新" });
            }
            setFormDialog(null);
          }}
        />
      )}

      {/* Delete blocked */}
      {dialog?.type === "blocked" && (
        <ConfirmDialog
          title="無法刪除部門"
          body={`有 ${dialog.count} 位使用者仍屬於「${dialog.name}」，請先在使用者管理中變更部門後再刪除。`}
          cancelLabel="確定"
          onClose={() => setDialog(null)}
        />
      )}

      {/* Delete confirm */}
      {dialog?.type === "confirm" && (
        <ConfirmDialog
          title="刪除部門"
          body={`確定要刪除「${dialog.name}」嗎？此動作無法還原。`}
          confirmLabel="刪除"
          variant="danger"
          onClose={() => setDialog(null)}
          onConfirm={() => {
            onDeleteDept(dialog.name);
            setDialog(null);
            showToast({ kind: "success", msg: "部門已刪除" });
          }}
        />
      )}
    </>
  );
};

Object.assign(window, { DeptList });