Ant Design Samples

// Ant Design Fundamentals Examples
// Install required packages:
// npm install antd @ant-design/icons

import React, { useState } from 'react';
import {
  Button,
  Card,
  Form,
  Input,
  Select,
  Checkbox,
  Radio,
  Switch,
  DatePicker,
  TimePicker,
  Upload,
  message,
  Space,
  Typography,
  Row,
  Col,
  Divider,
  List,
  Avatar,
  Badge,
  Tag,
  Progress,
  Rate,
  Slider,
  Collapse,
  Tooltip,
  Popover,
  Modal,
  Drawer,
  Layout,
  Affix,
  Anchor,
  BackTop,
  Breadcrumb,
  Dropdown,
  Menu,
  Steps,
  Tabs,
  notification,
  Spin,
  Empty,
  Result,
  Alert,
  Descriptions,
  Statistic,
  Timeline,
  Tree,
  Table,
  Pagination,
  ConfigProvider,
  theme,
} from 'antd';
import {
  UserOutlined,
  SettingOutlined,
  UploadOutlined,
  StarOutlined,
  LikeOutlined,
  MessageOutlined,
  EditOutlined,
  DeleteOutlined,
  PlusOutlined,
  SearchOutlined,
  MoreOutlined,
  DownloadOutlined,
  EyeOutlined,
  ShoppingCartOutlined,
  HeartOutlined,
  FilterOutlined,
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  LogoutOutlined,
  QuestionCircleOutlined,
  HomeOutlined,
  ProfileOutlined,
  SettingOutlined as SettingsOutlined,
  TeamOutlined,
  FileTextOutlined,
  BarChartOutlined,
} from '@ant-design/icons';

const { Title, Paragraph, Text } = Typography;
const { TextArea } = Input;
const { Option } = Select;
const { Panel } = Collapse;
const { Link } = Anchor;
const { Content } = Layout;

// 1. Button Examples
export function ButtonExamples() {
  const [loading, setLoading] = useState(false);

  const handleLoading = () => {
    setLoading(true);
    setTimeout(() => {
      setLoading(false);
    }, 2000);
  };

  return (
    <div style={{ padding: '24px' }}>
      <Title level={3}>Ant Design Buttons</Title>

      {/* Button Types */}
      <div style={{ marginBottom: '24px' }}>
        <Title level={5}>Button Types</Title>
        <Space wrap>
          <Button type="primary">Primary Button</Button>
          <Button>Default Button</Button>
          <Button type="dashed">Dashed</Button>
          <Button type="text">Text Button</Button>
          <Button type="link">Link</Button>
        </Space>
      </div>

      {/* Button Shapes */}
      <div style={{ marginBottom: '24px' }}>
        <Title level={5}>Button Shapes</Title>
        <Space wrap>
          <Button shape="circle" icon={<StarOutlined />} />
          <Button shape="round">Round</Button>
          <Button>Default</Button>
        </Space>
      </div>

      {/* Button Sizes */}
      <div style={{ marginBottom: '24px' }}>
        <Title level={5}>Button Sizes</Title>
        <Space wrap>
          <Button size="large">Large</Button>
          <Button>Default</Button>
          <Button size="small">Small</Button>
        </Space>
      </div>

      {/* Button with Icons */}
      <div style={{ marginBottom: '24px' }}>
        <Title level={5}>Buttons with Icons</Title>
        <Space wrap>
          <Button type="primary" icon={<SearchOutlined />}>
            Search
          </Button>
          <Button icon={<DownloadOutlined />}>Download</Button>
          <Button shape="circle" icon={<EyeOutlined />} />
        </Space>
      </div>

      {/* Button States */}
      <div style={{ marginBottom: '24px' }}>
        <Title level={5}>Button States</Title>
        <Space wrap>
          <Button type="primary">Primary</Button>
          <Button type="primary" disabled>
            Disabled
          </Button>
          <Button type="primary" loading={loading} onClick={handleLoading}>
            {loading ? 'Loading...' : 'Click to Load'}
          </Button>
        </Space>
      </div>

      {/* Danger Buttons */}
      <div>
        <Title level={5}>Danger Buttons</Title>
        <Space wrap>
          <Button type="primary" danger>
            Primary Danger
          </Button>
          <Button danger>Danger Default</Button>
          <Button type="dashed" danger>
            Danger Dashed
          </Button>
        </Space>
      </div>
    </div>
  );
}

// 2. Card Examples
export function CardExamples() {
  return (
    <div style={{ padding: '24px' }}>
      <Title level={3}>Ant Design Cards</Title>

      <Row gutter={[16, 16]}>
        {/* Basic Card */}
        <Col xs={24} sm={12} md={8}>
          <Card title="Basic Card" extra={<Button type="link">More</Button>}>
            <Paragraph>
              This is a basic card with title, content, and extra action.
            </Paragraph>
          </Card>
        </Col>

        {/* Card with Avatar */}
        <Col xs={24} sm={12} md={8}>
          <Card>
            <Meta
              avatar={<Avatar src="https://api.dicebear.com/7.x/miniavs/svg?seed=1" />}
              title="Card title"
              description="This is the description"
            />
          </Card>
        </Col>

        {/* Card with Cover */}
        <Col xs={24} sm={12} md={8}>
          <Card
            hoverable
            cover={
              <img
                alt="example"
                src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
              />
            }
            actions={[
              <SettingOutlined key="setting" />,
              <EditOutlined key="edit" />,
              <EllipsisOutlined key="ellipsis" />,
            ]}
          >
            <Meta
              title="Card Title"
              description="This is a card with cover image and actions"
            />
          </Card>
        </Col>

        {/* Loading Card */}
        <Col xs={24} sm={12} md={8}>
          <Card loading title="Loading Card">
            <Paragraph>Content will be loaded...</Paragraph>
          </Card>
        </Col>

        {/* Card with Grid */}
        <Col xs={24} sm={12} md={8}>
          <Card title="Grid Content">
            <Row gutter={16}>
              <Col span={8}>
                <Statistic title="Active Users" value={112893} />
              </Col>
              <Col span={8}>
                <Statistic title="Account Balance" precision={2} value={112893} />
              </Col>
              <Col span={8}>
                <Statistic title="Young Users" value={11.28} suffix="%" />
              </Col>
            </Row>
          </Card>
        </Col>

        {/* Small Card */}
        <Col xs={24} sm={12} md={8}>
          <Card size="small" title="Small Size Card">
            <Paragraph>A small card for compact display.</Paragraph>
          </Card>
        </Col>
      </Row>
    </div>
  );
}

