import React from 'react';
import { Collapse, Empty } from 'antd';

interface JsonBlockProps {
  value: unknown;
  maxHeight?: number;
}

export const JsonBlock: React.FC<JsonBlockProps> = ({ value, maxHeight = 420 }) => {
  if (value === undefined || value === null || value === '') {
    return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无 JSON 数据" />;
  }

  return (
    <pre
      style={{
        margin: 0,
        padding: 12,
        maxHeight,
        overflow: 'auto',
        background: '#0f172a',
        color: '#e2e8f0',
        borderRadius: 8,
        fontSize: 12,
        lineHeight: 1.6,
      }}
    >
      {JSON.stringify(value, null, 2)}
    </pre>
  );
};

interface JsonCollapseProps {
  input?: unknown;
  output?: unknown;
  raw?: unknown;
  inputLabel?: string;
  outputLabel?: string;
  rawLabel?: string;
}

const JsonCollapse: React.FC<JsonCollapseProps> = ({
  input,
  output,
  raw,
  inputLabel = '查看 input_json',
  outputLabel = '查看 output_json',
  rawLabel = '查看原始 JSON',
}) => {
  const items = [];
  if (input !== undefined) items.push({ key: 'input', label: inputLabel, children: <JsonBlock value={input} /> });
  if (output !== undefined) items.push({ key: 'output', label: outputLabel, children: <JsonBlock value={output} /> });
  if (raw !== undefined) items.push({ key: 'raw', label: rawLabel, children: <JsonBlock value={raw} /> });

  if (!items.length) return null;
  return <Collapse size="small" style={{ marginTop: 12 }} items={items} />;
};

export default JsonCollapse;
