/* global React, Tag, MetaCard, UserChip */
// FormMetaCard — 建立單資訊收合卡（預設收合）

const FormMetaCard = ({ form }) => {
  if (!form) return null;

  const imgLabel    = form.imgStatus  === "yes" ? "已上傳" : "未上傳";
  const syncLabel   = form.syncStatus === "yes" ? "已同步" : "未同步";
  const statusLabel = form.status === "submitted" ? "已送出" : "編輯中";

  const summary = `${form.batch} · ${form.applicant} · ${form.items.length} 筆 · ${statusLabel}`;

  return (
    <MetaCard summary={summary} sectionTitle="建立單資訊">
      <div className="meta-card__row">
        <dt>單號</dt>
        <dd>{form.id}</dd>
      </div>
      <div className="meta-card__row">
        <dt>新商品所屬批次</dt>
        <dd><span className="mono">{form.batch}</span></dd>
      </div>
      <div className="meta-card__row">
        <dt>申請人</dt>
        <dd><UserChip name={form.applicant} /></dd>
      </div>
      <div className="meta-card__row">
        <dt>建立日期</dt>
        <dd><span className="mono">{form.created}</span></dd>
      </div>
      <div className="meta-card__row">
        <dt>最後更新</dt>
        <dd><span className="mono">{form.updated}</span></dd>
      </div>
      <div className="meta-card__row">
        <dt>狀態</dt>
        <dd><Tag status={form.status} /></dd>
      </div>
      <div className="meta-card__row">
        <dt>新商品筆數</dt>
        <dd><b>{form.items.length}</b> 筆</dd>
      </div>
      <div className="meta-card__row">
        <dt>是否更新圖檔完成</dt>
        <dd>
          <Tag variant={form.imgStatus === "yes" ? "approved" : "draft"}>{imgLabel}</Tag>
        </dd>
      </div>
      <div className="meta-card__row">
        <dt>已同步至商品主檔</dt>
        <dd>
          <Tag variant={form.syncStatus === "yes" ? "approved" : "draft"}>{syncLabel}</Tag>
        </dd>
      </div>
    </MetaCard>
  );
};

Object.assign(window, { FormMetaCard });