import React from "react";
import { Modal, Descriptions, Tag, Divider, Card } from "antd";
import type { AnnotationTemplate } from "../annotation.model";
import TemplateConfigurationTreeEditor from "../components/TemplateConfigurationTreeEditor";

interface TemplateDetailProps {
    visible: boolean;
    template?: AnnotationTemplate;
    onClose: () => void;
}

const TemplateDetail: React.FC<TemplateDetailProps> = ({
    visible,
    template,
    onClose,
}) => {
    if (!template) return null;

    return (
        <Modal
            title="模板详情"
            open={visible}
            onCancel={onClose}
            footer={null}
            width={800}
        >
            <Descriptions bordered column={2}>
                <Descriptions.Item label="名称" span={2}>
                    {template.name}
                </Descriptions.Item>
                <Descriptions.Item label="描述" span={2}>
                    {template.description || "-"}
                </Descriptions.Item>
                <Descriptions.Item label="数据类型">
                    <Tag color="cyan">{template.dataType}</Tag>
                </Descriptions.Item>
                <Descriptions.Item label="标注类型">
                    <Tag color="geekblue">{template.labelingType}</Tag>
                </Descriptions.Item>
                <Descriptions.Item label="分类">
                    <Tag color="blue">{template.category}</Tag>
                </Descriptions.Item>
                <Descriptions.Item label="样式">
                    {template.style}
                </Descriptions.Item>
                <Descriptions.Item label="创建时间" span={2}>
                    {new Date(template.createdAt).toLocaleString()}
                </Descriptions.Item>
                {template.updatedAt && (
                    <Descriptions.Item label="更新时间" span={2}>
                        {new Date(template.updatedAt).toLocaleString()}
                    </Descriptions.Item>
                )}
            </Descriptions>

            <Divider>配置详情</Divider>

            <Card title="标注配置树" size="small" style={{ marginBottom: 16 }}>
                <TemplateConfigurationTreeEditor
                    value={template.labelConfig || ""}
                    readOnly={true}
                    readOnlyStructure={true}
                    height={360}
                />
            </Card>

            {template.labelConfig && (
                <Card title="Label Studio XML 配置" size="small">
                    <pre style={{
                        background: "#f5f5f5",
                        padding: 12,
                        borderRadius: 4,
                        overflow: "auto",
                        maxHeight: 300
                    }}>
                        {template.labelConfig}
                    </pre>
                </Card>
            )}
        </Modal>
    );
};

export default TemplateDetail;
