/* global React, PageHead, Button, Field, FormField, FormFieldVal, FormSectionDivider, SectionCard,
   NumInput, useToast, useDirtyTracker */

const { useState, useMemo, useEffect } = React;

const EMPTY_CRM_ACTIVITY = {
  id: "",
  name: "",
  menuDisplayName: "",
  menuSubCategory: "",
  slotSort: "",
  campaignStart: "",
  campaignEnd: "",
  primaryProducts: "",
  adjustmentDeadline: "",
  slotNote1: "",
  slotNote2: "",
  createdAt: "",
  updatedAt: "",
  itemCount: 0,
};

const stampNow = () => {
  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 CrmActivityDetail = ({ activity: activityProp, isNew, sectionLabel, titleLabel, onBack, onSave, onDirtyChange }) => {
  const [activity, setActivity] = useState(() => activityProp || { ...EMPTY_CRM_ACTIVITY });
  const [saved, setSaved] = useState(() => activityProp || { ...EMPTY_CRM_ACTIVITY });
  const [showErrors, setShowErrors] = useState(false);
  const { push: toast } = useToast();
  const isDirty = useDirtyTracker(saved, activity);

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

  const patch = (key, value) => setActivity(a => ({ ...a, [key]: value }));

  const formErrors = useMemo(() => ({
    name: !activity.name?.trim() ? "必填" : null,
    menuDisplayName: !activity.menuDisplayName?.trim() ? "必填" : null,
    campaignStart: !activity.campaignStart?.trim() ? "必填" : null,
    campaignEnd: !activity.campaignEnd?.trim() ? "必填" : null,
  }), [activity]);

  const hasFormErrors = Object.values(formErrors).some(Boolean);

  const validate = () => {
    setShowErrors(true);
    if (hasFormErrors) {
      toast({ kind: "warning", msg: "請填寫必填欄位" });
      return false;
    }
    if (activity.campaignStart && activity.campaignEnd && activity.campaignStart > activity.campaignEnd) {
      toast({ kind: "warning", msg: "檔期結束日不可早於開始日" });
      return false;
    }
    return true;
  };

  const handleSave = () => {
    if (!validate()) return;
    const updated = {
      ...activity,
      updatedAt: stampNow(),
      createdAt: activity.createdAt || stampNow().slice(0, 10),
      itemCount: activity.itemCount || 0,
    };
    onSave(updated, isNew);
    setSaved(updated);
    setActivity(updated);
    toast({ kind: "success", msg: isNew ? "CRM 活動已建立" : "CRM 活動已儲存" });
    onBack();
  };

  const cardSummary = [
    activity.name || "（未命名）",
    activity.menuDisplayName || null,
    activity.campaignStart && activity.campaignEnd
      ? `${activity.campaignStart} – ${activity.campaignEnd}`
      : null,
    activity.slotSort ? `排序 ${activity.slotSort}` : null,
  ].filter(Boolean).join(" · ");

  const pageTitle = isNew ? "新增 CRM 活動" : (activity.name || "編輯 CRM 活動");

  return (
    <>
      <PageHead
        crumbs={[
          { label: sectionLabel },
          { label: titleLabel, onClick: onBack },
          { label: isNew ? "新增" : (activity.name || "編輯"), current: true },
        ]}
        title={pageTitle}
        dirty={isDirty}
        actions={(
          <>
            <Button variant="default" onClick={onBack}>取消</Button>
            <Button variant="primary" onClick={handleSave}>儲存</Button>
          </>
        )}
      />

      <SectionCard title="CRM 活動主檔" summary={cardSummary} defaultOpen>
        <div className="form-grid">
          <FormSectionDivider badge="A" label="檔期資訊" first />

          <FormField label="主檔名稱" required error={showErrors ? formErrors.name : null}>
            <Field value={activity.name} placeholder="例：夏季飲料 CRM 檔"
              error={showErrors && !!formErrors.name}
              onChange={e => patch("name", e.target.value)} />
          </FormField>
          <FormField label="菜單顯示menu名稱" required error={showErrors ? formErrors.menuDisplayName : null}>
            <Field value={activity.menuDisplayName} placeholder="例：夏季飲料特輯"
              error={showErrors && !!formErrors.menuDisplayName}
              onChange={e => patch("menuDisplayName", e.target.value)} />
          </FormField>
          <FormField label="菜單次分類名稱">
            <Field value={activity.menuSubCategory} placeholder="例：冰品飲料"
              onChange={e => patch("menuSubCategory", e.target.value)} />
          </FormField>
          <FormField label="檔期排序">
            <NumInput value={activity.slotSort} onChange={e => patch("slotSort", e.target.value)}
              placeholder="1" />
          </FormField>

          <FormField label="檔期開始日" required error={showErrors ? formErrors.campaignStart : null}>
            <Field type="date" value={activity.campaignStart}
              error={showErrors && !!formErrors.campaignStart}
              onChange={e => patch("campaignStart", e.target.value)} />
          </FormField>
          <FormField label="檔期結束日" required error={showErrors ? formErrors.campaignEnd : null}>
            <Field type="date" value={activity.campaignEnd}
              error={showErrors && !!formErrors.campaignEnd}
              onChange={e => patch("campaignEnd", e.target.value)} />
          </FormField>

          <FormSectionDivider badge="B" label="選品與備註" />

          <FormField label="選品主要商品">
            <Field value={activity.primaryProducts} placeholder="例：夏季飲料 TOP 20 品項"
              onChange={e => patch("primaryProducts", e.target.value)} />
          </FormField>
          <FormField label="調整促進截止日">
            <Field type="date" value={activity.adjustmentDeadline}
              onChange={e => patch("adjustmentDeadline", e.target.value)} />
          </FormField>
          <FormField label="檔期備註 1">
            <Field value={activity.slotNote1} placeholder="檔期備註"
              onChange={e => patch("slotNote1", e.target.value)} />
          </FormField>
          <FormField label="檔期備註 2">
            <Field value={activity.slotNote2} placeholder="檔期備註"
              onChange={e => patch("slotNote2", e.target.value)} />
          </FormField>

          {!isNew && (
            <>
              <FormSectionDivider badge="C" label="系統資訊" />
              <FormField label="建立日期" locked>
                <FormFieldVal mono>{activity.createdAt || "—"}</FormFieldVal>
              </FormField>
              <FormField label="更新時間" locked>
                <FormFieldVal mono>{activity.updatedAt || "—"}</FormFieldVal>
              </FormField>
            </>
          )}
        </div>
      </SectionCard>
    </>
  );
};

Object.assign(window, { CrmActivityDetail, EMPTY_CRM_ACTIVITY });