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

const { useState, useMemo } = React;

const PosSettingsList = ({ positions, onAdd, onUpdate, onDelete, sectionLabel, titleLabel }) => {
  const { push: toast } = useToast();
  const [formDlg, setFormDlg] = useState(null);
  const [deleteDlg, setDeleteDlg] = useState(null);
  const [name, setName] = useState("");
  const [error, setError] = useState("");
  const [page, setPage] = useState(1);
  const [pageSize, setPageSize] = useState(PAGE_SIZES[0]);
  const { SortHead, applySortTo } = useSortableTable("name", "asc");

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

  const save = () => {
    const trimmed = name.trim();
    if (!trimmed) { setError("請輸入職位名稱"); return; }
    if (positions.some(p => p.name === trimmed && p.id !== formDlg?.row?.id)) {
      setError("職位名稱不可重複"); return;
    }
    if (formDlg.mode === "add") { onAdd(trimmed); toast({ kind: "success", msg: "職位已新增" }); }
    else { onUpdate(formDlg.row.id, trimmed); toast({ kind: "success", msg: "職位已更新" }); }
    setFormDlg(null);
  };

  return (
    <>
      <PageHead section={sectionLabel} title={titleLabel}
        actions={<Button variant="primary" icon="plus" onClick={() => { setName(""); setError(""); setFormDlg({ mode: "add" }); }}>新增職位</Button>} />
      <div className="card">
        <div className="tbl-wrap">
          <table className="tbl">
            <thead><tr>
              <th><SortHead colKey="name" label="職位名稱" /></th>
              <th className="center" style={{ width: 160 }}>功能</th>
            </tr></thead>
            <tbody>
              {paged.map(row => (
                <tr key={row.id}>
                  <td style={{ fontWeight: "var(--fw-medium)" }}>{row.name}</td>
                  <td className="center">
                    <div className="actions">
                      <button className="row-act" onClick={() => { setName(row.name); setError(""); setFormDlg({ mode: "edit", row }); }}>編輯</button>
                      <button className="row-act row-act--danger" onClick={() => setDeleteDlg(row)}>刪除</button>
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <Pager total={positions.length} page={page} pageSize={pageSize}
          onPageChange={setPage} onSizeChange={s => { setPageSize(s); setPage(1); }} />
      </div>

      {formDlg && (
        <Dialog open title={formDlg.mode === "add" ? "新增職位" : "編輯職位"} onClose={() => setFormDlg(null)}
          footer={<><Button variant="text" onClick={() => setFormDlg(null)}>取消</Button><Button variant="primary" onClick={save}>確認</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(""); }} error={!!error} style={{ width: "100%" }} />
              {error && <div style={{ fontSize: "var(--fs-12)", color: "var(--danger)", marginTop: 4 }}>{error}</div>}
            </div>
          </div>
        </Dialog>
      )}

      {deleteDlg && (
        <Dialog open title="刪除職位" onClose={() => setDeleteDlg(null)}
          footer={<><Button variant="text" onClick={() => setDeleteDlg(null)}>取消</Button><Button variant="danger" onClick={() => {
            onDelete(deleteDlg.id); setDeleteDlg(null); toast({ kind: "success", msg: "職位已刪除" });
          }}>刪除</Button></>}>
          <div>確定要刪除「{deleteDlg.name}」嗎？</div>
        </Dialog>
      )}
    </>
  );
};

Object.assign(window, { PosSettingsList });