imeeting/frontend/src/pages/business/PromptTemplates.tsx

import React, { useState, useEffect } from 'react';
import { Card, Button, Input, Space, Drawer, Form, Select, Tag, message, Popconfirm, Typography, Divider, Tooltip, Row, Col, List, Empty, Skeleton, Switch, Modal, Pagination } from 'antd';
import { PlusOutlined, EditOutlined, DeleteOutlined, CopyOutlined, SearchOutlined, SaveOutlined, StarFilled } from '@ant-design/icons';
import ReactMarkdown from 'react-markdown';
import { useDict } from '../../hooks/useDict';
import { 
  getPromptPage, 
  savePromptTemplate, 
  updatePromptTemplate, 
  deletePromptTemplate, 
  updatePromptStatus,
  PromptTemplateVO,
  PromptTemplateDTO 
} from '../../api/business/prompt';

import { useTranslation } from 'react-i18next';

const { Option } = Select;
const { Text, Title } = Typography;

const PromptTemplates: React.FC = () => {
  const { t } = useTranslation();
  const [form] = Form.useForm();
  const [searchForm] = Form.useForm();
  const { items: categories, loading: dictLoading } = useDict('biz_prompt_category');
  const { items: dictTags } = useDict('biz_prompt_tag');
  const { items: promptLevels } = useDict('biz_prompt_level');
  
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState<PromptTemplateVO[]>([]);
  const [total, setTotal] = useState(0);
  const [current, setCurrent] = useState(1);
  const [pageSize, setPageSize] = useState(12);
  
  const [drawerVisible, setDrawerVisible] = useState(false);
  const [editingId, setEditingId] = useState<number | null>(null);
  const [submitLoading, setSubmitLoading] = useState(false);
  const [previewContent, setPreviewContent] = useState('');

  const userProfile = React.useMemo(() => {
    const profileStr = sessionStorage.getItem("userProfile");
    return profileStr ? JSON.parse(profileStr) : {};
  }, []);

  const activeTenantId = React.useMemo(() => Number(localStorage.getItem("activeTenantId") || 0), []);

  const isPlatformAdmin = userProfile.isPlatformAdmin === true;
  const isTenantAdmin = userProfile.isTenantAdmin === true;

  useEffect(() => {
    fetchData();
  }, [current, pageSize]);

  const fetchData = async () => {
    const values = searchForm.getFieldsValue();
    setLoading(true);
    try {
      const res = await getPromptPage({ 
        current, 
        size: pageSize, 
        name: values.name, 
        category: values.category
      });
      if (res.data && res.data.data) {
        setData(res.data.data.records);
        setTotal(res.data.data.total);
      }
    } catch (err) {
      console.error(err);
    } finally {
      setLoading(false);
    }
  };

  const handleStatusChange = async (id: number, checked: boolean) => {
    try {
      await updatePromptStatus(id, checked ? 1 : 0);
      message.success(checked ? '模板已启用' : '模板已停用');
      fetchData();
    } catch (err) {
      console.error(err);
    }
  };

  const handleOpenDrawer = (record?: PromptTemplateVO, isClone = false) => {
    if (record) {
      if (isClone) {
        setEditingId(null);
        form.setFieldsValue({
          ...record,
          templateName: `${record.templateName} (副本)`,
          isSystem: 0, // 副本强制设为普通模板
          id: undefined,
          tenantId: undefined
        });
        setPreviewContent(record.promptContent);
      } else {
        const isPlatformLevel = Number(record.tenantId) === 0;
        const currentUserId = userProfile.userId ? Number(userProfile.userId) : -1;
        
        // 权限判定逻辑
        let canEdit = false;
        if (isPlatformAdmin) {
          canEdit = isPlatformLevel;
        } else if (isTenantAdmin) {
          canEdit = Number(record.tenantId) === activeTenantId;
        } else {
          canEdit = Number(record.creatorId) === currentUserId;
        }

        if (!canEdit) {
          message.warning('您无权修改此层级的模板');
          return;
        }

        setEditingId(record.id);
        form.setFieldsValue(record);
        setPreviewContent(record.promptContent);
      }
    } else {
      setEditingId(null);
      form.resetFields();
      // 租户管理员或平台管理员新增默认选系统/租户预置
      form.setFieldsValue({ 
        status: 1, 
        isSystem: (isTenantAdmin || isPlatformAdmin) ? 1 : 0 
      });
      setPreviewContent('');
    }
    setDrawerVisible(true);
  };

  const showDetail = (record: PromptTemplateVO) => {
    Modal.info({
      title: record.templateName,
      width: 800,
      icon: null,
      content: (
        <div style={{ maxHeight: '65vh', overflowY: 'auto', padding: '12px 0' }}>
          <ReactMarkdown>{record.promptContent}</ReactMarkdown>
        </div>
      ),
      okText: '关闭',
      maskClosable: true
    });
  };

  const handleSubmit = async () => {
    try {
      const values = await form.validateFields();
      setSubmitLoading(true);
      
      // 处理 tenantId，如果是新增且是平台管理员设为系统模板，手动设置 tenantId 为 0
      if (!editingId && isPlatformAdmin && values.isSystem === 1) {
        values.tenantId = 0;
      }

      if (editingId) {
        await updatePromptTemplate({ ...values, id: editingId });
        message.success('更新成功');
      } else {
        await savePromptTemplate(values);
        message.success('模板已创建');
      }
      setDrawerVisible(false);
      fetchData();
    } catch (err) {
      console.error(err);
    } finally {
      setSubmitLoading(false);
    }
  };

  const groupedData = React.useMemo(() => {
    const groups: Record<string, PromptTemplateVO[]> = {};
    data.forEach(item => {
      const cat = item.category || 'default';
      if (!groups[cat]) groups[cat] = [];
      groups[cat].push(item);
    });
    return groups;
  }, [data]);

  const renderCard = (item: PromptTemplateVO) => {
    const isSystem = item.isSystem === 1;
    const isPlatformLevel = Number(item.tenantId) === 0 && isSystem;
    const isTenantLevel = Number(item.tenantId) > 0 && isSystem;
    const isPersonalLevel = !isSystem;
    
    // 权限判定逻辑 (使用 Number 强制转换防止类型不匹配)
    let canEdit = false;
    const currentUserId = userProfile.userId ? Number(userProfile.userId) : -1;

    if (isPlatformAdmin) {
      // 平台管理员管理平台下的所有 (tenantId = 0)
      canEdit = Number(item.tenantId) === 0;
    } else if (isTenantAdmin) {
      // 租户管理员管理本租户所有模板
      canEdit = Number(item.tenantId) === activeTenantId;
    } else {
      // 普通用户仅限自己的个人模板
      canEdit = Number(item.creatorId) === currentUserId;
    }

    // 标签颜色与文字
    const levelTag = isPlatformLevel ? (
      <Tag color="gold" style={{ borderRadius: 4 }}>平台级</Tag>
    ) : isTenantLevel ? (
      <Tag color="blue" style={{ borderRadius: 4 }}>租户级</Tag>
    ) : (
      <Tag color="cyan" style={{ borderRadius: 4 }}>个人级</Tag>
    );

    return (
      <Card 
        key={item.id}
        hoverable
        onClick={() => showDetail(item)}
        style={{ width: 320, borderRadius: 12, border: '1px solid #f0f0f0', position: 'relative', overflow: 'hidden' }}
        bodyStyle={{ padding: '24px' }}
      >
        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 16 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <div style={{ 
              width: 40, height: 40, borderRadius: 10, 
              backgroundColor: isPlatformLevel ? '#fffbe6' : (isTenantLevel ? '#e6f7ff' : '#e6fffb'), 
              display: 'flex', justifyContent: 'center', alignItems: 'center' 
            }}>
              <StarFilled style={{ fontSize: 20, color: isPlatformLevel ? '#faad14' : (isTenantLevel ? '#1890ff' : '#13c2c2') }} />
            </div>
            {levelTag}
          </div>
          <Space onClick={e => e.stopPropagation()}>
            {canEdit && <EditOutlined style={{ fontSize: 18, color: '#bfbfbf', cursor: 'pointer' }} onClick={() => handleOpenDrawer(item)} />}
            <Switch 
              size="small" 
              checked={item.status === 1} 
              onChange={(checked) => handleStatusChange(item.id, checked)}
              disabled={!canEdit}
            />
          </Space>
        </div>

        <div style={{ marginBottom: 12 }}>
          <Text strong style={{ fontSize: 16, display: 'block' }} ellipsis={{ tooltip: item.templateName }}>{item.templateName}</Text>
          <Text type="secondary" style={{ fontSize: 12 }}>使用次数: {item.usageCount || 0}</Text>
        </div>

        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginBottom: 20, height: 22, overflow: 'hidden' }}>
          {item.tags?.map(tag => {
            const dictItem = dictTags.find(dt => dt.itemValue === tag);
            return (
              <Tag key={tag} style={{ margin: 0, border: 'none', backgroundColor: '#f0f2f5', color: '#595959', borderRadius: 4, fontSize: 10 }}>
                {dictItem ? dictItem.itemLabel : tag}
              </Tag>
            );
          })}
        </div>

        <div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center', paddingTop: 12, borderTop: '1px solid #f5f5f5' }}>
          <Space onClick={e => e.stopPropagation()}>
            <Tooltip title="以此创建">
              <CopyOutlined style={{ color: '#bfbfbf', cursor: 'pointer', fontSize: 16 }} onClick={() => handleOpenDrawer(item, true)} />
            </Tooltip>
            {canEdit && (
              <Popconfirm 
                title="确定删除？" 
                onConfirm={() => deletePromptTemplate(item.id).then(fetchData)}
                okText={t('common.confirm')}
                cancelText={t('common.cancel')}
              >
                <Tooltip title="删除">
                  <DeleteOutlined style={{ color: '#bfbfbf', cursor: 'pointer', fontSize: 16 }} />
                </Tooltip>
              </Popconfirm>
            )}
          </Space>
        </div>
      </Card>
    );
  };

  return (
    <div style={{ padding: '32px', backgroundColor: '#fff', minHeight: '100%', overflowY: 'auto' }}>
      <div style={{ maxWidth: 1400, margin: '0 auto' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 32 }}>
          <Title level={3} style={{ margin: 0 }}>提示词模板</Title>
          <Button type="primary" icon={<PlusOutlined />} size="large" onClick={() => handleOpenDrawer()} style={{ borderRadius: 6 }}>
            新增模板
          </Button>
        </div>

        <Card bordered={false} bodyStyle={{ padding: '20px 24px', backgroundColor: '#f9f9f9', borderRadius: 12, marginBottom: 32 }}>
          <Form form={searchForm} layout="inline" onFinish={fetchData}>
            <Form.Item name="name" label="模板名称"><Input placeholder="请输入..." style={{ width: 180 }} /></Form.Item>
            <Form.Item name="category" label="分类">
              <Select placeholder="选择分类" style={{ width: 160 }} allowClear>
                {categories.map(c => <Option key={c.itemValue} value={c.itemValue}>{c.itemLabel}</Option>)}
              </Select>
            </Form.Item>
            <Form.Item>
              <Space>
                <Button type="primary" htmlType="submit">查询数据</Button>
                <Button onClick={() => { searchForm.resetFields(); fetchData(); }}>重置</Button>
              </Space>
            </Form.Item>
          </Form>
        </Card>

        <Skeleton loading={loading} active>
          {Object.keys(groupedData).length === 0 ? (
            <Empty description="暂无可用模板" />
          ) : (
            <>
              {Object.keys(groupedData).map(catKey => {
                const catLabel = categories.find(c => c.itemValue === catKey)?.itemLabel || catKey;
                return (
                  <div key={catKey} style={{ marginBottom: 40 }}>
                    <Title level={4} style={{ marginBottom: 24, paddingLeft: 8, borderLeft: '4px solid #1890ff' }}>{catLabel}</Title>
                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 24 }}>
                      {groupedData[catKey].map(renderCard)}
                    </div>
                  </div>
                );
              })}
              
              <div style={{ display: 'flex', justifyContent: 'center', marginTop: 40, paddingBottom: 20 }}>
                <Pagination
                  current={current}
                  pageSize={pageSize}
                  total={total}
                  showSizeChanger
                  showQuickJumper
                  onChange={(page, size) => {
                    setCurrent(page);
                    setPageSize(size);
                  }}
                  showTotal={(total) => `共 ${total} 条模板`}
                />
              </div>
            </>
          )}
        </Skeleton>
      </div>

      <Drawer
        title={<Title level={4} style={{ margin: 0 }}>{editingId ? '编辑模板' : '创建新模板'}</Title>}
        width="80%"
        onClose={() => setDrawerVisible(false)}
        open={drawerVisible}
        extra={
          <Space>
            <Button onClick={() => setDrawerVisible(false)}>取消</Button>
            <Button type="primary" icon={<SaveOutlined />} loading={submitLoading} onClick={handleSubmit}>保存</Button>
          </Space>
        }
        destroyOnClose
      >
        <Form form={form} layout="vertical">
          <Row gutter={24}>
            <Col span={(isPlatformAdmin || isTenantAdmin) ? 8 : 12}>
              <Form.Item name="templateName" label="模板名称" rules={[{ required: true }]}><Input /></Form.Item>
            </Col>
            {(isPlatformAdmin || isTenantAdmin) && (
              <Col span={6}>
                <Form.Item name="isSystem" label="模板属性" rules={[{ required: true }]}>
                  <Select placeholder="选择属性">
                    {promptLevels.length > 0 ? (
                      promptLevels.map(i => <Option key={i.itemValue} value={Number(i.itemValue)}>{i.itemLabel}</Option>)
                    ) : (
                      <>
                        <Option value={1}>{isPlatformAdmin ? '系统预置 (全局)' : '租户预置 (全员)'}</Option>
                        <Option value={0}>个人模板</Option>
                      </>
                    )}
                  </Select>
                </Form.Item>
              </Col>
            )}
            <Col span={(isPlatformAdmin || isTenantAdmin) ? 5 : 6}>
              <Form.Item name="category" label="分类" rules={[{ required: true }]}>
                <Select loading={dictLoading}>{categories.map(i => <Option key={i.itemValue} value={i.itemValue}>{i.itemLabel}</Option>)}</Select>
              </Form.Item>
            </Col>
            <Col span={isPlatformAdmin ? 5 : 6}>
              <Form.Item name="status" label="状态">
                <Select>
                  <Option value={1}>启用</Option>
                  <Option value={0}>禁用</Option>
                </Select>
              </Form.Item>
            </Col>
          </Row>
          <Form.Item name="tags" label="业务标签" tooltip="可从现有标签中选择，也可输入新内容按回车保存">
            <Select 
              mode="tags" 
              placeholder="选择或输入新标签" 
              allowClear
              tokenSeparators={[',', ' ', ';']}
            >
              {dictTags.map(t => <Option key={t.itemValue} value={t.itemValue}>{t.itemLabel}</Option>)}
            </Select>
          </Form.Item>
          
          <Divider orientation="left">提示词编辑器 (Markdown 实时预览)</Divider>
          <Row gutter={24} style={{ height: 'calc(100vh - 400px)' }}>
            <Col span={12} style={{ height: '100%' }}>
              <Form.Item name="promptContent" noStyle rules={[{ required: true }]}>
                <Input.TextArea 
                  onChange={e => setPreviewContent(e.target.value)} 
                  style={{ height: '100%', fontFamily: 'monospace', resize: 'none', border: '1px solid #d9d9d9', borderRadius: 8, padding: 12 }} 
                  placeholder="在此输入 Markdown 指令..."
                />
              </Form.Item>
            </Col>
            <Col span={12} style={{ height: '100%', overflowY: 'auto', background: '#fafafa', border: '1px solid #f0f0f0', borderRadius: 8, padding: '16px 24px' }}>
              <div className="markdown-preview"><ReactMarkdown>{previewContent}</ReactMarkdown></div>
            </Col>
          </Row>
        </Form>
      </Drawer>
    </div>
  );
};

export default PromptTemplates;