/* global React, Button, PageHead, FilterBar, Pager, PAGE_SIZES, PortalSelect, useToast, CATEGORY_TREE */

const { useState, useMemo, useEffect } = React;

const LineAssignPage = ({ users, lineAssignments, onSave, onDirtyChange, isSysAdmin, sectionLabel, titleLabel }) => {
  const toast = useToast();

  // draft: "mainCat|subCat" → ownerId (null = unassigned)
  const [draft, setDraft] = useState(() => {
    const map = {};
    lineAssignments.forEach(r => { map[`${r.mainCat}|${r.subCat}`] = r.ownerId; });
    return map;
  });

  // filter state
  const [searchQ,        setSearchQ]        = useState("");
  const [filterMainCats, setFilterMainCats] = useState([]);
  const [filterSubCats,  setFilterSubCats]  = useState([]);
  const [filterOwners,   setFilterOwners]   = useState([]);

  // pagination
  const [page,     setPage]     = useState(1);
  const [pageSize, setPageSize] = useState(PAGE_SIZES[0]);

  const isDirty = useMemo(() =>
    lineAssignments.some(r => draft[`${r.mainCat}|${r.subCat}`] !== r.ownerId),
  [draft, lineAssignments]);

  useEffect(() => { onDirtyChange?.(isDirty); }, [isDirty]);

  const rows = useMemo(() =>
    Object.entries(CATEGORY_TREE).flatMap(([mainCat, subCats]) =>
      subCats.map(subCat => ({ mainCat, subCat }))
    ),
  []);

  // Owner candidates: 採購部門 active users
  const ownerOptions = useMemo(() => [
    { value: null, label: "— 未指派 —" },
    ...users
      .filter(u => u.department === "採購部" && u.status === "active")
      .map(u => ({ value: u.id, label: u.name })),
  ], [users]);

  // Filter bar options
  const mainCatOptions = useMemo(() =>
    Object.keys(CATEGORY_TREE).map(cat => ({ value: cat, label: cat })),
  []);

  const subCatOptions = useMemo(() =>
    Object.values(CATEGORY_TREE).flat()
      .filter((v, i, a) => a.indexOf(v) === i)
      .map(s => ({ value: s, label: s })),
  []);

  const ownerFilterOptions = useMemo(() => [
    { value: "__unassigned__", label: "未指派" },
    ...users
      .filter(u => u.department === "採購部" && u.status === "active")
      .map(u => ({ value: u.id, label: u.name })),
  ], [users]);

  // Filtered rows
  const filteredRows = useMemo(() => rows.filter(({ mainCat, subCat }) => {
    if (searchQ) {
      const q = searchQ.toLowerCase();
      const ownerId = draft[`${mainCat}|${subCat}`] ?? null;
      const ownerName = users.find(u => u.id === ownerId)?.name ?? "";
      if (!mainCat.includes(q) && !subCat.includes(q) && !ownerName.toLowerCase().includes(q)) return false;
    }
    if (filterMainCats.length && !filterMainCats.includes(mainCat)) return false;
    if (filterSubCats.length  && !filterSubCats.includes(subCat))   return false;
    if (filterOwners.length) {
      const ownerId = draft[`${mainCat}|${subCat}`] ?? null;
      const wantUnassigned = filterOwners.includes("__unassigned__") && ownerId === null;
      const wantOwner      = filterOwners.some(v => v !== "__unassigned__" && v === ownerId);
      if (!wantUnassigned && !wantOwner) return false;
    }
    return true;
  }), [rows, searchQ, filterMainCats, filterSubCats, filterOwners, draft, users]);

  const handleChange = (key, ownerId) =>
    setDraft(d => ({ ...d, [key]: ownerId }));

  const handleSave = () => {
    onSave(lineAssignments.map(r => ({
      ...r,
      ownerId: draft[`${r.mainCat}|${r.subCat}`] ?? null,
    })));
    toast.push({ kind: "success", msg: "採購線別指派已儲存" });
  };

  return (
    <>
      <PageHead
        crumbs={[
          { label: sectionLabel },
          { label: titleLabel, current: true },
        ]}
        title={titleLabel}
        dirty={isDirty}
        actions={isSysAdmin && (
          <Button variant="primary" disabled={!isDirty} onClick={handleSave}>
            儲存
          </Button>
        )}
      />

      <FilterBar filters={[
        { type: "search", placeholder: "搜尋大分類、小分類、負責採購", value: searchQ, onChange: v => { setSearchQ(v); setPage(1); } },
        { type: "chip", label: "大分類",   value: filterMainCats, options: mainCatOptions,     onChange: v => { setFilterMainCats(v); setPage(1); }, multi: true },
        { type: "chip", label: "小分類",   value: filterSubCats,  options: subCatOptions,      onChange: v => { setFilterSubCats(v);  setPage(1); }, multi: true },
        { type: "chip", label: "負責採購", value: filterOwners,   options: ownerFilterOptions, onChange: v => { setFilterOwners(v);   setPage(1); }, multi: true },
      ]} />

      <div className="card">
        <div className="tbl-wrap">
          <table className="tbl">
            <thead>
              <tr>
                <th style={{ width: "33%" }}>大分類</th>
                <th style={{ width: "33%" }}>小分類</th>
                <th style={{ width: "34%", borderLeft: "1px solid var(--border-1)" }} className="th-primary">負責採購</th>
              </tr>
            </thead>
            <tbody>
              {filteredRows.slice((page - 1) * pageSize, page * pageSize).map(({ mainCat, subCat }) => {
                const key = `${mainCat}|${subCat}`;
                const ownerId = draft[key] ?? null;
                const ownerUser = users.find(u => u.id === ownerId);
                return (
                  <tr key={key}>
                    <td style={{ color: "var(--fg-2)", fontWeight: "var(--fw-medium)" }}>{mainCat}</td>
                    <td>{subCat}</td>
                    <td style={{ borderLeft: "1px solid var(--border-1)", padding: isSysAdmin ? 0 : undefined }}>
                      {isSysAdmin ? (
                        <PortalSelect
                          value={ownerId}
                          options={ownerOptions}
                          onChange={v => handleChange(key, v)}
                          placeholder="— 未指派 —"
                          triggerClassName={"select-cell-trigger" + (ownerId ? "" : " select-cell-trigger--empty")}
                          triggerStyle={{ padding: "0 12px" }}
                        />
                      ) : (
                        <span style={{
                          color: ownerId ? "var(--fg-1)" : "var(--fg-4)",
                          fontStyle: ownerId ? "normal" : "italic",
                        }}>
                          {ownerUser ? ownerUser.name : "未指派"}
                        </span>
                      )}
                    </td>
                  </tr>
                );
              })}
              {filteredRows.length === 0 && (
                <tr>
                  <td colSpan={3} style={{ textAlign: "center", color: "var(--fg-4)", padding: "24px 0" }}>
                    沒有符合條件的項目
                  </td>
                </tr>
              )}
            </tbody>
          </table>
        </div>
        <Pager total={filteredRows.length} page={page} pageSize={pageSize}
          onPageChange={setPage} onSizeChange={s => { setPageSize(s); setPage(1); }} />
      </div>
    </>
  );
};

Object.assign(window, { LineAssignPage });