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

export default class ExperimentalHome extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        const tools = [
            {
                title: "Knowledge Base",
                description: "RAG-powered search and Q&A for company documents. Upload documents, browse indexed content, and ask AI-powered questions.",
                icon: "book",
                href: "/experimental/kb",
                color: "purple"
            },
            {
                title: "Factory QA Tools",
                description: "Run end-to-end tests of the order workflow using production systems with test-flagged data. Verify that the entire order-to-shipment pipeline is working correctly.",
                icon: "cogs",
                href: "/experimental/qa-tools",
                color: "blue"
            },
            {
                title: "DHL Charges Tracking",
                description: "Track and validate DHL shipping charges by cross-referencing invoices against expected shipping costs. Identify discrepancies and flag incorrect charges.",
                icon: "dollar sign",
                href: "/experimental/dhl-charges",
                color: "green"
            },
            {
                title: "Worker Status",
                description: "Live view of active and recently completed background workers. Monitor task execution, see who started each worker, and track durations in real time.",
                icon: "server",
                href: "/experimental/workers",
                color: "orange"
            },
            {
                title: "Shippo Analytics",
                description: "Shippo shipping analytics dashboard. View delivery status breakdowns, track transactions over time, and monitor carrier performance.",
                icon: "shipping fast",
                href: "/experimental/shippo-analytics",
                color: "yellow"
            },
            {
                title: "Team Globe",
                description: "Interactive 3D globe showing where Bigscreen staff are located worldwide, with live local times and working-hours indicators.",
                icon: "globe",
                href: "/experimental/team-globe",
                color: "teal"
            }
        ];

        return (
            <ExperimentalWrapper title="Experimental Features">
                <Segment>
                    <Header as="h2">
                        <Icon name="lab" />
                        <Header.Content>
                            Experimental Features
                            <Header.Subheader>
                                Tools and features under development. Use with caution.
                            </Header.Subheader>
                        </Header.Content>
                    </Header>
                </Segment>

                <Card.Group>
                    {tools.map((tool, index) => (
                        <Card key={index} href={tool.href} color={tool.color}>
                            <Card.Content>
                                <Card.Header>
                                    <Icon name={tool.icon} /> {tool.title}
                                </Card.Header>
                                <Card.Description>
                                    {tool.description}
                                </Card.Description>
                            </Card.Content>
                        </Card>
                    ))}
                </Card.Group>
            </ExperimentalWrapper>
        );
    }
}