/* global React, Icon, Button, Dialog, PageHead, FilterBar, Pager, RowActions, useToast, PAGE_SIZES, useSortableTable, Field, PortalSelect, FormField */
// 分區設定 — L1 列表 + CRUD Dialog

const { useState, useMemo } = React;

const mkZoneStamp = () => {
  const now = new Date();
  return now.getFullYear().toString()
    + String(now.getMonth() + 1).padStart(2, "0")
    + String(now.getDate()).padStart(2, "0") + " "
    + String(now.getHours()).padStart(2, "0") + ":"
    + String(now.getMinutes()).padStart(2, "0");
};

const ZoneDialog = ({ mode, initial, existingNames, storeMaster, onClose, onSave }) => {
  const [zoneName, setZoneName] = useState(initial?.zoneName || "");
  const [storeIds, setStoreIds] = useState(initial?.storeIds || []);
  const [note,     setNote]     = useState(initial?.note     || "");
  const [errors,   setErrors]   = useState({});

  const storeOptions = storeMaster.map(s => ({ value: s.id, label: s.name }));

  const validate = () => {
    const errs = {};
    if (!zoneName.trim()) {
      errs.zoneName = "請輸入銷售地區名稱";
    } else if (existingNames.includes(zoneName.trim())) {
      errs.zoneName = "此銷售地區名稱已存在";
    }
    if (storeIds.length === 0) errs.storeIds = "請選擇至少一個門店";
    setErrors(errs);
    return Object.keys(errs).length === 0;
  };

  const handleSave = () => {
    if (!validate()) return;
    onSave({ zoneName: zoneName.trim(), storeIds, note: note.trim() });
  };

  return (
    <Dialog
      open
      title={mode === "add" ? "新增銷售地區" : "編輯銷售地區"}
      onClose={onClose}
      footer={
        <>
          <Button variant="text" onClick={onClose}>取消</Button>
          <Button variant="primary" onClick={handleSave}>{mode === "add" ? "新增" : "儲存"}</Button>
        </>
      }
    >
      <div style={{ display: "flex", flexDirection: "column", gap: 16, padding: "4px 0" }}>
        <FormField label="銷售地區" required error={errors.zoneName}>
          <Field value={zoneName} onChange={setZoneName} placeholder="例：北部" />
        </FormField>
        <FormField label="銷售門店" required error={errors.storeIds}>
          <PortalSelect
            multi
            value={storeIds}
            options={storeOptions}
            onChange={setStoreIds}
            placeholder="選擇門店…"
            triggerClassName="field-trigger"
          />
        </FormField>
        <FormField label="備註">
          <Field value={note} onChange={setNote} placeholder="說明此地區涵蓋的門店範圍…" />
        </FormField>
      </div>
    </Dialog>
  );
};

