"use client";

/**
 * @author: 阿瑞
 * @功能: Ant Design UI 组件测试页面
 * @版本: 1.0.0
 */

import React, { useEffect, useState } from 'react';
import {
    Typography,
    Button,
    Space,
    Divider,
    Card,
    Form,
    Input,
    Select,
    DatePicker,
    Table,
    Tag,
    message,
    Spin
} from 'antd';
import {
    UserOutlined,
    MailOutlined,
    PhoneOutlined,
    CheckCircleOutlined,
    ClockCircleOutlined
} from '@ant-design/icons';

const { Title, Paragraph } = Typography;
const { Option } = Select;

interface DataType {
    key: string;
    name: string;
    age: number;
    address: string;
    tags: string[];
}

// 容器样式
const containerStyle: React.CSSProperties = {
    maxWidth: '1200px',
    margin: '0 auto',
    padding: '24px',
    position: 'relative',
    minHeight: '100vh'
};

// 标题样式
const headerStyle: React.CSSProperties = {
    marginBottom: '32px',
    textAlign: 'center'
};

const AntdTestPage: React.FC = () => {
    // 控制页面内容渲染状态
    const [mounted, setMounted] = useState(false);
    
    // 在组件挂载后设置状态
    useEffect(() => {
        setMounted(true);
    }, []);

    // 状态管理
    const [form] = Form.useForm();
    const [messageApi, contextHolder] = message.useMessage();

    /**
     * 表单提交处理
     */
    const handleFormSubmit = (values: Record<string, unknown>) => {
        console.log('表单提交的值:', values);
        messageApi.success('表单提交成功！');
    };

    /**
     * 表格数据
     */
    const columns = [
        {
            title: '姓名',
            dataIndex: 'name',
            key: 'name',
            render: (text: string) => <a>{text}</a>,
        },
        {
            title: '年龄',
            dataIndex: 'age',
            key: 'age',
        },
        {
            title: '地址',
            dataIndex: 'address',
            key: 'address',
        },
        {
            title: '标签',
            key: 'tags',
            dataIndex: 'tags',
            render: (tags: string[]) => (
                <>
                    {tags.map(tag => {
                        let color = tag.length > 5 ? 'geekblue' : 'green';
                        if (tag === '重要') {
                            color = 'volcano';
                        }
                        return (
                            <Tag color={color} key={tag}>
                                {tag.toUpperCase()}
                            </Tag>
                        );
                    })}
                </>
            ),
        },
        {
            title: '操作',
            key: 'action',
            render: () => (
                <Space size="middle">
                    <a>编辑</a>
                    <a>删除</a>
                </Space>
            ),
        },
    ];

    const data: DataType[] = [
        {
            key: '1',
            name: '张三',
            age: 32,
            address: '北京市朝阳区',
            tags: ['优秀', '团队领导'],
        },
        {
            key: '2',
            name: '李四',
            age: 42,
            address: '上海市浦东新区',
            tags: ['重要'],
        },
        {
            key: '3',
            name: '王五',
            age: 32,
            address: '广州市天河区',
            tags: ['开发者'],
        },
    ];

    // 在客户端组件挂载前显示加载状态
    if (!mounted) {
        return (
            <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
                <Spin size="large">
                    <div style={{ padding: '50px', textAlign: 'center' }}>
                        <div style={{ marginTop: '16px', color: 'rgba(0, 0, 0, 0.45)' }}>页面加载中...</div>
                    </div>
                </Spin>
            </div>
        );
    }

    return (
        <div style={containerStyle}>
            {contextHolder}
            <div style={headerStyle}>
                <Typography>
                    <Title level={2} style={{ 
                        background: 'linear-gradient(135deg, #2d7ff9, #8e6bff)',
                        WebkitBackgroundClip: 'text',
                        WebkitTextFillColor: 'transparent'
                    }}>
                        Ant Design 毛玻璃风格组件示例
                    </Title>
                    <Paragraph>
                        这个页面展示了使用毛玻璃风格美化的 Ant Design 组件，可以作为 UI 开发的参考。
                    </Paragraph>
                </Typography>
            </div>

            <Divider orientation="left">基础组件</Divider>
            <Space direction="vertical" size="middle" style={{ display: 'flex' }}>
                <Card title="按钮组件" variant="borderless">
                    <Space wrap>
                        <Button type="primary">主要按钮</Button>
                        <Button>默认按钮</Button>
                        <Button type="dashed">虚线按钮</Button>
                        <Button type="text">文本按钮</Button>
                        <Button type="link">链接按钮</Button>
                        <Button type="primary" danger>危险按钮</Button>
                    </Space>
                </Card>

                <Card title="表单组件" variant="borderless">
                    <Form
                        form={form}
                        name="basic"
                        labelCol={{ span: 6 }}
                        wrapperCol={{ span: 16 }}
                        onFinish={handleFormSubmit}
                        autoComplete="off"
                    >
                        <Form.Item
                            label="用户名"
                            name="username"
                            rules={[{ required: true, message: '请输入用户名!' }]}
                        >
                            <Input prefix={<UserOutlined />} placeholder="请输入用户名" />
                        </Form.Item>

                        <Form.Item
                            label="邮箱"
                            name="email"
                            rules={[
                                { required: true, message: '请输入邮箱!' },
                                { type: 'email', message: '请输入有效的邮箱地址!' }
                            ]}
                        >
                            <Input prefix={<MailOutlined />} placeholder="请输入邮箱" />
                        </Form.Item>

                        <Form.Item
                            label="电话"
                            name="phone"
                        >
                            <Input prefix={<PhoneOutlined />} placeholder="请输入电话号码" />
                        </Form.Item>

                        <Form.Item
                            label="部门"
                            name="department"
                        >
                            <Select placeholder="请选择部门">
                                <Option value="dev">研发部</Option>
                                <Option value="pm">产品部</Option>
                                <Option value="design">设计部</Option>
                                <Option value="market">市场部</Option>
                            </Select>
                        </Form.Item>

                        <Form.Item
                            label="入职日期"
                            name="joinDate"
                        >
                            <DatePicker placeholder="选择日期" />
                        </Form.Item>

                        <Form.Item wrapperCol={{ offset: 6, span: 16 }}>
                            <Button type="primary" htmlType="submit">
                                提交
                            </Button>
                        </Form.Item>
                    </Form>
                </Card>

                <Card title="表格组件" variant="borderless">
                    <Table columns={columns} dataSource={data} />
                </Card>
            </Space>

            <Divider orientation="left">常用状态</Divider>
            <Space direction="vertical" size="middle" style={{ display: 'flex' }}>
                <Card variant="borderless">
                    <Space>
                        <Tag icon={<CheckCircleOutlined />} color="success">
                            已完成
                        </Tag>
                        <Tag icon={<ClockCircleOutlined />} color="processing">
                            进行中
                        </Tag>
                        <Tag color="error">
                            已取消
                        </Tag>
                        <Tag color="warning">
                            警告
                        </Tag>
                        <Tag color="default">
                            默认
                        </Tag>
                    </Space>
                </Card>
            </Space>
        </div>
    );
};

export default AntdTestPage;
