import React, { useState, useEffect } from 'react';
import { Form, Button, Card, Container, Row, Col, Alert, Tab, Tabs, InputGroup, Spinner } from 'react-bootstrap';
import { saveCozeApiToken, getCozeApiToken, saveWorkflowIds, getWorkflowIds } from '../utils/storageUtils';
import { WORKFLOW_DISPLAY_NAMES, WORKFLOW_IDS, DEFAULT_WORKFLOW_IDS, hasValidToken } from '../utils/cozeConfig';
import { getLipSyncServer, saveLipSyncServer } from '../utils/lipSyncConfig';
import lipSyncService from '../services/lipSyncService';
import { toast } from 'react-toastify';

/**
 * Coze API设置组件
 * 允许用户配置Coze API Token和工作流ID
 */
const CozeApiSettings = ({ onSave, isInModal = true }) => {
  const [apiToken, setApiToken] = useState('');
  const [showToken, setShowToken] = useState(false);
  const [workflowIds, setWorkflowIds] = useState({});
  const [activeTab, setActiveTab] = useState('token');
  const [hasChanges, setHasChanges] = useState(false);
  const [errorMessage, setErrorMessage] = useState('');
  const [lipSyncServerUrl, setLipSyncServerUrl] = useState('');
  const [testing, setTesting] = useState(false);
  const [testResult, setTestResult] = useState(null);

  // 加载已存储的设置
  useEffect(() => {
    const storedToken = getCozeApiToken();
    if (storedToken) {
      setApiToken(storedToken);
    }

    const storedWorkflowIds = getWorkflowIds();
    if (storedWorkflowIds) {
      setWorkflowIds(storedWorkflowIds);
    }
    
    const storedLipSyncServer = getLipSyncServer();
    if (storedLipSyncServer) {
      setLipSyncServerUrl(storedLipSyncServer);
    }
    
    setHasChanges(false);
  }, []);

  // 处理API Token变更
  const handleTokenChange = (e) => {
    setApiToken(e.target.value);
    setHasChanges(true);
  };

  // 处理工作流ID变更
  const handleWorkflowIdChange = (key, value) => {
    setWorkflowIds(prev => ({
      ...prev,
      [key]: value
    }));
    setHasChanges(true);
  };
  
  // 处理对口型服务器地址变更
  const handleLipSyncServerChange = (e) => {
    setLipSyncServerUrl(e.target.value);
    setHasChanges(true);
    // 清除测试结果
    setTestResult(null);
  };
  
  // 测试对口型服务器连接
  const testLipSyncServer = async () => {
    setTesting(true);
    setTestResult(null);
    
    try {
      const result = await lipSyncService.testServer(lipSyncServerUrl);
      
      setTestResult(result);
      
      if (result.success) {
        toast.success(result.message);
      } else {
        toast.error(result.message);
      }
    } catch (error) {
      setTestResult({
        success: false,
        message: `测试失败: ${error.message}`
      });
      toast.error(`测试失败: ${error.message}`);
    } finally {
      setTesting(false);
    }
  };

  // 保存设置
  const handleSave = () => {
    setErrorMessage('');
    
    try {
      // 保存API Token
      if (apiToken) {
        saveCozeApiToken(apiToken);
      }
      
      // 保存工作流ID - 仅保存用户实际修改的非空ID
      const nonEmptyWorkflowIds = {};
      Object.entries(workflowIds).forEach(([key, value]) => {
        if (value && value.trim() !== '') {
          nonEmptyWorkflowIds[key] = value.trim();
        }
      });
      
      saveWorkflowIds(nonEmptyWorkflowIds);
      
      // 保存对口型服务器配置
      saveLipSyncServer(lipSyncServerUrl);
      
      setHasChanges(false);
      toast.success('设置已保存');
      
      // 如果提供了回调函数，则调用它
      if (onSave && typeof onSave === 'function') {
        onSave();
      }
      
      // 需要刷新页面以应用新设置
      // 询问用户是否刷新
      if (window.confirm('设置已保存。需要刷新页面以应用新设置，是否立即刷新？')) {
        window.location.reload();
      }
    } catch (error) {
      console.error('保存设置失败:', error);
      setErrorMessage(`保存设置失败: ${error.message}`);
      toast.error(`保存设置失败: ${error.message}`);
    }
  };

  // 显示或隐藏Token
  const toggleShowToken = () => {
    setShowToken(!showToken);
  };

  // 生成工作流ID配置表单
  const renderWorkflowIdInputs = () => {
    // 添加所有工作流
    const mainWorkflows = ['textToDescription', 'getStyleList', 'generateImage', 'exportJianyingDraft'];
    
    return mainWorkflows.map((key) => (
      <Form.Group className="mb-3" key={key}>
        <Form.Label>{WORKFLOW_DISPLAY_NAMES[key]}</Form.Label>
        <Form.Control
          type="text"
          placeholder={`请输入${WORKFLOW_DISPLAY_NAMES[key]}工作流ID`}
          value={workflowIds[key] || WORKFLOW_IDS[key] || DEFAULT_WORKFLOW_IDS[key]}
          onChange={(e) => handleWorkflowIdChange(key, e.target.value)}
        />
        <Form.Text className="text-muted">
          {`${WORKFLOW_DISPLAY_NAMES[key]}工作流的唯一标识符。在Coze平台工作流设置中获取。默认值: ${WORKFLOW_IDS[key] || DEFAULT_WORKFLOW_IDS[key] || '无'}`}
        </Form.Text>
      </Form.Group>
    ));
  };

  const content = (
    <>
      {errorMessage && (
        <Alert variant="danger" onClose={() => setErrorMessage('')} dismissible>
          {errorMessage}
        </Alert>
      )}
      
      <Tabs
        activeKey={activeTab}
        onSelect={(k) => setActiveTab(k)}
        className="mb-3"
      >
        <Tab eventKey="token" title="API Token">
          <Form.Group className="mb-3">
            <Form.Label>Coze API Token</Form.Label>
            <InputGroup>
              <Form.Control
                type={showToken ? "text" : "password"}
                placeholder="请输入您的Coze API Token"
                value={apiToken}
                onChange={handleTokenChange}
              />
              <Button 
                variant="outline-secondary"
                onClick={toggleShowToken}
              >
                {showToken ? '隐藏' : '显示'}
              </Button>
            </InputGroup>
            {/* <Form.Text className="text-muted">
              您的Coze API Token。访问 <a href="https://www.coze.cn" target="_blank" rel="noopener noreferrer">Coze平台</a> 获取。
            </Form.Text> */}
          </Form.Group>
          
          <Alert variant={hasValidToken() ? "success" : "warning"}>
            {hasValidToken() 
              ? "API Token已配置" 
              : "请配置有效的API Token，否则相关功能将无法使用"}
          </Alert>
        </Tab>
        
        <Tab eventKey="workflows" title="工作流ID">
          <p className="text-muted mb-3">
            配置各功能对应的工作流ID。这些ID已有默认值可以直接使用，无需填写。如需使用自定义的工作流，可以在这里修改。
          </p>
          {renderWorkflowIdInputs()}
        </Tab>
        
        <Tab eventKey="lipSyncServer" title="对口型服务器">
          <p className="text-muted mb-3">
            配置对口型服务器地址。请正确填写服务器地址，否则对口型功能将无法使用。
          </p>
          
          <Form.Group className="mb-3">
            <Form.Label>服务器地址</Form.Label>
            <Form.Control
              type="text"
              placeholder="例如: https://a9k866906pialdug-80.container.x-gpu.com"
              value={lipSyncServerUrl}
              onChange={handleLipSyncServerChange}
            />
            <Form.Text className="text-muted">
              对口型服务器地址，用于API请求和视频下载
            </Form.Text>
          </Form.Group>
          
          <Button 
            variant="outline-primary" 
            onClick={testLipSyncServer}
            disabled={testing || !lipSyncServerUrl}
            className="mb-3"
          >
            {testing ? (
              <>
                <Spinner 
                  as="span"
                  animation="border"
                  size="sm"
                  role="status"
                  aria-hidden="true"
                  className="me-2"
                />
                测试连接中...
              </>
            ) : "测试服务器连接"}
          </Button>
          
          {testResult && (
            <Alert variant={testResult.success ? "success" : "danger"} className="mt-2 mb-3">
              {testResult.message}
            </Alert>
          )}
        </Tab>
      </Tabs>
      
      <div className="text-center mt-4">
        <Button
          variant="primary"
          onClick={handleSave}
          disabled={!hasChanges}
        >
          保存设置
        </Button>
      </div>
    </>
  );

  // 如果是在对话框中，不需要卡片包装
  if (isInModal) {
    return content;
  }

  // 如果是独立页面，使用卡片包装
  return (
    <Container className="my-4">
      <Card>
        <Card.Header>
          <h4 className="mb-0">Coze API设置</h4>
        </Card.Header>
        <Card.Body>
          {content}
        </Card.Body>
      </Card>
    </Container>
  );
};

export default CozeApiSettings; 