// 3. Form Examples
export function FormExamples() {
  const [form] = Form.useForm();

  const onFinish = (values: any) => {
    console.log('Success:', values);
    message.success('Form submitted successfully!');
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
    message.error('Please check the form fields');
  };

  return (
    <div style={{ padding: '24px' }}>
      <Title level={3}>Ant Design Forms</Title>

      <Form
        form={form}
        layout="vertical"
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        style={{ maxWidth: 600 }}
      >
        <Row gutter={16}>
          <Col span={12}>
            <Form.Item
              label="First Name"
              name="firstName"
              rules={[{ required: true, message: 'Please input your first name!' }]}
            >
              <Input placeholder="John" />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              label="Last Name"
              name="lastName"
              rules={[{ required: true, message: 'Please input your last name!' }]}
            >
              <Input placeholder="Doe" />
            </Form.Item>
          </Col>
        </Row>

        <Form.Item
          label="Email"
          name="email"
          rules={[
            { required: true, message: 'Please input your email!' },
            { type: 'email', message: 'Please enter a valid email!' },
          ]}
        >
          <Input prefix={<UserOutlined />} placeholder="[email protected]" />
        </Form.Item>

        <Form.Item
          label="Phone"
          name="phone"
          rules={[{ required: true, message: 'Please input your phone number!' }]}
        >
          <Input placeholder="+1 234 567 8900" />
        </Form.Item>

        <Row gutter={16}>
          <Col span={12}>
            <Form.Item
              label="Country"
              name="country"
              rules={[{ required: true, message: 'Please select your country!' }]}
            >
              <Select placeholder="Select a country">
                <Option value="usa">United States</Option>
                <Option value="uk">United Kingdom</Option>
                <Option value="canada">Canada</Option>
                <Option value="australia">Australia</Option>
              </Select>
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              label="City"
              name="city"
              rules={[{ required: true, message: 'Please input your city!' }]}
            >
              <Input placeholder="New York" />
            </Form.Item>
          </Col>
        </Row>

        <Form.Item
          label="Date of Birth"
          name="dob"
          rules={[{ required: true, message: 'Please select your date of birth!' }]}
        >
          <DatePicker style={{ width: '100%' }} />
        </Form.Item>

        <Form.Item label="Bio" name="bio">
          <TextArea rows={4} placeholder="Tell us about yourself..." />
        </Form.Item>

        <Row gutter={16}>
          <Col span={12}>
            <Form.Item name="newsletter" valuePropName="checked">
              <Checkbox>Subscribe to newsletter</Checkbox>
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item name="terms" valuePropName="checked" rules={[{ required: true }]}>
              <Checkbox>
                I agree to the <a href="/terms">Terms and Conditions</a>
              </Checkbox>
            </Form.Item>
          </Col>
        </Row>

        <Form.Item>
          <Space>
            <Button type="primary" htmlType="submit">
              Submit
            </Button>
            <Button htmlType="reset">
              Reset
            </Button>
          </Space>
        </Form.Item>
      </Form>
    </div>
  );
}

// 4. Navigation Examples
export function NavigationExamples() {
  const [current, setCurrent] = useState('home');

  const onClick = (e: any) => {
    setCurrent(e.key);
  };

  const menuItems = [
    {
      key: 'home',
      icon: <HomeOutlined />,
      label: 'Home',
    },
    {
      key: 'profile',
      icon: <ProfileOutlined />,
      label: 'Profile',
    },
    {
      key: 'team',
      icon: <TeamOutlined />,
      label: 'Team',
    },
    {
      key: 'projects',
      icon: <FileTextOutlined />,
      label: 'Projects',
      children: [
        {
          key: 'project1',
          label: 'Project Alpha',
        },
        {
          key: 'project2',
          label: 'Project Beta',
        },
      ],
    },
    {
      key: 'analytics',
      icon: <BarChartOutlined />,
      label: 'Analytics',
    },
    {
      key: 'settings',
      icon: <SettingsOutlined />,
      label: 'Settings',
    },
  ];

  return (
    <div style={{ padding: '24px' }}>
      <Title level={3}>Ant Design Navigation</Title>

      {/* Menu */}
      <div style={{ marginBottom: '24px' }}>
        <Title level={5}>Menu Navigation</Title>
        <Menu
          onClick={onClick}
          selectedKeys={[current]}
          mode="horizontal"
          items={menuItems}
        />
      </div>

      {/* Breadcrumb */}
      <div style={{ marginBottom: '24px' }}>
        <Title level={5}>Breadcrumb Navigation</Title>
        <Breadcrumb
          items={[
            {
              title: 'Home',
            },
            {
              title: 'Projects',
              href: '',
            },
            {
              title: 'Project Alpha',
            },
          ]}
        />
      </div>

      {/* Steps */}
      <div style={{ marginBottom: '24px' }}>
        <Title level={5}>Steps Navigation</Title>
        <Steps
          current={1}
          items={[
            {
              title: 'Finished',
              description: 'This is a description.',
            },
            {
              title: 'In Progress',
              description: 'This is a description.',
            },
            {
              title: 'Waiting',
              description: 'This is a description.',
            },
          ]}
        />
      </div>

      {/* Tabs */}
      <div>
        <Title level={5}>Tabs Navigation</Title>
        <Tabs
          items={[
            {
              key: 'tab1',
              label: 'Tab 1',
              children: 'Content of Tab Pane 1',
            },
            {
              key: 'tab2',
              label: 'Tab 2',
              children: 'Content of Tab Pane 2',
            },
            {
              key: 'tab3',
              label: 'Tab 3',
              children: 'Content of Tab Pane 3',
            },
          ]}
        />
      </div>
    </div>
  );
}

// 5. List and Data Display
export function ListExamples() {
  const data = [
    {
      title: 'Ant Design Title 1',
      description: 'Ant Design, a design language for background applications, is refined by Ant UED Team',
      avatar: 'https://api.dicebear.com/7.x/miniavs/svg?seed=1',
    },
    {
      title: 'Ant Design Title 2',
      description: 'Ant Design, a design language for background applications, is refined by Ant UED Team',
      avatar: 'https://api.dicebear.com/7.x/miniavs/svg?seed=2',
    },
    {
      title: 'Ant Design Title 3',
      description: 'Ant Design, a design language for background applications, is refined by Ant UED Team',
      avatar: 'https://api.dicebear.com/7.x/miniavs/svg?seed=3',
    },
    {
      title: 'Ant Design Title 4',
      description: 'Ant Design, a design language for background applications, is refined by Ant UED Team',
      avatar: 'https://api.dicebear.com/7.x/miniavs/svg?seed=4',
    },
  ];

  return (
    <div style={{ padding: '24px' }}>
      <Title level={3}>Lists and Data Display</Title>

      <Row gutter={[24, 24]}>
        {/* Basic List */}
        <Col xs={24} lg={12}>
          <Title level={5}>Basic List</Title>
          <List
            header={<div>Header</div>}
            footer={<div>Footer</div>}
            bordered
            dataSource={data}
            renderItem={(item) => (
              <List.Item>
                <List.Item.Meta
                  avatar={<Avatar src={item.avatar} />}
                  title={<a href="https://ant.design">{item.title}</a>}
                  description={item.description}
                />
              </List.Item>
            )}
          />
        </Col>

        {/* Timeline */}
        <Col xs={24} lg={12}>
          <Title level={5}>Timeline</Title>
          <Timeline
            items={[
              {
                children: 'Create a services site 2015-09-01',
              },
              {
                children: 'Solve initial network problems 2015-09-01',
                color: 'green',
              },
              {
                children: 'Technical testing 2015-09-01',
              },
              {
                children: 'Network problems being solved 2015-09-01',
              },
              {
                children: 'Network problems being solved 2015-09-01',
              },
            ]}
          />
        </Col>

        {/* Descriptions */}
        <Col xs={24} lg={12}>
          <Title level={5}>Descriptions</Title>
          <Descriptions
            title="User Info"
            bordered
            column={2}
            items={[
              {
                key: '1',
                label: 'UserName',
                children: 'Zhou Maomao',
              },
              {
                key: '2',
                label: 'Telephone',
                children: '18100000000',
              },
              {
                key: '3',
                label: 'Live',
                children: 'Hangzhou, Zhejiang',
              },
              {
                key: '4',
                label: 'Remark',
                children: 'empty',
              },
              {
                key: '5',
                label: 'Address',
                children: 'No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China',
                span: 2,
              },
            ]}
          />
        </Col>

        {/* Statistic */}
        <Col xs={24} lg={12}>
          <Title level={5}>Statistics</Title>
          <Row gutter={16}>
            <Col span={12}>
              <Statistic title="Active Users" value={112893} />
            </Col>
            <Col span={12}>
              <Statistic
                title="Account Balance (CNY)"
                value={112893}
                precision={2}
              />
            </Col>
            <Col span={12}>
              <Statistic title="Active Users" value={112893} />
            </Col>
            <Col span={12}>
              <Statistic
                title="Growth Rate"
                value={11.28}
                precision={2}
                valueStyle={{ color: '#3f8600' }}
                prefix={<ArrowUpOutlined />}
                suffix="%"
              />
            </Col>
          </Row>
        </Col>
      </Row>
    </div>
  );
}

