import React, { useState, useEffect, useRef } from 'react';
import apiClient from '../../utils/apiClient';
import { buildApiUrl, API_ENDPOINTS } from '../../config/api';
import { Plus, ChevronLeft, ChevronRight, Trash2, BookText, FileText, Star, Save, Check, Edit2, X, MessageSquare, Library } from 'lucide-react';
import './PromptManagement.css';
import ConfirmDialog from '../../components/ConfirmDialog';
import FormModal from '../../components/FormModal';
import Toast from '../../components/Toast';
import MarkdownEditor from '../../components/MarkdownEditor';
import Breadcrumb from '../../components/Breadcrumb';
import PageLoading from '../../components/PageLoading';

const TASK_TYPES = {
  MEETING_TASK: { label: '会议任务', icon: <MessageSquare size={18} /> },
  KNOWLEDGE_TASK: { label: '知识库任务', icon: <Library size={18} /> }
};

const PromptManagement = () => {
  const [prompts, setPrompts] = useState([]);
  const [selectedPrompt, setSelectedPrompt] = useState(null);
  const [editingPrompt, setEditingPrompt] = useState(null); // 正在编辑的提示词
  const [editingTitle, setEditingTitle] = useState(false); // 是否正在编辑标题
  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');
  const [showCreateModal, setShowCreateModal] = useState(false);
  const [newPromptData, setNewPromptData] = useState({ name: '', task_type: 'MEETING_TASK', desc: '' });
  const [deleteConfirmInfo, setDeleteConfirmInfo] = useState(null);
  const [toasts, setToasts] = useState([]);
  const [isSaving, setIsSaving] = useState(false);

  // Toast helper functions
  const showToast = (message, type = 'info') => {
    const id = Date.now();
    setToasts(prev => [...prev, { id, message, type }]);
  };

  const removeToast = (id) => {
    setToasts(prev => prev.filter(toast => toast.id !== id));
  };

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

  const fetchPrompts = async () => {
    setLoading(true);
    try {
      const response = await apiClient.get(buildApiUrl(API_ENDPOINTS.PROMPTS.LIST));
      const promptList = response.data.prompts;
      setPrompts(promptList);

      // 如果有提示词且没有选中，默认选中第一个
      if (promptList.length > 0 && !selectedPrompt) {
        const firstPrompt = promptList[0];
        setSelectedPrompt(firstPrompt);
        setEditingPrompt({ ...firstPrompt });
      }
    } catch (err) {
      setError(err.response?.data?.message || '无法加载提示词列表');
    } finally {
      setLoading(false);
    }
  };

  const handleOpenCreateModal = () => {
    setNewPromptData({ name: '', task_type: 'MEETING_TASK', desc: '' });
    setShowCreateModal(true);
  };

  const handleCloseCreateModal = () => {
    setShowCreateModal(false);
    setNewPromptData({ name: '', task_type: 'MEETING_TASK', desc: '' });
  };

  const handleCreatePrompt = async () => {
    if (!newPromptData.name.trim()) {
      showToast('请输入提示词名称', 'warning');
      return;
    }

    try {
      const response = await apiClient.post(buildApiUrl(API_ENDPOINTS.PROMPTS.CREATE), {
        name: newPromptData.name,
        task_type: newPromptData.task_type,
        desc: newPromptData.desc || '',
        content: '',
        is_default: false,
        is_active: true
      });

      showToast('提示词创建成功', 'success');
      handleCloseCreateModal();
      await fetchPrompts();

      // 自动选中新创建的提示词
      const newPrompt = response.data;
      if (newPrompt && newPrompt.id) {
        const createdPrompt = prompts.find(p => p.id === newPrompt.id) || newPrompt;
        setSelectedPrompt(createdPrompt);
        setEditingPrompt({ ...createdPrompt });
      }
    } catch (err) {
      showToast(err.response?.data?.message || '创建失败', 'error');
    }
  };

  const handlePromptSelect = (prompt) => {
    setSelectedPrompt(prompt);
    setEditingPrompt({ ...prompt });
    setEditingTitle(false); // 切换提示词时关闭标题编辑
  };

  const handleEditChange = (field, value) => {
    setEditingPrompt(prev => ({ ...prev, [field]: value }));
  };

  // 保存标题和描述
  const handleSaveTitle = async () => {
    if (!editingPrompt || !editingPrompt.id || !editingPrompt.name.trim()) {
      showToast('标题不能为空', 'warning');
      return;
    }

    setIsSaving(true);
    try {
      const dataToSend = {
        name: editingPrompt.name,
        task_type: editingPrompt.task_type,
        content: editingPrompt.content || '',
        desc: editingPrompt.desc || '',
        is_default: Boolean(editingPrompt.is_default),
        is_active: editingPrompt.is_active !== false
      };

      await apiClient.put(
        buildApiUrl(API_ENDPOINTS.PROMPTS.UPDATE(editingPrompt.id)),
        dataToSend
      );

      showToast('标题更新成功', 'success');

      // 先计算完整更新后的对象（在回调外部）
      const fullUpdatedPrompt = {
        ...prompts.find(p => p.id === editingPrompt.id),
        name: editingPrompt.name,
        desc: editingPrompt.desc
      };

      // 更新本地状态
      setPrompts(prevPrompts =>
        prevPrompts.map(p => p.id === editingPrompt.id ? fullUpdatedPrompt : p)
      );

      // 使用完整数据更新状态
      setSelectedPrompt(fullUpdatedPrompt);
      setEditingPrompt(fullUpdatedPrompt);
      setEditingTitle(false);
    } catch (err) {
      console.error('handleSaveTitle error:', err);
      showToast(err.response?.data?.message || '更新失败', 'error');
    } finally {
      setIsSaving(false);
    }
  };

  // 直接保存字段更新（用于 is_default 和 is_active）
  const handleDirectSave = async (field, value) => {
    if (!editingPrompt || !editingPrompt.id) {
      showToast('数据异常，请重新选择提示词', 'error');
      console.error('handleDirectSave: editingPrompt is invalid', editingPrompt);
      return;
    }

    // 如果是默认模版，不允许设置为无效
    if (field === 'is_active' && !value && editingPrompt.is_default) {
      showToast('默认模版不能设置为无效，请先取消默认状态', 'warning');
      return;
    }

    const updatedPrompt = { ...editingPrompt, [field]: value };

    setIsSaving(true);
    try {
      const dataToSend = {
        name: updatedPrompt.name,
        task_type: updatedPrompt.task_type,
        content: updatedPrompt.content || '',
        desc: updatedPrompt.desc || '',
        is_default: Boolean(updatedPrompt.is_default),
        is_active: updatedPrompt.is_active !== false
      };

      await apiClient.put(
        buildApiUrl(API_ENDPOINTS.PROMPTS.UPDATE(editingPrompt.id)),
        dataToSend
      );

      showToast('更新成功', 'success');

      // 先计算完整更新后的对象（在回调外部）
      const fullUpdatedPrompt = {
        ...prompts.find(p => p.id === editingPrompt.id),
        [field]: value
      };

      // 更新本地状态
      setPrompts(prevPrompts =>
        prevPrompts.map(p => p.id === editingPrompt.id ? fullUpdatedPrompt : p)
      );

      // 使用完整数据更新状态
      setSelectedPrompt(fullUpdatedPrompt);
      setEditingPrompt(fullUpdatedPrompt);
    } catch (err) {
      console.error('handleDirectSave error:', err);
      showToast(err.response?.data?.message || '更新失败', 'error');
      // 恢复原值
      setEditingPrompt({ ...selectedPrompt });
    } finally {
      setIsSaving(false);
    }
  };

  const handleSave = async () => {
    if (!editingPrompt || !editingPrompt.id) {
      showToast('数据异常，请重新选择提示词', 'error');
      console.error('handleSave: editingPrompt is invalid', editingPrompt);
      return;
    }

    // 验证必需字段
    if (!editingPrompt.name || !editingPrompt.task_type || editingPrompt.content === undefined) {
      showToast('数据不完整，请刷新页面重试', 'error');
      console.error('handleSave: missing required fields', editingPrompt);
      return;
    }

    console.log('handleSave: Saving prompt', {
      id: editingPrompt.id,
      name: editingPrompt.name,
      task_type: editingPrompt.task_type,
      content_length: editingPrompt.content?.length,
      is_default: editingPrompt.is_default,
      is_active: editingPrompt.is_active
    });

    setIsSaving(true);
    try {
      const dataToSend = {
        name: editingPrompt.name,
        task_type: editingPrompt.task_type,
        content: editingPrompt.content || '',
        desc: editingPrompt.desc || '',
        is_default: Boolean(editingPrompt.is_default),
        is_active: editingPrompt.is_active !== false
      };

      const url = buildApiUrl(API_ENDPOINTS.PROMPTS.UPDATE(editingPrompt.id));
      console.log('handleSave: Request URL:', url);
      console.log('handleSave: Sending data', dataToSend);
      console.log('handleSave: editingPrompt.id type:', typeof editingPrompt.id, 'value:', editingPrompt.id);

      const response = await apiClient.put(url, dataToSend);

      console.log('handleSave: Success response:', response);
      showToast('保存成功', 'success');

      // 先从当前列表中找到原始记录
      const originalPrompt = prompts.find(p => p.id === editingPrompt.id);
      if (!originalPrompt) {
        console.error('handleSave: Cannot find prompt in list', editingPrompt.id);
        console.error('handleSave: Current prompts list:', prompts.map(p => ({ id: p.id, name: p.name })));
        // 如果找不到，重新加载列表
        await fetchPrompts();
        return;
      }

      // 计算完整更新后的对象（在回调外部）
      const fullUpdatedPrompt = {
        ...originalPrompt,
        ...editingPrompt
      };

      console.log('handleSave: fullUpdatedPrompt', fullUpdatedPrompt);

      // 更新本地状态
      setPrompts(prevPrompts =>
        prevPrompts.map(p => p.id === editingPrompt.id ? fullUpdatedPrompt : p)
      );

      // 使用完整数据更新状态
      setSelectedPrompt(fullUpdatedPrompt);
      setEditingPrompt(fullUpdatedPrompt);
    } catch (err) {
      console.error('handleSave error:', err);
      console.error('handleSave error response:', err.response?.data);
      console.error('handleSave error config:', err.config);
      showToast(err.response?.data?.message || '保存失败', 'error');
    } finally {
      setIsSaving(false);
    }
  };

  const handleDelete = async (prompt) => {
    // 检查是否为默认模版
    if (prompt.is_default) {
      showToast('默认模版不允许删除，请先取消默认状态', 'warning');
      return;
    }

    setDeleteConfirmInfo({
      id: prompt.id,
      name: prompt.name
    });
  };

  const handleConfirmDelete = async () => {
    try {
      await apiClient.delete(buildApiUrl(API_ENDPOINTS.PROMPTS.DELETE(deleteConfirmInfo.id)));

      if (selectedPrompt && selectedPrompt.id === deleteConfirmInfo.id) {
        setSelectedPrompt(null);
        setEditingPrompt(null);
      }

      setDeleteConfirmInfo(null);
      await fetchPrompts();
      showToast('提示词删除成功', 'success');
    } catch (err) {
      showToast(err.response?.data?.message || '删除失败', 'error');
      setDeleteConfirmInfo(null);
    }
  };

  // 按任务类型分组
  const groupedPrompts = {
    MEETING_TASK: prompts.filter(p => p.task_type === 'MEETING_TASK'),
    KNOWLEDGE_TASK: prompts.filter(p => p.task_type === 'KNOWLEDGE_TASK')
  };

  if (loading) {
    return <PageLoading message="加载中..." />;
  }

  return (
    <div className="prompt-management">
      <Breadcrumb currentPage="提示词管理" icon={BookText} />

      <div className="prompt-layout">
        {/* 左侧提示词列表 */}
        <div className={`prompt-sidebar ${sidebarCollapsed ? 'collapsed' : ''}`}>
          <div className="sidebar-header">
            {!sidebarCollapsed && (
              <>
                <h3>提示词列表</h3>
                <button
                  className="btn-new-prompt"
                  onClick={handleOpenCreateModal}
                  title="新增提示词"
                >
                  <Plus size={18} />
                </button>
              </>
            )}
            <button
              className="btn-toggle-sidebar"
              onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
              title={sidebarCollapsed ? "展开" : "收起"}
            >
              {sidebarCollapsed ? <ChevronRight size={18} /> : <ChevronLeft size={18} />}
            </button>
          </div>

          {!sidebarCollapsed && (
            <div className="prompt-list-sidebar">
              {prompts.length === 0 ? (
                <div className="empty-state">
                  <p>暂无提示词</p>
                </div>
              ) : (
                <>
                  {/* 会议任务 */}
                  {groupedPrompts.MEETING_TASK.length > 0 && (
                    <div className="prompt-group">
                      <div className="group-header">
                        <span>{TASK_TYPES.MEETING_TASK.icon}</span>
                        <span>{TASK_TYPES.MEETING_TASK.label}</span>
                      </div>
                      {groupedPrompts.MEETING_TASK.map(prompt => (
                        <div
                          key={prompt.id}
                          className={`prompt-list-item ${selectedPrompt?.id === prompt.id ? 'active' : ''}`}
                          onClick={() => handlePromptSelect(prompt)}
                        >
                          <div className="prompt-item-info">
                            {prompt.is_default ? (
                              <span className="badge badge-default">
                                <Star size={12} fill="currentColor" />
                              </span>
                            ) : null}
                            <h4 title={prompt.name}>{prompt.name}</h4>
                            {!prompt.is_active ? (
                              <span className="badge badge-inactive">未启用</span>
                            ) : null}
                          </div>
                        </div>
                      ))}
                    </div>
                  )}

                  {/* 知识库任务 */}
                  {groupedPrompts.KNOWLEDGE_TASK.length > 0 && (
                    <div className="prompt-group">
                      <div className="group-header">
                        <span>{TASK_TYPES.KNOWLEDGE_TASK.icon}</span>
                        <span>{TASK_TYPES.KNOWLEDGE_TASK.label}</span>
                      </div>
                      {groupedPrompts.KNOWLEDGE_TASK.map(prompt => (
                        <div
                          key={prompt.id}
                          className={`prompt-list-item ${selectedPrompt?.id === prompt.id ? 'active' : ''}`}
                          onClick={() => handlePromptSelect(prompt)}
                        >
                          <div className="prompt-item-info">
                            {prompt.is_default ? (
                              <span className="badge badge-default">
                                <Star size={12} fill="currentColor" />
                              </span>
                            ) : null}
                            <h4 title={prompt.name}>{prompt.name}</h4>
                            {!prompt.is_active ? (
                              <span className="badge badge-inactive">未启用</span>
                            ) : null}
                          </div>
                        </div>
                      ))}
                    </div>
                  )}
                </>
              )}
            </div>
          )}
        </div>

        {/* 右侧编辑区 */}
        <div className="prompt-detail-area">
          {selectedPrompt && editingPrompt ? (
            <>
              {/* 第一行：标题 + 操作按钮 */}
              <div className="prompt-title-row">
                <div className="title-edit-container">
                  {editingTitle ? (
                    <>
                      <input
                        type="text"
                        className="title-input"
                        value={editingPrompt.name}
                        onChange={(e) => handleEditChange('name', e.target.value)}
                        onKeyDown={(e) => {
                          if (e.key === 'Enter') {
                            handleSaveTitle();
                          } else if (e.key === 'Escape') {
                            setEditingPrompt({ ...selectedPrompt });
                            setEditingTitle(false);
                          }
                        }}
                        autoFocus
                      />
                      <button
                        className="icon-btn-small confirm-btn"
                        onClick={handleSaveTitle}
                        disabled={isSaving}
                        title="确认"
                      >
                        <Check size={16} />
                      </button>
                      <button
                        className="icon-btn-small cancel-btn"
                        onClick={() => {
                          setEditingPrompt({ ...selectedPrompt });
                          setEditingTitle(false);
                        }}
                        title="取消"
                      >
                        <X size={16} />
                      </button>
                    </>
                  ) : (
                    <>
                      <h1>{selectedPrompt.name}</h1>
                      <button
                        className="icon-btn-small edit-btn"
                        onClick={() => setEditingTitle(true)}
                        title="编辑标题"
                      >
                        <Edit2 size={16} />
                      </button>
                    </>
                  )}
                </div>
                <div className="title-actions">
                  <button
                    className="icon-btn save-btn"
                    onClick={handleSave}
                    disabled={isSaving}
                    title="保存"
                  >
                    <Save size={18} />
                  </button>
                  <button
                    className="icon-btn delete-btn"
                    onClick={() => handleDelete(selectedPrompt)}
                    title="删除"
                  >
                    <Trash2 size={18} />
                  </button>
                </div>
              </div>

              {/* 描述字段 */}
              <div className="prompt-desc-row">
                <textarea
                  className="prompt-desc-input"
                  value={editingPrompt.desc || ''}
                  onChange={(e) => handleEditChange('desc', e.target.value)}
                  placeholder="添加模版描述（描述此模版的使用场景）..."
                  rows={2}
                />
              </div>

              {/* 第二行：任务类型 + 设为默认 + 启用开关 */}
              <div className="prompt-controls-row">
                <span className="task-type-badge">
                  {TASK_TYPES[selectedPrompt.task_type]?.icon} {TASK_TYPES[selectedPrompt.task_type]?.label}
                </span>

                <div className="prompt-actions-right">
                  <button
                    className={`btn-set-default ${editingPrompt.is_default ? 'active' : ''}`}
                    onClick={() => handleDirectSave('is_default', !editingPrompt.is_default)}
                    disabled={isSaving}
                  >
                    <Star size={14} />
                    <span>{editingPrompt.is_default ? '默认模版' : '设为默认'}</span>
                  </button>

                  <label className="switch-label">
                    <span>启用</span>
                    <div className="switch-wrapper">
                      <input
                        type="checkbox"
                        checked={editingPrompt.is_active}
                        onChange={(e) => handleDirectSave('is_active', e.target.checked)}
                        className="switch-input"
                        disabled={isSaving}
                      />
                      <span className="switch-slider"></span>
                    </div>
                  </label>
                </div>
              </div>

              {/* Markdown 编辑器 */}
              <div className="prompt-editor-container">
                <MarkdownEditor
                  value={editingPrompt.content || ''}
                  onChange={(value) => handleEditChange('content', value)}
                  placeholder="请输入提示词内容（支持 Markdown 格式）..."
                  height={500}
                  showImageUpload={false}
                />
              </div>
            </>
          ) : (
            <div className="prompt-empty-placeholder">
              <FileText size={64} />
              <p>请从左侧选择一个提示词进行编辑</p>
            </div>
          )}
        </div>
      </div>

      {/* 新增提示词表单弹窗（简化版） */}
      <FormModal
        isOpen={showCreateModal}
        onClose={handleCloseCreateModal}
        title="新增提示词"
        size="small"
        actions={
          <>
            <button type="button" className="btn btn-secondary" onClick={handleCloseCreateModal}>
              取消
            </button>
            <button type="button" className="btn btn-primary" onClick={handleCreatePrompt}>
              创建
            </button>
          </>
        }
      >
        <div className="form-group">
          <label><FileText size={16} /> 名称</label>
          <input
            type="text"
            value={newPromptData.name}
            onChange={(e) => setNewPromptData(prev => ({ ...prev, name: e.target.value }))}
            placeholder="请输入提示词名称"
            autoFocus
          />
        </div>

        <div className="form-group">
          <label><BookText size={16} /> 任务类型</label>
          <select
            value={newPromptData.task_type}
            onChange={(e) => setNewPromptData(prev => ({ ...prev, task_type: e.target.value }))}
          >
            <option value="MEETING_TASK">会议任务</option>
            <option value="KNOWLEDGE_TASK">知识库任务</option>
          </select>
        </div>

        <div className="form-group">
          <label><MessageSquare size={16} /> 描述（可选）</label>
          <textarea
            value={newPromptData.desc}
            onChange={(e) => setNewPromptData(prev => ({ ...prev, desc: e.target.value }))}
            placeholder="描述此模版的使用场景..."
            rows={3}
          />
        </div>
      </FormModal>

      {/* 删除提示词确认对话框 */}
      <ConfirmDialog
        isOpen={!!deleteConfirmInfo}
        onClose={() => setDeleteConfirmInfo(null)}
        onConfirm={handleConfirmDelete}
        title="删除提示词"
        message={`确定要删除提示词"${deleteConfirmInfo?.name}"吗？此操作无法撤销。`}
        confirmText="删除"
        cancelText="取消"
        type="danger"
      />

      {/* Toast notifications */}
      {toasts.map(toast => (
        <Toast
          key={toast.id}
          message={toast.message}
          type={toast.type}
          onClose={() => removeToast(toast.id)}
        />
      ))}
    </div>
  );
};

export default PromptManagement;