dukang/apps/h5-shop/src/components/ShopPackagesForm.tsx

import { useRef, useState } from 'react';
import { STORE_PACKAGE_MAX_COUNT } from '@dukang/shared-types';
import { emptyPackage, type PackageFormItem } from '../lib/storePackages';
import { uploadFileToOss } from '../lib/upload';

type Props = {
  items: PackageFormItem[];
  onChange: (items: PackageFormItem[]) => void;
  disabled?: boolean;
};

export default function ShopPackagesForm({ items, onChange, disabled }: Props) {
  const [collapsed, setCollapsed] = useState<Record<number, boolean>>({});
  const [uploadingIndex, setUploadingIndex] = useState<number | null>(null);
  const fileRefs = useRef<Record<number, HTMLInputElement | null>>({});

  async function pickPackageImage(index: number, file?: File | null) {
    if (!file || disabled) return;
    setUploadingIndex(index);
    try {
      const result = await uploadFileToOss(file, 'STORE_PACKAGE');
      updateAt(index, { imageUrl: result.url });
    } finally {
      setUploadingIndex(null);
    }
  }

  function updateAt(index: number, patch: Partial<PackageFormItem>) {
    onChange(items.map((item, i) => (i === index ? { ...item, ...patch } : item)));
  }

  function addItem() {
    if (items.length >= STORE_PACKAGE_MAX_COUNT) return;
    onChange([...items, emptyPackage(items.length)]);
  }

  function removeAt(index: number) {
    onChange(items.filter((_, i) => i !== index).map((item, i) => ({ ...item, sortOrder: i })));
    setCollapsed((prev) => {
      const next: Record<number, boolean> = {};
      Object.entries(prev).forEach(([k, v]) => {
        const i = Number(k);
        if (i < index) next[i] = v;
        else if (i > index) next[i - 1] = v;
      });
      return next;
    });
  }

  function toggleCollapse(index: number) {
    setCollapsed((prev) => ({ ...prev, [index]: !prev[index] }));
  }

  const list = items.length ? items : [emptyPackage(0)];

  return (
    <div className="shop-packages-form">
      {list.map((item, index) => {
        const isCollapsed = !!collapsed[index];
        const displayName = item.name.trim() || `套餐 ${index + 1}`;
        return (
          <section key={index} className={`shop-packages-card${isCollapsed ? ' shop-packages-card--collapsed' : ''}`}>
            <div className="shop-packages-card-head">
              <button
                type="button"
                className="shop-packages-toggle"
                onClick={() => toggleCollapse(index)}
                aria-expanded={!isCollapsed}
                aria-label={isCollapsed ? '展开套餐' : '收起套餐'}
              >
                <span className="material-symbols-outlined">
                  {isCollapsed ? 'expand_more' : 'expand_less'}
                </span>
                <span className="shop-packages-card-title">{displayName}</span>
              </button>
              {!disabled && list.length > 1 ? (
                <button type="button" className="shop-packages-remove" onClick={() => removeAt(index)}>
                  删除
                </button>
              ) : null}
            </div>

            {!isCollapsed ? (
              <>
                <label className="shop-packages-field">
                  <span className="shop-packages-label">套餐名称 *</span>
                  <input
                    className="shop-packages-input"
                    placeholder="如：套餐A"
                    value={item.name}
                    disabled={disabled}
                    onChange={(e) => updateAt(index, { name: e.target.value })}
                  />
                </label>

                <label className="shop-packages-field">
                  <span className="shop-packages-label">价格（元） *</span>
                  <input
                    className="shop-packages-input"
                    type="number"
                    min={0}
                    step={0.01}
                    placeholder="198"
                    value={item.price}
                    disabled={disabled}
                    onChange={(e) => updateAt(index, { price: e.target.value })}
                  />
                </label>

                <label className="shop-packages-field">
                  <span className="shop-packages-label">菜品 *</span>
                  <textarea
                    className="shop-packages-textarea"
                    rows={3}
                    placeholder="红烧肉、红烧鱼、油焖茄子"
                    value={item.dishes}
                    disabled={disabled}
                    onChange={(e) => updateAt(index, { dishes: e.target.value })}
                  />
                </label>

                <label className="shop-packages-field">
                  <span className="shop-packages-label">使用时间</span>
                  <input
                    className="shop-packages-input"
                    placeholder="节假日除外"
                    value={item.usableTime || ''}
                    disabled={disabled}
                    onChange={(e) => updateAt(index, { usableTime: e.target.value })}
                  />
                </label>

                <label className="shop-packages-field">
                  <span className="shop-packages-label">套餐图片</span>
                  {item.imageUrl ? (
                    <img
                      src={item.imageUrl}
                      alt=""
                      style={{ width: '100%', maxHeight: 160, objectFit: 'cover', borderRadius: 8, marginBottom: 8 }}
                    />
                  ) : null}
                  <input
                    ref={(el) => {
                      fileRefs.current[index] = el;
                    }}
                    type="file"
                    accept="image/*"
                    hidden
                    disabled={disabled}
                    onChange={(e) => void pickPackageImage(index, e.target.files?.[0])}
                  />
                  <button
                    type="button"
                    className="shop-packages-add"
                    style={{ marginTop: 0 }}
                    disabled={disabled || uploadingIndex === index}
                    onClick={() => fileRefs.current[index]?.click()}
                  >
                    {uploadingIndex === index ? '上传中…' : item.imageUrl ? '更换图片' : '上传图片'}
                  </button>
                </label>

                <label className="shop-packages-field">
                  <span className="shop-packages-label">其他说明</span>
                  <input
                    className="shop-packages-input"
                    placeholder="不可叠加"
                    value={item.otherNotes || ''}
                    disabled={disabled}
                    onChange={(e) => updateAt(index, { otherNotes: e.target.value })}
                  />
                </label>
              </>
            ) : null}
          </section>
        );
      })}

      {!disabled && list.length < STORE_PACKAGE_MAX_COUNT ? (
        <button type="button" className="shop-packages-add" onClick={addItem}>
          <span className="material-symbols-outlined">add_circle</span>
          添加套餐
        </button>
      ) : null}
    </div>
  );
}