/* global React, Button, Field, PageHead, FormField, useToast, SYS_INCA_DEFAULT */

const { useState } = React;

const SYS_INCA_FIELDS = [
  { key: "deltaGenTime",     label: "Delta 檔生成時間" },
  { key: "deltaUploadTime",  label: "Delta 檔上傳時間" },
  { key: "catalogGenTime",   label: "Catalog 檔生成時間" },
  { key: "catalogUploadTime",label: "Catalog 檔上傳時間" },
  { key: "promoGenTime",     label: "Promotion 檔生成時間" },
  { key: "promoUploadTime",  label: "Promotion 檔上傳時間" },
];

const SysIncaSettings = ({ settings, onSave, sectionLabel, titleLabel }) => {
  const [form, setForm] = useState({ ...settings });
  const [isDirty, setIsDirty] = useState(false);
  const { push: toast } = useToast();

  const patch = (key, val) => {
    setForm(prev => ({ ...prev, [key]: val }));
    setIsDirty(true);
  };

  const handleSave = () => {
    onSave(form);
    setIsDirty(false);
    toast({ kind: "success", msg: "INCA 排程已儲存" });
  };

  return (
    <>
      <PageHead
        section={sectionLabel}
        title={titleLabel}
        dirty={isDirty}
        subtitle="設定 INCA 各檔案的生成與上傳時間。"
        actions={<Button variant="primary" onClick={handleSave} disabled={!isDirty}>儲存</Button>}
      />
      <div className="card" style={{ maxWidth: 560, padding: "20px 24px" }}>
        {SYS_INCA_FIELDS.map(f => (
          <FormField key={f.key} label={f.label} required>
            <Field value={form[f.key] || ""} onChange={e => patch(f.key, e.target.value)} style={{ width: "100%" }} />
          </FormField>
        ))}
      </div>
    </>
  );
};

const SysEffectivePlaceholder = ({ sectionLabel, titleLabel }) => (
  <>
    <PageHead section={sectionLabel} title={titleLabel}
      subtitle="wireframe 10.2 section 待設計師補完後實作。" />
    <div className="card">
      <div className="empty" style={{ padding: "80px 20px" }}>
        <div className="empty__title">wireframe 尚無此 section</div>
        <div className="empty__desc">新品生效日計算規則待 Figma 更新後再實作。</div>
      </div>
    </div>
  </>
);

Object.assign(window, { SysIncaSettings, SysEffectivePlaceholder });