// 6. Feedback Components
export function FeedbackExamples() {
  const [visible, setVisible] = useState(false);
  const [drawerVisible, setDrawerVisible] = useState(false);

  const showModal = () => {
    setVisible(true);
  };

  const handleOk = () => {
    setVisible(false);
    message.success('Modal submitted successfully!');
  };

  const handleCancel = () => {
    setVisible(false);
  };

  const showDrawer = () => {
    setDrawerVisible(true);
  };

  const onDrawerClose = () => {
    setDrawerVisible(false);
  };

  const openNotification = () => {
    notification.open({
      message: 'Notification Title',
      description:
        'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
      icon: <SmileOutlined style={{ color: '#108ee9' }} rev={undefined} />,
    });
  };

  return (
    <div style={{ padding: '24px' }}>
      <Title level={3}>Feedback Components</Title>

      <Row gutter={[24, 24]}>
        {/* Alerts */}
        <Col xs={24} lg={12}>
          <Title level={5}>Alerts</Title>
          <Space direction="vertical" style={{ width: '100%' }}>
            <Alert message="Success Text" type="success" />
            <Alert message="Info Text" type="info" />
            <Alert message="Warning Text" type="warning" />
            <Alert
              message="Error"
              description="This is an error message about copywriting."
              type="error"
              showIcon
              closable
            />
          </Space>
        </Col>

        {/* Messages */}
        <Col xs={24} lg={12}>
          <Title level={5}>Messages</Title>
          <Space>
            <Button onClick={() => message.success('Success!')}>
              Success
            </Button>
            <Button onClick={() => message.error('Error!')}>
              Error
            </Button>
            <Button onClick={() => message.warning('Warning!')}>
              Warning
            </Button>
            <Button onClick={() => message.info('Info!')}>
              Info
            </Button>
          </Space>
        </Col>

        {/* Notifications */}
        <Col xs={24} lg={12}>
          <Title level={5}>Notifications</Title>
          <Space>
            <Button type="primary" onClick={openNotification}>
              Open the notification box
            </Button>
          </Space>
        </Col>

        {/* Modals */}
        <Col xs={24} lg={12}>
          <Title level={5}>Modals</Title>
          <Space>
            <Button type="primary" onClick={showModal}>
              Open Modal
            </Button>
            <Modal
              title="Basic Modal"
              open={visible}
              onOk={handleOk}
              onCancel={handleCancel}
            >
              <p>Some contents...</p>
              <p>Some contents...</p>
              <p>Some contents...</p>
            </Modal>
          </Space>
        </Col>

        {/* Drawer */}
        <Col xs={24} lg={12}>
          <Title level={5}>Drawer</Title>
          <Space>
            <Button type="primary" onClick={showDrawer}>
              Open Drawer
            </Button>
            <Drawer
              title="Basic Drawer"
              placement="right"
              onClose={onDrawerClose}
              open={drawerVisible}
            >
              <p>Some contents...</p>
              <p>Some contents...</p>
              <p>Some contents...</p>
            </Drawer>
          </Space>
        </Col>

        {/* Progress */}
        <Col xs={24} lg={12}>
          <Title level={5}>Progress</Title>
          <Space direction="vertical" style={{ width: '100%' }}>
            <Progress percent={30} />
            <Progress percent={50} status="active" />
            <Progress percent={70} status="exception" />
            <Progress percent={100} />
            <Progress type="circle" percent={75} />
            <Progress type="circle" percent={100} format={() => 'Done'} />
          </Space>
        </Col>

        {/* Result */}
        <Col xs={24} lg={12}>
          <Title level={5}>Results</Title>
          <Space direction="vertical" style={{ width: '100%' }}>
            <Result
              status="success"
              title="Successfully Purchased Cloud Server ECS!"
              subTitle="Order number: 2017182818828182881 Cloud server configuration takes 1-5 minutes, please wait."
              extra={[
                <Button type="primary" key="console">
                  Go Console
                </Button>,
                <Button key="buy">Buy Again</Button>,
              ]}
            />
          </Space>
        </Col>
      </Row>
    </div>
  );
}

// 7. Data Entry Components
export function DataEntryExamples() {
  return (
    <div style={{ padding: '24px' }}>
      <Title level={3}>Data Entry Components</Title>

      <Row gutter={[24, 24]}>
        {/* Rate */}
        <Col xs={24} lg={12}>
          <Title level={5}>Rate</Title>
          <Space direction="vertical">
            <Rate defaultValue={2.5} />
            <Rate disabled defaultValue={2} />
            <Rate allowHalf defaultValue={2.5} />
          </Space>
        </Col>

        {/* Slider */}
        <Col xs={24} lg={12}>
          <Title level={5}>Slider</Title>
          <Space direction="vertical" style={{ width: '100%' }}>
            <Slider defaultValue={30} />
            <Slider range defaultValue={[20, 50]} />
            <Slider defaultValue={30} disabled />
          </Space>
        </Col>

        {/* Upload */}
        <Col xs={24} lg={12}>
          <Title level={5}>Upload</Title>
          <Upload
            action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
            listType="picture"
            maxCount={1}
          >
            <Button icon={<UploadOutlined />}>Upload (Max: 1)</Button>
          </Upload>
        </Col>

        {/* DatePicker */}
        <Col xs={24} lg={12}>
          <Title level={5}>Date & Time</Title>
          <Space direction="vertical" style={{ width: '100%' }}>
            <DatePicker style={{ width: '100%' }} />
            <DatePicker.RangePicker style={{ width: '100%' }} />
            <TimePicker style={{ width: '100%' }} />
          </Space>
        </Col>

        {/* Radio & Checkbox */}
        <Col xs={24} lg={12}>
          <Title level={5}>Selection Controls</Title>
          <Space direction="vertical">
            <Radio.Group defaultValue="a">
              <Radio value="a">Option A</Radio>
              <Radio value="b">Option B</Radio>
              <Radio value="c">Option C</Radio>
            </Radio.Group>
            <Checkbox.Group
              options={[
                { label: 'Apple', value: 'Apple' },
                { label: 'Pear', value: 'Pear' },
                { label: 'Orange', value: 'Orange' },
              ]}
              defaultValue={['Apple', 'Pear']}
            />
          </Space>
        </Col>

        {/* Switch */}
        <Col xs={24} lg={12}>
          <Title level={5}>Switches</Title>
          <Space>
            <Switch defaultChecked />
            <Switch checkedChildren="开" unCheckedChildren="关" defaultChecked />
            <Switch disabled />
          </Space>
        </Col>
      </Row>
    </div>
  );
}

// 8. Loading & Empty States
export function LoadingEmptyExamples() {
  return (
    <div style={{ padding: '24px' }}>
      <Title level={3}>Loading & Empty States</Title>

      <Row gutter={[24, 24]}>
        {/* Spin */}
        <Col xs={24} lg={12}>
          <Title level={5}>Loading (Spin)</Title>
          <Space direction="vertical">
            <Spin size="small" />
            <Spin />
            <Spin size="large" />
            <Spin tip="Loading...">
              <Alert
                message="Alert message title"
                description="Further details about the context of this alert."
                type="info"
              />
            </Spin>
          </Space>
        </Col>

        {/* Empty */}
        <Col xs={24} lg={12}>
          <Title level={5}>Empty States</Title>
          <Space direction="vertical" style={{ width: '100%' }}>
            <Empty />
            <Empty
              image="https://gw.alipayobjects.com/zos/antfincdn/ZHrcdLPrvN/empty.svg"
              imageStyle={{
                height: 60,
              }}
              description={
                <span>
                  Customize <a href="#API">Description</a>
                </span>
              }
            >
              <Button type="primary">Create Now</Button>
            </Empty>
            <Empty description="No Data" />
          </Space>
        </Col>

        {/* Skeleton */}
        <Col xs={24} lg={12}>
          <Title level={5}>Skeleton</Title>
          <Space direction="vertical" style={{ width: '100%' }}>
            <Skeleton avatar paragraph={{ rows: 4 }} />
            <Skeleton.Button active style={{ width: '100%' }} />
            <Skeleton.Input active />
          </Space>
        </Col>
      </Row>
    </div>
  );
}

