import React, { useState, useEffect } from 'react';
import { useParams } from 'next/navigation';
import { useTranslation } from 'react-i18next';
import { Box, Grid, Card, CardContent } from '@mui/material';
import { fetchWithRetry } from '@/lib/util/request';
import { useSnackbar } from '@/hooks/useSnackbar';

// 导入拆分后的组件
import CategoryTabs from './CategoryTabs';
import PromptList from './PromptList';
import PromptDetail from './PromptDetail';
import PromptEditDialog from './PromptEditDialog';
import { getLanguageFromPromptKey, shouldShowPrompt } from './promptUtils';

/**
 * 提示词设置主组件
 */
export default function PromptSettings() {
  const { projectId } = useParams();
  const { i18n, t } = useTranslation();
  const { showSuccess, showErrorMessage, SnackbarComponent } = useSnackbar();

  // 基础状态
  const [currentLanguage, setCurrentLanguage] = useState(i18n.language === 'en' ? 'en' : 'zh-CN');
  const [loading, setLoading] = useState(false);
  const [templates, setTemplates] = useState({});
  const [customPrompts, setCustomPrompts] = useState([]);

  // 当前选中状态
  const [selectedCategory, setSelectedCategory] = useState(null);
  const [selectedPrompt, setSelectedPrompt] = useState(null);
  const [promptContent, setPromptContent] = useState('');

  // 编辑对话框状态
  const [editDialog, setEditDialog] = useState({
    open: false,
    promptType: '',
    promptKey: '',
    language: '',
    content: '',
    defaultContent: '',
    isNew: false
  });

  // ======= 数据加载与初始化 =======

  // 加载提示词数据
  useEffect(() => {
    loadPromptData();
  }, [projectId, currentLanguage]);

  // 监听语言变化
  useEffect(() => {
    const newLang = i18n.language === 'en' ? 'en' : 'zh-CN';
    if (newLang !== currentLanguage) {
      setCurrentLanguage(newLang);
    }
  }, [i18n.language, currentLanguage]);

  // 监听选中提示词变化
  useEffect(() => {
    if (selectedPrompt) {
      loadPromptContent();
    }
  }, [selectedPrompt]);

  // 初始化选择第一个分类和提示词
  useEffect(() => {
    if (Object.keys(templates).length > 0 && currentLanguage && !selectedCategory) {
      const firstCategory = Object.keys(templates)[0];
      setSelectedCategory(firstCategory);

      // 根据当前语言环境选择第一个匹配的提示词
      const promptEntries = Object.keys(templates[firstCategory]?.prompts || {});
      const firstPrompt = promptEntries.find(promptKey => shouldShowPrompt(promptKey, currentLanguage));

      if (firstPrompt) {
        setSelectedPrompt(firstPrompt);
      }
    }
  }, [templates, selectedCategory, currentLanguage]);

  // ======= API 操作函数 =======

  // 加载提示词数据
  const loadPromptData = async () => {
    try {
      setLoading(true);
      const response = await fetchWithRetry(`/api/projects/${projectId}/custom-prompts?language=${currentLanguage}`);
      const data = await response.json();

      if (data.success) {
        setTemplates(data.templates);
        setCustomPrompts(data.customPrompts);
      } else {
        showErrorMessage(data.message || '加载提示词数据失败');
      }
    } catch (error) {
      console.error('加载提示词数据出错:', error);
      showErrorMessage('加载提示词数据失败');
    } finally {
      setLoading(false);
    }
  };

  // 加载提示词内容
  const loadPromptContent = async (forceRefresh = false) => {
    if (!selectedPrompt) return;
    try {
      setLoading(true);
      const content = await getCurrentPromptContent(selectedPrompt, forceRefresh);
      setPromptContent(content);
    } catch (error) {
      console.error('加载提示词内容出错:', error);
      showErrorMessage('加载提示词内容失败');
    } finally {
      setLoading(false);
    }
  };

  // 加载默认提示词内容
  const loadDefaultContent = async (promptType, promptKey) => {
    if (i18n.language === 'en' && !promptKey.endsWith('_EN')) {
      promptKey += '_EN';
    }
    try {
      const response = await fetchWithRetry(
        `/api/projects/${projectId}/default-prompts?promptType=${promptType}&promptKey=${promptKey}`
      );
      const data = await response.json();

      if (data.success) {
        return data.content;
      }
      return '';
    } catch (error) {
      console.error('加载默认提示词内容出错:', error);
      return '';
    }
  };

  // ======= 交互处理函数 =======

  // 处理编辑提示词
  const handleEditPrompt = async (promptType, promptKey, language) => {
    const existingPrompt = customPrompts.find(
      p => p.promptType === promptType && p.promptKey === promptKey && p.language === language
    );

    const defaultContent = await loadDefaultContent(promptType, promptKey);

    setEditDialog({
      open: true,
      promptType,
      promptKey,
      language,
      content: existingPrompt?.content || defaultContent,
      defaultContent,
      isNew: !existingPrompt
    });
  };

  // 处理删除提示词
  const handleDeletePrompt = async (promptType, promptKey, language) => {
    try {
      setLoading(true);
      const query = new URLSearchParams({
        promptType,
        promptKey,
        language
      }).toString();

      const response = await fetchWithRetry(`/api/projects/${projectId}/custom-prompts?${query}`, {
        method: 'DELETE'
      });
      const data = await response.json();

      if (data.success) {
        showSuccess(t('settings.prompts.restoreSuccess'));
        // 先重新加载数据，然后强制刷新内容
        await loadPromptData();
        await loadPromptContent(true); // 强制刷新
      } else {
        showErrorMessage(data.message || t('settings.prompts.restoreFailed'));
      }
    } catch (error) {
      console.error(t('settings.prompts.deleteError'), error);
      showErrorMessage(t('settings.prompts.restoreFailed'));
    } finally {
      setLoading(false);
    }
  };

  // 处理保存提示词
  const handleSavePrompt = async () => {
    try {
      setLoading(true);
      const { promptType, promptKey, language, content } = editDialog;

      const response = await fetchWithRetry(`/api/projects/${projectId}/custom-prompts`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ promptType, promptKey, language, content })
      });
      const data = await response.json();

      if (data.success) {
        showSuccess(t('settings.prompts.saveSuccess'));
        setEditDialog({ ...editDialog, open: false });
        // 先重新加载数据，然后强制刷新内容
        await loadPromptData();
        await loadPromptContent(true); // 强制刷新
      } else {
        showErrorMessage(data.message || t('settings.prompts.saveFailed'));
      }
    } catch (error) {
      console.error(t('settings.prompts.saveError'), error);
      showErrorMessage(t('settings.prompts.saveFailed'));
    } finally {
      setLoading(false);
    }
  };

  // 恢复默认内容
  const handleRestoreDefault = () => {
    setEditDialog(prev => ({
      ...prev,
      content: prev.defaultContent
    }));
  };

  // ======= 工具函数 =======

  // 检查提示词是否已自定义
  const isCustomized = promptKey => {
    if (!selectedCategory || !promptKey || !templates[selectedCategory]) return false;

    const language = getLanguageFromPromptKey(promptKey);
    const promptType = templates[selectedCategory]?.prompts?.[promptKey]?.type;

    if (!promptType) return false;

    return customPrompts.some(p => p.promptType === promptType && p.promptKey === promptKey && p.language === language);
  };

  // 获取当前提示词内容（直接从服务器获取最新数据）
  const getCurrentPromptContent = async (promptKey, forceRefresh = false) => {
    if (!selectedCategory || !promptKey || !templates[selectedCategory]) return '';

    const language = getLanguageFromPromptKey(promptKey);
    const promptType = templates[selectedCategory]?.prompts?.[promptKey]?.type;

    if (!promptType) {
      return '';
    }

    // 如果需要强制刷新，直接从服务器获取
    if (forceRefresh) {
      try {
        const response = await fetchWithRetry(
          `/api/projects/${projectId}/custom-prompts?promptType=${promptType}&language=${language}`
        );
        const data = await response.json();

        if (data.success) {
          const existingPrompt = data.customPrompts.find(
            p => p.promptType === promptType && p.promptKey === promptKey && p.language === language
          );

          if (existingPrompt) {
            return existingPrompt.content;
          }
        }
      } catch (error) {
        console.error(t('settings.prompts.fetchContentError'), error);
      }
    } else {
      // 使用缓存的状态
      const existingPrompt = customPrompts.find(
        p => p.promptType === promptType && p.promptKey === promptKey && p.language === language
      );

      if (existingPrompt) {
        return existingPrompt.content;
      }
    }

    // 回退到默认内容
    return await loadDefaultContent(promptType, promptKey);
  };

  // ======= 数据准备 =======

  // 当前分类的配置
  const currentCategoryConfig = templates[selectedCategory];

  // 当前提示词的配置
  const currentPromptConfig = currentCategoryConfig?.prompts?.[selectedPrompt];

  // 分类配置项
  const categoryEntries = Object.entries(templates);

  // 处理分类变更
  const handleCategoryChange = newCategory => {
    setSelectedCategory(newCategory);
    // 根据当前语言环境选择第一个匹配的提示词
    const promptEntries = Object.keys(templates[newCategory]?.prompts || {});
    console.log('所有提示词:', promptEntries);

    const firstPrompt = promptEntries.find(promptKey => shouldShowPrompt(promptKey, currentLanguage));

    setSelectedPrompt(firstPrompt);
  };

  // 处理编辑按钮点击
  const handleEditButtonClick = () => {
    const promptType = templates[selectedCategory]?.prompts?.[selectedPrompt]?.type;
    // 使用当前界面语言而不是从 promptKey 推断的语言
    const language = currentLanguage;

    if (promptType) {
      handleEditPrompt(promptType, selectedPrompt, language);
    }
  };

  // 处理删除按钮点击
  const handleDeleteButtonClick = () => {
    const promptType = templates[selectedCategory]?.prompts?.[selectedPrompt]?.type;
    // 使用当前界面语言而不是从 promptKey 推断的语言
    const language = currentLanguage;

    if (promptType) {
      handleDeletePrompt(promptType, selectedPrompt, language);
    }
  };

  // 处理对话框内容变更
  const handleDialogContentChange = newContent => {
    setEditDialog({ ...editDialog, content: newContent });
  };

  return (
    <Box>
      <SnackbarComponent />

      {/* 主要分类选择 */}
      <CategoryTabs
        categoryEntries={categoryEntries}
        selectedCategory={selectedCategory}
        currentLanguage={currentLanguage}
        onCategoryChange={handleCategoryChange}
      />

      {/* 左右布局：左侧垂直提示词选择，右侧内容展示 */}
      <Grid container spacing={3}>
        {/* 左侧：垂直 TAB 选择具体提示词 */}
        <Grid item xs={12} md={4} lg={3}>
          <Card>
            <CardContent>
              <PromptList
                currentCategory={selectedCategory}
                currentCategoryConfig={currentCategoryConfig}
                selectedPrompt={selectedPrompt}
                currentLanguage={currentLanguage}
                isCustomized={isCustomized}
                onPromptSelect={setSelectedPrompt}
              />
            </CardContent>
          </Card>
        </Grid>

        {/* 右侧：提示词内容展示和操作 */}
        <Grid item xs={12} md={8} lg={9}>
          <PromptDetail
            currentPromptConfig={currentPromptConfig}
            selectedPrompt={selectedPrompt}
            promptContent={promptContent}
            isCustomized={isCustomized}
            onEditClick={handleEditButtonClick}
            onDeleteClick={handleDeleteButtonClick}
          />
        </Grid>
      </Grid>

      {/* 编辑提示词对话框 */}
      <PromptEditDialog
        open={editDialog.open}
        title={editDialog.isNew ? t('settings.prompts.createCustomPrompt') : t('settings.prompts.editPrompt')}
        promptType={editDialog.promptType}
        promptKey={editDialog.promptKey}
        content={editDialog.content}
        loading={loading}
        onClose={() => setEditDialog({ ...editDialog, open: false })}
        onSave={handleSavePrompt}
        onRestore={handleRestoreDefault}
        onContentChange={handleDialogContentChange}
      />
    </Box>
  );
}