/* global React, Button, PageHead, FilterBar, Pager, RowActions, useToast, PAGE_SIZES, PortalSelect, Icon, CATEGORY_TREE, DISPLAY_CAT_SEED */
// 類別重複陳列 — 一頁式常駐可編輯，刪除採「將移除」暫存模式

const { useState, useMemo } = React;

const MAIN_CAT_OPTIONS = Object.keys(CATEGORY_TREE).map(k => ({ value: k, label: k }));
const subOptions = (mainCat) =>
  mainCat ? (CATEGORY_TREE[mainCat] || []).map(s => ({ value: s, label: s })) : [];

const DCatPage = ({ canEdit, sectionLabel, titleLabel }) => {
  const [rows,          setRows]          = useState(() => DISPLAY_CAT_SEED.map(r => ({ ...r })));
  const [isDirty,       setIsDirty]       = useState(false);
  const [pendingDelete, setPendingDelete] = useState(() => new Set());
  const [fText,         setFText]         = useState("");
  const [page,          setPage]          = useState(1);
  const [pageSize,      setPageSize]      = useState(PAGE_SIZES[0]);
  const { push: toast } = useToast();

  const filtered = useMemo(() => {
    const q = fText.trim().toLowerCase();
    if (!q) return rows;
    return rows.filter(r =>
      [r.menu, r.category, r.secondMenu, r.secondCategory, r.categoryAfter]
        .some(v => v && v.toLowerCase().includes(q))
    );
  }, [rows, fText]);

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

  const handleChange = (id, key, value) => {
    setRows(prev => prev.map(r => {
      if (r.id !== id) return r;
      const next = { ...r, [key]: value };
      if (key === "menu")       { next.category = null; }
      if (key === "secondMenu") { next.secondCategory = null; next.categoryAfter = null; }
      return next;
    }));
    setIsDirty(true);
  };

  const handleAddRow = () => {
    const newRow = {
      id: `dc-${Date.now()}`,
      menu: null, category: null,
      secondMenu: null, secondCategory: null, categoryAfter: null,
    };
    const nextTotal = rows.length + 1;
    const lastPage  = Math.ceil(nextTotal / pageSize);
    setFText("");
    setRows(prev => [...prev, newRow]);
    setIsDirty(true);
    setPage(lastPage);
  };

  const handleDelete = (row) => {
    setPendingDelete(prev => new Set([...prev, row.id]));
    setIsDirty(true);
  };

  const handleRestore = (row) => {
    setPendingDelete(prev => {
      const next = new Set(prev);
      next.delete(row.id);
      return next;
    });
  };

  const handleSave = () => {
    setRows(prev => prev.filter(r =>
      !pendingDelete.has(r.id) &&
      (r.menu || r.category || r.secondMenu || r.secondCategory || r.categoryAfter)
    ));
    setPendingDelete(new Set());
    setIsDirty(false);
    toast({ kind: "success", msg: "類別重複陳列已儲存" });
  };

  const getActions = (row) => {
    if (!canEdit) return [];
    if (pendingDelete.has(row.id)) {
      return [{ label: "復原", onClick: () => handleRestore(row) }];
    }
    return [{ label: "刪除", danger: true, onClick: () => handleDelete(row) }];
  };

  const colCount = canEdit ? 6 : 5;

  const renderCell = (row, key, opts, disabled) => {
    if (!canEdit) {
      return <span style={{ color: row[key] ? "var(--fg-1)" : "var(--fg-4)" }}>{row[key] || "—"}</span>;
    }
    if (pendingDelete.has(row.id)) {
      return (
        <span style={{
          display: "block",
          padding: "0 12px",
          textDecoration: "line-through",
          fontStyle: "italic",
          color: "var(--fg-3)",
        }}>
          {row[key] || "—"}
        </span>
      );
    }
    return (
      <PortalSelect
        value={row[key]}
        options={opts}
        onChange={v => handleChange(row.id, key, v)}
        placeholder="選擇…"
        disabled={disabled}
        triggerClassName={"select-cell-trigger" + (!row[key] ? " select-cell-trigger--empty" : "")}
        triggerStyle={{ padding: "0 12px" }}
      />
    );
  };

  return (
    <>
      <PageHead
        section={sectionLabel}
        title={titleLabel}
        dirty={isDirty}
        actions={canEdit && (
          <Button variant="primary" disabled={!isDirty} onClick={handleSave}>儲存</Button>
        )}
      />

      <FilterBar filters={[
        {
          type: "search",
          placeholder: "搜尋類別名稱…",
          value: fText,
          onChange: v => { setFText(v); setPage(1); },
        },
      ]} />

      <div className="card">
        <div className="tbl-wrap">
          <table className="tbl">
            <thead>
              <tr>
                <th style={{ width: 180 }}>Menu</th>
                <th style={{ width: 180 }} className="th-primary">Category</th>
                <th style={{ width: 180 }}>Second Menu</th>
                <th style={{ width: 180 }}>Second Category</th>
                <th style={{ width: 180 }}>Category After</th>
                {canEdit && <th style={{ width: 80 }} className="center">功能</th>}
              </tr>
            </thead>
            <tbody>
              {paged.length === 0 && (
                <tr>
                  <td colSpan={colCount}>
                    <div className="empty" style={{ padding: "40px 20px" }}>
                      <div className="empty__icon"><Icon name="grid" size={36} /></div>
                      <div className="empty__title">
                        {fText ? "沒有符合條件的項目" : "尚無重複陳列設定"}
                      </div>
                      {!fText && canEdit && (
                        <div className="empty__desc">點下方「新增一列」開始設定</div>
                      )}
                    </div>
                  </td>
                </tr>
              )}
              {paged.map(row => (
                <tr key={row.id} style={{ background: pendingDelete.has(row.id) ? "var(--danger-bg)" : undefined }}>
                  <td style={{ padding: canEdit ? 0 : undefined }}>
                    {renderCell(row, "menu", MAIN_CAT_OPTIONS, false)}
                  </td>
                  <td style={{ padding: canEdit ? 0 : undefined }}>
                    {renderCell(row, "category", subOptions(row.menu), !row.menu)}
                  </td>
                  <td style={{ padding: canEdit ? 0 : undefined }}>
                    {renderCell(row, "secondMenu", MAIN_CAT_OPTIONS, false)}
                  </td>
                  <td style={{ padding: canEdit ? 0 : undefined }}>
                    {renderCell(row, "secondCategory", subOptions(row.secondMenu), !row.secondMenu)}
                  </td>
                  <td style={{ padding: canEdit ? 0 : undefined }}>
                    {renderCell(row, "categoryAfter", subOptions(row.secondMenu), !row.secondMenu)}
                  </td>
                  {canEdit && (
                    <td className="center">
                      <RowActions actions={getActions(row)} />
                    </td>
                  )}
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        {canEdit && (
          <button className="tbl-add-row" onClick={handleAddRow}>
            <Icon name="plus" size={16} />
            新增一列
          </button>
        )}

        <Pager
          total={filtered.length}
          page={page}
          pageSize={pageSize}
          onPageChange={setPage}
          onSizeChange={s => { setPageSize(s); setPage(1); }}
        />
      </div>
    </>
  );
};

Object.assign(window, { DCatPage });