// 9. Tags and Badges
export function TagsBadgesExamples() {
  return (
    <div style={{ padding: '24px' }}>
      <Title level={3}>Tags & Badges</Title>

      <Row gutter={[24, 24]}>
        {/* Tags */}
        <Col xs={24} lg={12}>
          <Title level={5}>Tags</Title>
          <Space wrap>
            <Tag>Tag 1</Tag>
            <Tag>
              <Link href="/api">Link</Link>
            </Tag>
            <Tag closable onClose={() => {}}>
              Tag 2
            </Tag>
            <Tag color="magenta">magenta</Tag>
            <Tag color="red">red</Tag>
            <Tag color="volcano">volcano</Tag>
            <Tag color="orange">orange</Tag>
            <Tag color="gold">gold</Tag>
            <Tag color="lime">lime</Tag>
            <Tag color="green">green</Tag>
            <Tag color="cyan">cyan</Tag>
            <Tag color="blue">blue</Tag>
            <Tag color="geekblue">geekblue</Tag>
            <Tag color="purple">purple</Tag>
          </Space>
        </Col>

        {/* Badges */}
        <Col xs={24} lg={12}>
          <Title level={5}>Badges</Title>
          <Space size="large">
            <Badge count={5}>
              <Avatar shape="square" icon={<UserOutlined />} rev={undefined} />
            </Badge>
            <Badge count={0} showZero>
              <Avatar shape="square" icon={<UserOutlined />} rev={undefined} />
            </Badge>
            <Badge count={<span style={{ color: '#f5222d' }}>Hot</span>}>
              <Button shape="circle" icon={<HeartOutlined />} rev={undefined} />
            </Badge>
            <Badge dot>
              <Avatar shape="square" icon={<UserOutlined />} rev={undefined} />
            </Badge>
          </Space>
        </Col>
      </Row>
    </div>
  );
}

// 10. Complete Dashboard Example
export function DashboardExample() {
  return (
    <ConfigProvider
      theme={{
        token: {
          colorPrimary: '#1890ff',
        },
      }}
    >
      <div style={{ minHeight: '100vh', backgroundColor: '#f0f2f5' }}>
        <Row gutter={[16, 16]} style={{ padding: '24px' }}>
          <Col span={24}>
            <Card>
              <Row gutter={16} justify="space-between" align="middle">
                <Col>
                  <Title level={2} style={{ margin: 0 }}>
                    Dashboard
                  </Title>
                  <Paragraph type="secondary">
                    Welcome to your admin dashboard
                  </Paragraph>
                </Col>
                <Col>
                  <Space>
                    <Button icon={<PlusOutlined />} type="primary">
                      New Project
                    </Button>
                    <Button icon={<FilterOutlined />}>Filter</Button>
                  </Space>
                </Col>
              </Row>
            </Card>
          </Col>

          {/* Stats Cards */}
          <Col xs={24} sm={12} md={6}>
            <Card>
              <Statistic
                title="Total Revenue"
                value={112800}
                prefix="$"
                precision={2}
                valueStyle={{ color: '#3f8600' }}
              />
            </Card>
          </Col>
          <Col xs={24} sm={12} md={6}>
            <Card>
              <Statistic
                title="Active Users"
                value={9283}
                valueStyle={{ color: '#1890ff' }}
              />
            </Card>
          </Col>
          <Col xs={24} sm={12} md={6}>
            <Card>
              <Statistic
                title="Conversion Rate"
                value={73.5}
                precision={1}
                suffix="%"
                valueStyle={{ color: '#722ed1' }}
              />
            </Card>
          </Col>
          <Col xs={24} sm={12} md={6}>
            <Card>
              <Statistic
                title="Avg. Order Value"
                value={386}
                prefix="$"
                valueStyle={{ color: '#eb2f96' }}
              />
            </Card>
          </Col>

          {/* Charts and Lists */}
          <Col xs={24} lg={16}>
            <Card title="Recent Activities" extra={<Button type="link">View all</Button>}>
              <Timeline
                items={[
                  {
                    color: 'green',
                    children: 'Create a new project on 2023-12-01',
                  },
                  {
                    color: 'blue',
                    children: 'Complete requirements gathering on 2023-11-28',
                  },
                  {
                    color: 'red',
                    children: 'Review pull request #42 on 2023-11-25',
                  },
                  {
                    color: 'gray',
                    children: 'Deploy to production on 2023-11-20',
                  },
                ]}
              />
            </Card>
          </Col>

          <Col xs={24} lg={8}>
            <Card title="Quick Actions">
              <Space direction="vertical" style={{ width: '100%' }}>
                <Button block icon={<PlusOutlined />}>
                  Create New Item
                </Button>
                <Button block icon={<UploadOutlined />}>
                  Import Data
                </Button>
                <Button block icon={<DownloadOutlined />}>
                  Export Report
                </Button>
                <Button block icon={<UserOutlined />}>
                  User Management
                </Button>
              </Space>
            </Card>
          </Col>

          {/* Table Section */}
          <Col span={24}>
            <Card title="Recent Orders" extra={<Button type="link">View all</Button>}>
              <Table
                columns={[
                  {
                    title: 'Order ID',
                    dataIndex: 'id',
                    key: 'id',
                  },
                  {
                    title: 'Customer',
                    dataIndex: 'customer',
                    key: 'customer',
                  },
                  {
                    title: 'Amount',
                    dataIndex: 'amount',
                    key: 'amount',
                    render: (value: number) => `${value.toFixed(2)}`,
                  },
                  {
                    title: 'Status',
                    dataIndex: 'status',
                    key: 'status',
                    render: (status: string) => (
                      <Tag color={status === 'completed' ? 'green' : 'blue'}>
                        {status.toUpperCase()}
                      </Tag>
                    ),
                  },
                  {
                    title: 'Date',
                    dataIndex: 'date',
                    key: 'date',
                  },
                ]}
                dataSource={[
                  {
                    key: '1',
                    id: '#ORD-001',
                    customer: 'John Doe',
                    amount: 1250.00,
                    status: 'completed',
                    date: '2023-12-01',
                  },
                  {
                    key: '2',
                    id: '#ORD-002',
                    customer: 'Jane Smith',
                    amount: 875.50,
                    status: 'pending',
                    date: '2023-11-30',
                  },
                  {
                    key: '3',
                    id: '#ORD-003',
                    customer: 'Bob Johnson',
                    amount: 2100.00,
                    status: 'processing',
                    date: '2023-11-29',
                  },
                ]}
                pagination={false}
              />
            </Card>
          </Col>
        </Row>
      </div>
    </ConfigProvider>
  );
}

