import { createRoot } from 'react-dom/client';
import { useEffect, useMemo, useState } from 'react';
import {
    App as AntdApp,
    Alert,
    Button,
    Card,
    Collapse,
    ConfigProvider,
    Form,
    Input,
    Row,
    Col,
    Space,
    Tag,
    Typography,
    theme,
} from 'antd';
import zhCN from 'antd/locale/zh_CN';
import {
    CloudUploadOutlined,
    DownloadOutlined,
    ScanOutlined,
    SettingOutlined,
} from '@ant-design/icons';
import type { ScanResult, ImageMaterial } from '../../src/collector/scan';
import { cleanFilename } from '../../src/collector/url';
import { buildProduct, type TextEdits } from '../../src/export/builder';
import { chooseRootDir, writeProductFolder, type ExportResult } from '../../src/export/filesystem';
import { loadRootDir } from '../../src/export/idb';
import { buildMaterialsPayload } from '../../src/api/client';
import { loadSettings, saveSettings, type BackendSettings } from '../../src/storage/settings';

const { Title, Text } = Typography;

const GROUP_ORDER: Array<{ key: ImageMaterial['groupKey']; name: string }> = [
    { key: 'main', name: '主图' },
    { key: 'sku', name: 'SKU图' },
    { key: 'detail', name: '详情图' },
    { key: 'video', name: '视频' },
];

function defaultSelection(result: ScanResult): Set<string> {
    const sel = new Set<string>();
    let detailCount = 0;
    for (const img of result.images) {
        if (img.groupKey === 'detail') {
            if (detailCount < 3) sel.add(img.key);
            detailCount++;
        } else {
            sel.add(img.key);
        }
    }
    return sel;
}

function norm(s: string): string {
    return s.toLowerCase().trim().replace(/[,，:：()（）]/g, '');
}

/** 从参数表里抽出「包装重量 + 包装尺寸(长宽高)」，其余参数保留 */
function extractWeightAndDims(pairs: Array<{ key: string; value: string }>): {
    weight: string;
    dims: { l: string; w: string; h: string };
    dimsUnit: 'mm' | 'cm';
    remaining: Array<{ key: string; value: string }>;
} {
    // 包装重量：优先「包装重量」，其次「重量 / вес」
    const weightP =
        pairs.find((p) => {
            const k = norm(p.key);
            return k.includes('包装重量') || k.includes('вес упаковки');
        }) ??
        pairs.find((p) => {
            const k = norm(p.key);
            return k.includes('重量') || k.includes('вес');
        });

    // 分开的长/宽/高（用「长度/宽度/高度」而非「长/宽/高」，避免误匹配「长X宽x高」这种合并键）
    const lenP = pairs.find((p) => {
        const k = norm(p.key);
        return k.includes('包装长度') || k.includes('长度') || k.includes('длина');
    });
    const widP = pairs.find((p) => {
        const k = norm(p.key);
        return k.includes('包装宽度') || k.includes('宽度') || k.includes('ширина');
    });
    const heiP = pairs.find((p) => {
        const k = norm(p.key);
        return k.includes('包装高度') || k.includes('高度') || k.includes('высота');
    });

    let l = lenP?.value ?? '';
    let w = widP?.value ?? '';
    let h = heiP?.value ?? '';
    let dimsUnit: 'mm' | 'cm' = 'cm';

    // 合并的「包装尺寸（长X宽x高），厘米 = 48*18*25」→ 拆分
    let dimP: { key: string; value: string } | undefined;
    if (!l && !w && !h) {
        dimP = pairs.find((p) => norm(p.key).includes('包装尺寸'));
        if (!dimP) dimP = pairs.find((p) => norm(p.key).includes('размер') || norm(p.key).includes('габарит'));
        if (!dimP) dimP = pairs.find((p) => norm(p.key).includes('尺寸'));
        if (dimP) {
            const isMm = /(мм|mm|毫米)/.test(`${dimP.key} ${dimP.value}`.toLowerCase());
            dimsUnit = isMm ? 'mm' : 'cm';
            const nums = dimP.value.match(/\d+(?:[.,]\d+)?/g) ?? [];
            if (nums.length >= 3) {
                l = nums[0] ?? '';
                w = nums[1] ?? '';
                h = nums[2] ?? '';
            }
        }
    } else {
        const combined = `${lenP?.key ?? ''} ${lenP?.value ?? ''} ${widP?.value ?? ''} ${heiP?.value ?? ''}`.toLowerCase();
        dimsUnit = /(мм|mm|毫米)/.test(combined) ? 'mm' : 'cm';
    }

    // 其余参数保留（去掉已抽走的重量/尺寸项）
    const used = new Set([weightP, lenP, widP, heiP, dimP].filter(Boolean));
    const remaining = pairs.filter((p) => !used.has(p));

    return { weight: weightP?.value ?? '', dims: { l, w, h }, dimsUnit, remaining };
}

