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

const { useState, useMemo } = React;

const DisplaySimplePage = ({ seed, columns, sectionLabel, titleLabel, saveLabel }) => {
  const [rows, setRows] = useState(() => seed.map(r => ({ ...r })));
  const [isDirty, setIsDirty] = useState(false);
  const [q, setQ] = useState("");
  const [page, setPage] = useState(1);
  const [pageSize, setPageSize] = useState(PAGE_SIZES[0]);
  const { push: toast } = useToast();

  const filtered = useMemo(() => {
    const lq = q.trim().toLowerCase();
    if (!lq) return rows;
    return rows.filter(r => columns.some(c => String(r[c.key] || "").toLowerCase().includes(lq)));
  }, [rows, q, columns]);

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

  const patch = (id, key, val) => {
    setRows(prev => prev.map(r => r.id === id ? { ...r, [key]: val } : r));
    setIsDirty(true);
  };

  const addRow = () => {
    const blank = { id: `row-${Date.now()}`, ...Object.fromEntries(columns.map(c => [c.key, ""])) };
    setRows(prev => [...prev, blank]);
    setIsDirty(true);
  };

  const delRow = (id) => {
    setRows(prev => prev.filter(r => r.id !== id));
    setIsDirty(true);
  };

  const handleSave = () => {
    setIsDirty(false);
    toast({ kind: "success", msg: saveLabel });
  };

  return (
    <>
      <PageHead section={sectionLabel} title={titleLabel} dirty={isDirty}
        actions={<>
          <Button variant="default" icon="plus" onClick={addRow}>新增列</Button>
          <Button variant="primary" onClick={handleSave} disabled={!isDirty}>儲存</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>
              {columns.map(c => <th key={c.key}>{c.label}</th>)}
              <th className="center" style={{ width: 120 }}>功能</th>
            </tr></thead>
            <tbody>
              {paged.map(row => (
                <tr key={row.id}>
                  {columns.map(c => (
                    <td key={c.key}>
                      <Field value={row[c.key] || ""} onChange={e => patch(row.id, c.key, e.target.value)} style={{ width: "100%" }} />
                    </td>
                  ))}
                  <td className="center">
                    <RowActions actions={[{ label: "刪除", danger: true, onClick: () => delRow(row.id) }]} />
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <Pager total={filtered.length} page={page} pageSize={pageSize}
          onPageChange={setPage} onSizeChange={s => { setPageSize(s); setPage(1); }} />
      </div>
    </>
  );
};

const DisplayItemPage = ({ seed, sectionLabel, titleLabel }) => (
  <DisplaySimplePage
    seed={seed}
    sectionLabel={sectionLabel}
    titleLabel={titleLabel}
    saveLabel="重複陳列單品已儲存"
    columns={[
      { key: "skuNo", label: "品號" },
      { key: "itemName", label: "品名" },
      { key: "displayCat", label: "陳列類別" },
      { key: "targetCat", label: "目標類別" },
    ]}
  />
);

const DisplayMergePage = ({ seed, sectionLabel, titleLabel }) => (
  <DisplaySimplePage
    seed={seed}
    sectionLabel={sectionLabel}
    titleLabel={titleLabel}
    saveLabel="陳列合併已儲存"
    columns={[
      { key: "fromCat", label: "來源類別" },
      { key: "toCat", label: "合併至" },
      { key: "storeScope", label: "適用門店" },
    ]}
  />
);

Object.assign(window, { DisplayItemPage, DisplayMergePage });