// Main Ant Design Showcase
export function AntDesignShowcase() {
  const { defaultAlgorithm, darkAlgorithm } = theme;
  const [isDarkMode, setIsDarkMode] = useState(false);

  const themeConfig = {
    algorithm: isDarkMode ? darkAlgorithm : defaultAlgorithm,
    token: {
      colorPrimary: '#1890ff',
    },
  };

  return (
    <ConfigProvider theme={themeConfig}>
      <div style={{ backgroundColor: isDarkMode ? '#141414' : '#fff' }}>
        <div style={{ padding: '24px', textAlign: 'center' }}>
          <Title level={1}>Ant Design Components</Title>
          <Paragraph type="secondary" style={{ fontSize: '18px' }}>
            Enterprise-class UI design language and React UI library
          </Paragraph>
          <Space>
            <Button
              onClick={() => setIsDarkMode(!isDarkMode)}
              icon={isDarkMode ? '☀️' : '🌙'}
            >
              {isDarkMode ? 'Light Mode' : 'Dark Mode'}
            </Button>
          </Space>
        </div>

        <Divider />

        <Space direction="vertical" size="large" style={{ width: '100%', padding: '24px' }}>
          <ButtonExamples />
          <Divider />
          <CardExamples />
          <Divider />
          <FormExamples />
          <Divider />
          <NavigationExamples />
          <Divider />
          <ListExamples />
          <Divider />
          <FeedbackExamples />
          <Divider />
          <DataEntryExamples />
          <Divider />
          <LoadingEmptyExamples />
          <Divider />
          <TagsBadgesExamples />
        </Space>

        <Divider />

        <div style={{ padding: '24px' }}>
          <Title level={2}>Complete Dashboard Example</Title>
          <DashboardExample />
        </div>
      </div>
    </ConfigProvider>
  );
}

export {
  ButtonExamples,
  CardExamples,
  FormExamples,
  NavigationExamples,
  ListExamples,
  FeedbackExamples,
  DataEntryExamples,
  LoadingEmptyExamples,
  TagsBadgesExamples,
  DashboardExample,
  AntDesignShowcase
};

// Advanced Ant Design Patterns Examples
// Install additional packages:
// npm install antd @ant-design/icons dayjs @ant-design/pro-components

import React, { useState, useEffect } from 'react';
import {
  Button,
  Card,
  Form,
  Input,
  Select,
  Table,
  Tag,
  Space,
  Typography,
  Row,
  Col,
  Divider,
  message,
  Modal,
  Drawer,
  Layout,
  Menu,
  Breadcrumb,
  Avatar,
  Dropdown,
  Badge,
  Tooltip,
  Popconfirm,
  Tree,
  TreeSelect,
  Transfer,
  AutoComplete,
  Mentions,
  ConfigProvider,
  App,
  theme,
  DatePicker,
  TimePicker,
  InputNumber,
  Radio,
  Checkbox,
  Switch,
  Slider,
  Rate,
  Upload,
  Progress,
  Statistic,
  Result,
  Empty,
  Spin,
  Skeleton,
  Affix,
  Anchor,
  BackTop,
  Pagination,
  List,
  Descriptions,
  Timeline,
  Collapse,
  Calendar,
  Image,
  QRCode,
  Tour,
  FloatButton,
  Watermark,
  Flex,
  Segmented,
  Typography as TypographyComponent,
  notification,
} from 'antd';
import {
  UserOutlined,
  LogoutOutlined,
  SettingOutlined,
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  PlusOutlined,
  EditOutlined,
  DeleteOutlined,
  SearchOutlined,
  ExportOutlined,
  ImportOutlined,
  FilterOutlined,
  MoreOutlined,
  DownloadOutlined,
  ShareAltOutlined,
  StarOutlined,
  LikeOutlined,
  MessageOutlined,
  EyeOutlined,
  HomeOutlined,
  DashboardOutlined,
  TeamOutlined,
  ProjectOutlined,
  FileTextOutlined,
  BarChartOutlined,
  BellOutlined,
  QuestionCircleOutlined,
  QuestionCircleOutlined as HelpIcon,
} from '@ant-design/icons';
import type { MenuProps } from 'antd';
import dayjs from 'dayjs';
import 'dayjs/locale/en';
import 'dayjs/locale/zh-cn';

const { Title, Paragraph, Text } = Typography;
const { Content, Header, Sider } = Layout;
const { TextArea } = Input;
const { Option } = Select;
const { Panel } = Collapse;
const { Link } = Anchor;

// 1. Advanced Data Table with Filtering and Sorting
export function AdvancedDataTable() {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(false);
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const [filters, setFilters] = useState({});
  const [pagination, setPagination] = useState({
    current: 1,
    pageSize: 10,
    total: 0,
  });

  // Mock data generation
  useEffect(() => {
    setLoading(true);
    setTimeout(() => {
      const mockData = Array.from({ length: 100 }, (_, index) => ({
        key: index.toString(),
        id: `#${String(index + 1).padStart(4, '0')}`,
        name: `User ${index + 1}`,
        email: `user${index + 1}@example.com`,
        role: ['Admin', 'User', 'Manager', 'Developer'][index % 4],
        status: ['Active', 'Inactive', 'Pending'][index % 3],
        joinDate: dayjs().subtract(index, 'days').format('YYYY-MM-DD'),
        lastLogin: dayjs().subtract(index % 7, 'hours').format('YYYY-MM-DD HH:mm'),
        projects: Math.floor(Math.random() * 20) + 1,
      }));
      setData(mockData);
      setLoading(false);
      setPagination(prev => ({ ...prev, total: mockData.length }));
    }, 1000);
  }, []);

  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      key: 'id',
      sorter: true,
      width: 100,
    },
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
      sorter: true,
      render: (text, record) => (
        <Space>
          <Avatar src={`https://api.dicebear.com/7.x/miniavs/svg?seed=${record.key}`} size="small" />
          <span>{text}</span>
        </Space>
      ),
    },
    {
      title: 'Email',
      dataIndex: 'email',
      key: 'email',
      sorter: true,
    },
    {
      title: 'Role',
      dataIndex: 'role',
      key: 'role',
      filters: [
        { text: 'Admin', value: 'Admin' },
        { text: 'User', value: 'User' },
        { text: 'Manager', value: 'Manager' },
        { text: 'Developer', value: 'Developer' },
      ],
      onFilter: (value, record) => record.role === value,
      render: (role) => {
        const colorMap = {
          Admin: 'red',
          Manager: 'blue',
          Developer: 'green',
          User: 'default',
        };
        return <Tag color={colorMap[role]}>{role}</Tag>;
      },
    },
    {
      title: 'Status',
      dataIndex: 'status',
      key: 'status',
      filters: [
        { text: 'Active', value: 'Active' },
        { text: 'Inactive', value: 'Inactive' },
        { text: 'Pending', value: 'Pending' },
      ],
      onFilter: (value, record) => record.status === value,
      render: (status) => {
        const colorMap = {
          Active: 'success',
          Inactive: 'error',
          Pending: 'warning',
        };
        return <Tag color={colorMap[status]}>{status}</Tag>;
      },
    },
    {
      title: 'Projects',
      dataIndex: 'projects',
      key: 'projects',
      sorter: true,
      align: 'right' as const,
      render: (projects) => <strong>{projects}</strong>,
    },
    {
      title: 'Join Date',
      dataIndex: 'joinDate',
      key: 'joinDate',
      sorter: true,
    },
    {
      title: 'Actions',
      key: 'actions',
      width: 200,
      render: (_, record) => (
        <Space>
          <Tooltip title="View">
            <Button type="text" icon={<EyeOutlined />} />
          </Tooltip>
          <Tooltip title="Edit">
            <Button type="text" icon={<EditOutlined />} />
          </Tooltip>
          <Popconfirm
            title="Are you sure you want to delete this user?"
            onConfirm={() => handleDelete(record.key)}
          >
            <Tooltip title="Delete">
              <Button type="text" danger icon={<DeleteOutlined />} />
            </Tooltip>
          </Popconfirm>
          <Dropdown
            menu={{
              items: [
                {
                  key: 'reset',
                  label: 'Reset Password',
                  icon: <SettingOutlined />,
                },
                {
                  key: 'login',
                  label: 'Login History',
                  icon: <FileTextOutlined />,
                },
                {
                  key: 'export',
                  label: 'Export Data',
                  icon: <ExportOutlined />,
                },
              ],
            }}
          >
            <Button type="text" icon={<MoreOutlined />} />
          </Dropdown>
        </Space>
      ),
    },
  ];

  const handleDelete = (key) => {
    setData(data.filter(item => item.key !== key));
    message.success('User deleted successfully');
  };

  const handleTableChange = (pagination, filters, sorter) => {
    setPagination(pagination);
    setFilters(filters);
  };

  const onSelectChange = (newSelectedRowKeys) => {
    setSelectedRowKeys(newSelectedRowKeys);
  };

  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };

  return (
    <Card
      title="User Management"
      extra={[
        <Button key="import" icon={<ImportOutlined />}>
          Import
        </Button>,
        <Button key="export" icon={<ExportOutlined />}>
          Export
        </Button>,
        <Button key="add" type="primary" icon={<PlusOutlined />}>
          Add User
        </Button>,
      ]}
    >
      <div style={{ marginBottom: 16 }}>
        <Space>
          <Input
            placeholder="Search users..."
            prefix={<SearchOutlined />}
            style={{ width: 250 }}
          />
          <Select
            placeholder="Filter by role"
            style={{ width: 150 }}
            allowClear
          >
            <Option value="Admin">Admin</Option>
            <Option value="User">User</Option>
            <Option value="Manager">Manager</Option>
            <Option value="Developer">Developer</Option>
          </Select>
          <Select
            placeholder="Filter by status"
            style={{ width: 150 }}
            allowClear
          >
            <Option value="Active">Active</Option>
            <Option value="Inactive">Inactive</Option>
            <Option value="Pending">Pending</Option>
          </Select>
        </Space>
      </div>

      <Table
        columns={columns}
        dataSource={data}
        rowSelection={rowSelection}
        loading={loading}
        onChange={handleTableChange}
        pagination={{
          ...pagination,
          showSizeChanger: true,
          showQuickJumper: true,
          showTotal: (total, range) =>
            `Showing ${range[0]} to ${range[1]} of ${total} users`,
        }}
        scroll={{ x: 1200 }}
      />
    </Card>
  );
}