/** 调用页面里的采集入口，返回 ScanResult 或 null（未加载/不支持） */
async function scanTab(tabId: number): Promise<ScanResult | null> {
    try {
        const [r] = await chrome.scripting.executeScript({
            target: { tabId },
            func: () => (window as any).__SellerHelperOzon?.scan?.(),
        });
        return (r?.result as ScanResult) ?? null;
    } catch {
        return null;
    }
}

/** 判断当前 tab 是否 Ozon 商品详情页 */
async function isProductPage(tabId: number): Promise<boolean> {
    try {
        const [r] = await chrome.scripting.executeScript({
            target: { tabId },
            func: () =>
                /\/product\/[^/]+-\d+\/?/.test(location.pathname) ||
                /\/context\/detail\/id\/\d+/.test(location.pathname),
        });
        return !!r?.result;
    } catch {
        return false;
    }
}

function Panel() {
    const { message } = AntdApp.useApp();
    const { token } = theme.useToken();

    const [form] = Form.useForm();
    const [status, setStatus] = useState('');
    const [error, setError] = useState('');
    const [result, setResult] = useState<ScanResult | null>(null);
    const [selected, setSelected] = useState<Set<string>>(new Set());
    const [params, setParams] = useState<Array<{ key: string; value: string }>>([]);
    const [dimsUnit, setDimsUnit] = useState<'mm' | 'cm'>('cm');
    const [folderName, setFolderName] = useState('');
    const [rootLabel, setRootLabel] = useState('');
    const [exporting, setExporting] = useState(false);
    const [uploading, setUploading] = useState(false);
    const [exportResult, setExportResult] = useState<ExportResult | null>(null);
    const [uploadResult, setUploadResult] = useState<{ product_id: string; stage: string; assets_queued: number } | null>(null);

    // 服务端设置（上传用）
    const [settings, setSettings] = useState<BackendSettings | null>(null);
    const [baseUrl, setBaseUrl] = useState('http://127.0.0.1:8800');
    const [appToken, setAppToken] = useState('');

    useEffect(() => {
        loadRootDir().then((h) => setRootLabel(h ? h.name : ''));
        loadSettings().then((s) => {
            setSettings(s);
            setBaseUrl(s.baseUrl);
            setAppToken(s.token);
        });
    }, []);

    const groups = useMemo(() => {
        if (!result) return [];
        return GROUP_ORDER.map((g) => ({
            ...g,
            items: result.images.filter((img) => img.groupKey === g.key),
        })).filter((g) => g.items.length > 0);
    }, [result]);

    const selectedCount = useMemo(() => {
        if (!result) return 0;
        return result.images.filter((img) => selected.has(img.key)).length;
    }, [result, selected]);

    const onSaveSettings = async () => {
        const s: BackendSettings = { baseUrl: baseUrl.trim(), token: appToken.trim() };
        await saveSettings(s);
        setSettings(s);
        message.success('服务端设置已保存');
    };

    const handleScan = async () => {
        setError('');
        setResult(null);
        setExportResult(null);
        setUploadResult(null);
        setStatus('采集中');

        try {
            const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
            if (!tab?.id) {
                setError('无法获取当前标签页');
                setStatus('');
                return;
            }

            let data = await scanTab(tab.id);

            // 内容脚本没加载（页面在插件安装/重载前就打开了）→ 手动注入后重试
            if (!data) {
                try {
                    await chrome.scripting.executeScript({
                        target: { tabId: tab.id },
                        files: ['content-scripts/content.js'],
                    });
                    await new Promise((r) => setTimeout(r, 300));
                    data = await scanTab(tab.id);
                } catch {
                    /* 注入失败忽略，走下方错误提示 */
                }
            }

            if (!data) {
                const isProduct = await isProductPage(tab.id);
                setError(
                    isProduct
                        ? '采集失败：内容脚本未生效，请刷新商品页后重试'
                        : '当前页面不是 Ozon 商品详情页，请打开一个商品页后再采集',
                );
                setStatus('');
                return;
            }

            setResult(data);
            setSelected(defaultSelection(data));
            setFolderName(cleanFilename(data.texts.find((t) => t.kind === 'title')?.content ?? '') || '');
            const rawParams = data.texts.find((t) => t.kind === 'params')?.pairs ?? [];
            const { weight, dims, dimsUnit: du, remaining } = extractWeightAndDims(rawParams);
            setParams(remaining);
            setDimsUnit(du);
            // 填表单
            form.setFieldsValue({
                title: data.texts.find((t) => t.kind === 'title')?.content ?? '',
                price: data.texts.find((t) => t.kind === 'price')?.content ?? '',
                brand: data.texts.find((t) => t.kind === 'brand')?.content || '无品牌',
                sellingPoints: data.texts.find((t) => t.kind === 'selling_point')?.content ?? '',
                desc: data.texts.find((t) => t.kind === 'desc')?.content ?? '',
                packWeight: weight,
                packLen: dims.l,
                packWidth: dims.w,
                packHeight: dims.h,
            });
            setStatus('采集完成');
        } catch (err) {
            setError(`采集失败: ${err instanceof Error ? err.message : String(err)}`);
            setStatus('');
        }
    };

    const handlePickDir = async () => {
        setError('');
        try {
            // 始终弹选择器（选择或更换目录）
            const handle = await chooseRootDir();
            setRootLabel(handle.name);
            message.success(`已选择目录「${handle.name}」`);
        } catch (err) {
            // 用户取消选择（AbortError）不算错误，静默处理
            if (err instanceof DOMException && err.name === 'AbortError') {
                return;
            }
            setError(`选择目录失败: ${err instanceof Error ? err.message : String(err)}`);
        }
    };

    const toggleOne = (key: string) => {
        setSelected((prev) => {
            const next = new Set(prev);
            if (next.has(key)) next.delete(key);
            else next.add(key);
            return next;
        });
    };

    const toggleGroup = (items: ImageMaterial[]) => {
        setSelected((prev) => {
            const next = new Set(prev);
            const allOn = items.every((i) => next.has(i.key));
            for (const i of items) {
                if (allOn) next.delete(i.key);
                else next.add(i.key);
            }
            return next;
        });
    };

    const getEdits = (): TextEdits => {
        const v = form.getFieldsValue();
        return {
            title: v.title,
            price: v.price,
            brand: v.brand,
            sellingPoints: v.sellingPoints,
            desc: v.desc,
            params,
            weight: v.packWeight,
            dims: { l: v.packLen, w: v.packWidth, h: v.packHeight },
            dimsUnit,
        };
    };

    const handleExport = async () => {
        if (!result) return;
        if (selectedCount === 0) {
            setError('请至少勾选一张图片');
            return;
        }
        setExporting(true);
        setError('');
        setExportResult(null);
        try {
            const name = folderName.trim() || `ozon-${result.itemId ?? 'product'}`;
            const built = buildProduct(result, selected, getEdits());
            const res = await writeProductFolder(name, built.product, built.sources, built.files);
            setExportResult(res);
            message.success('已导出到本地');
        } catch (err) {
            setError(`导出失败: ${err instanceof Error ? err.message : String(err)}`);
        } finally {
            setExporting(false);
        }
    };

    const handleUpload = async () => {
        if (!result) return;
        if (selectedCount === 0) {
            setError('请至少勾选一张图片');
            return;
        }
        setUploading(true);
        setError('');
        setUploadResult(null);
        try {
            const payload = buildMaterialsPayload(result, selected, getEdits());
            const resp = await chrome.runtime.sendMessage({
                action: 'uploadMaterials',
                baseUrl: settings?.baseUrl ?? 'http://127.0.0.1:8800',
                token: settings?.token ?? '',
                payload,
            });
            if (!resp?.ok) throw new Error(resp?.error ?? '上传失败');
            setUploadResult(resp.data);
            message.success('已上传服务端，进入采集箱');
        } catch (err) {
            setError(`上传失败: ${err instanceof Error ? err.message : String(err)}`);
        } finally {
            setUploading(false);
        }
    };

    return (
        <div style={{ minHeight: '100vh' }}>
            {/* 顶部固定：标题 + 采集按钮 */}
            <div style={{ position: 'sticky', top: 0, zIndex: 20, background: '#f5f5f5', padding: '12px 12px 8px', borderBottom: '1px solid #f0f0f0' }}>
                <div style={{ marginBottom: 8 }}>
                    <Title level={4} style={{ margin: 0 }}>
                        🪆 套娃采集助手
                    </Title>
                    <Text type="secondary" style={{ fontSize: 12 }}>
                        采集 Ozon 商品页 · 导出到本地或上传服务端
                    </Text>
                </div>

                {/* 采集按钮 */}
                <Button
                    type="primary"
                    block
                    size="large"
                    icon={<ScanOutlined />}
                    loading={status === '采集中'}
                    onClick={handleScan}
                >
                    {status === '采集中' ? '采集中…' : '开始采集当前页'}
                </Button>
            </div>

            <div style={{ padding: '0 12px 12px' }}>

            {/* 服务端设置 */}
            <Collapse
                ghost
                size="small"
                style={{ marginTop: 8 }}
                items={[
                    {
                        key: 'settings',
                        label: (
                            <Space size={4}>
                                <SettingOutlined />
                                <span style={{ fontSize: 12 }}>服务端设置（上传用）</span>
                            </Space>
                        ),
                        children: (
                            <div>
                                <div style={{ marginBottom: 8 }}>
                                    <Text style={{ fontSize: 12 }}>后端地址</Text>
                                    <Input
                                        value={baseUrl}
                                        onChange={(e) => setBaseUrl(e.target.value)}
                                        placeholder="http://127.0.0.1:8800"
                                    />
                                </div>
                                <div style={{ marginBottom: 8 }}>
                                    <Text style={{ fontSize: 12 }}>访问 Token（可选，留空即可）</Text>
                                    <Input.Password
                                        value={appToken}
                                        onChange={(e) => setAppToken(e.target.value)}
                                        placeholder="后续加账户体系时再填"
                                    />
                                </div>
                                <Button size="small" onClick={onSaveSettings}>
                                    保存设置
                                </Button>
                            </div>
                        ),
                    },
                ]}
            />

            {error && <Alert type="error" showIcon message={error} style={{ marginTop: 8 }} />}

            {result && (
                <>
                    <Card size="small" style={{ marginTop: 12 }} title="采集信息（可修改）">
                        <div style={{ marginBottom: 8 }}>
                            <Space wrap size={4}>
                                <Tag color="purple">{result.platform.toUpperCase()}</Tag>
                                {result.itemId && <Tag>{result.itemId}</Tag>}
                                <Tag color="blue">来源:{result.source}</Tag>
                            </Space>
                        </div>

                        <Form form={form} layout="vertical" size="small">
                            <Form.Item label="标题" name="title">
                                <Input.TextArea autoSize={{ minRows: 2, maxRows: 4 }} />
                            </Form.Item>
                            <Row gutter={8}>
                                <Col span={12}>
                                    <Form.Item label="价格" name="price">
                                        <Input />
                                    </Form.Item>
                                </Col>
                                <Col span={12}>
                                    <Form.Item label="品牌" name="brand">
                                        <Input />
                                    </Form.Item>
                                </Col>
                            </Row>
                            <Form.Item label="包装重量" name="packWeight">
                                <Input placeholder="如 3.5 кг" />
                            </Form.Item>
                            <Form.Item label="包装尺寸（长 × 宽 × 高）">
                                <Space.Compact block>
                                    <Form.Item name="packLen" noStyle>
                                        <Input placeholder="长" />
                                    </Form.Item>
                                    <Form.Item name="packWidth" noStyle>
                                        <Input placeholder="宽" />
                                    </Form.Item>
                                    <Form.Item name="packHeight" noStyle>
                                        <Input placeholder="高" />
                                    </Form.Item>
                                </Space.Compact>
                            </Form.Item>
                            <Form.Item label="卖点" name="sellingPoints">
                                <Input.TextArea autoSize={{ minRows: 2, maxRows: 4 }} />
                            </Form.Item>
                            <Form.Item label="描述" name="desc">
                                <Input.TextArea autoSize={{ minRows: 3, maxRows: 8 }} />
                            </Form.Item>

                            {/* 参数表（左侧参数名只读，右侧参数值可编辑） */}
                            {params.length > 0 && (
                                <Collapse
                                    ghost
                                    size="small"
                                    items={[
                                        {
                                            key: 'params',
                                            label: <Text style={{ fontSize: 12 }}>参数表（{params.length} 项）</Text>,
                                            children: (
                                                <div>
                                                    {params.map((p, i) => (
                                                        <Row key={i} gutter={8} align="middle" style={{ marginBottom: 6 }}>
                                                            <Col span={10}>
                                                                <Text type="secondary" style={{ fontSize: 12, wordBreak: 'break-all', display: 'block' }}>
                                                                    {p.key || '—'}
                                                                </Text>
                                                            </Col>
                                                            <Col span={14}>
                                                                <Input
                                                                    size="small"
                                                                    value={p.value}
                                                                    onChange={(e) => {
                                                                        const next = [...params];
                                                                        next[i] = { ...next[i], value: e.target.value };
                                                                        setParams(next);
                                                                    }}
                                                                />
                                                            </Col>
                                                        </Row>
                                                    ))}
                                                </div>
                                            ),
                                        },
                                    ]}
                                />
                            )}
                        </Form>
                    </Card>

                    {/* 图片分组 */}
                    <Card size="small" style={{ marginTop: 12 }} title={`图片素材（已选 ${selectedCount} 张）`}>
                        {groups.map((g) => {
                            const allOn = g.items.every((i) => selected.has(i.key));
                            return (
                                <div key={g.key} style={{ marginBottom: 12 }}>
                                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 6 }}>
                                        <Text strong style={{ fontSize: 12 }}>
                                            {g.name} ({g.items.length})
                                        </Text>
                                        <a style={{ fontSize: 12 }} onClick={() => toggleGroup(g.items)}>
                                            {allOn ? '取消全选' : '全选'}
                                        </a>
                                    </div>
                                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                                        {g.items.map((img) => {
                                            const on = selected.has(img.key);
                                            return (
                                                <div
                                                    key={img.key}
                                                    onClick={() => toggleOne(img.key)}
                                                    style={{
                                                        position: 'relative',
                                                        width: 64,
                                                        height: 64,
                                                        border: on ? `2px solid ${token.colorPrimary}` : '1px solid #e0e0e0',
                                                        borderRadius: 8,
                                                        overflow: 'hidden',
                                                        cursor: 'pointer',
                                                        background: '#f5f5f5',
                                                    }}
                                                >
                                                    {img.type === 'video' ? (
                                                        <div style={{ position: 'relative', width: '100%', height: '100%', background: '#eee' }}>
                                                            {img.thumbUrl && !/\.(mp4|webm|m3u8|mov|avi)(\?|$)/i.test(img.thumbUrl) ? (
                                                                <img src={img.thumbUrl} alt="视频封面" style={{ width: '100%', height: '100%', objectFit: 'cover' }} loading="lazy" />
                                                            ) : null}
                                                            <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'rgba(0,0,0,0.25)' }}>
                                                                <span style={{ color: '#fff', fontSize: 20, lineHeight: 1 }}>▶</span>
                                                            </div>
                                                        </div>
                                                    ) : (
                                                        <img src={img.thumbUrl} alt={img.variantName ?? g.name} style={{ width: '100%', height: '100%', objectFit: 'cover' }} loading="lazy" />
                                                    )}
                                                    {on && (
                                                        <div style={{ position: 'absolute', inset: 0, background: `rgba(139,92,246,0.15)` }}>
                                                            <span style={{ position: 'absolute', top: 2, right: 5, color: token.colorPrimary, fontSize: 14 }}>✓</span>
                                                        </div>
                                                    )}
                                                    {img.variantName && (
                                                        <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, background: 'rgba(0,0,0,0.5)', color: '#fff', fontSize: 9, padding: '1px 2px', textAlign: 'center', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
                                                            {img.variantName}
                                                        </div>
                                                    )}
                                                </div>
                                            );
                                        })}
                                    </div>
                                </div>
                            );
                        })}
                    </Card>

                    {/* 警告 */}
                    {result.warnings.length > 0 && (
                        <div style={{ marginTop: 12 }}>
                            {result.warnings.map((w, i) => (
                                <Alert key={i} type="warning" showIcon message={w} style={{ marginBottom: 4 }} />
                            ))}
                        </div>
                    )}

                    <div style={{ position: 'sticky', bottom: 0, background: '#f5f5f5', padding: '12px 0', zIndex: 10, marginTop: 12, borderTop: '1px solid #f0f0f0' }}>
                    {/* 本地文件夹名 + 导出/上传（固定在底部） */}
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
                        <Text style={{ fontSize: 12, whiteSpace: 'nowrap' }}>本地文件夹名</Text>
                        <Input
                            value={folderName}
                            onChange={(e) => setFolderName(e.target.value)}
                            placeholder="留空用商品标题"
                            size="small"
                        />
                    </div>
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 8 }}>
                        <div style={{ fontSize: 11, color: '#888', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                            {rootLabel ? `保存到：${rootLabel}` : '未选择保存目录'}
                        </div>
                        <Button size="small" onClick={handlePickDir}>
                            {rootLabel ? '更换目录' : '选择目录'}
                        </Button>
                    </div>

                    <Row gutter={8}>
                        <Col span={12}>
                            <Button
                                block
                                icon={<DownloadOutlined />}
                                onClick={handleExport}
                                loading={exporting}
                                disabled={selectedCount === 0}
                            >
                                导出到本地
                            </Button>
                        </Col>
                        <Col span={12}>
                            <Button
                                block
                                type="primary"
                                icon={<CloudUploadOutlined />}
                                onClick={handleUpload}
                                loading={uploading}
                                disabled={selectedCount === 0}
                            >
                                上传服务端
                            </Button>
                        </Col>
                    </Row>

                    {exportResult && (
                        <Alert
                            type={exportResult.failed.length ? 'warning' : 'success'}
                            showIcon
                            style={{ marginTop: 8 }}
                            message={`已写入 ${exportResult.written} 张图片到「${exportResult.folderName}」${exportResult.failed.length ? `，${exportResult.failed.length} 张失败` : ''}`}
                        />
                    )}
                    {uploadResult && (
                        <Alert
                            type="success"
                            showIcon
                            style={{ marginTop: 8 }}
                            message={`已上传服务端，商品已进入采集箱（素材 ${uploadResult.assets_queued} 张，后台转存中）`}
                        />
                    )}
                    </div>
                </>
            )}

            {!result && (
                <div style={{ marginTop: 16, padding: 12, background: '#fafafa', borderRadius: 8, fontSize: 12, color: '#888' }}>
                    <div>💡 使用说明：</div>
                    <ol style={{ margin: '4px 0 0 18px', padding: 0 }}>
                        <li>打开 Ozon 商品详情页（ru/kz/by）</li>
                        <li>滚动到页面底部（加载详情图）</li>
                        <li>点「开始采集」→ 核对/修改信息 → 导出或上传</li>
                    </ol>
                </div>
            )}
            </div>
        </div>
    );
}

function Root() {
    return (
        <ConfigProvider
            locale={zhCN}
            theme={{
                token: {
                    colorPrimary: '#8b5cf6',
                    borderRadius: 8,
                },
            }}
        >
            <AntdApp>
                <Panel />
            </AntdApp>
        </ConfigProvider>
    );
}

const root = createRoot(document.getElementById('root')!);
root.render(<Root />);

export default Root;