import { DeleteOutlined, DownloadOutlined, ReloadOutlined } from '@ant-design/icons'
import { Alert, Button, Modal, Popconfirm, Space, Spin, Tag, Typography } from 'antd'
import ReactMarkdown from 'react-markdown'
import type { Composition } from '../types'
import { COMPOSITION_STATUS_LABELS } from '../types'

interface Props {
  item: Composition | null
  open: boolean
  onClose: () => void
  onRegenerate: (id: string) => void
  onDelete: (id: string) => void
  onDownload: (item: Composition) => void
  regenerating?: boolean
}

export default function CompositionDetailModal({
  item,
  open,
  onClose,
  onRegenerate,
  onDelete,
  onDownload,
  regenerating,
}: Props) {
  if (!item) return null

  const processing = item.status === 'pending' || item.status === 'generating'

  return (
    <Modal
      title="作文详情"
      open={open}
      onCancel={onClose}
      width="92%"
      style={{ maxWidth: 860 }}
      footer={
        <Space wrap>
          <Popconfirm title="确定删除？" onConfirm={() => onDelete(item.id)}>
            <Button danger icon={<DeleteOutlined />}>
              删除
            </Button>
          </Popconfirm>
          <Button
            icon={<ReloadOutlined />}
            loading={regenerating}
            onClick={() => onRegenerate(item.id)}
          >
            重新生成
          </Button>
          <Button
            type="primary"
            icon={<DownloadOutlined />}
            disabled={item.status !== 'done'}
            onClick={() => onDownload(item)}
          >
            下载 Markdown
          </Button>
        </Space>
      }
    >
      <Space direction="vertical" size="middle" style={{ width: '100%' }}>
        <div>
          <Tag>{COMPOSITION_STATUS_LABELS[item.status]}</Tag>
          <Tag>{item.input_mode === 'ocr' ? 'OCR 识别' : '手动输入'}</Tag>
          <Typography.Text type="secondary" style={{ marginLeft: 8 }}>
            {new Date(item.created_at).toLocaleString()}
          </Typography.Text>
        </div>
        <div>
          <Typography.Text strong>题目</Typography.Text>
          <pre
            style={{
              marginTop: 8,
              background: '#fafafa',
              padding: 12,
              borderRadius: 8,
              whiteSpace: 'pre-wrap',
            }}
          >
            {item.topic}
          </pre>
        </div>
        {item.error_message && <Alert type="error" message={item.error_message} showIcon />}
        {processing && (
          <div style={{ textAlign: 'center', padding: 24 }}>
            <Spin tip="正在生成写作方案与范文…" />
          </div>
        )}
        {item.status === 'done' && (
          <>
            {item.writing_plan && (
              <div>
                <Typography.Title level={5}>写作方案</Typography.Title>
                <div style={{ background: '#fafafa', padding: 12, borderRadius: 8 }}>
                  <ReactMarkdown>{item.writing_plan}</ReactMarkdown>
                </div>
              </div>
            )}
            {item.sample_essay && (
              <div>
                <Typography.Title level={5}>范文</Typography.Title>
                <div style={{ background: '#fafafa', padding: 12, borderRadius: 8 }}>
                  <ReactMarkdown>{item.sample_essay}</ReactMarkdown>
                </div>
              </div>
            )}
          </>
        )}
      </Space>
    </Modal>
  )
}
