import { SearchOutlined, FileSearchOutlined } from '@ant-design/icons';
import { Button, Tag, Input, Slider, Spin, Select, Flex, Switch, InputNumber, Tooltip } from 'antd';
import type { RetrieveRecord } from '~/api/dify-dataset/type';
import { useRetrieveTest } from '~/hooks/dify-dataset-manager/retrieve-test';
import type { RetrieveTestProps } from '~/types/dify-dataset-manager/retrieve-test';

// 颜色常量
const colors = {
    bgContainer: '#fff',
    bgLayout: '#f5f5f5',
    bgElevated: '#fafafa',
    border: '#e8e8e8',
    text: '#262626',
    textSecondary: '#8c8c8c',
    textTertiary: '#bfbfbf',
    textQuaternary: '#d9d9d9',
    fillTertiary: '#f0f0f0',
};

/**
 * 检索结果项组件
 */
function ResultItem({ record, index }: { record: RetrieveRecord; index: number }) {
    const scorePercent = (record.score * 100).toFixed(1);
    const scoreColor = record.score > 0.8 ? '#52c41a' : record.score > 0.5 ? '#faad14' : '#666';

    return (
        <Flex
            vertical
            gap={12}
            style={{
                padding: 16,
                background: colors.bgContainer,
                borderRadius: 8,
                border: `1px solid ${colors.border}`,
            }}
        >
            <Flex justify="space-between" align="center">
                <Flex gap={8} align="center">
                    <Tag style={{ background: scoreColor, color: '#fff', border: 'none' }}>
                        {scorePercent}%
                    </Tag>
                    <span style={{ color: colors.textSecondary, fontSize: 12 }}>
                        #{index + 1} · {record.segment.word_count} 字 · 命中 {record.segment.hit_count} 次
                    </span>
                </Flex>
                {record.segment.document && (
                    <span style={{ color: colors.textTertiary, fontSize: 12 }}>
                        来源: {record.segment.document.name}
                    </span>
                )}
            </Flex>
            <div style={{
                color: colors.text,
                fontSize: 14,
                lineHeight: 1.6,
                whiteSpace: 'pre-wrap',
            }}>
                {record.segment.content.length > 500
                    ? record.segment.content.substring(0, 500) + '...'
                    : record.segment.content}
            </div>
            {record.segment.answer && (
                <Flex
                    vertical
                    gap={4}
                    style={{
                        padding: 12,
                        background: colors.fillTertiary,
                        borderRadius: 6,
                    }}
                >
                    <span style={{ color: colors.textSecondary, fontSize: 12 }}>
                        答案:
                    </span>
                    <span style={{ color: colors.text, fontSize: 14 }}>
                        {record.segment.answer.length > 200
                            ? record.segment.answer.substring(0, 200) + '...'
                            : record.segment.answer}
                    </span>
                </Flex>
            )}
        </Flex>
    );
}

/**
 * 召回测试组件
 */
