import React, { useState, useEffect } from 'react';
import {
  getWorldbookList,
  createWorldbook,
  deleteWorldbook,
  importWorldbook,
  exportWorldbook,
  getEntryList,
  createEntry,
  updateEntry,
  deleteEntry,
  type Worldbook,
  type WorldbookEntry,
  type CreateWorldbookRequest,
  type CreateEntryRequest,
} from '../api/worldbook';

const WorldbookManagePage: React.FC = () => {
  const [worldbooks, setWorldbooks] = useState<Worldbook[]>([]);
  const [selectedWorldbook, setSelectedWorldbook] = useState<Worldbook | null>(null);
  const [entries, setEntries] = useState<WorldbookEntry[]>([]);
  const [selectedEntry, setSelectedEntry] = useState<WorldbookEntry | null>(null);
  const [_loading, setLoading] = useState(false);
  const [showCreateModal, setShowCreateModal] = useState(false);
  const [showEntryModal, setShowEntryModal] = useState(false);
  const [searchKeyword, setSearchKeyword] = useState('');

  // 表单状态
  const [worldbookForm, setWorldbookForm] = useState<CreateWorldbookRequest>({
    name: '',
    description: '',
    isPublic: false,
  });

  const [entryForm, setEntryForm] = useState<CreateEntryRequest>({
    comment: '',
    content: '',
    keys: [],
    secondaryKeys: [],
    constant: false,
    enabled: true,
    useRegex: false,
    caseSensitive: false,
    matchWholeWords: false,
    selective: false,
    selectiveLogic: 0,
    position: 1,
    depth: 4,
    order: 100,
    probability: 100,
    scanDepth: 2,
    groupId: '',
  });

  const [keyInput, setKeyInput] = useState('');
  const [secondaryKeyInput, setSecondaryKeyInput] = useState('');

  useEffect(() => {
    loadWorldbooks();
  }, [searchKeyword]);

  useEffect(() => {
    if (selectedWorldbook) {
      loadEntries(selectedWorldbook.id);
    }
  }, [selectedWorldbook]);

  const loadWorldbooks = async () => {
    try {
      setLoading(true);
      const response = await getWorldbookList({
        page: 1,
        pageSize: 100,
        keyword: searchKeyword,
      });
      setWorldbooks(response.data.list || []);
    } catch (error: any) {
      alert('加载世界书列表失败: ' + (error.response?.data?.msg || error.message));
    } finally {
      setLoading(false);
    }
  };

  const loadEntries = async (worldbookId: number) => {
    try {
      const response = await getEntryList(worldbookId);
      setEntries(response.data.list || []);
    } catch (error: any) {
      alert('加载条目列表失败: ' + (error.response?.data?.msg || error.message));
    }
  };

  const handleCreateWorldbook = async () => {
    if (!worldbookForm.name.trim()) {
      alert('请输入世界书名称');
      return;
    }
    try {
      await createWorldbook(worldbookForm);
      alert('创建成功');
      setShowCreateModal(false);
      setWorldbookForm({ name: '', description: '', isPublic: false });
      loadWorldbooks();
    } catch (error: any) {
      alert('创建失败: ' + (error.response?.data?.msg || error.message));
    }
  };

  const handleDeleteWorldbook = async (id: number) => {
    if (!confirm('确定要删除这个世界书吗？所有条目也会被删除。')) return;
    try {
      await deleteWorldbook(id);
      alert('删除成功');
      if (selectedWorldbook?.id === id) {
        setSelectedWorldbook(null);
        setEntries([]);
      }
      loadWorldbooks();
    } catch (error: any) {
      alert('删除失败: ' + (error.response?.data?.msg || error.message));
    }
  };

  const handleImport = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;
    try {
      setLoading(true);
      await importWorldbook(file);
      alert('导入成功');
      loadWorldbooks();
    } catch (error: any) {
      alert('导入失败: ' + (error.response?.data?.msg || error.message));
    } finally {
      setLoading(false);
      e.target.value = '';
    }
  };

  const handleExport = async (id: number) => {
    try {
      const response = await exportWorldbook(id);
      const blob = new Blob([response.data], { type: 'application/json' });
      const url = window.URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = `worldbook_${id}.json`;
      a.click();
      window.URL.revokeObjectURL(url);
    } catch (error: any) {
      alert('导出失败: ' + (error.response?.data?.msg || error.message));
    }
  };

  const handleSaveEntry = async () => {
    if (!selectedWorldbook) return;
    if (!entryForm.content.trim()) {
      alert('请输入条目内容');
      return;
    }
    try {
      if (selectedEntry) {
        await updateEntry(selectedWorldbook.id, selectedEntry.id, entryForm);
        alert('更新成功');
      } else {
        await createEntry(selectedWorldbook.id, entryForm);
        alert('创建成功');
      }
      setShowEntryModal(false);
      resetEntryForm();
      loadEntries(selectedWorldbook.id);
    } catch (error: any) {
      alert('保存失败: ' + (error.response?.data?.msg || error.message));
    }
  };

  const handleDeleteEntry = async (entryId: number) => {
    if (!selectedWorldbook) return;
    if (!confirm('确定要删除这个条目吗？')) return;
    try {
      await deleteEntry(selectedWorldbook.id, entryId);
      alert('删除成功');
      loadEntries(selectedWorldbook.id);
    } catch (error: any) {
      alert('删除失败: ' + (error.response?.data?.msg || error.message));
    }
  };

  const openEntryModal = (entry?: WorldbookEntry) => {
    if (entry) {
      setSelectedEntry(entry);
      setEntryForm({
        comment: entry.comment,
        content: entry.content,
        keys: entry.keys,
        secondaryKeys: entry.secondaryKeys,
        constant: entry.constant,
        enabled: entry.enabled,
        useRegex: entry.useRegex,
        caseSensitive: entry.caseSensitive,
        matchWholeWords: entry.matchWholeWords,
        selective: entry.selective,
        selectiveLogic: entry.selectiveLogic,
        position: entry.position,
        depth: entry.depth,
        order: entry.order,
        probability: entry.probability,
        scanDepth: entry.scanDepth,
        groupId: entry.groupId,
      });
    } else {
      resetEntryForm();
    }
    setShowEntryModal(true);
  };

  const resetEntryForm = () => {
    setSelectedEntry(null);
    setEntryForm({
      comment: '',
      content: '',
      keys: [],
      secondaryKeys: [],
      constant: false,
      enabled: true,
      useRegex: false,
      caseSensitive: false,
      matchWholeWords: false,
      selective: false,
      selectiveLogic: 0,
      position: 1,
      depth: 4,
      order: 100,
      probability: 100,
      scanDepth: 2,
      groupId: '',
    });
    setKeyInput('');
    setSecondaryKeyInput('');
  };

  const addKey = () => {
    if (keyInput.trim()) {
      setEntryForm({
        ...entryForm,
        keys: [...(entryForm.keys || []), keyInput.trim()],
      });
      setKeyInput('');
    }
  };

  const removeKey = (index: number) => {
    setEntryForm({
      ...entryForm,
      keys: entryForm.keys?.filter((_, i) => i !== index),
    });
  };

  const addSecondaryKey = () => {
    if (secondaryKeyInput.trim()) {
      setEntryForm({
        ...entryForm,
        secondaryKeys: [...(entryForm.secondaryKeys || []), secondaryKeyInput.trim()],
      });
      setSecondaryKeyInput('');
    }
  };

  const removeSecondaryKey = (index: number) => {
    setEntryForm({
      ...entryForm,
      secondaryKeys: entryForm.secondaryKeys?.filter((_, i) => i !== index),
    });
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 p-6">
      <div className="max-w-7xl mx-auto">
        <div className="flex items-center justify-between mb-6">
          <h1 className="text-3xl font-bold text-white">世界书管理</h1>
          <div className="flex gap-3">
            <label className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg cursor-pointer transition-colors">
              导入世界书
              <input type="file" accept=".json" onChange={handleImport} className="hidden" />
            </label>
            <button
              onClick={() => setShowCreateModal(true)}
              className="px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-lg transition-colors"
            >
              创建世界书
            </button>
          </div>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          {/* 世界书列表 */}
          <div className="lg:col-span-1 bg-white/10 backdrop-blur-md rounded-xl p-4">
            <input
              type="text"
              placeholder="搜索世界书..."
              value={searchKeyword}
              onChange={(e) => setSearchKeyword(e.target.value)}
              className="w-full px-4 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/50 mb-4"
            />
            <div className="space-y-2 max-h-[calc(100vh-250px)] overflow-y-auto">
              {worldbooks.map((wb) => (
                <div
                  key={wb.id}
                  onClick={() => setSelectedWorldbook(wb)}
                  className={`p-3 rounded-lg cursor-pointer transition-colors ${
                    selectedWorldbook?.id === wb.id
                      ? 'bg-purple-600 text-white'
                      : 'bg-white/5 hover:bg-white/10 text-white/80'
                  }`}
                >
                  <div className="font-medium">{wb.name}</div>
                  <div className="text-sm opacity-70">{wb.entryCount} 条目</div>
                  <div className="flex gap-2 mt-2">
                    <button
                      onClick={(e) => {
                        e.stopPropagation();
                        handleExport(wb.id);
                      }}
                      className="text-xs px-2 py-1 bg-blue-500 hover:bg-blue-600 rounded"
                    >
                      导出
                    </button>
                    <button
                      onClick={(e) => {
                        e.stopPropagation();
                        handleDeleteWorldbook(wb.id);
                      }}
                      className="text-xs px-2 py-1 bg-red-500 hover:bg-red-600 rounded"
                    >
                      删除
                    </button>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* 条目列表 */}
          <div className="lg:col-span-2 bg-white/10 backdrop-blur-md rounded-xl p-4">
            {selectedWorldbook ? (
              <>
                <div className="flex items-center justify-between mb-4">
                  <h2 className="text-xl font-bold text-white">{selectedWorldbook.name}</h2>
                  <button
                    onClick={() => openEntryModal()}
                    className="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg transition-colors"
                  >
                    添加条目
                  </button>
                </div>
                <div className="space-y-3 max-h-[calc(100vh-250px)] overflow-y-auto">
                  {entries.map((entry) => (
                    <div key={entry.id} className="bg-white/5 rounded-lg p-4">
                      <div className="flex items-start justify-between mb-2">
                        <div className="flex-1">
                          <div className="font-medium text-white">
                            {entry.comment || '未命名条目'}
                          </div>
                          <div className="text-sm text-white/60 mt-1">
                            关键词: {entry.keys.join(', ') || '无'}
                          </div>
                        </div>
                        <div className="flex gap-2">
                          <button
                            onClick={() => openEntryModal(entry)}
                            className="text-xs px-3 py-1 bg-blue-500 hover:bg-blue-600 text-white rounded"
                          >
                            编辑
                          </button>
                          <button
                            onClick={() => handleDeleteEntry(entry.id)}
                            className="text-xs px-3 py-1 bg-red-500 hover:bg-red-600 text-white rounded"
                          >
                            删除
                          </button>
                        </div>
                      </div>
                      <div className="text-sm text-white/70 line-clamp-2">{entry.content}</div>
                      <div className="flex gap-2 mt-2 text-xs text-white/50">
                        {entry.constant && <span className="px-2 py-1 bg-yellow-500/20 rounded">常驻</span>}
                        {!entry.enabled && <span className="px-2 py-1 bg-red-500/20 rounded">已禁用</span>}
                        {entry.useRegex && <span className="px-2 py-1 bg-blue-500/20 rounded">正则</span>}
                      </div>
                    </div>
                  ))}
                </div>
              </>
            ) : (
              <div className="flex items-center justify-center h-full text-white/50">
                请选择一个世界书
              </div>
            )}
          </div>
        </div>
      </div>

      {/* 创建世界书模态框 */}
      {showCreateModal && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
          <div className="bg-slate-800 rounded-xl p-6 w-full max-w-md">
            <h2 className="text-xl font-bold text-white mb-4">创建世界书</h2>
            <div className="space-y-4">
              <input
                type="text"
                placeholder="世界书名称"
                value={worldbookForm.name}
                onChange={(e) => setWorldbookForm({ ...worldbookForm, name: e.target.value })}
                className="w-full px-4 py-2 bg-white/10 border border-white/20 rounded-lg text-white"
              />
              <textarea
                placeholder="描述（可选）"
                value={worldbookForm.description}
                onChange={(e) => setWorldbookForm({ ...worldbookForm, description: e.target.value })}
                className="w-full px-4 py-2 bg-white/10 border border-white/20 rounded-lg text-white h-24"
              />
              <label className="flex items-center text-white">
                <input
                  type="checkbox"
                  checked={worldbookForm.isPublic}
                  onChange={(e) => setWorldbookForm({ ...worldbookForm, isPublic: e.target.checked })}
                  className="mr-2"
                />
                公开世界书
              </label>
            </div>
            <div className="flex gap-3 mt-6">
              <button
                onClick={handleCreateWorldbook}
                className="flex-1 px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-lg"
              >
                创建
              </button>
              <button
                onClick={() => setShowCreateModal(false)}
                className="flex-1 px-4 py-2 bg-gray-600 hover:bg-gray-700 text-white rounded-lg"
              >
                取消
              </button>
            </div>
          </div>
        </div>
      )}

      {/* 条目编辑模态框 */}
      {showEntryModal && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
          <div className="bg-slate-800 rounded-xl p-6 w-full max-w-3xl max-h-[90vh] overflow-y-auto">
            <h2 className="text-xl font-bold text-white mb-4">
              {selectedEntry ? '编辑条目' : '创建条目'}
            </h2>
            <div className="space-y-4">
              <input
                type="text"
                placeholder="条目标题/备注"
                value={entryForm.comment}
                onChange={(e) => setEntryForm({ ...entryForm, comment: e.target.value })}
                className="w-full px-4 py-2 bg-white/10 border border-white/20 rounded-lg text-white"
              />
              <textarea
                placeholder="条目内容 *"
                value={entryForm.content}
                onChange={(e) => setEntryForm({ ...entryForm, content: e.target.value })}
                className="w-full px-4 py-2 bg-white/10 border border-white/20 rounded-lg text-white h-32"
              />

              {/* 关键词 */}
              <div>
                <label className="text-white text-sm mb-2 block">主关键词</label>
                <div className="flex gap-2 mb-2">
                  <input
                    type="text"
                    placeholder="输入关键词后按回车"
                    value={keyInput}
                    onChange={(e) => setKeyInput(e.target.value)}
                    onKeyPress={(e) => e.key === 'Enter' && addKey()}
                    className="flex-1 px-4 py-2 bg-white/10 border border-white/20 rounded-lg text-white"
                  />
                  <button onClick={addKey} className="px-4 py-2 bg-blue-600 rounded-lg text-white">
                    添加
                  </button>
                </div>
                <div className="flex flex-wrap gap-2">
                  {entryForm.keys?.map((key, index) => (
                    <span key={index} className="px-3 py-1 bg-blue-500/20 text-white rounded-full text-sm flex items-center gap-2">
                      {key}
                      <button onClick={() => removeKey(index)} className="text-red-400 hover:text-red-300">×</button>
                    </span>
                  ))}
                </div>
              </div>

              {/* 次要关键词 */}
              <div>
                <label className="text-white text-sm mb-2 block">次要关键词（可选）</label>
                <div className="flex gap-2 mb-2">
                  <input
                    type="text"
                    placeholder="输入次要关键词后按回车"
                    value={secondaryKeyInput}
                    onChange={(e) => setSecondaryKeyInput(e.target.value)}
                    onKeyPress={(e) => e.key === 'Enter' && addSecondaryKey()}
                    className="flex-1 px-4 py-2 bg-white/10 border border-white/20 rounded-lg text-white"
                  />
                  <button onClick={addSecondaryKey} className="px-4 py-2 bg-blue-600 rounded-lg text-white">
                    添加
                  </button>
                </div>
                <div className="flex flex-wrap gap-2">
                  {entryForm.secondaryKeys?.map((key, index) => (
                    <span key={index} className="px-3 py-1 bg-purple-500/20 text-white rounded-full text-sm flex items-center gap-2">
                      {key}
                      <button onClick={() => removeSecondaryKey(index)} className="text-red-400 hover:text-red-300">×</button>
                    </span>
                  ))}
                </div>
              </div>

              {/* 选项 */}
              <div className="grid grid-cols-2 gap-4">
                <label className="flex items-center text-white">
                  <input
                    type="checkbox"
                    checked={entryForm.constant}
                    onChange={(e) => setEntryForm({ ...entryForm, constant: e.target.checked })}
                    className="mr-2"
                  />
                  常驻注入
                </label>
                <label className="flex items-center text-white">
                  <input
                    type="checkbox"
                    checked={entryForm.enabled}
                    onChange={(e) => setEntryForm({ ...entryForm, enabled: e.target.checked })}
                    className="mr-2"
                  />
                  启用
                </label>
                <label className="flex items-center text-white">
                  <input
                    type="checkbox"
                    checked={entryForm.useRegex}
                    onChange={(e) => setEntryForm({ ...entryForm, useRegex: e.target.checked })}
                    className="mr-2"
                  />
                  使用正则
                </label>
                <label className="flex items-center text-white">
                  <input
                    type="checkbox"
                    checked={entryForm.caseSensitive}
                    onChange={(e) => setEntryForm({ ...entryForm, caseSensitive: e.target.checked })}
                    className="mr-2"
                  />
                  区分大小写
                </label>
              </div>

              {/* 高级选项 */}
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="text-white text-sm mb-1 block">触发概率 (%)</label>
                  <input
                    type="number"
                    min="0"
                    max="100"
                    value={entryForm.probability}
                    onChange={(e) => setEntryForm({ ...entryForm, probability: parseInt(e.target.value) })}
                    className="w-full px-4 py-2 bg-white/10 border border-white/20 rounded-lg text-white"
                  />
                </div>
                <div>
                  <label className="text-white text-sm mb-1 block">扫描深度</label>
                  <input
                    type="number"
                    min="0"
                    value={entryForm.scanDepth}
                    onChange={(e) => setEntryForm({ ...entryForm, scanDepth: parseInt(e.target.value) })}
                    className="w-full px-4 py-2 bg-white/10 border border-white/20 rounded-lg text-white"
                  />
                </div>
              </div>
            </div>
            <div className="flex gap-3 mt-6">
              <button
                onClick={handleSaveEntry}
                className="flex-1 px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg"
              >
                保存
              </button>
              <button
                onClick={() => {
                  setShowEntryModal(false);
                  resetEntryForm();
                }}
                className="flex-1 px-4 py-2 bg-gray-600 hover:bg-gray-700 text-white rounded-lg"
              >
                取消
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default WorldbookManagePage;
