import React from "react";
import { Show } from "@refinedev/antd";
import { useShow } from "@refinedev/core";
import { Typography, Table, Card, Descriptions } from "antd";
import { useTranslation } from "react-i18next";

const { Title } = Typography;

export const OrderShow: React.FC = () => {
    const { t } = useTranslation();
    const { query } = useShow({
        meta: {
            expand: ["Items"],
        },
    });
    const { data, isLoading } = query;
    const record = data?.data;

    return (
        <Show isLoading={isLoading}>
            <Descriptions bordered column={1}>
                <Descriptions.Item label={t("order.orderNumber")}>
                    {record?.OrderNumber}
                </Descriptions.Item>
                <Descriptions.Item label={t("order.orderDate")}>
                    {record?.OrderDate ? new Date(record.OrderDate).toLocaleDateString() : "-"}
                </Descriptions.Item>
                <Descriptions.Item label={t("order.customerName")}>
                    {record?.CustomerName}
                </Descriptions.Item>
                <Descriptions.Item label={t("order.totalAmount")}>
                    ${record?.TotalAmount?.toFixed(2) || "0.00"}
                </Descriptions.Item>
                <Descriptions.Item label={t("order.notes")}>
                    {record?.Notes || "-"}
                </Descriptions.Item>
            </Descriptions>

            <Card title={t("order.items")} style={{ marginTop: 16 }}>
                <Table
                    dataSource={record?.Items || []}
                    rowKey="Oid"
                    pagination={false}
                    bordered
                    size="small"
                >
                    <Table.Column
                        dataIndex="ProductName"
                        title={t("orderItem.productName")}
                    />
                    <Table.Column
                        dataIndex="Quantity"
                        title={t("orderItem.quantity")}
                    />
                    <Table.Column
                        dataIndex="UnitPrice"
                        title={t("orderItem.unitPrice")}
                        render={(value: number) => value ? `$${value.toFixed(2)}` : "-"}
                    />
                    <Table.Column
                        dataIndex="Subtotal"
                        title={t("orderItem.subtotal")}
                        render={(value: number) => value ? `$${value.toFixed(2)}` : "-"}
                    />
                </Table>
            </Card>
        </Show>
    );
};