import { Telegram, Feishu, Lark, DingTalk, Weixin, WeCom, QQ, Discord, Slack } from '@/components/BrandIcons';
import { OpenInNew } from '@mui/icons-material';
import { Box, Link, Stack, Typography } from '@mui/material';
import type { ComponentType } from 'react';

export interface PlatformGuideConfig {
    id: string;
    name: string;
    description: string;
    icon: string;
    /** BrandIcon component for consistent SVG rendering */
    BrandIcon?: ComponentType<{ size?: number; sx?: any }>;
    status: 'available' | 'coming-soon' | 'beta';
    path: string;
    color: string;
    guide: React.ReactNode;
}

export const platformGuides: Record<string, PlatformGuideConfig> = {
    telegram: {
        id: 'telegram',
        name: 'Telegram',
        description: 'Popular cloud-based instant messaging service',
        icon: '📱',
        BrandIcon: Telegram,
        status: 'available',
        path: '/remote-control/telegram',
        color: '#0088cc',
        guide: (
            <Stack spacing={2}>
                <Box sx={{ bgcolor: 'info.lighter', p: 1.5, borderRadius: 1, border: '1px solid', borderColor: 'info.light' }}>
                    <Typography variant="body2" color="info.dark">
                        Tip: Configure traffic proxy as needed for network access.
                    </Typography>
                </Box>
                <Box>
                    <Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 1 }}>
                        1. Create a bot
                    </Typography>
                    <Typography variant="body2" color="text.secondary">
                        Open Telegram, search{' '}
                        <Link href="https://t.me/BotFather" target="_blank">
                            @BotFather <OpenInNew sx={{ fontSize: 10 }} />
                        </Link>
                    </Typography>
                    <Typography variant="body2" color="text.secondary" sx={{ mt: 0.5 }}>
                        Send <code>/newbot</code>, follow the prompts, and copy the token
                    </Typography>
                </Box>
                <Box>
                    <Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 1 }}>
                        2. Add bot
                    </Typography>
                    <Typography variant="body2" color="text.secondary">
                        Click "Add Bot" button above and paste the token to create your bot.
                    </Typography>
                </Box>
            </Stack>
        ),
    },
    feishu: {
        id: 'feishu',
        name: 'Feishu (飞书)',
        description: 'Enterprise collaboration platform',
        icon: '🚀',
        BrandIcon: Feishu,
        status: 'available',
        path: '/remote-control/feishu',
        color: '#00d6b9',
        guide: (
            <Stack spacing={2}>
                <Box sx={{ bgcolor: 'info.lighter', p: 1.5, borderRadius: 1, border: '1px solid', borderColor: 'info.light' }}>
                    <Typography variant="body2" color="info.dark">
                        Tip: Feishu uses WebSocket - no public IP needed. Configure traffic proxy as needed.
                    </Typography>
                </Box>
                <Box>
                    <Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 1 }}>
                        1. Scan to create (recommended)
                    </Typography>
                    <Typography variant="body2" color="text.secondary">
                        Click "Add Bot" above, choose <strong>One-click (scan QR)</strong>, and scan the QR code with the Feishu mobile app. The app, permissions and events are created automatically and the credentials are saved for you.
                    </Typography>
                </Box>
                <Box>
                    <Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 1 }}>
                        2. Or create manually
                    </Typography>
                    <Typography variant="body2" color="text.secondary" component="div">
                        <Box component="ul" sx={{ pl: 2, m: 0 }}>
                            <li>Open <Link href="https://open.feishu.cn/page/launcher?from=backend_oneclick" target="_blank">Feishu one-click app creation <OpenInNew sx={{ fontSize: 10 }} /></Link> and log in</li>
                            <li>Enter an app name and confirm — bot capability, permissions, events and Long Connection mode are pre-configured for you</li>
                            <li>Copy the generated <strong>App ID</strong> and <strong>App Secret</strong>, then enter them via "Add Bot" → <strong>Enter manually</strong></li>
                        </Box>
                    </Typography>
                </Box>
            </Stack>
        ),
    },
    lark: {
        id: 'lark',
        name: 'Lark',
        description: 'Global version of Feishu',
        icon: '🐦',
        BrandIcon: Lark,
        status: 'available',
        path: '/remote-control/lark',
        color: '#00d6b9',
        guide: (
            <Stack spacing={2}>
                <Box sx={{ bgcolor: 'info.lighter', p: 1.5, borderRadius: 1, border: '1px solid', borderColor: 'info.light' }}>
                    <Typography variant="body2" color="info.dark">
                        Tip: Lark uses WebSocket - no public IP needed. Configure traffic proxy as needed.
                    </Typography>
                </Box>
                <Box>
                    <Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 1 }}>
                        1. Scan to create (recommended)
                    </Typography>
                    <Typography variant="body2" color="text.secondary">
                        Click "Add Bot" above, choose <strong>One-click (scan QR)</strong>, and scan the QR code with the Lark mobile app. The app, permissions and events are created automatically and the credentials are saved for you.
                    </Typography>
                </Box>
                <Box>
                    <Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 1 }}>
                        2. Or create manually
                    </Typography>
                    <Typography variant="body2" color="text.secondary" component="div">
                        <Box component="ul" sx={{ pl: 2, m: 0 }}>
                            <li>Open <Link href="https://open.larksuite.com/page/launcher?from=backend_oneclick" target="_blank">Lark one-click app creation <OpenInNew sx={{ fontSize: 10 }} /></Link> and log in</li>
                            <li>Enter an app name and confirm — bot capability, permissions, events and Long Connection mode are pre-configured for you</li>
                            <li>Copy the generated <strong>App ID</strong> and <strong>App Secret</strong>, then enter them via "Add Bot" → <strong>Enter manually</strong></li>
                        </Box>
                    </Typography>
                </Box>
            </Stack>
        ),
    },
    dingtalk: {
        id: 'dingtalk',
        name: 'DingTalk (钉钉)',
        description: 'Enterprise communication and collaboration',
        icon: '💬',
        BrandIcon: DingTalk,
        status: 'available',
        path: '/remote-control/dingtalk',
        color: '#0089ff',
        guide: (
            <Stack spacing={2}>
                <Box sx={{ bgcolor: 'info.lighter', p: 1.5, borderRadius: 1, border: '1px solid', borderColor: 'info.light' }}>
                    <Typography variant="body2" color="info.dark">
                        Tip: DingTalk uses Stream Mode - no public IP required. Configure traffic proxy as needed.
                    </Typography>
                </Box>
                <Box>
                    <Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 1 }}>
                        1. Create a DingTalk bot
                    </Typography>
                    <Typography variant="body2" color="text.secondary" component="div">
                        <Box component="ul" sx={{ pl: 2, m: 0 }}>
                            <li>Visit <Link href="https://open.dingtalk.com/" target="_blank">DingTalk Open Platform <OpenInNew sx={{ fontSize: 10 }} /></Link></li>
                            <li>Create a new app - Add Robot capability</li>
                            <li>Configuration:</li>
                            <Box component="ul" sx={{ pl: 2 }}>
                                <li>Toggle <strong>Stream Mode</strong> ON</li>
                                <li>Permissions: Add necessary permissions for sending messages</li>
                            </Box>
                            <li>Get AppKey (Client ID) and AppSecret (Client Secret) from "Credentials"</li>
                            <li>Publish the app</li>
                        </Box>
                    </Typography>
                </Box>
                <Box>
                    <Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 1 }}>
                        2. Add bot
                    </Typography>
                    <Typography variant="body2" color="text.secondary">
                        Click "Add Bot" button above and fill in App Key and App Secret to create your bot.
                    </Typography>
                </Box>
            </Stack>
        ),
    },
    weixin: {
        id: 'weixin',
        name: 'Weixin (微信)',
        description: 'China\'s most popular messaging platform',
        icon: '💚',
        BrandIcon: Weixin,
        status: 'beta',
        path: '/remote-control/weixin',
        color: '#07c160',
        guide: (
            <Stack spacing={2}>
                <Box sx={{ bgcolor: 'info.lighter', p: 1.5, borderRadius: 1, border: '1px solid', borderColor: 'info.light' }}>
                    <Typography variant="body2" color="info.dark">
                        <strong>Beta:</strong> Weixin integration is in beta. Please provide feedback for any issues.
                    </Typography>
                </Box>
                <Box>
                    <Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 1 }}>
                        1. Install latest Weixin
                    </Typography>
                    <Typography variant="body2" color="text.secondary">
                        Make sure you have the latest version of{' '}
                        <Link href="https://weixin.qq.com/" target="_blank">
                            Weixin <OpenInNew sx={{ fontSize: 10 }} />
                        </Link>{' '}
                        installed on your device.
                    </Typography>
                </Box>
                <Box>
                    <Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 1 }}>
                        2. Add bot
                    </Typography>
                    <Typography variant="body2" color="text.secondary">
                        Click "Add Bot" button above and scan the QR code with Weixin to bind your account.
                    </Typography>
                </Box>
            </Stack>
        ),
    },
    wecom: {
        id: 'wecom',
        name: 'WeCom (企业微信)',
        description: 'Enterprise Weixin communication platform',
        icon: '💼',
        BrandIcon: WeCom,
        status: 'available',
        path: '/remote-control/wecom',
        color: '#10a800',
        guide: (
            <Stack spacing={2}>
                <Box sx={{ bgcolor: 'info.lighter', p: 1.5, borderRadius: 1, border: '1px solid', borderColor: 'info.light' }}>
                    <Typography variant="body2" color="info.dark">
                        Tip: WeCom AI Bot uses WebSocket long connection — no public IP required.
                    </Typography>
                </Box>
                <Box>
                    <Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 1 }}>
                        1. Open WeCom Admin Console
                    </Typography>
                    <Typography variant="body2" color="text.secondary">
                        Go to{' '}
                        <Link href="https://work.weixin.qq.com/wework_admin/frame#/aiHelper/list" target="_blank">
                            WeCom Admin → AI Assistant <OpenInNew sx={{ fontSize: 10 }} />
                        </Link>
                        {' '}and click <strong>Create Bot</strong> → <strong>Create Manually</strong>.
                    </Typography>
                </Box>
                <Box>
                    <Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 1 }}>
                        2. Create via API mode
                    </Typography>
                    <Typography variant="body2" color="text.secondary">
                        Scroll to the bottom of the page and click <strong>Create via API Mode</strong>.
                    </Typography>
                </Box>
                <Box>
                    <Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 1 }}>
                        3. Configure the bot
                    </Typography>
                    <Typography variant="body2" color="text.secondary" component="div">
                        <Box component="ul" sx={{ pl: 2, m: 0 }}>
                            <li><strong>Visible Scope:</strong> Set who can use the bot</li>
                            <li><strong>API Config:</strong> Under Connection Method, select <strong>Long Connection</strong></li>
                            <li>In the Secret section, click <strong>Click to Retrieve</strong> — save the <strong>Bot ID</strong> and <strong>Secret</strong></li>
                            <li><strong>Permissions:</strong> Configure as needed, then click <strong>Save</strong></li>
                        </Box>
                    </Typography>
                </Box>
                <Box>
                    <Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 1 }}>
                        4. Add bot
                    </Typography>
                    <Typography variant="body2" color="text.secondary">
                        Click "Add Bot" above and enter the Bot ID and Secret to connect.
                    </Typography>
                </Box>
            </Stack>
        ),
    },
    qq: {
        id: 'qq',
        name: 'QQ',
        description: 'Tencent instant messaging platform',
        icon: '🐧',
        BrandIcon: QQ,
        status: 'coming-soon',
        path: '/remote-control/qq',
        color: '#888',
        guide: (
            <Stack spacing={2}>
                <Box>
                    <Typography variant="body2" color="text.secondary">
                        QQ bot integration is currently under development. Stay tuned for updates!
                    </Typography>
                </Box>
            </Stack>
        ),
    },
    discord: {
        id: 'discord',
        name: 'Discord',
        description: 'Voice, video, and text communication',
        icon: '🎮',
        BrandIcon: Discord,
        status: 'coming-soon',
        path: '/remote-control/discord',
        color: '#888',
        guide: (
            <Stack spacing={2}>
                <Box>
                    <Typography variant="body2" color="text.secondary">
                        Discord bot integration is currently under development. Stay tuned for updates!
                    </Typography>
                </Box>
            </Stack>
        ),
    },
    slack: {
        id: 'slack',
        name: 'Slack',
        description: 'Business communication platform',
        icon: '💳',
        BrandIcon: Slack,
        status: 'coming-soon',
        path: '/remote-control/slack',
        color: '#888',
        guide: (
            <Stack spacing={2}>
                <Box>
                    <Typography variant="body2" color="text.secondary">
                        Slack bot integration is currently under development. Stay tuned for updates!
                    </Typography>
                </Box>
            </Stack>
        ),
    },
};

export const getPlatformGuide = (platformId: string): PlatformGuideConfig | undefined => {
    return platformGuides[platformId];
};

export const getAvailablePlatforms = (): PlatformGuideConfig[] => {
    return Object.values(platformGuides).filter(p => p.status === 'available');
};

export const getAllPlatforms = (): PlatformGuideConfig[] => {
    // Return platforms in a specific order
    const order: (keyof typeof platformGuides)[] = [
        'telegram',
        'weixin',
        'feishu',
        'lark',
        'dingtalk',
        'wecom',
        'qq',
        'discord',
        'slack',
    ];
    return order.map(id => platformGuides[id]).filter(Boolean);
};