// 2. Advanced Form with Validation and Dynamic Fields
export function AdvancedForm() {
  const [form] = Form.useForm();
  const [dynamicFields, setDynamicFields] = useState([]);
  const { message } = App.useApp();

  const addField = () => {
    const newKey = Date.now();
    setDynamicFields([...dynamicFields, newKey]);
  };

  const removeField = (key) => {
    setDynamicFields(dynamicFields.filter(k => k !== key));
  };

  const onFinish = (values) => {
    console.log('Form values:', values);
    message.success('Form submitted successfully!');
  };

  const onFinishFailed = (errorInfo) => {
    console.log('Form validation failed:', errorInfo);
    message.error('Please check the form fields');
  };

  return (
    <Card title="Advanced User Registration Form">
      <Form
        form={form}
        layout="vertical"
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        scrollToFirstError
      >
        <Row gutter={16}>
          <Col xs={24} md={12}>
            <Form.Item
              label="First Name"
              name="firstName"
              rules={[
                { required: true, message: 'Please input your first name!' },
                { min: 2, message: 'First name must be at least 2 characters!' },
                { max: 50, message: 'First name cannot exceed 50 characters!' },
              ]}
            >
              <Input placeholder="John" />
            </Form.Item>
          </Col>
          <Col xs={24} md={12}>
            <Form.Item
              label="Last Name"
              name="lastName"
              rules={[
                { required: true, message: 'Please input your last name!' },
              ]}
            >
              <Input placeholder="Doe" />
            </Form.Item>
          </Col>
        </Row>

        <Form.Item
          label="Email Address"
          name="email"
          rules={[
            { required: true, message: 'Please input your email!' },
            { type: 'email', message: 'Please enter a valid email!' },
          ]}
        >
          <Input prefix={<UserOutlined />} placeholder="[email protected]" />
        </Form.Item>

        <Row gutter={16}>
          <Col xs={24} md={12}>
            <Form.Item
              label="Password"
              name="password"
              rules={[
                { required: true, message: 'Please input your password!' },
                { min: 8, message: 'Password must be at least 8 characters!' },
                {
                  pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*d)[a-zA-Zd]{8,}$/,
                  message: 'Password must contain uppercase, lowercase, and number!',
                },
              ]}
            >
              <Input.Password placeholder="Enter strong password" />
            </Form.Item>
          </Col>
          <Col xs={24} md={12}>
            <Form.Item
              label="Confirm Password"
              name="confirmPassword"
              dependencies={['password']}
              rules={[
                { required: true, message: 'Please confirm your password!' },
                ({ getFieldValue }) => ({
                  validator(_, value) {
                    if (!value || getFieldValue('password') === value) {
                      return Promise.resolve();
                    }
                    return Promise.reject(new Error('Passwords do not match!'));
                  },
                }),
              ]}
            >
              <Input.Password placeholder="Confirm your password" />
            </Form.Item>
          </Col>
        </Row>

        <Form.Item
          label="Phone Number"
          name="phone"
          rules={[
            { required: true, message: 'Please input your phone number!' },
            {
              pattern: /^[ds-+()]+$/,
              message: 'Please enter a valid phone number!',
            },
          ]}
        >
          <Input placeholder="+1 (555) 123-4567" />
        </Form.Item>

        <Row gutter={16}>
          <Col xs={24} md={8}>
            <Form.Item
              label="Country"
              name="country"
              rules={[{ required: true, message: 'Please select your country!' }]}
            >
              <Select placeholder="Select a country" showSearch>
                <Option value="us">United States</Option>
                <Option value="uk">United Kingdom</Option>
                <Option value="canada">Canada</Option>
                <Option value="australia">Australia</Option>
                <Option value="germany">Germany</Option>
                <Option value="france">France</Option>
                <Option value="japan">Japan</Option>
                <Option value="china">China</Option>
              </Select>
            </Form.Item>
          </Col>
          <Col xs={24} md={8}>
            <Form.Item
              label="City"
              name="city"
              rules={[{ required: true, message: 'Please input your city!' }]}
            >
              <Input placeholder="New York" />
            </Form.Item>
          </Col>
          <Col xs={24} md={8}>
            <Form.Item
              label="Postal Code"
              name="postalCode"
              rules={[{ required: true, message: 'Please input your postal code!' }]}
            >
              <Input placeholder="10001" />
            </Form.Item>
          </Col>
        </Row>

        <Form.Item
          label="Date of Birth"
          name="dateOfBirth"
          rules={[{ required: true, message: 'Please select your date of birth!' }]}
        >
          <DatePicker style={{ width: '100%' }} />
        </Form.Item>

        <Row gutter={16}>
          <Col xs={24} md={12}>
            <Form.Item
              label="Experience Level"
              name="experience"
              rules={[{ required: true, message: 'Please select your experience level!' }]}
            >
              <Select placeholder="Select experience level">
                <Option value="junior">Junior (0-2 years)</Option>
                <Option value="mid">Mid-level (2-5 years)</Option>
                <Option value="senior">Senior (5-10 years)</Option>
                <Option value="lead">Lead (10+ years)</Option>
              </Select>
            </Form.Item>
          </Col>
          <Col xs={24} md={12}>
            <Form.Item
              label="Expected Salary"
              name="salary"
              rules={[{ required: true, message: 'Please input your expected salary!' }]}
            >
              <InputNumber
                style={{ width: '100%' }}
                formatter={value => `$ ${value}`.replace(/B(?=(d{3})+(?!d))/g, ',')}
                parser={value => value!.replace(/$s?|(,*)/g, '')}
                placeholder="50,000"
                min={0}
                step={1000}
              />
            </Form.Item>
          </Col>
        </Row>

        <Form.Item
          label="Skills"
          name="skills"
          rules={[{ required: true, message: 'Please select at least one skill!' }]}
        >
          <Select
            mode="multiple"
            placeholder="Select your skills"
            options={[
              { label: 'JavaScript', value: 'javascript' },
              { label: 'TypeScript', value: 'typescript' },
              { label: 'React', value: 'react' },
              { label: 'Vue.js', value: 'vue' },
              { label: 'Angular', value: 'angular' },
              { label: 'Node.js', value: 'nodejs' },
              { label: 'Python', value: 'python' },
              { label: 'Java', value: 'java' },
              { label: 'C#', value: 'csharp' },
              { label: 'Go', value: 'go' },
              { label: 'Rust', value: 'rust' },
              { label: 'SQL', value: 'sql' },
            ]}
          />
        </Form.Item>

        <Form.Item label="Bio" name="bio">
          <TextArea
            rows={4}
            placeholder="Tell us about yourself and your experience..."
            showCount
            maxLength={500}
          />
        </Form.Item>

        <Form.Item
          label="Upload Resume"
          name="resume"
          rules={[{ required: true, message: 'Please upload your resume!' }]}
        >
          <Upload
            name="resume"
            maxCount={1}
            beforeUpload={() => false}
            accept=".pdf,.doc,.docx"
          >
            <Button icon={<UploadOutlined />}>Click to Upload</Button>
          </Upload>
        </Form.Item>

        {/* Dynamic Fields */}
        <Form.Item label="Additional Information">
          {dynamicFields.map((key) => (
            <Row key={key} gutter={16} style={{ marginBottom: 8 }}>
              <Col flex={1}>
                <Input placeholder="Label" />
              </Col>
              <Col flex={2}>
                <Input placeholder="Value" />
              </Col>
              <Col>
                <Button
                  type="text"
                  danger
                  icon={<DeleteOutlined />}
                  onClick={() => removeField(key)}
                />
              </Col>
            </Row>
          ))}
          <Button
            type="dashed"
            onClick={addField}
            style={{ width: '100%' }}
            icon={<PlusOutlined />}
          >
            Add Field
          </Button>
        </Form.Item>

        <Form.Item>
          <Space>
            <Form.Item name="terms" valuePropName="checked" noStyle>
              <Checkbox>
                I agree to the <a href="/terms">Terms and Conditions</a>
              </Checkbox>
            </Form.Item>
            <Form.Item name="newsletter" valuePropName="checked" noStyle>
              <Checkbox>Subscribe to newsletter</Checkbox>
            </Form.Item>
          </Space>
        </Form.Item>

        <Form.Item>
          <Space>
            <Button type="primary" htmlType="submit" size="large">
              Submit Application
            </Button>
            <Button size="large" onClick={() => form.resetFields()}>
              Reset
            </Button>
          </Space>
        </Form.Item>
      </Form>
    </Card>
  );
}

