import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import {
    App as AntdApp,
    Button,
    Card,
    Dropdown,
    Empty,
    Form,
    Input,
    Modal,
    Select,
    Space,
    Switch,
    Table,
    Tag,
    Tooltip,
    Typography,
} from 'antd';
import type { MenuProps, TableProps } from 'antd';
import {
    ApiOutlined,
    CloudDownloadOutlined,
    DeleteOutlined,
    MoreOutlined,
    PlusOutlined,
    ReloadOutlined,
} from '@ant-design/icons';
import axios from 'axios';
import type { Store, WatermarkTemplate } from '@atlas/contracts';
import { apiErrorCode, apiErrorMessage } from '@/services/api';
import { storesApi } from '@/services/stores';
import { watermarksApi } from '@/services/watermarks';
import { operationsApi, OPERATION_TERMINAL_STATUSES } from '@/services/operations';
import { usePlatform } from '@/services/platform';
import './ShopsPage.css';

const STORE_STATUS_MAP: Record<string, { color: string; text: string }> = {
    verifying: { color: 'gold', text: '验证中' },
    active: { color: 'green', text: '正常' },
    credential_invalid: { color: 'red', text: '凭据无效' },
    sync_error: { color: 'orange', text: '同步异常' },
    disabled: { color: 'default', text: '已停用' },
    deleted: { color: 'default', text: '已删除' },
};

interface StoreStatusView {
    color: string;
    text: string;
    /** 状态附注，如「等待平台验证结果」或凭据验证的脱敏原因 */
    note?: string;
}

/**
 * 把门店生命周期状态（status）与凭据状态（credential_status）派生为单一展示状态，
 * 避免两个内部状态并列渲染造成「验证中 + 未验证」的误导：
 * - verifying（或凭据仍 unknown，Atlas 尚未拿到验证结果）：只显示「验证中」并附注
 * - active 且凭据 valid：正常
 * - 凭据验证失败：401 → 凭据无效；403 → 访问被拒绝（提示检查 Client ID/API Key 归属与权限）
 * - 同步异常：直接展示 last_error.message——HTTP 400/404/422、超时/429/5xx 等
 *   验证请求失败不代表 API Key 无效（OZON_VERIFICATION_UNAVAILABLE 的消息即「暂时无法验证」）
 * 未穷举的组合按凭据状态（过期/待轮换）或生命周期兜底。
 */
function deriveStoreStatusView(store: Store): StoreStatusView {
    const { status, credential_status: credential, last_error } = store;
    if (status === 'verifying' || credential === 'unknown') {
        return { color: 'gold', text: '验证中', note: '等待平台验证结果' };
    }
    if (status === 'credential_invalid' || credential === 'invalid') {
        if (last_error?.code === 'OZON_CREDENTIAL_FORBIDDEN') {
            return {
                color: 'red',
                text: '访问被拒绝',
                note: '请检查 Client ID、API Key 是否同账户，以及密钥是否有读取权限',
            };
        }
        return { color: 'red', text: '凭据无效' };
    }
    if (status === 'sync_error') {
        return {
            color: 'orange',
            text: '同步异常',
            note: last_error?.message ?? '同步过程出现异常，可重新发起仓库同步或凭据验证',
        };
    }
    if (status === 'active' && credential === 'valid') {
        return { color: 'green', text: '正常' };
    }
    if (credential === 'expired') {
        return { color: 'red', text: '凭据已过期' };
    }
    if (credential === 'rotation_required') {
        return { color: 'gold', text: '凭据待轮换' };
    }
    const fallback = STORE_STATUS_MAP[status];
    return fallback ?? { color: 'default', text: status };
}

function formatDateTime(value: string | null): string {
    if (!value) return '—';
    const date = new Date(value);
    return Number.isNaN(date.getTime()) ? '—' : date.toLocaleString('zh-CN', { hour12: false });
}

interface CreateFormValues {
    name: string;
    client_id: string;
    api_key: string;
    currency_code: string;
    is_default: boolean;
    note?: string;
}

interface EditFormValues {
    name: string;
    currency_code: string;
    note?: string;
    api_key?: string;
    watermark_template_id?: string | null;
}

/**
 * 店铺管理页，契约见 docs/api/stores-and-platforms.md。
 * 列表按页头当前平台过滤（platform_id 查询参数）；创建与密钥替换为异步验证，
 * Worker 消费验证操作前店铺会停留在「验证中」状态。
 */
