import { useState, useEffect } from 'react'
import {
  Table,
  Button,
  Form,
  Input,
  Modal,
  message,
  Space,
  Popconfirm,
} from 'antd'
import { PlusOutlined, EditOutlined, DeleteOutlined, ReloadOutlined, EyeOutlined } from '@ant-design/icons'
import type { ColumnsType } from 'antd/es/table'
import type { Material } from '@/types/question'
import { MaterialType } from '@/types/question'
import { searchMaterials, createMaterial, updateMaterial, deleteMaterial } from '@/api/question'
import { DEFAULT_PAGE_SIZE } from '@/constants'
import dayjs from 'dayjs'
import RichTextEditor from '@/components/RichTextEditor/RichTextEditor'

const MaterialList = () => {
  const [loading, setLoading] = useState(false)
  const [dataSource, setDataSource] = useState<Material[]>([])
  const [total, setTotal] = useState(0)
  const [page, setPage] = useState(1)
  const [pageSize, setPageSize] = useState(DEFAULT_PAGE_SIZE)
  const [query, setQuery] = useState('')
  const [modalVisible, setModalVisible] = useState(false)
  const [previewVisible, setPreviewVisible] = useState(false)
  const [editingRecord, setEditingRecord] = useState<Material | null>(null)
  const [previewContent, setPreviewContent] = useState('')

  const [form] = Form.useForm()

  // 获取列表数据
  const fetchData = async () => {
    setLoading(true)
    try {
      const res = await searchMaterials({
        query,
        type: MaterialType.OBJECTIVE,
        page,
        pageSize,
      })
      if (res.data.code === 200) {
        const list = res.data.data.list || []
        const total = res.data.data.total || 0
        setDataSource(list)
        setTotal(total)
      }
    } catch (error: any) {
      console.error('获取材料列表错误:', error)
      setDataSource([])
      setTotal(0)
      if (error.response?.status >= 500 || !error.response) {
        message.error('服务器错误，请稍后重试')
      }
    } finally {
      setLoading(false)
    }
  }

  useEffect(() => {
    fetchData()
  }, [page, pageSize, query])

  // 监听 Modal 打开，设置表单初始值
  useEffect(() => {
    if (modalVisible && editingRecord) {
      console.log('编辑材料数据:', editingRecord)
      form.setFieldsValue({
        name: editingRecord.name || '',
        content: editingRecord.content || '',
      })
    }
  }, [modalVisible, editingRecord, form])

  // 打开新增/编辑弹窗
  const handleOpenModal = (record?: Material) => {
    if (record) {
      setEditingRecord(record)
    } else {
      setEditingRecord(null)
      form.resetFields()
      form.setFieldsValue({
        name: '',
        content: '',
      })
    }
    setModalVisible(true)
  }

  // 预览材料内容
  const handlePreview = (record: Material) => {
    setPreviewContent(record.content)
    setPreviewVisible(true)
  }

  // 提交表单
  const handleSubmit = async () => {
    try {
      const values = await form.validateFields()
      
      const formData = {
        type: MaterialType.OBJECTIVE,
        name: values.name || '',
        content: values.content || '',
      }

      if (editingRecord) {
        // 编辑
        await updateMaterial({ ...editingRecord, ...formData })
        message.success('编辑材料成功')
      } else {
        // 新增
        await createMaterial(formData)
        message.success('新增材料成功')
      }

      setModalVisible(false)
      setEditingRecord(null)
      form.resetFields()
      fetchData()
    } catch (error: any) {
      const errorMsg = error?.message || '操作失败'
      message.error(errorMsg)
    }
  }

  // 删除材料
  const handleDelete = async (id: string) => {
    try {
      await deleteMaterial(id)
      message.success('删除成功')
      fetchData()
    } catch (error: any) {
      const errorMsg = error?.message || '删除失败'
      message.error(errorMsg)
    }
  }

  // 搜索
  const handleSearch = (value: string) => {
    setQuery(value)
    setPage(1)
  }

  const columns: ColumnsType<Material> = [
    {
      title: '材料名称',
      dataIndex: 'name',
      key: 'name',
      width: 200,
      ellipsis: true,
      render: (name: string) => name || <span style={{ color: '#999' }}>未命名</span>,
    },
    {
      title: '材料内容',
      dataIndex: 'content',
      key: 'content',
      width: 400,
      ellipsis: true,
      render: (content: string) => {
        // 移除 HTML 标签，只显示纯文本
        const textContent = content
          .replace(/<img[^>]*>/gi, '[图片]')
          .replace(/<[^>]+>/g, '')
          .replace(/\n/g, ' ')
          .trim()
        return textContent || <span style={{ color: '#999' }}>无内容</span>
      },
    },
    {
      title: '创建时间',
      dataIndex: 'createdAt',
      key: 'createdAt',
      width: 180,
      render: (timestamp: number) => {
        if (!timestamp) return '-'
        return dayjs(timestamp * 1000).format('YYYY-MM-DD HH:mm')
      },
    },
    {
      title: '更新时间',
      dataIndex: 'updatedAt',
      key: 'updatedAt',
      width: 180,
      render: (timestamp: number) => {
        if (!timestamp) return '-'
        return dayjs(timestamp * 1000).format('YYYY-MM-DD HH:mm')
      },
    },
    {
      title: '操作',
      key: 'action',
      width: 200,
      fixed: 'right',
      render: (_, record) => (
        <Space>
          <Button 
            type="link" 
            size="small" 
            icon={<EyeOutlined />} 
            onClick={() => handlePreview(record)}
          >
            预览
          </Button>
          <Button 
            type="link" 
            size="small" 
            icon={<EditOutlined />} 
            onClick={() => handleOpenModal(record)}
          >
            编辑
          </Button>
          <Popconfirm
            title="确定要删除这个材料吗？"
            onConfirm={() => handleDelete(record.id)}
            okText="确定"
            cancelText="取消"
          >
            <Button type="link" size="small" danger icon={<DeleteOutlined />}>
              删除
            </Button>
          </Popconfirm>
        </Space>
      ),
    },
  ]

  return (
    <div style={{ padding: 24 }}>
      {/* 页面标题 */}
      <div style={{ marginBottom: 24 }}>
        <h2 style={{ margin: 0, fontSize: 20, fontWeight: 600 }}>客观题管理 - 材料管理</h2>
        <div style={{ color: '#666', fontSize: 14, marginTop: 8 }}>
          管理客观题材料，材料可用于题目中
        </div>
      </div>

      <div style={{ marginBottom: 16 }}>
        <Space wrap>
          <Input.Search
            placeholder="搜索材料名称或内容"
            allowClear
            style={{ width: 300 }}
            onSearch={handleSearch}
          />
          <Button icon={<ReloadOutlined />} onClick={fetchData}>
            刷新
          </Button>
          <Button type="primary" icon={<PlusOutlined />} onClick={() => handleOpenModal()}>
            新增材料
          </Button>
        </Space>
      </div>

      <Table
        loading={loading}
        columns={columns}
        dataSource={dataSource}
        rowKey="id"
        scroll={{ x: 1200 }}
        pagination={{
          current: page,
          pageSize,
          total,
          showSizeChanger: true,
          showTotal: (total) => `共 ${total} 个材料`,
          onChange: (page, pageSize) => {
            setPage(page)
            setPageSize(pageSize)
          },
        }}
      />

      {/* 新增/编辑弹窗 */}
      <Modal
        title={editingRecord ? '编辑材料' : '新增材料'}
        open={modalVisible}
        onOk={handleSubmit}
        onCancel={() => {
          setModalVisible(false)
          setEditingRecord(null)
          form.resetFields()
        }}
        width={900}
        okText="确定"
        cancelText="取消"
      >
        <Form form={form} layout="vertical">
          <Form.Item 
            label="材料名称" 
            name="name" 
            rules={[{ required: true, message: '请输入材料名称' }]}
          >
            <Input placeholder="请输入材料名称" />
          </Form.Item>

          <Form.Item 
            label="材料内容" 
            name="content" 
            rules={[{ required: true, message: '请输入材料内容' }]}
          >
            <RichTextEditor placeholder="请输入材料内容，支持插入图片和文字格式" rows={10} />
          </Form.Item>
        </Form>
      </Modal>

      {/* 预览弹窗 */}
      <Modal
        title="材料预览"
        open={previewVisible}
        onCancel={() => setPreviewVisible(false)}
        footer={[
          <Button key="close" onClick={() => setPreviewVisible(false)}>
            关闭
          </Button>,
        ]}
        width={900}
      >
        <div 
          style={{ 
            maxHeight: '70vh', 
            overflow: 'auto',
            padding: '20px',
            backgroundColor: '#fff',
            borderRadius: 4,
            border: '1px solid #e8e8e8',
          }}
        >
          <div 
            style={{ 
              wordBreak: 'break-word',
              lineHeight: '1.8',
              fontSize: '14px',
              color: '#333',
            }}
            dangerouslySetInnerHTML={{ 
              __html: (() => {
                let html = previewContent || ''
                if (!html) return ''
                
                // react-quill 生成的 HTML 已经是完整的格式，直接使用
                // 只需要确保图片标签有正确的样式
                return html.replace(
                  /<img([^>]*)>/gi,
                  (match, attrs) => {
                    if (!attrs.includes('style=')) {
                      return `<img${attrs} style="max-width: 100%; height: auto; margin: 12px 0; border-radius: 4px; display: block;">`
                    }
                    return match
                  }
                )
              })()
            }}
          />
        </div>
      </Modal>
    </div>
  )
}

export default MaterialList