import { useGetIdentity } from "@refinedev/core";
import { Row, Col, Card, Avatar, Typography, Space } from "antd";
import { useTranslation } from "react-i18next";

const { Text, Title } = Typography;

export const DashboardPage: React.FC = () => {
    const { t } = useTranslation();
    const { data: identity } = useGetIdentity<{
        id: string;
        name: string;
        avatar: string;
    }>();

    return (
        <div style={{ padding: "24px" }}>
            <Title level={2}>{t("sider.dashboard")}</Title>
            <Row gutter={[24, 24]}>
                <Col xs={24} sm={12} lg={8}>
                    <Card
                        title={t("dashboard.welcome")}
                        style={{ borderRadius: "12px" }}
                    >
                        <Space align="center">
                            <Avatar size={64} src={identity?.avatar}>
                                {identity?.name?.charAt(0)}
                            </Avatar>
                            <div>
                                <Text strong style={{ fontSize: "18px" }}>
                                    {identity?.name}
                                </Text>
                                <br />
                                <Text type="secondary">{t("dashboard.welcomeMessage")}</Text>
                            </div>
                        </Space>
                    </Card>
                </Col>

                <Col xs={24} sm={12} lg={8}>
                    <Card
                        title={t("dashboard.quickStart")}
                        style={{ borderRadius: "12px" }}
                    >
                        <ul style={{ paddingLeft: "20px", margin: 0 }}>
                            <li>{t("dashboard.tip1")}</li>
                            <li>{t("dashboard.tip2")}</li>
                            <li>{t("dashboard.tip3")}</li>
                        </ul>
                    </Card>
                </Col>

                <Col xs={24} sm={12} lg={8}>
                    <Card
                        title={t("dashboard.resources")}
                        style={{ borderRadius: "12px" }}
                    >
                        <Space direction="vertical">
                            <a href="https://refine.dev/docs/" target="_blank" rel="noopener noreferrer">
                                Refine Documentation
                            </a>
                            <a href="https://www.npmjs.com/package/@cundi/refine-xaf" target="_blank" rel="noopener noreferrer">
                                @cundi/refine-xaf SDK
                            </a>
                            <a href="https://ant.design/components/overview" target="_blank" rel="noopener noreferrer">
                                Ant Design Components
                            </a>
                        </Space>
                    </Card>
                </Col>
            </Row>
        </div>
    );
};