export default function RetrieveTest({ datasetId }: RetrieveTestProps) {
    const {
        searchQuery,
        setSearchQuery,
        retrieveResults,
        retrieving,
        searchMethod,
        setSearchMethod,
        topK,
        setTopK,
        scoreThresholdEnabled,
        setScoreThresholdEnabled,
        scoreThreshold,
        setScoreThreshold,
        handleRetrieve,
    } = useRetrieveTest(datasetId);

    // 检索方式选项（只有3种）
    const searchMethodOptions = [
        { label: '向量检索', value: 'semantic_search' },
        { label: '全文检索', value: 'full_text_search' },
        { label: '混合检索', value: 'hybrid_search' },
    ];

    return (
        <Flex
            style={{
                height: '100%',
                minHeight: 'calc(100vh - 120px)',
            }}
        >
            {/* 左侧面板 - 输入区域 */}
            <Flex
                vertical
                gap={16}
                style={{
                    width: 400,
                    minWidth: 400,
                    padding: 20,
                    background: colors.bgLayout,
                    borderRight: `1px solid ${colors.border}`,
                }}
            >
                {/* 标题 */}
                <Flex vertical gap={4}>
                    <h2 style={{
                        margin: 0,
                        fontSize: 18,
                        fontWeight: 600,
                        color: colors.text,
                    }}>
                        召回测试
                    </h2>
                    <span style={{
                        fontSize: 13,
                        color: colors.textSecondary,
                    }}>
                        根据给定的查询文本测试知识库召回效果
                    </span>
                </Flex>

                {/* 查询输入区 */}
                <Flex vertical gap={8}>
                    <Flex justify="space-between" align="center">
                        <span style={{
                            fontSize: 13,
                            color: colors.text,
                            fontWeight: 500,
                        }}>
                            源文本
                        </span>
                        <Select
                            value={searchMethod}
                            onChange={(value) => setSearchMethod(value as any)}
                            options={searchMethodOptions}
                            style={{ width: 130 }}
                            size="small"
                        />
                    </Flex>
                    <Input.TextArea
                        placeholder="请输入文本，建议使用简短的陈述句。"
                        value={searchQuery}
                        onChange={(e) => setSearchQuery(e.target.value)}
                        onPressEnter={(e) => {
                            if (!e.shiftKey) {
                                e.preventDefault();
                                handleRetrieve();
                            }
                        }}
                        autoSize={{ minRows: 6, maxRows: 12 }}
                        style={{
                            background: colors.bgContainer,
                            resize: 'none',
                        }}
                    />
                    <Flex justify="space-between" align="center">
                        <span style={{
                            fontSize: 12,
                            color: colors.textTertiary,
                        }}>
                            {searchQuery.length} / 200
                        </span>
                        <Button
                            type="primary"
                            icon={<SearchOutlined />}
                            onClick={handleRetrieve}
                            loading={retrieving}
                        >
                            测试
                        </Button>
                    </Flex>
                </Flex>

                {/* 检索设置 */}
                <Flex vertical gap={12}>
                    <span style={{
                        fontSize: 13,
                        color: colors.text,
                        fontWeight: 500,
                    }}>
                        检索设置
                    </span>
                    <Flex align="center" gap={12}>
                        <span style={{
                            fontSize: 13,
                            color: colors.textSecondary,
                            whiteSpace: 'nowrap',
                        }}>
                            返回数量 (Top K):
                        </span>
                        <Slider
                            value={topK}
                            onChange={setTopK}
                            min={1}
                            max={20}
                            style={{ flex: 1 }}
                        />
                        <span style={{
                            fontSize: 13,
                            color: colors.text,
                            minWidth: 24,
                            textAlign: 'right',
                        }}>
                            {topK}
                        </span>
                    </Flex>

                    {/* Score 阈值设置 */}
                    <Flex align="center" gap={12}>
                        <Tooltip title="开启后，只返回相似度分数高于阈值的结果">
                            <span style={{
                                fontSize: 13,
                                color: colors.textSecondary,
                                whiteSpace: 'nowrap',
                                cursor: 'help',
                            }}>
                                Score 阈值:
                            </span>
                        </Tooltip>
                        <Switch
                            size="small"
                            checked={scoreThresholdEnabled}
                            onChange={setScoreThresholdEnabled}
                        />
                        {scoreThresholdEnabled && (
                            <>
                                <Slider
                                    value={scoreThreshold}
                                    onChange={setScoreThreshold}
                                    min={0}
                                    max={1}
                                    step={0.01}
                                    style={{ flex: 1 }}
                                />
                                <InputNumber
                                    value={scoreThreshold}
                                    onChange={(value) => setScoreThreshold(value ?? 0.5)}
                                    min={0}
                                    max={1}
                                    step={0.01}
                                    size="small"
                                    style={{ width: 70 }}
                                />
                            </>
                        )}
                    </Flex>
                </Flex>
            </Flex>

            {/* 右侧面板 - 结果展示 */}
            <Flex
                vertical
                flex={1}
                gap={16}
                style={{
                    padding: 20,
                    background: colors.bgElevated,
                    overflow: 'auto',
                }}
            >
                {retrieving ? (
                    <Flex
                        flex={1}
                        align="center"
                        justify="center"
                        vertical
                        gap={12}
                    >
                        <Spin size="large" />
                        <span style={{ color: colors.textSecondary }}>
                            检索中...
                        </span>
                    </Flex>
                ) : retrieveResults.length === 0 ? (
                    <Flex
                        flex={1}
                        align="center"
                        justify="center"
                        vertical
                        gap={12}
                    >
                        <FileSearchOutlined style={{
                            fontSize: 48,
                            color: colors.textQuaternary,
                        }} />
                        <span style={{ color: colors.textTertiary }}>
                            召回测试结果将展示在这里
                        </span>
                    </Flex>
                ) : (
                    <>
                        <Flex justify="space-between" align="center">
                            <span style={{
                                fontSize: 14,
                                color: colors.text,
                                fontWeight: 500,
                            }}>
                                检索结果
                            </span>
                            <span style={{
                                fontSize: 13,
                                color: colors.textSecondary,
                            }}>
                                共找到 {retrieveResults.length} 条结果
                            </span>
                        </Flex>
                        <Flex vertical gap={12}>
                            {retrieveResults.map((record, index) => (
                                <ResultItem
                                    key={record.segment.id}
                                    record={record}
                                    index={index}
                                />
                            ))}
                        </Flex>
                    </>
                )}
            </Flex>
        </Flex>
    );
}