import { Checkbox, Empty, Image, Space, Tag, Typography } from 'antd';
import { ProductAsset, ProductDetail } from '@/services/product';

const { Text } = Typography;

const GROUP_NAME: Record<string, string> = {
    main: '主图',
    sku: 'SKU 图',
    detail: '详情图',
    video: '视频',
    param: '参数图',
    generated: '生成图',
};

const STATUS_TAG: Record<string, { color: string; text: string }> = {
    pending: { color: 'default', text: '待下载' },
    downloading: { color: 'processing', text: '下载中' },
    uploaded: { color: 'green', text: '已就绪' },
    failed: { color: 'red', text: '失败' },
};

interface Props {
    assets: ProductAsset[];
    product: ProductDetail;
    onSave: (p: Partial<ProductDetail>) => void;
    onRefresh: () => void;
}

export default function ImagePanel({ assets, product, onSave }: Props) {
    const selected = (product.images ?? []) as string[];

    const toggle = (url: string) => {
        const next = selected.includes(url) ? selected.filter((u) => u !== url) : [...selected, url];
        onSave({ images: next });
    };

    const groups = [...new Set(assets.map((a) => a.group_key))];

    return (
        <div>
            <Text type="secondary">勾选图片加入发布主图（images 数组，顺序即 Ozon 展示顺序）。</Text>
            {groups.length === 0 && <Empty description="暂无素材" />}
            {groups.map((g) => (
                <div key={g} style={{ marginTop: 16 }}>
                    <Text strong>{GROUP_NAME[g] ?? g}</Text>
                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, marginTop: 8 }}>
                        {assets
                            .filter((a) => a.group_key === g)
                            .map((a) => {
                                const url = a.stored_url || a.source_url;
                                const tag = STATUS_TAG[a.status] ?? STATUS_TAG.pending;
                                const usable = a.status === 'uploaded';
                                return (
                                    <div key={a.id} style={{ width: 140 }}>
                                        <Image
                                            src={url}
                                            width={140}
                                            height={140}
                                            style={{ objectFit: 'cover', borderRadius: 6 }}
                                            fallback="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><rect width='140' height='140' fill='%23eee'/><text x='20' y='70' font-size='12' fill='%23999'>无预览</text></svg>"
                                        />
                                        <Space direction="vertical" size={2} style={{ marginTop: 6, width: '100%' }}>
                                            <Tag color={tag.color}>{tag.text}</Tag>
                                            {a.variant_name && <Text ellipsis style={{ fontSize: 12 }}>{a.variant_name}</Text>}
                                            {usable && a.stored_url && (
                                                <Checkbox
                                                    checked={selected.includes(a.stored_url)}
                                                    onChange={() => toggle(a.stored_url!)}
                                                >
                                                    加入主图
                                                </Checkbox>
                                            )}
                                        </Space>
                                    </div>
                                );
                            })}
                    </div>
                </div>
            ))}
        </div>
    );
}