// 3. Advanced Layout with Sidebar and Navigation
export function AdvancedLayout() {
  const [collapsed, setCollapsed] = useState(false);
  const [selectedKey, setSelectedKey] = useState('dashboard');
  const { message, notification } = App.useApp();

  const {
    token: { colorBgContainer },
  } = theme.useToken();

  const menuItems: MenuProps['items'] = [
    {
      key: 'dashboard',
      icon: <DashboardOutlined />,
      label: 'Dashboard',
    },
    {
      key: 'projects',
      icon: <ProjectOutlined />,
      label: 'Projects',
      children: [
        {
          key: 'project-list',
          label: 'All Projects',
        },
        {
          key: 'project-archive',
          label: 'Archive',
        },
      ],
    },
    {
      key: 'team',
      icon: <TeamOutlined />,
      label: 'Team Management',
      children: [
        {
          key: 'team-members',
          label: 'Team Members',
        },
        {
          key: 'team-roles',
          label: 'Roles & Permissions',
        },
      ],
    },
    {
      key: 'documents',
      icon: <FileTextOutlined />,
      label: 'Documents',
    },
    {
      key: 'analytics',
      icon: <BarChartOutlined />,
      label: 'Analytics',
    },
    {
      key: 'settings',
      icon: <SettingOutlined />,
      label: 'Settings',
      children: [
        {
          key: 'general-settings',
          label: 'General',
        },
        {
          key: 'security-settings',
          label: 'Security',
        },
        {
          key: 'integration-settings',
          label: 'Integrations',
        },
      ],
    },
  ];

  const userMenuItems: MenuProps['items'] = [
    {
      key: 'profile',
      icon: <UserOutlined />,
      label: 'Profile',
    },
    {
      key: 'settings',
      icon: <SettingOutlined />,
      label: 'Settings',
    },
    {
      type: 'divider',
    },
    {
      key: 'help',
      icon: <HelpIcon />,
      label: 'Help & Support',
    },
    {
      type: 'divider',
    },
    {
      key: 'logout',
      icon: <LogoutOutlined />,
      label: 'Logout',
      danger: true,
    },
  ];

  const handleMenuClick = (e) => {
    setSelectedKey(e.key);
    notification.info({
      message: 'Navigation',
      description: `You clicked on ${e.key}`,
    });
  };

  const handleUserMenuClick = ({ key }) => {
    if (key === 'logout') {
      message.success('Logged out successfully');
    }
  };

  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Sider trigger={null} collapsible collapsed={collapsed}>
        <div style={{
          height: 32,
          margin: 16,
          background: 'rgba(255, 255, 255, 0.2)',
          borderRadius: 6,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          color: 'white',
          fontWeight: 'bold'
        }}>
          {collapsed ? 'Logo' : 'Application Logo'}
        </div>
        <Menu
          theme="dark"
          mode="inline"
          selectedKeys={[selectedKey]}
          items={menuItems}
          onClick={handleMenuClick}
        />
      </Sider>

      <Layout>
        <Header style={{
          padding: '0 16px',
          background: colorBgContainer,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          boxShadow: '0 1px 4px rgba(0,21,41,.08)'
        }}>
          <Button
            type="text"
            icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
            onClick={() => setCollapsed(!collapsed)}
            style={{ fontSize: '16px', width: 64, height: 64 }}
          />

          <Space>
            <Tooltip title="Notifications">
              <Badge count={5} size="small">
                <Button type="text" icon={<BellOutlined />} />
              </Badge>
            </Tooltip>

            <Dropdown
              menu={{
                items: userMenuItems,
                onClick: handleUserMenuClick,
              }}
              placement="bottomRight"
            >
              <Space style={{ cursor: 'pointer' }}>
                <Avatar src="https://api.dicebear.com/7.x/miniavs/svg?seed=1" />
                <span>John Doe</span>
              </Space>
            </Dropdown>
          </Space>
        </Header>

        <Content style={{
          margin: '16px',
          padding: 24,
          background: colorBgContainer,
          borderRadius: 8,
          overflow: 'auto'
        }}>
          <Breadcrumb
            style={{ marginBottom: 16 }}
            items={[
              { title: 'Home' },
              { title: currentPath },
            ]}
          />

          <div style={{ minHeight: 360 }}>
            <Title level={2}>Welcome to your Dashboard</Title>
            <Paragraph>
              This is an advanced layout example with collapsible sidebar, user menu, and breadcrumb navigation.
            </Paragraph>

            <Row gutter={[16, 16]}>
              <Col xs={24} sm={12} lg={6}>
                <Card>
                  <Statistic
                    title="Total Users"
                    value={112893}
                    prefix={<TeamOutlined />}
                    valueStyle={{ color: '#3f8600' }}
                  />
                </Card>
              </Col>
              <Col xs={24} sm={12} lg={6}>
                <Card>
                  <Statistic
                    title="Revenue"
                    value={98765}
                    prefix="$"
                    precision={0}
                    valueStyle={{ color: '#1890ff' }}
                  />
                </Card>
              </Col>
              <Col xs={24} sm={12} lg={6}>
                <Card>
                  <Statistic
                    title="Growth Rate"
                    value={23.5}
                    precision={1}
                    suffix="%"
                    valueStyle={{ color: '#722ed1' }}
                  />
                </Card>
              </Col>
              <Col xs={24} sm={12} lg={6}>
                <Card>
                  <Statistic
                    title="Active Projects"
                    value={42}
                    prefix={<ProjectOutlined />}
                    valueStyle={{ color: '#eb2f96' }}
                  />
                </Card>
              </Col>
            </Row>

            <div style={{ marginTop: 24 }}>
              <AdvancedDataTable />
            </div>
          </div>
        </Content>
      </Layout>
    </Layout>
  );
}

