dukang/apps/admin-web/src/components/ProductDetailTemplatePicker.tsx

import { useEffect, useState } from 'react';
import { Alert, Button, Card, Popconfirm, Select, Space, Spin, Typography, message } from 'antd';
import type { FormInstance } from 'antd/es/form';
import { request, type Paginated } from '../lib/api';
import {
  getProductDetailTemplate,
  mapDtoToProductDetailTemplate,
  type ProductDetailTemplate,
  type ProductDetailTemplateDto,
} from '../lib/product-detail-templates';

type Props = {
  form: FormInstance;
  /** 当前商品香型，用于推荐匹配模板 */
  aromaType?: string;
};

function hasDetailContent(form: FormInstance) {
  const storyTitle = form.getFieldValue('storyTitle') as string | undefined;
  const storyText = form.getFieldValue('storyText') as string | undefined;
  const features = form.getFieldValue('features') as Array<{ title?: string; desc?: string }> | undefined;
  const detailImageUrls = form.getFieldValue('detailImageUrls') as string[] | undefined;
  const hasFeatures = (features ?? []).some((f) => f?.title?.trim() || f?.desc?.trim());
  const hasImages = (detailImageUrls ?? []).some((u) => u?.trim());
  return Boolean(storyTitle?.trim() || storyText?.trim() || hasFeatures || hasImages);
}

function applyTemplate(form: FormInstance, template: ProductDetailTemplate) {
  const { content } = template;
  const detailImageUrls = content.detailImageUrls?.length
    ? [...content.detailImageUrls]
    : [''];
  form.setFieldsValue({
    storyTitle: content.storyTitle ?? '',
    storyText: content.storyText ?? '',
    detailImageUrls,
    features:
      content.features && content.features.length > 0
        ? content.features.map((f) => ({ ...f }))
        : [{ icon: 'star', title: '', desc: '' }],
  });
  const imageHint = detailImageUrls.filter(Boolean).length;
  message.success(
    imageHint > 0
      ? `已应用模板「${template.label}」（含 ${imageHint} 张详情图，可逐张修改）`
      : `已应用模板「${template.label}」`,
  );
}

export default function ProductDetailTemplatePicker({ form, aromaType }: Props) {
  const [templates, setTemplates] = useState<ProductDetailTemplate[]>([]);
  const [loading, setLoading] = useState(true);
  const [selectedId, setSelectedId] = useState<string | undefined>();

  useEffect(() => {
    let cancelled = false;
    setLoading(true);
    request<Paginated<ProductDetailTemplateDto>>(
      '/admin/product-detail-templates?status=ACTIVE&pageSize=100',
    )
      .then((res) => {
        if (cancelled) return;
        const mapped = res.items.map(mapDtoToProductDetailTemplate);
        setTemplates(mapped);
        const defaultId =
          (aromaType && mapped.find((t) => t.aromaType === aromaType)?.id) ||
          mapped.find((t) => t.code === 'dukang-classic')?.id ||
          mapped[0]?.id;
        setSelectedId(defaultId);
      })
      .catch(() => {
        if (!cancelled) message.error('加载详情模板失败');
      })
      .finally(() => {
        if (!cancelled) setLoading(false);
      });
    return () => { cancelled = true; };
  }, [aromaType]);

  const selected = getProductDetailTemplate(templates, selectedId ?? '');

  function doApply() {
    if (!selected) return;
    applyTemplate(form, selected);
  }

  function handleApply() {
    if (!selected) return;
    if (hasDetailContent(form)) {
      return;
    }
    doApply();
  }

  if (loading) {
    return (
      <Card size="small" title="详情模板" style={{ marginBottom: 16 }}>
        <Spin size="small" />
      </Card>
    );
  }

  if (templates.length === 0) {
    return (
      <Card size="small" title="详情模板" style={{ marginBottom: 16 }}>
        <Typography.Text type="secondary">暂无可用模板，请先在「详情模板」菜单中创建。</Typography.Text>
      </Card>
    );
  }

  return (
    <Card size="small" title="详情模板" style={{ marginBottom: 16 }}>
      <Typography.Paragraph type="secondary" style={{ marginBottom: 12 }}>
        选择模板可一键填充详情长图、故事与卖点；套用后可在下方逐张替换图片。
      </Typography.Paragraph>
      <Space direction="vertical" style={{ width: '100%' }} size="middle">
        <Select
          style={{ width: '100%' }}
          placeholder="选择模板"
          value={selectedId}
          onChange={setSelectedId}
          options={templates.map((t) => ({
            value: t.id,
            label: t.label,
          }))}
        />
        {selected && (
          <Alert
            type="info"
            showIcon
            message={selected.description}
            description={
              <div style={{ fontSize: 12 }}>
                {selected.content.storyTitle && (
                  <div><strong>标题：</strong>{selected.content.storyTitle}</div>
                )}
                {(selected.content.detailImageUrls?.length ?? 0) > 0 && (
                  <div style={{ marginTop: 4 }}>
                    详情图：<strong>{selected.content.detailImageUrls?.length}</strong> 张（套用后可逐张修改）
                  </div>
                )}
                {(selected.content.features?.length ?? 0) > 0 && (
                  <div style={{ marginTop: 4 }}>
                    卖点：{selected.content.features?.map((f) => f.title).join('、')}
                  </div>
                )}
              </div>
            }
          />
        )}
        <Space>
          {hasDetailContent(form) ? (
            <Popconfirm
              title="将覆盖当前详情图、故事与卖点，是否继续？"
              onConfirm={doApply}
              okText="覆盖应用"
              cancelText="取消"
            >
              <Button type="primary">应用模板</Button>
            </Popconfirm>
          ) : (
            <Button type="primary" onClick={handleApply} disabled={!selected}>
              应用模板
            </Button>
          )}
          {aromaType && (
            <Button
              onClick={() => {
                const matched = templates.find((t) => t.aromaType === aromaType);
                if (matched) {
                  setSelectedId(matched.id);
                  if (!hasDetailContent(form)) {
                    applyTemplate(form, matched);
                  }
                }
              }}
            >
              按香型推荐
            </Button>
          )}
        </Space>
      </Space>
    </Card>
  );
}