/* global React, Button, PageHead, PortalSelect, useToast, STORE_GRADE_SEED */
// 店級指派 — 各門店依菜單主類別的陳列等級矩陣

const { useState } = React;

const TIER_OPTIONS = [
  { value: "T0", label: "T0" },
  { value: "T1", label: "T1" },
  { value: "T2", label: "T2" },
];

const TIER_COLOR = { T0: "var(--danger)", T1: "var(--warning)", T2: "var(--brand-primary-text)" };

const StGradeList = ({ storeMaster, canEdit, sectionLabel, titleLabel }) => {
  const [grades, setGrades]   = useState(STORE_GRADE_SEED);
  const [isDirty, setIsDirty] = useState(false);
  const { push: toast } = useToast();

  const handleChange = (categoryName, storeId, value) => {
    setGrades(prev => prev.map(row =>
      row.categoryName === categoryName
        ? { ...row, tiers: { ...row.tiers, [storeId]: value } }
        : row
    ));
    setIsDirty(true);
  };

  const handleSave = () => {
    setIsDirty(false);
    toast({ kind: "success", msg: "店級指派已儲存" });
  };

  return (
    <>
      <PageHead
        section={sectionLabel}
        title={titleLabel}
        dirty={isDirty}
        subtitle="記錄各門店依菜單類別的陳列等級上限（T0–T2），與商品等級對照後決定商品是否在該店上架。"
        actions={canEdit && (
          <Button variant="primary" onClick={handleSave} disabled={!isDirty}>儲存</Button>
        )}
      />

      <div className="card">
        <div className="tbl-wrap">
          <table className="tbl" style={{ tableLayout: "auto", borderCollapse: "separate", borderSpacing: 0 }}>
            <thead>
              <tr>
                <th style={{
                  width: 148, minWidth: 148,
                  position: "sticky", left: 0, zIndex: 3,
                  background: "var(--bg-surface)",
                  borderRight: "1px solid var(--border-1)",
                }}>
                  主類別（菜單）
                </th>
                {storeMaster.map(store => (
                  <th key={store.id} className="center" style={{ width: 88, minWidth: 88 }}>
                    {store.name}
                  </th>
                ))}
              </tr>
            </thead>
            <tbody>
              {grades.map(row => (
                <tr key={row.categoryName}>
                  <td style={{
                    position: "sticky", left: 0, zIndex: 1,
                    background: "var(--bg-surface)",
                    borderRight: "1px solid var(--border-1)",
                    fontWeight: "var(--fw-medium)",
                    fontSize: "var(--fs-13)",
                  }}>
                    {row.categoryName}
                  </td>
                  {storeMaster.map(store => {
                    const tier = row.tiers[store.id] || "T2";
                    return (
                      <td key={store.id} className="center" style={{ padding: "4px 6px" }}>
                        {canEdit ? (
                          <PortalSelect
                            value={tier}
                            options={TIER_OPTIONS}
                            onChange={v => handleChange(row.categoryName, store.id, v)}
                            triggerClassName="cell-editor-portal-trigger"
                            triggerStyle={{ color: TIER_COLOR[tier], fontWeight: "var(--fw-medium)" }}
                          />
                        ) : (
                          <span style={{ color: TIER_COLOR[tier], fontWeight: "var(--fw-medium)", fontSize: "var(--fs-13)" }}>
                            {tier}
                          </span>
                        )}
                      </td>
                    );
                  })}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </>
  );
};

Object.assign(window, { StGradeList });