// ============================================================
// WechatWorkPage — 企业微信二维码 Modal 内容
//
// 点击导航栏"企业微信"后以 Modal 形式展示二维码。
// 数据来源：GET /api/v1/creatives（Banner API）
//
// 识别逻辑：Banner 中 category === 'promotion' 的条目，
// 其 image_url 为企业微信二维码图片
// ============================================================

import { useEffect, useState, useCallback } from 'react';
import { Spin, Empty } from 'antd';
import { WechatOutlined } from '@ant-design/icons';
import { fetchBanners, type Banner } from '@/services/modules/banner';

export function WechatWorkPage() {
    const [banner, setBanner] = useState<Banner | null>(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState<string | null>(null);

    const load = useCallback(async () => {
        setLoading(true);
        setError(null);
        try {
            const list = await fetchBanners();
            // category === 'promotion' → 企业微信二维码
            const promotion = list.find(
                (item) => item.is_active && item.category === 'promotion',
            );
            setBanner(promotion ?? null);
        } catch (err) {
            setError((err as Error).message || '加载失败');
        } finally {
            setLoading(false);
        }
    }, []);
    useEffect(() => {
        void load();
    }, [load]);

    // 加载态
    if (loading) {
        return (
            <div style={{ display: 'flex', justifyContent: 'center', padding: 48 }}>
                <Spin description="加载中..." />
            </div>
        );
    }

    // 无数据 / 错误
    if (error || !banner || !banner.image_url) {
        return (
            <div style={{ display: 'flex', justifyContent: 'center', padding: 48 }}>
                <Empty
                    image={<WechatOutlined style={{ fontSize: 48, color: '#9CA3AF' }} />}
                    description={error || '暂未获取到企业微信二维码，请联系管理员'}
                />
            </div>
        );
    }

    return (
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 16, padding: 8 }}>
            {/* 二维码图片 */}
            <div
                style={{
                    width: 240,
                    height: 240,
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    borderRadius: 8,
                    background: '#fff',
                    border: '1px solid #E5E7EB',
                    overflow: 'hidden',
                }}
            >
                <img
                    src={banner.image_url}
                    alt="企业微信二维码"
                    style={{ width: '100%', height: '100%', objectFit: 'contain' }}
                />
            </div>

            {/* 标题（如果 Banner 有标题则显示） */}
            {banner.title && (
                <p style={{ margin: 0, fontSize: 14, fontWeight: 500, color: 'inherit' }}>
                    {banner.title}
                </p>
            )}

            {/* 提示文字 */}
            <p style={{ margin: 0, fontSize: 13, color: 'inherit', opacity: 0.5 }}>
                请使用微信扫描二维码添加企业微信
            </p>
        </div>
    );
}