import React from 'react';
import { Header, Segment, Card, Icon, Grid, Statistic } from 'semantic-ui-react';
import superagent from 'superagent';
import ExperimentalWrapper from './ExperimentalWrapper.jsx';

export default class KnowledgeBase extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            stats: null,
            loading: true,
            error: null
        };
    }

    componentDidMount() {
        this.loadStats();
    }

    async loadStats() {
        try {
            const res = await superagent.get('/api/admin/kb/stats');
            this.setState({ stats: res.body, loading: false });
        } catch (error) {
            console.error('Failed to load KB stats:', error);
            this.setState({ loading: false, error: error.message });
        }
    }

    render() {
        const { stats, loading } = this.state;

        const features = [
            {
                title: "Query Knowledge Base",
                description: "Ask questions and get AI-powered answers from your indexed documents and Slack messages.",
                icon: "comment alternate",
                href: "/experimental/kb/query",
                color: "purple"
            },
            {
                title: "Browse Documents",
                description: "View and manage all indexed documents in the knowledge base.",
                icon: "file alternate",
                href: "/experimental/kb/documents",
                color: "blue"
            },
            {
                title: "Upload Documents",
                description: "Upload new documents to be indexed and made searchable.",
                icon: "cloud upload",
                href: "/experimental/kb/upload",
                color: "green"
            }
        ];

        return (
            <ExperimentalWrapper title="Knowledge Base" loading={loading}>
                <Segment>
                    <Header as="h2">
                        <Icon name="book" />
                        <Header.Content>
                            Knowledge Base
                            <Header.Subheader>
                                RAG-powered search and Q&A for company documents and Slack messages
                            </Header.Subheader>
                        </Header.Content>
                    </Header>
                </Segment>

                {stats && (
                    <Segment>
                        <Statistic.Group widths="three" size="small">
                            <Statistic>
                                <Statistic.Value>{stats.documents || 0}</Statistic.Value>
                                <Statistic.Label>Documents</Statistic.Label>
                            </Statistic>
                            <Statistic>
                                <Statistic.Value>{stats.chunks || 0}</Statistic.Value>
                                <Statistic.Label>Chunks</Statistic.Label>
                            </Statistic>
                            <Statistic>
                                <Statistic.Value>
                                    {stats.bySource ? Object.keys(stats.bySource).length : 0}
                                </Statistic.Value>
                                <Statistic.Label>Source Types</Statistic.Label>
                            </Statistic>
                        </Statistic.Group>
                    </Segment>
                )}

                <Card.Group itemsPerRow={3} stackable>
                    {features.map((feature, index) => (
                        <Card key={index} href={feature.href} color={feature.color}>
                            <Card.Content>
                                <Card.Header>
                                    <Icon name={feature.icon} /> {feature.title}
                                </Card.Header>
                                <Card.Description>{feature.description}</Card.Description>
                            </Card.Content>
                        </Card>
                    ))}
                </Card.Group>
            </ExperimentalWrapper>
        );
    }
}