import React, { useState, useEffect } from 'react';
import { Form, Button, Card, Container, Row, Col, Alert, Tab, Tabs, InputGroup } from 'react-bootstrap';
import { saveCozeApiToken, getCozeApiToken, saveWorkflowIds, getWorkflowIds } from '../utils/storageUtils';
import { WORKFLOW_DISPLAY_NAMES, hasValidToken } from '../utils/cozeConfig';
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('');

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

    const storedWorkflowIds = getWorkflowIds();
    if (storedWorkflowIds) {
      setWorkflowIds(storedWorkflowIds);
    }
    
    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 handleSave = () => {
    setErrorMessage('');
    
    try {
      // 保存API Token
      if (apiToken) {
        saveCozeApiToken(apiToken);
      }
      
      // 保存工作流ID
      saveWorkflowIds(workflowIds);
      
      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'];
    
    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] || ''}
          onChange={(e) => handleWorkflowIdChange(key, e.target.value)}
        />
        <Form.Text className="text-muted">
          {`${WORKFLOW_DISPLAY_NAMES[key]}工作流的唯一标识符。在Coze平台工作流设置中获取。`}
        </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。如果您没有特定的工作流，可以留空使用默认值。
          </p>
          {renderWorkflowIdInputs()}
        </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; 