import React from 'react';
import { Modal, Row, Col, Text, Tag, Divider, Paragraph, Timeline, Card, Space, Button } from '@/imports';
import dayjs from 'dayjs';
import type { OperationLogItem } from '@/services/operationLogDataSource';

interface DetailModalProps {
  visible: boolean;
  log: OperationLogItem | null;
  relatedLogs: OperationLogItem[];
  onClose: () => void;
  getActorIcon: (actor?: string) => string;
  getActorColor: (actor?: string) => string;
  getStateChange: (log: OperationLogItem) => React.ReactNode;
}

const DetailModal: React.FC<DetailModalProps> = ({
  visible,
  log,
  relatedLogs,
  onClose,
  getActorIcon,
  getActorColor,
  getStateChange,
}) => {
  return (
    <Modal
      title="📋 操作日志详情"
      open={visible}
      onCancel={onClose}
      footer={[
        <Button key="close" onClick={onClose}>关闭</Button>
      ]}
      width={900}
    >
      {log && (
        <div>
          <Row gutter={[16, 8]}>
            <Col span={12}>
              <Text type="secondary">时间:</Text>
              <div>{dayjs(log.created_at).format('YYYY-MM-DD HH:mm:ss')}</div>
            </Col>
            <Col span={12}>
              <Text type="secondary">TraceID:</Text>
              <div><Text copyable>{log.trace_id}</Text></div>
            </Col>
            <Col span={12}>
              <Text type="secondary">闭环:</Text>
              <div>{log.loop_name || log.loop}</div>
            </Col>
            <Col span={12}>
              <Text type="secondary">阶段:</Text>
              <div>{log.stage_name || log.stage}</div>
            </Col>
            <Col span={12}>
              <Text type="secondary">执行者:</Text>
              <div>
                <Tag color={getActorColor(log.actor)}>
                  {getActorIcon(log.actor)} {log.actor_name || log.actor}
                </Tag>
              </div>
            </Col>
            <Col span={12}>
              <Text type="secondary">操作:</Text>
              <div>{log.action}</div>
            </Col>
            <Col span={12}>
              <Text type="secondary">状态:</Text>
              <div>{log.result === 'success' ? '成功' : '失败'}</div>
            </Col>
            {log.before_state && (
              <Col span={12}>
                <Text type="secondary">状态变化:</Text>
                <div>{getStateChange(log)}</div>
              </Col>
            )}
            <Col span={12}>
              <Text type="secondary">模块:</Text>
              <div>{log.module}</div>
            </Col>
            <Col span={12}>
              <Text type="secondary">用户ID:</Text>
              <div>{log.user_id}</div>
            </Col>
            <Col span={12}>
              <Text type="secondary">商户ID:</Text>
              <div>{log.tenant_id}</div>
            </Col>
            <Col span={12}>
              <Text type="secondary">店铺ID:</Text>
              <div>{log.shop_id || '-'}</div>
            </Col>
          </Row>

          {log.after_snapshot && (
            <>
              <Divider />
              <Text strong>执行详情:</Text>
              <pre style={{ background: '#f5f5f5', padding: 12, borderRadius: 4, overflow: 'auto' }}>
                {JSON.stringify(log.after_snapshot, null, 2)}
              </pre>
            </>
          )}

          {log.error_message && (
            <>
              <Divider />
              <Text type="danger">错误信息:</Text>
              <Paragraph type="danger">{log.error_message}</Paragraph>
            </>
          )}

          {relatedLogs.length > 0 && (
            <>
              <Divider />
              <Text strong>关联日志:</Text>
              <Timeline mode="left">
                {relatedLogs.map((relatedLog) => (
                  <Timeline.Item
                    key={relatedLog.id}
                    color={relatedLog.result === 'success' ? 'green' : 'red'}
                    dot={getActorIcon(relatedLog.actor)}
                    label={dayjs(relatedLog.created_at).format('YYYY-MM-DD HH:mm:ss')}
                  >
                    <Card size="small" style={{ width: '100%' }}>
                      <Space direction="vertical" size={4} style={{ width: '100%' }}>
                        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                          <Text strong>{relatedLog.module} - {relatedLog.action}</Text>
                          <Tag color={getActorColor(relatedLog.actor)}>{relatedLog.actor}</Tag>
                        </div>
                        <div>状态: {getStateChange(relatedLog)}</div>
                        <div>操作人: {relatedLog.actor_name || '未知'}</div>
                      </Space>
                    </Card>
                  </Timeline.Item>
                ))}
              </Timeline>
            </>
          )}
        </div>
      )}
    </Modal>
  );
};

export default DetailModal;