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

const { useState, useMemo } = React;

const AuthPermList = ({ perms, onAdd, onUpdate, onDelete, sectionLabel, titleLabel }) => {
  const { push: toast } = useToast();
  const [q, setQ] = useState("");
  const [page, setPage] = useState(1);
  const [pageSize, setPageSize] = useState(PAGE_SIZES[0]);
  const [formDlg, setFormDlg] = useState(null);
  const [deleteDlg, setDeleteDlg] = useState(null);
  const [form, setForm] = useState({ code: "", name: "" });
  const [errors, setErrors] = useState({});
  const { SortHead, applySortTo } = useSortableTable("code", "asc");

  const filtered = useMemo(() => {
    const lq = q.trim().toLowerCase();
    const base = !lq ? perms : perms.filter(p =>
      p.code.toLowerCase().includes(lq) || p.name.toLowerCase().includes(lq)
    );
    return applySortTo(base);
  }, [perms, q, applySortTo]);

  const paged = filtered.slice((page - 1) * pageSize, page * pageSize);

  const openAdd = () => { setForm({ code: "", name: "" }); setErrors({}); setFormDlg({ mode: "add" }); };
  const openEdit = (row) => { setForm({ code: row.code, name: row.name }); setErrors({}); setFormDlg({ mode: "edit", row }); };

  const saveForm = () => {
    const code = form.code.trim();
    const name = form.name.trim();
    const next = {};
    if (!code) next.code = "請輸入權限代碼";
    if (!name) next.name = "請輸入權限名稱";
    if (code && perms.some(p => p.code === code && p.id !== formDlg.row?.id)) next.code = "權限代碼不可重複";
    if (Object.keys(next).length) { setErrors(next); return; }
    if (formDlg.mode === "add") { onAdd({ code, name }); toast({ kind: "success", msg: "權限已新增" }); }
    else { onUpdate(formDlg.row.id, { code, name }); toast({ kind: "success", msg: "權限已更新" }); }
    setFormDlg(null);
  };

  return (
    <>
      <PageHead section={sectionLabel} title={titleLabel}
        actions={<Button variant="primary" icon="plus" onClick={openAdd}>新增權限</Button>} />
      <FilterBar filters={[
        { type: "search", placeholder: "搜尋權限代碼、名稱…", value: q, onChange: v => { setQ(v); setPage(1); } },
      ]} />
      <div className="card">
        <div className="tbl-wrap">
          <table className="tbl">
            <thead>
              <tr>
                <th><SortHead colKey="code" label="權限代碼" /></th>
                <th><SortHead colKey="name" label="權限名稱" /></th>
                <th className="center" style={{ width: 160 }}>功能</th>
              </tr>
            </thead>
            <tbody>
              {paged.map(row => (
                <tr key={row.id}>
                  <td className="mono" style={{ fontSize: "var(--fs-12)" }}>{row.code}</td>
                  <td>{row.name}</td>
                  <td className="center">
                    <div className="actions">
                      <button className="row-act" onClick={() => openEdit(row)}>編輯</button>
                      <button className="row-act row-act--danger" onClick={() => setDeleteDlg(row)}>刪除</button>
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <Pager total={filtered.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={saveForm}>確認</Button></>}>
          <div className="dialog__field-row">
            <span className="dialog__field-label dialog__field-label--req">權限代碼</span>
            <div className="dialog__field-body">
              <Field value={form.code} onChange={e => setForm(f => ({ ...f, code: e.target.value }))} error={!!errors.code} style={{ width: "100%" }} />
              {errors.code && <div style={{ fontSize: "var(--fs-12)", color: "var(--danger)", marginTop: 4 }}>{errors.code}</div>}
            </div>
          </div>
          <div className="dialog__field-row">
            <span className="dialog__field-label dialog__field-label--req">權限名稱</span>
            <div className="dialog__field-body">
              <Field value={form.name} onChange={e => setForm(f => ({ ...f, name: e.target.value }))} error={!!errors.name} style={{ width: "100%" }} />
              {errors.name && <div style={{ fontSize: "var(--fs-12)", color: "var(--danger)", marginTop: 4 }}>{errors.name}</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, { AuthPermList });