// src/views/Community/components/SearchBox.js
import React from 'react';
import { Card, Input, Radio, Form, Button } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import { useSearchEvents } from '../../../hooks/useSearchEvents';

const SearchBox = ({ onSearch }) => {
    const [form] = Form.useForm();

    // 🎯 初始化搜索埋点Hook
    const searchEvents = useSearchEvents({ context: 'community' });

    const handleSubmit = (values) => {
        // 🎯 追踪搜索查询提交（在调用onSearch之前）
        if (values.q) {
            searchEvents.trackSearchQuerySubmitted(values.q, 0, {
                search_type: values.search_type || 'topic'
            });
        }
        onSearch(values);
    };

    return (
        <Card title="搜索事件" className="search-box" style={{ marginBottom: 16 }}>
            <Form
                form={form}
                onFinish={handleSubmit}
                initialValues={{ search_type: 'topic' }}
            >
                <Form.Item name="q" style={{ marginBottom: 12 }}>
                    <Input.Search
                        placeholder="搜索关键词..."
                        allowClear
                        enterButton={<SearchOutlined />}
                        onSearch={(value) => {
                            form.setFieldsValue({ q: value });
                            form.submit();
                        }}
                    />
                </Form.Item>

                <Form.Item name="search_type" style={{ marginBottom: 12 }}>
                    <Radio.Group>
                        <Radio value="topic">搜索话题</Radio>
                        <Radio value="stock">搜索股票</Radio>
                    </Radio.Group>
                </Form.Item>

                <Form.Item style={{ marginBottom: 0 }}>
                    <Button type="primary" htmlType="submit" block>
                        搜索
                    </Button>
                </Form.Item>
            </Form>
        </Card>
    );
};

export default SearchBox;