imetting/frontend/src/pages/PromptConfigPage.jsx

import React, { useCallback, useEffect, useMemo, useState } from 'react';
import {
  App,
  Button,
  Card,
  Checkbox,
  Col,
  Drawer,
  Empty,
  Row,
  Segmented,
  Space,
  Tag,
  Tabs,
  Typography,
} from 'antd';
import {
  ArrowDownOutlined,
  ArrowUpOutlined,
  EyeOutlined,
  ReloadOutlined,
  SaveOutlined,
  StarFilled,
} from '@ant-design/icons';
import httpService from '../services/httpService';
import { API_ENDPOINTS, buildApiUrl } from '../config/api';
import PromptManagementPage from './PromptManagementPage';
import MarkdownRenderer from '../components/MarkdownRenderer';
import ActionButton from '../components/ActionButton';

const { Title, Text, Paragraph } = Typography;

const TASK_TYPES = [
  { label: '总结模版', value: 'MEETING_TASK' },
  { label: '知识库模版', value: 'KNOWLEDGE_TASK' },
];

const TASK_TYPE_OPTIONS = TASK_TYPES.map((item) => ({ label: item.label, value: item.value }));

const PromptConfigPage = ({ user }) => {
  const { message } = App.useApp();
  const [taskType, setTaskType] = useState('MEETING_TASK');
  const [loading, setLoading] = useState(false);
  const [saving, setSaving] = useState(false);
  const [availablePrompts, setAvailablePrompts] = useState([]);
  const [selectedPromptIds, setSelectedPromptIds] = useState([]);
  const [viewingPrompt, setViewingPrompt] = useState(null);

  const loadConfig = useCallback(async () => {
    setLoading(true);
    try {
      const res = await httpService.get(buildApiUrl(API_ENDPOINTS.PROMPTS.CONFIG(taskType)));
      setAvailablePrompts(res.data.available_prompts || []);
      setSelectedPromptIds(res.data.selected_prompt_ids || []);
    } catch {
      message.error('加载提示词配置失败');
    } finally {
      setLoading(false);
    }
  }, [message, taskType]);

  useEffect(() => {
    loadConfig();
  }, [loadConfig]);

  const selectedPromptCards = useMemo(() => {
    const map = new Map(availablePrompts.map((item) => [item.id, item]));
    return selectedPromptIds.map((id) => map.get(id)).filter(Boolean);
  }, [availablePrompts, selectedPromptIds]);

  const togglePromptSelected = (promptId, checked) => {
    setSelectedPromptIds((prev) => {
      if (checked) {
        if (prev.includes(promptId)) return prev;
        return [...prev, promptId];
      }
      return prev.filter((id) => id !== promptId);
    });
  };

  const moveSelectedPrompt = (promptId, direction) => {
    setSelectedPromptIds((prev) => {
      const index = prev.findIndex((id) => id === promptId);
      if (index === -1) return prev;
      const target = direction === 'up' ? index - 1 : index + 1;
      if (target < 0 || target >= prev.length) return prev;
      const next = [...prev];
      [next[index], next[target]] = [next[target], next[index]];
      return next;
    });
  };

  const saveConfig = async () => {
    setSaving(true);
    try {
      const items = selectedPromptIds.map((promptId, index) => ({
        prompt_id: promptId,
        is_enabled: true,
        sort_order: index + 1,
      }));
      await httpService.put(buildApiUrl(API_ENDPOINTS.PROMPTS.CONFIG(taskType)), { items });
      message.success('提示词配置已保存');
      loadConfig();
    } catch (error) {
      message.error(error?.response?.data?.detail || '保存失败');
    } finally {
      setSaving(false);
    }
  };

  return (
    <div>
      <Card className="console-surface" variant="borderless" style={{ marginBottom: 16 }}>
        <Space align="center" style={{ width: '100%', justifyContent: 'space-between' }}>
          <div>
            <Title level={3} style={{ margin: 0 }}>提示词配置</Title>
            <Text type="secondary">从系统提示词和个人提示词中勾选启用，并设置显示顺序。</Text>
          </div>
        </Space>
      </Card>
      <Card className="console-surface" variant="borderless" styles={{ body: { padding: 12 } }}>
        <Tabs
          className="console-tabs"
          defaultActiveKey="config"
          destroyInactiveTabPane
          items={[
            {
              key: 'config',
              label: '客户端提示词配置',
              children: (
                <div className="console-tab-panel">
                  <div className="console-tab-toolbar">
                    <Segmented
                      className="console-segmented prompt-config-segmented"
                      value={taskType}
                      onChange={setTaskType}
                      options={TASK_TYPE_OPTIONS}
                    />
                    <Space>
                      <Button icon={<ReloadOutlined />} onClick={loadConfig}>刷新</Button>
                      <Button type="primary" icon={<SaveOutlined />} loading={saving} onClick={saveConfig}>保存配置</Button>
                    </Space>
                  </div>
                  <Row gutter={16}>
                    <Col xs={24} xl={14}>
                      <Card title="全部可用提示词" loading={loading} variant="borderless" className="console-card-panel">
                        <Space direction="vertical" style={{ width: '100%' }}>
                          {availablePrompts.length ? availablePrompts.map((item) => {
                            const isSystem = Number(item.is_system) === 1;
                            return (
                              <Card
                                key={item.id}
                                size="small"
                                style={{
                                  borderRadius: 10,
                                  background: isSystem ? '#eff6ff' : '#ffffff',
                                  borderColor: isSystem ? '#93c5fd' : undefined,
                                }}
                              >
                                <Space direction="vertical" style={{ width: '100%' }}>
                                  <Space style={{ justifyContent: 'space-between', width: '100%' }}>
                                    <Checkbox
                                      checked={selectedPromptIds.includes(item.id)}
                                      onChange={(e) => togglePromptSelected(item.id, e.target.checked)}
                                    >
                                      <Text strong>{item.name}</Text>
                                    </Checkbox>
                                    <Space>
                                      {isSystem ? <Tag color="blue">系统</Tag> : <Tag>个人</Tag>}
                                      {isSystem && item.is_default ? <Tag color="gold" icon={<StarFilled />}>默认</Tag> : null}
                                      <ActionButton tone="view" variant="iconSm" tooltip="查看模板" icon={<EyeOutlined />} onClick={() => setViewingPrompt(item)} />
                                    </Space>
                                  </Space>
                                  {item.desc && (
                                    <Paragraph type="secondary" ellipsis={{ rows: 2 }} style={{ marginBottom: 0 }}>
                                      {item.desc}
                                    </Paragraph>
                                  )}
                                </Space>
                              </Card>
                            );
                          }) : <Empty description="暂无可用提示词" />}
                        </Space>
                      </Card>
                    </Col>
                    <Col xs={24} xl={10}>
                      <Card title="已启用顺序" loading={loading} variant="borderless" className="console-card-panel">
                        <Space direction="vertical" style={{ width: '100%' }}>
                          {selectedPromptCards.length ? selectedPromptCards.map((item, index) => (
                            <Card key={item.id} size="small" style={{ borderRadius: 10 }}>
                              <Space style={{ justifyContent: 'space-between', width: '100%' }}>
                                <Space>
                                  <Tag color="geekblue">#{index + 1}</Tag>
                                  <Text>{item.name}</Text>
                                </Space>
                                <Space>
                                  <Button size="small" icon={<ArrowUpOutlined />} onClick={() => moveSelectedPrompt(item.id, 'up')} />
                                  <Button size="small" icon={<ArrowDownOutlined />} onClick={() => moveSelectedPrompt(item.id, 'down')} />
                                </Space>
                              </Space>
                            </Card>
                          )) : <Empty description="请从左侧勾选提示词" />}
                        </Space>
                      </Card>
                    </Col>
                  </Row>
                </div>
              ),
            },
            {
              key: 'library',
              label: '个人提示词仓库',
              children: <PromptManagementPage user={user} mode="personal" embedded />,
            },
          ]}
        />
      </Card>

      {/* ── View Drawer (read-only) ── */}
      <Drawer
        title="查看提示词定义"
        placement="right"
        width={760}
        open={Boolean(viewingPrompt)}
        onClose={() => setViewingPrompt(null)}
      >
        {viewingPrompt && (
          <div>
            <div style={{ marginBottom: 16 }}>
              <Text type="secondary" style={{ fontSize: 12 }}>名称</Text>
              <div style={{ fontSize: 16, fontWeight: 600 }}>{viewingPrompt.name}</div>
            </div>
            <Space style={{ marginBottom: 16 }}>
              <Tag color="geekblue">{TASK_TYPES.find((x) => x.value === viewingPrompt.task_type)?.label || viewingPrompt.task_type}</Tag>
              {Number(viewingPrompt.is_system) === 1 ? <Tag color="blue">系统</Tag> : <Tag>个人</Tag>}
              {Number(viewingPrompt.is_system) === 1 && Number(viewingPrompt.is_default) === 1 && <Tag color="gold" icon={<StarFilled />}>默认</Tag>}
            </Space>
            {viewingPrompt.desc && (
              <div style={{ marginBottom: 16 }}>
                <Text type="secondary" style={{ fontSize: 12 }}>描述</Text>
                <div style={{ color: 'rgba(0,0,0,0.72)' }}>{viewingPrompt.desc}</div>
              </div>
            )}
            <div>
              <Text type="secondary" style={{ fontSize: 12, marginBottom: 8, display: 'block' }}>提示词内容</Text>
              <div style={{ padding: 16, border: '1px solid #e5e7eb', borderRadius: 8, background: '#fafbfc', maxHeight: 520, overflowY: 'auto' }}>
                <MarkdownRenderer content={viewingPrompt.content || ''} />
              </div>
            </div>
          </div>
        )}
      </Drawer>
    </div>
  );
};

export default PromptConfigPage;