// 4. Internationalization (i18n) Setup
export function InternationalizationExample() {
  const [locale, setLocale] = useState('en');

  const locales = {
    en: {
      message: 'Hello, World!',
      greeting: 'Welcome to the application',
      date: dayjs().locale('en').format('LLLL'),
    },
    zh: {
      message: '你好，世界！',
      greeting: '欢迎使用应用程序',
      date: dayjs().locale('zh-cn').format('LLLL'),
    },
    es: {
      message: '¡Hola, Mundo!',
      greeting: 'Bienvenido a la aplicación',
      date: dayjs().locale('es').format('LLLL'),
    },
    fr: {
      message: 'Bonjour le monde!',
      greeting: 'Bienvenue dans l'application',
      date: dayjs().locale('fr').format('LLLL'),
    },
  };

  const currentLocale = locales[locale];

  const antdLocales = {
    en: 'enUS',
    zh: 'zh_CN',
    es: 'es_ES',
    fr: 'fr_FR',
  };

  return (
    <ConfigProvider
      locale={require(`antd/es/locale/${antdLocales[locale]}`).default}
    >
      <Card title="Internationalization (i18n) Example">
        <Space direction="vertical" style={{ width: '100%' }}>
          <div>
            <Text strong>Select Language:</Text>
            <Select
              style={{ width: 200, marginLeft: 8 }}
              value={locale}
              onChange={setLocale}
            >
              <Option value="en">English</Option>
              <Option value="zh">中文</Option>
              <Option value="es">Español</Option>
              <Option value="fr">Français</Option>
            </Select>
          </div>

          <Divider />

          <Row gutter={16}>
            <Col span={8}>
              <Card size="small">
                <Title level={5}>Message</Title>
                <Paragraph>{currentLocale.message}</Paragraph>
              </Card>
            </Col>
            <Col span={8}>
              <Card size="small">
                <Title level={5}>Greeting</Title>
                <Paragraph>{currentLocale.greeting}</Paragraph>
              </Card>
            </Col>
            <Col span={8}>
              <Card size="small">
                <Title level={5}>Current Date</Title>
                <Paragraph>{currentLocale.date}</Paragraph>
              </Card>
            </Col>
          </Row>

          <Divider />

          <Card size="small" title="Localized Components">
            <Space>
              <DatePicker />
              <TimePicker />
              <Button>Save</Button>
              <Button type="primary">Submit</Button>
              <Button danger>Delete</Button>
            </Space>
          </Card>
        </Space>
      </Card>
    </ConfigProvider>
  );
}

// 5. Theme Customization
export function ThemeCustomizationExample() {
  const [themeMode, setThemeMode] = useState('light');
  const [primaryColor, setPrimaryColor] = useState('#1890ff');

  const { defaultAlgorithm, darkAlgorithm } = theme;

  const themeConfig = {
    algorithm: themeMode === 'dark' ? darkAlgorithm : defaultAlgorithm,
    token: {
      colorPrimary: primaryColor,
      borderRadius: 8,
      wireframe: false,
    },
    components: {
      Button: {
        controlHeight: 40,
        controlHeightLG: 48,
        controlHeightSM: 32,
      },
      Input: {
        controlHeight: 40,
      },
      Card: {
        borderRadius: 12,
      },
    },
  };

  const predefinedColors = [
    { name: 'Blue', value: '#1890ff' },
    { name: 'Purple', value: '#722ed1' },
    { name: 'Cyan', value: '#13c2c2' },
    { name: 'Green', value: '#52c41a' },
    { name: 'Orange', value: '#fa8c16' },
    { name: 'Red', value: '#f5222d' },
    { name: 'Pink', value: '#eb2f96' },
    { name: 'Gold', value: '#faad14' },
  ];

  return (
    <ConfigProvider theme={themeConfig}>
      <Card title="Theme Customization Example">
        <Space direction="vertical" style={{ width: '100%' }}>
          <Row gutter={16} align="middle">
            <Col>
              <Text strong>Theme Mode:</Text>
            </Col>
            <Col>
              <Radio.Group
                value={themeMode}
                onChange={(e) => setThemeMode(e.target.value)}
              >
                <Radio value="light">Light</Radio>
                <Radio value="dark">Dark</Radio>
              </Radio.Group>
            </Col>
          </Row>

          <Row gutter={16} align="middle">
            <Col>
              <Text strong>Primary Color:</Text>
            </Col>
            <Col>
              <Radio.Group
                value={primaryColor}
                onChange={(e) => setPrimaryColor(e.target.value)}
                optionType="button"
                buttonStyle="solid"
              >
                {predefinedColors.map(color => (
                  <Radio.Button
                    key={color.value}
                    value={color.value}
                    style={{ backgroundColor: color.value, color: 'white' }}
                  >
                    {color.name}
                  </Radio.Button>
                ))}
              </Radio.Group>
            </Col>
          </Row>

          <Divider />

          <Card size="small" title="Theme Preview">
            <Space direction="vertical" style={{ width: '100%' }}>
              <Row gutter={16}>
                <Col span={8}>
                  <Button type="primary" block>Primary Button</Button>
                </Col>
                <Col span={8}>
                  <Button block>Default Button</Button>
                </Col>
                <Col span={8}>
                  <Button type="dashed" block>Dashed Button</Button>
                </Col>
              </Row>

              <Space>
                <Input placeholder="Text input" style={{ width: 200 }} />
                <Select style={{ width: 200 }} placeholder="Select option">
                  <Select.Option value="1">Option 1</Select.Option>
                  <Select.Option value="2">Option 2</Select.Option>
                </Select>
                <DatePicker style={{ width: 200 }} />
              </Space>

              <Space>
                <Tag color="blue">Tag</Tag>
                <Tag color="green">Success</Tag>
                <Tag color="orange">Warning</Tag>
                <Tag color="red">Error</Tag>
              </Space>

              <Progress percent={60} />

              <Space>
                <Badge count={5}>
                  <Avatar icon={<UserOutlined />} />
                </Badge>
                <Badge dot>
                  <Avatar icon={<UserOutlined />} />
                </Badge>
                <Avatar src="https://api.dicebear.com/7.x/miniavs/svg?seed=1" />
              </Space>
            </Space>
          </Card>
        </Space>
      </Card>
    </ConfigProvider>
  );
}

// Main Advanced Showcase
export function AdvancedAntDesignShowcase() {
  const { message } = App.useApp();

  useEffect(() => {
    message.info('Welcome to Advanced Ant Design Examples!');
  }, []);

  return (
    <App>
      <div style={{ minHeight: '100vh', backgroundColor: '#f0f2f5' }}>
        <div style={{ padding: '24px' }}>
          <Title level={1}>Advanced Ant Design Examples</Title>
          <Paragraph>
            Enterprise-level UI components and patterns for complex applications
          </Paragraph>

          <Space direction="vertical" size="large" style={{ width: '100%' }}>
            <AdvancedLayout />
          </Space>
        </div>
      </div>
    </App>
  );
}

export {
  AdvancedDataTable,
  AdvancedForm,
  AdvancedLayout,
  InternationalizationExample,
  ThemeCustomizationExample,
  AdvancedAntDesignShowcase
};