const ShopsPage = () => {
    const { message, modal } = AntdApp.useApp();
    const {
        currentPlatform,
        platforms,
        error: platformError,
        reload,
        refreshContext,
    } = usePlatform();

    const [stores, setStores] = useState<Store[]>([]);
    const [nextCursor, setNextCursor] = useState<string | null>(null);
    const [loading, setLoading] = useState(false);
    const [loadingMore, setLoadingMore] = useState(false);
    const [pendingStoreId, setPendingStoreId] = useState<string | null>(null);

    const [createOpen, setCreateOpen] = useState(false);
    const [creating, setCreating] = useState(false);
    const [createForm] = Form.useForm<CreateFormValues>();

    const [editingStore, setEditingStore] = useState<Store | null>(null);
    const [saving, setSaving] = useState(false);
    const [editForm] = Form.useForm<EditFormValues>();

    // 水印模板选项（工作空间全量活动模板，量小一次拉取）
    const [watermarkTemplates, setWatermarkTemplates] = useState<WatermarkTemplate[]>([]);
    const bindingBeforeRef = useRef<string | null>(null);

    const platformId = currentPlatform?.id ?? null;
    const currencyOptions = useMemo(
        () =>
            (currentPlatform?.supported_currencies ?? []).map((code) => ({
                value: code,
                label: code,
            })),
        [currentPlatform]
    );

    const loadStores = useCallback(
        async (targetPlatformId: string) => {
            setLoading(true);
            try {
                const result = await storesApi.list(targetPlatformId);
                setStores(result.data);
                setNextCursor(result.meta.next_cursor);
            } catch (err) {
                message.error(apiErrorMessage(err));
            } finally {
                setLoading(false);
            }
        },
        [message]
    );

    useEffect(() => {
        if (!platformId) return;
        void loadStores(platformId);
    }, [platformId, loadStores]);

    const loadMore = async () => {
        if (!platformId || !nextCursor) return;
        setLoadingMore(true);
        try {
            const result = await storesApi.list(platformId, nextCursor);
            setStores((prev) => [...prev, ...result.data]);
            setNextCursor(result.meta.next_cursor);
        } catch (err) {
            message.error(apiErrorMessage(err));
        } finally {
            setLoadingMore(false);
        }
    };

    // 水印模板选项与平台无关（工作空间全量），挂载后拉取一次
    useEffect(() => {
        void watermarksApi
            .list()
            .then((result) => setWatermarkTemplates(result.data))
            .catch(() => setWatermarkTemplates([]));
    }, []);

    /** 任何变更后同时刷新列表与页头默认门店摘要 */
    const refreshAll = useCallback(async () => {
        if (!platformId) return;
        await loadStores(platformId);
        await refreshContext();
    }, [platformId, loadStores, refreshContext]);

    // 组件卸载后停止轮询
    const mountedRef = useRef(true);
    useEffect(() => {
        mountedRef.current = true;
        return () => {
            mountedRef.current = false;
        };
    }, []);

    /**
     * 轮询异步验证/同步操作至终态，随后刷新列表。
     * 页面最终状态以刷新后的店铺资源为准（成败原因看店铺 last_error），不以 operation 为准；
     * 超时未终态则停止轮询并刷新一次，用户可手动刷新继续观察。
     */
    const pollOperation = useCallback(
        async (operationId: string) => {
            const intervalMs = 2500;
            const maxAttempts = 40;
            for (let attempt = 0; attempt < maxAttempts; attempt++) {
                await new Promise((resolve) => setTimeout(resolve, intervalMs));
                if (!mountedRef.current) return;
                try {
                    const operation = await operationsApi.get(operationId);
                    if (OPERATION_TERMINAL_STATUSES.has(operation.status)) break;
                } catch {
                    // 单次查询失败（网络抖动等）忽略，继续下一轮
                }
            }
            if (mountedRef.current) await refreshAll();
        },
        [refreshAll]
    );

    const openCreate = () => {
        createForm.resetFields();
        createForm.setFieldsValue({
            is_default: stores.length === 0,
            currency_code: currentPlatform?.default_currency_code ?? currencyOptions[0]?.value,
        });
        setCreateOpen(true);
    };

    const handleCreate = async (values: CreateFormValues) => {
        if (!currentPlatform) return;
        setCreating(true);
        try {
            const result = await storesApi.create({
                platform_id: currentPlatform.id,
                name: values.name.trim(),
                client_id: values.client_id.trim(),
                api_key: values.api_key,
                currency_code: values.currency_code,
                is_default: values.is_default,
                note: values.note?.trim() ? values.note.trim() : null,
            });
            message.success('店铺已创建，正在验证凭据，结果将自动刷新');
            setCreateOpen(false);
            await refreshAll();
            // 轮询验证操作至终态后自动刷新，无需手动刷新页面
            if (result?.operation) void pollOperation(result.operation.id);
        } catch (err) {
            message.error(apiErrorMessage(err));
        } finally {
            setCreating(false);
        }
    };

    const openEdit = (store: Store) => {
        setEditingStore(store);
        bindingBeforeRef.current = store.watermark_template?.id ?? null;
        editForm.setFieldsValue({
            name: store.name,
            currency_code: store.currency_code,
            note: store.note ?? '',
            watermark_template_id: store.watermark_template?.id ?? null,
        });
    };

    const handleEditSave = async (values: EditFormValues) => {
        if (!editingStore) return;
        const storeId = editingStore.id;
        const bindingBefore = bindingBeforeRef.current;
        const bindingAfter = values.watermark_template_id ?? null;
        const bindingChanged = bindingBefore !== bindingAfter;
        setSaving(true);
        try {
            const result = await storesApi.update(
                storeId,
                {
                    name: values.name.trim(),
                    currency_code: values.currency_code,
                    note: values.note?.trim() ? values.note.trim() : null,
                    // 留空表示保留旧密钥；填写则替换并重新触发验证
                    ...(values.api_key ? { api_key: values.api_key } : {}),
                },
                { revision: editingStore.revision }
            );
            // 水印绑定是独立接口，仅在与打开弹窗时不同才提交
            if (bindingChanged) {
                await storesApi.bindWatermark(storeId, bindingAfter);
            }
            if (result && 'operation' in result && result.operation) {
                message.success('已保存，正在验证新密钥，结果将自动刷新');
                setEditingStore(null);
                await refreshAll();
                void pollOperation(result.operation.id);
            } else {
                message.success('店铺已保存');
                setEditingStore(null);
                await refreshAll();
            }
        } catch (err) {
            // 乐观锁版本过期：提示后刷新列表，用户重新编辑拿到新 revision
            if (axios.isAxiosError(err) && err.response?.status === 409) {
                message.error('店铺信息已被其他操作更新，列表已刷新，请重新编辑');
                setEditingStore(null);
                await refreshAll();
            } else {
                message.error(apiErrorMessage(err));
            }
        } finally {
            setSaving(false);
        }
    };

    const withPending = async (store: Store, action: () => Promise<unknown>) => {
        setPendingStoreId(store.id);
        try {
            await action();
            await refreshAll();
        } catch (err) {
            message.error(apiErrorMessage(err));
        } finally {
            setPendingStoreId(null);
        }
    };

    const handleSetDefault = (store: Store) =>
        withPending(store, async () => {
            await storesApi.setDefault(store.id);
            message.success(`已将「${store.name}」设为默认店铺`);
        });

    const handleVerify = (store: Store) =>
        withPending(store, async () => {
            const result = await storesApi.requestCredentialVerification(store.id);
            message.success('已发起凭据验证，结果将自动刷新');
            if (result?.operation) void pollOperation(result.operation.id);
        });

    const handleSyncWarehouses = (store: Store) =>
        withPending(store, async () => {
            const result = await storesApi.requestWarehouseSync(store.id);
            message.success('已发起仓库同步，结果将自动刷新');
            if (result?.operation) void pollOperation(result.operation.id);
        });

    const handleDelete = (store: Store) => {
        modal.confirm({
            title: '删除店铺',
            content: `仅删除 Atlas 内的店铺连接，不影响平台后台。确定删除「${store.name}」吗？`,
            okText: '删除',
            okButtonProps: { danger: true },
            cancelText: '取消',
            onOk: () =>
                withPending(store, async () => {
                    try {
                        await storesApi.remove(store.id);
                        message.success('店铺已删除');
                    } catch (err) {
                        if (apiErrorCode(err) === 'DEFAULT_STORE_REPLACEMENT_REQUIRED') {
                            message.error(
                                '该店铺是默认店铺，请先将同平台的其他店铺设为默认，再删除'
                            );
                            return;
                        }
                        throw err;
                    }
                }),
        });
    };

    const rowMenu = (store: Store): MenuProps['items'] => [
        {
            key: 'set-default',
            icon: <ApiOutlined />,
            label: '设为默认店铺',
            disabled: store.is_default,
        },
        { key: 'verify', icon: <ReloadOutlined />, label: '重新验证凭据' },
        { key: 'sync', icon: <CloudDownloadOutlined />, label: '同步仓库' },
        { type: 'divider' },
        { key: 'delete', icon: <DeleteOutlined />, label: '删除店铺', danger: true },
    ];

    const handleRowMenuClick =
        (store: Store): MenuProps['onClick'] =>
        ({ key }) => {
            if (key === 'set-default') void handleSetDefault(store);
            else if (key === 'verify') void handleVerify(store);
            else if (key === 'sync') void handleSyncWarehouses(store);
            else if (key === 'delete') handleDelete(store);
        };

    const columns: TableProps<Store>['columns'] = [
        {
            title: '店铺名称',
            dataIndex: 'name',
            width: 220,
            render: (_, store) => (
                <Space size={6}>
                    <span>{store.name}</span>
                    {store.is_default && <Tag color="purple">默认</Tag>}
                </Space>
            ),
        },
        {
            title: 'Client ID',
            dataIndex: 'platform_client_id',
            width: 150,
            render: (value: string) => (
                <Typography.Text copyable={{ text: value }}>{value}</Typography.Text>
            ),
        },
        {
            title: '币种',
            dataIndex: 'currency_code',
            width: 80,
        },
        {
            title: '状态',
            dataIndex: 'status',
            width: 200,
            render: (_, store) => {
                const view = deriveStoreStatusView(store);
                return (
                    <Space size={4} wrap>
                        <Tag color={view.color}>{view.text}</Tag>
                        {view.note && (
                            <Typography.Text
                                type="secondary"
                                style={{ fontSize: 12, maxWidth: 180 }}
                                ellipsis={{ tooltip: view.note }}
                            >
                                {view.note}
                            </Typography.Text>
                        )}
                    </Space>
                );
            },
        },
        {
            title: '仓库',
            dataIndex: 'warehouse_count',
            width: 90,
            render: (count: number, store) => (
                <Tooltip
                    title={
                        store.warehouses_synced_at
                            ? `同步于 ${formatDateTime(store.warehouses_synced_at)}`
                            : '尚未同步仓库'
                    }
                >
                    <span>{store.warehouses_synced_at ? count : '—'}</span>
                </Tooltip>
            ),
        },
        {
            title: '水印模板',
            dataIndex: 'watermark_template',
            width: 130,
            render: (template: Store['watermark_template']) =>
                template ? (
                    template.name
                ) : (
                    <Typography.Text type="secondary">未绑定</Typography.Text>
                ),
        },
        {
            title: '备注',
            dataIndex: 'note',
            ellipsis: true,
            render: (note: string | null) =>
                note ? (
                    <Typography.Text ellipsis>{note}</Typography.Text>
                ) : (
                    <Typography.Text type="secondary">—</Typography.Text>
                ),
        },
        {
            title: '更新时间',
            dataIndex: 'updated_at',
            width: 170,
            render: (value: string) => (
                <Typography.Text type="secondary">{formatDateTime(value)}</Typography.Text>
            ),
        },
        {
            title: '操作',
            key: 'actions',
            width: 140,
            fixed: 'right',
            render: (_, store) => (
                <Space size={4}>
                    <Button type="link" size="small" onClick={() => openEdit(store)}>
                        编辑
                    </Button>
                    <Dropdown
                        menu={{ items: rowMenu(store), onClick: handleRowMenuClick(store) }}
                        trigger={['click']}
                    >
                        <Button
                            type="text"
                            size="small"
                            icon={<MoreOutlined />}
                            loading={pendingStoreId === store.id}
                        />
                    </Dropdown>
                </Space>
            ),
        },
    ];

    if (platformError) {
        return (
            <Card className="shops-page">
                <Empty description={`平台目录加载失败：${platformError}`}>
                    <Button onClick={reload}>重试</Button>
                </Empty>
            </Card>
        );
    }

    return (
        <div className="shops-page">
            <Card
                title={`店铺管理${currentPlatform ? ` · ${currentPlatform.name}` : ''}`}
                extra={
                    <Button
                        type="primary"
                        icon={<PlusOutlined />}
                        disabled={!currentPlatform}
                        onClick={openCreate}
                    >
                        添加店铺
                    </Button>
                }
            >
                {platforms.length === 0 && !currentPlatform ? (
                    <Empty description="暂无可用平台" />
                ) : (
                    <>
                        <Table
                            rowKey="id"
                            columns={columns}
                            dataSource={stores}
                            loading={loading}
                            pagination={false}
                            scroll={{ x: 1100 }}
                            locale={{
                                emptyText: currentPlatform
                                    ? `当前平台还没有店铺，点击右上角「添加店铺」完成 ${currentPlatform.name} 授权`
                                    : '请先在页头选择平台',
                            }}
                        />
                        {nextCursor && (
                            <div className="shops-load-more">
                                <Button loading={loadingMore} onClick={() => void loadMore()}>
                                    加载更多
                                </Button>
                            </div>
                        )}
                    </>
                )}
            </Card>

            <Modal
                title={`添加${currentPlatform?.name ?? ''}店铺`}
                open={createOpen}
                onCancel={() => setCreateOpen(false)}
                onOk={() => createForm.submit()}
                confirmLoading={creating}
                okText="创建并验证"
                cancelText="取消"
                destroyOnHidden
                maskClosable={false}
            >
                <Form<CreateFormValues> form={createForm} layout="vertical" onFinish={handleCreate}>
                    <Form.Item
                        name="name"
                        label="店铺名称"
                        required
                        rules={[{ required: true, whitespace: true, message: '请输入店铺名称' }]}
                    >
                        <Input maxLength={120} placeholder="例如：Ozon 俄罗斯主店" />
                    </Form.Item>
                    <Form.Item
                        name="client_id"
                        label="Client ID"
                        required
                        rules={[
                            { required: true, whitespace: true, message: '请输入平台 Client ID' },
                        ]}
                    >
                        <Input maxLength={120} placeholder="平台后台的 Client ID" />
                    </Form.Item>
                    <Form.Item
                        name="api_key"
                        label="API Key"
                        required
                        rules={[
                            { required: true, whitespace: true, message: '请输入平台 API Key' },
                        ]}
                        extra="仅用于服务端加密保存与凭据验证，不会出现在日志或响应中"
                    >
                        {/* 契约上限 8192（packages/contracts/src/stores.ts），不自行收紧 */}
                        <Input.Password
                            maxLength={8192}
                            placeholder="平台后台的 API Key"
                            autoComplete="new-password"
                        />
                    </Form.Item>
                    <Form.Item
                        name="currency_code"
                        label="默认计价币种"
                        required
                        rules={[{ required: true, message: '请选择币种' }]}
                    >
                        <Select options={currencyOptions} placeholder="选择币种" />
                    </Form.Item>
                    <Form.Item name="is_default" label="设为默认店铺" valuePropName="checked">
                        <Switch />
                    </Form.Item>
                    <Form.Item
                        name="note"
                        label="备注"
                        rules={[{ max: 2000, message: '备注不能超过 2000 字' }]}
                    >
                        <Input.TextArea rows={2} maxLength={2000} placeholder="选填" />
                    </Form.Item>
                </Form>
            </Modal>

            <Modal
                title={editingStore ? `编辑店铺：${editingStore.name}` : '编辑店铺'}
                open={!!editingStore}
                onCancel={() => setEditingStore(null)}
                onOk={() => editForm.submit()}
                confirmLoading={saving}
                okText="保存"
                cancelText="取消"
                destroyOnHidden
                maskClosable={false}
            >
                {editingStore && (
                    <Form<EditFormValues>
                        form={editForm}
                        layout="vertical"
                        onFinish={handleEditSave}
                    >
                        <Form.Item
                            name="name"
                            label="店铺名称"
                            required
                            rules={[{ required: true, message: '请输入店铺名称' }]}
                        >
                            <Input maxLength={120} />
                        </Form.Item>
                        <Form.Item
                            name="currency_code"
                            label="默认计价币种"
                            required
                            rules={[{ required: true, message: '请选择币种' }]}
                        >
                            <Select options={currencyOptions} />
                        </Form.Item>
                        <Form.Item
                            name="note"
                            label="备注"
                            rules={[{ max: 2000, message: '备注不能超过 2000 字' }]}
                        >
                            <Input.TextArea rows={2} maxLength={2000} placeholder="选填" />
                        </Form.Item>
                        <Form.Item
                            name="api_key"
                            label="替换 API Key"
                            extra="留空保留现有密钥；填写后将替换并重新验证凭据"
                        >
                            <Input.Password
                                maxLength={8192}
                                placeholder="不修改请留空"
                                autoComplete="new-password"
                            />
                        </Form.Item>
                        <Form.Item
                            name="watermark_template_id"
                            label="水印模板"
                            extra="作为商品图片编辑时的推荐水印；可随时更换或清空"
                        >
                            <Select
                                allowClear
                                placeholder="暂不绑定"
                                notFoundContent="暂无水印模板，可在水印管理页创建"
                                options={watermarkTemplates.map((template) => ({
                                    value: template.id,
                                    label: template.name,
                                }))}
                            />
                        </Form.Item>
                        <Form.Item label="Client ID">
                            <Typography.Text type="secondary">
                                {editingStore.platform_client_id}（平台与账户不可修改）
                            </Typography.Text>
                        </Form.Item>
                    </Form>
                )}
            </Modal>
        </div>
    );
};

export default ShopsPage;