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

const { useState, useMemo } = React;

const StHoursPage = ({ rows: initialRows, onSave, sectionLabel, titleLabel }) => {
  const [rows, setRows] = useState(() => initialRows.map(r => ({ ...r, hours: { ...r.hours } })));
  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 => r.skuNo.toLowerCase().includes(lq) || r.itemName.toLowerCase().includes(lq));
  }, [rows, q]);

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

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

  const handleSave = () => {
    onSave(rows);
    setIsDirty(false);
    toast({ kind: "success", msg: "販售時間表已儲存" });
  };

  return (
    <>
      <PageHead
        section={sectionLabel}
        title={titleLabel}
        dirty={isDirty}
        subtitle="設定各品項 W01–W13 週次販售時間。"
        actions={
          <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" style={{ minWidth: 1800 }}>
            <thead>
              <tr>
                <th className="stk-l-0 stk-shadow" style={{ width: 140 }}>品號</th>
                <th style={{ minWidth: 220 }}>品名</th>
                {ST_HOURS_WEEKS.map(w => (
                  <th key={w} style={{ width: 100 }} className="center">{w}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {paged.map(row => (
                <tr key={row.id}>
                  <td className="mono stk-l-0 stk-shadow" style={{ fontSize: "var(--fs-12)" }}>{row.skuNo}</td>
                  <td>{row.itemName}</td>
                  {ST_HOURS_WEEKS.map(w => (
                    <td key={w}>
                      <Field
                        value={row.hours[w] || ""}
                        onChange={e => patchHour(row.id, w, e.target.value)}
                        style={{ width: "100%" }}
                      />
                    </td>
                  ))}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <Pager total={filtered.length} page={page} pageSize={pageSize}
          onPageChange={setPage} onSizeChange={s => { setPageSize(s); setPage(1); }} />
      </div>
    </>
  );
};

Object.assign(window, { StHoursPage });