const StZoneList = ({
  zones, storeMaster, canEdit, adjStatusBatches,
  sectionLabel, titleLabel,
  onCreate, onUpdate, onDelete,
}) => {
  const [fText,    setFText]    = useState("");
  const [fStores,  setFStores]  = useState([]);
  const [page,     setPage]     = useState(1);
  const [pageSize, setPageSize] = useState(PAGE_SIZES[0]);
  const { SortHead, applySortTo } = useSortableTable("updatedAt", "desc");
  const [dialog,   setDialog]   = useState(null);
  const { push: toast } = useToast();

  const storeOptions = useMemo(
    () => storeMaster.map(s => ({ value: s.id, label: s.name })),
    [storeMaster]
  );

  const storeNameStr = (storeIds) =>
    storeIds.map(id => storeMaster.find(s => s.id === id)?.name || id).join(" / ");

  const filtered = useMemo(() => {
    let rows = zones;
    if (fText) {
      const q = fText.toLowerCase();
      rows = rows.filter(z =>
        z.zoneName.toLowerCase().includes(q) ||
        (z.note || "").toLowerCase().includes(q)
      );
    }
    if (fStores.length) {
      rows = rows.filter(z => fStores.every(sid => z.storeIds.includes(sid)));
    }
    return rows;
  }, [zones, fText, fStores]);

  const sorted = useMemo(() =>
    applySortTo(filtered, (z, key) => {
      if (key === "storeCount") return z.storeIds.length;
      if (key === "storeNames") return storeNameStr(z.storeIds);
      return z[key] ?? "";
    }),
  [filtered, applySortTo]);

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

  const checkInUse = (zoneName) =>
    (adjStatusBatches || []).reduce((count, batch) => {
      const n = (batch.rows || []).filter(
        r => r.region === zoneName || r.newRegion === zoneName
      ).length;
      return count + n;
    }, 0);

  const handleDeleteClick = (zone) => {
    const count = checkInUse(zone.zoneName);
    if (count > 0) {
      setDialog({ type: "blocked", zone, count });
    } else {
      setDialog({ type: "confirm", zone });
    }
  };

  const handleCreate = (data) => {
    onCreate(data);
    toast({ kind: "success", msg: `銷售地區「${data.zoneName}」已新增` });
    setDialog(null);
  };

  const handleUpdate = (data) => {
    onUpdate(dialog.zone.id, data);
    toast({ kind: "success", msg: `銷售地區「${data.zoneName}」已更新` });
    setDialog(null);
  };

  const handleDelete = () => {
    const { zone } = dialog;
    onDelete(zone.id);
    toast({ kind: "success", msg: `銷售地區「${zone.zoneName}」已刪除` });
    setDialog(null);
  };

  const getActions = (zone) => {
    if (!canEdit) return [];
    return [
      { label: "編輯", onClick: () => setDialog({ type: "edit", zone }) },
      { label: "刪除", danger: true, onClick: () => handleDeleteClick(zone) },
    ];
  };

  return (
    <>
      <PageHead
        section={sectionLabel}
        title={titleLabel}
        subtitle="管理銷售地區與對應門店集合，設定的地區名稱將同步至商品狀態調整等功能的地區選單。"
        actions={canEdit && (
          <Button variant="primary" icon="plus" onClick={() => setDialog({ type: "add" })}>
            新增銷售地區
          </Button>
        )}
      />

      <FilterBar
        filters={[
          {
            type: "search",
            placeholder: "搜尋地區名稱或備註…",
            value: fText,
            onChange: v => { setFText(v); setPage(1); },
          },
          {
            type: "chip",
            label: "門店",
            value: fStores,
            options: storeOptions,
            onChange: v => { setFStores(v); setPage(1); },
            multi: true,
          },
        ]}
      />

      <div className="card">
        <div className="tbl-wrap">
          <table className="tbl">
            <thead>
              <tr>
                <th style={{ width: 160 }}><SortHead colKey="updatedAt" label="更新時間" /></th>
                <th style={{ width: 100 }}><SortHead colKey="zoneName" label="銷售地區" /></th>
                <th style={{ width: 72 }} className="num"><SortHead colKey="storeCount" label="門店數" /></th>
                <th><SortHead colKey="storeNames" label="銷售門店" /></th>
                <th style={{ width: 220 }}><SortHead colKey="note" label="備註" /></th>
                {canEdit && <th style={{ width: 160 }} className="center">功能</th>}
              </tr>
            </thead>
            <tbody>
              {paged.length === 0 && (
                <tr>
                  <td colSpan={canEdit ? 6 : 5}>
                    <div className="empty" style={{ padding: "40px 20px" }}>
                      <div className="empty__icon"><Icon name="mapPin" size={36} /></div>
                      <div className="empty__title">沒有符合條件的銷售地區</div>
                      <div className="empty__desc">
                        {canEdit
                          ? "試試清除篩選條件，或點右上角「新增銷售地區」。"
                          : "試試清除篩選條件。"}
                      </div>
                    </div>
                  </td>
                </tr>
              )}
              {paged.map(zone => (
                <tr key={zone.id}>
                  <td className="mono" style={{ color: "var(--fg-2)", fontSize: "var(--fs-12)" }}>
                    {zone.updatedAt}
                  </td>
                  <td>
                    {canEdit
                      ? <a className="tbl-link" onClick={() => setDialog({ type: "edit", zone })}>{zone.zoneName}</a>
                      : zone.zoneName}
                  </td>
                  <td className="num">{zone.storeIds.length}</td>
                  <td style={{ color: "var(--fg-2)", fontSize: "var(--fs-13)" }}>
                    {storeNameStr(zone.storeIds)}
                  </td>
                  <td style={{ color: "var(--fg-2)", fontSize: "var(--fs-13)" }}>
                    {zone.note || "—"}
                  </td>
                  {canEdit && (
                    <td className="center">
                      <RowActions actions={getActions(zone)} />
                    </td>
                  )}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <Pager
          total={sorted.length}
          page={page}
          pageSize={pageSize}
          onPageChange={setPage}
          onSizeChange={p => { setPageSize(p); setPage(1); }}
        />
      </div>

      {dialog?.type === "add" && (
        <ZoneDialog
          mode="add"
          existingNames={zones.map(z => z.zoneName)}
          storeMaster={storeMaster}
          onClose={() => setDialog(null)}
          onSave={handleCreate}
        />
      )}

      {dialog?.type === "edit" && (
        <ZoneDialog
          mode="edit"
          initial={dialog.zone}
          existingNames={zones.filter(z => z.id !== dialog.zone.id).map(z => z.zoneName)}
          storeMaster={storeMaster}
          onClose={() => setDialog(null)}
          onSave={handleUpdate}
        />
      )}

      {dialog?.type === "confirm" && (
        <Dialog
          open
          title="刪除銷售地區"
          onClose={() => setDialog(null)}
          footer={
            <>
              <Button variant="text" onClick={() => setDialog(null)}>取消</Button>
              <Button variant="danger" onClick={handleDelete}>確認刪除</Button>
            </>
          }
        >
          <p style={{ fontSize: "var(--fs-14)", color: "var(--fg-1)", lineHeight: 1.6 }}>
            確定要刪除銷售地區 <b>{dialog.zone.zoneName}</b>？<br />
            此操作無法還原。
          </p>
        </Dialog>
      )}

      {dialog?.type === "blocked" && (
        <Dialog
          open
          title="無法刪除"
          onClose={() => setDialog(null)}
          footer={<Button variant="default" onClick={() => setDialog(null)}>我知道了</Button>}
        >
          <p style={{ fontSize: "var(--fs-14)", color: "var(--fg-1)", lineHeight: 1.6 }}>
            銷售地區 <b>{dialog.zone.zoneName}</b> 目前有{" "}
            <b>{dialog.count} 筆</b>商品調整記錄正在使用，無法刪除。<br />
            請先在商品狀態調整中移除此地區後再刪除。
          </p>
        </Dialog>
      )}
    </>
  );
};

Object.assign(window, { StZoneList });