import React, { useEffect } from 'react';

import { Button, Card, Space, Typography } from 'antd';
import { useNavigate, useParams, useSearchParams } from 'react-router-dom';

import { reportEvent } from '@/firebase';
import { useSmartRouter } from '@/utils/routerUtils';

const { Title, Paragraph } = Typography;

const RouteDemo: React.FC = () => {
    const navigate = useNavigate();
    const params = useParams();
    const [searchParams] = useSearchParams();
    const smartNavigate = useSmartRouter();

    useEffect(() => {
        console.log('✅ routeDemo组件挂载：componentDidMount');
        reportEvent('routeDemoPage_show');
        return () => {
            console.log('❌ routeDemo组件卸载：componentWillUnmount');
            reportEvent('routeDemoPage_hide');
        };
    }, []);

    return (
        <div className="max-w-4xl mx-auto">
            <Card className="bg-white rounded-lg shadow-sm">
                <Title level={2}>路由示例</Title>

                <Space direction="vertical" size="large" className="w-full">
                    <div>
                        <Title level={4}>1. 路由参数</Title>
                        <Paragraph className="text-gray-600">
                            当前路由参数：{JSON.stringify(params)}
                        </Paragraph>
                        <Paragraph className="text-gray-600">
                            当前查询参数：{JSON.stringify(Object.fromEntries(searchParams))}
                        </Paragraph>
                    </div>

                    <div>
                        <Title level={4}>2. 路由跳转</Title>
                        <Space wrap>
                            <Button onClick={() => navigate('/')}>返回首页</Button>
                            <Button onClick={() => navigate('/403')}>访问 403 页面</Button>
                            <Button onClick={() => navigate('/404')}>访问 404 页面</Button>
                            <Button onClick={() => navigate('/500')}>访问 500 页面</Button>
                            <Button onClick={() => navigate('/test/test1')}>
                                访问 /test/test1 页面
                            </Button>
                            <Button onClick={() => navigate('/test/test2')}>
                                访问 /test/test2 页面
                            </Button>
                            <Button onClick={() => navigate('/hey/baby')}>
                                访问 不存在的 页面
                            </Button>
                        </Space>
                    </div>

                    <div>
                        <Title level={4}>3. 带参数的路由跳转</Title>
                        <Space wrap>
                            <Button onClick={() => navigate('/route-demo/123?name=test')}>
                                跳转到 /routeDemo/123?name=test
                            </Button>
                            <Button onClick={() => navigate('/route-demo/456?type=user')}>
                                跳转到 /routeDemo/456?type=user
                            </Button>
                        </Space>
                    </div>

                    <div>
                        <Title level={4}>4. 重定向示例</Title>
                        <Space direction="vertical" size="middle" className="w-full">
                            <div>
                                <Paragraph className="text-gray-600 mb-2">
                                    使用 navigate 的 replace 选项（替换历史记录）：
                                </Paragraph>
                                <Space wrap>
                                    <Button onClick={() => navigate('/home', { replace: true })}>
                                        替换跳转到首页
                                    </Button>
                                    <Button onClick={() => navigate('/feature-demo', { replace: true })}>
                                        替换跳转到功能演示
                                    </Button>
                                </Space>
                            </div>
                            <div>
                                <Paragraph className="text-gray-600 mb-2">
                                    使用 /to 路由进行重定向：
                                </Paragraph>
                                <Space wrap>
                                    <Button onClick={() => navigate('/to?d=test')}>
                                        跳转到 /to 重定向页面
                                    </Button>
                                </Space>
                            </div>
                            <div>
                                <Paragraph className="text-gray-600 mb-2">
                                    使用 useSmartRouter 保持查询参数：
                                </Paragraph>
                                <Space wrap>
                                    <Button onClick={() => smartNavigate('/home', { from: 'routeDemo' })}>
                                        智能跳转（保留当前查询参数）
                                    </Button>
                                    <Button onClick={() => smartNavigate('/feature-demo', { id: '123' })}>
                                        智能跳转（添加新参数）
                                    </Button>
                                </Space>
                            </div>
                        </Space>
                    </div>

                </Space>
            </Card>
        </div>
    );
};

export default RouteDemo;