import { Alert, Button, Descriptions, Modal, Space, Tag, Typography } from '@arco-design/web-react'
import type { SearchResultDTO } from '../../api/search'

const { Paragraph, Text, Title } = Typography

export function SearchResultPreview({
  result,
  onClose,
}: {
  result: SearchResultDTO | null
  onClose: () => void
}) {
  return (
    <Modal
      title="授权对象预览"
      visible={result !== null}
      onCancel={onClose}
      footer={<Button type="primary" onClick={onClose}>关闭预览</Button>}
      unmountOnExit
    >
      {result && (
        <Space direction="vertical" size={16} style={{ width: '100%' }}>
          <Alert type="info" content="仅显示被授权对象，不会加载完整项目工作区。" />
          <Space direction="vertical" size={8} style={{ width: '100%' }}>
            <Tag color="arcoblue">{result.type === 'task' ? '任务' : '笔记'}</Tag>
            <Title heading={6}>{result.title}</Title>
            {result.snippet && <Paragraph>{result.snippet}</Paragraph>}
          </Space>
          <Descriptions
            column={1}
            data={[{ label: '所属项目', value: <Text>{result.projectId}</Text> }]}
          />
        </Space>
      )}
    </Modal>
  )
}