import * as React from 'react';
import { Card, Row, Col } from 'antd';
import { BulbOutlined } from '@ant-design/icons';
import { ChevronDown } from 'lucide-react';
import './index.scss';

interface TipsStep {
    title: string;
    description: string;
    stepNumber: number;
}

interface GuideTipsProps {
    visible?: boolean;
    onClose?: () => void;
    title?: string;
    steps?: TipsStep[];
}

/**
 * 创建应用/知识库的引导提示组件
 * 遵循全局样式规则，使用全局变量优化
 * 不包含"立即创建"按钮（独立模块）
 */
const GuideTips: React.FC<GuideTipsProps> = (props) => {
    const {
        visible = true,
        onClose,
        title = '如何创建并发布自己的 RAG（增强检索生成）应用？',
        steps = [
            {
                title: '创建或选用公共知识库',
                description: '选择公共知识库，或点击知识库菜单栏，创建自己的知识库。',
                stepNumber: 1,
            },
            {
                title: '参数配置',
                description: '点击右上角，创建应用，选择模型与知识范围，并配置参数。',
                stepNumber: 2,
            },
            {
                title: '发布应用',
                description: '发布后可在相应的项目内使用。',
                stepNumber: 3,
            },
        ],
    } = props;

    const [showTips, setShowTips] = React.useState(visible);
    const [collapsed, setCollapsed] = React.useState(false);

    const handleToggle = () => {
        setCollapsed(!collapsed);
        if (!collapsed && onClose) {
            onClose();
        }
    };

    if (!showTips) {
        return null;
    }

    // 根据步骤数量动态计算列布局
    const getColumnSpan = () => {
        if (steps.length <= 3) {
            return { xs: 24, sm: 24, md: 12, lg: 24 / steps.length as any };
        }
        return { xs: 24, sm: 12, md: 8, lg: 6 };
    };

    const colSpan = getColumnSpan();

    return (
        <div className='guide-tips-wrapper'>
            <div className='guide-tips-header' onClick={handleToggle} style={{ cursor: 'pointer' }}>
                <div className='guide-tips-title'>
                    <BulbOutlined className='guide-tips-icon' />
                    <span>提示：{title}</span>
                </div>
                <div className='guide-tips-close'>
                    <ChevronDown size={16} className='guide-tips-arrow' />
                </div>
            </div>
            
            {!collapsed && (
                <Row className='guide-tips-row' gutter={[8, 8]}>
                    {steps.map((step, index) => {
                        const gradientClass = index === 0
                            ? 'guide-tips-card-step-1'
                            : index === 1
                            ? 'guide-tips-card-step-2'
                            : index === 2
                            ? 'guide-tips-card-step-3'
                            : 'guide-tips-card-step-4';

                        return (
                            <Col {...colSpan} key={index}>
                                <div className={`guide-tips-card ${gradientClass}`}>
                                    <div style={{ padding: '12px 16px' }}>
                                        <div className='guide-tips-card-title'>
                                            {step.title}
                                        </div>
                                        <div className='guide-tips-card-description'>
                                            {step.description}
                                        </div>
                                        <div className='guide-tips-card-step'>
                                            step {step.stepNumber}
                                        </div>
                                    </div>
                                </div>
                            </Col>
                        );
                    })}
                </Row>
            )}
        </div>
    );
};

export default GuideTips;
