"use client";

import HeroBillboardDashboard from "@/components/sections/hero/HeroBillboardDashboard";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import FeatureBento, { type FeatureCard } from "@/components/sections/feature/FeatureBento";
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { Bot, User, Brain, LineChart, TrendingUp, Database, DollarSign, Shield, Activity, Sparkles, BarChart3, Settings, RefreshCcw } from "lucide-react";

export default function AIAgentsTemplatePage() {
    const navItems = [
        { name: "Features", id: "features" },
        { name: "Pricing", id: "pricing" },
        { name: "Docs", id: "docs" },
        { name: "Contact", id: "contact" },
    ];

    const features: FeatureCard[] = [
        {
            bentoComponent: "3d-task-list", title: "Market Data Feed", items: [
                { icon: LineChart, label: "Institutional Index Analysis", time: "Live" },
                { icon: TrendingUp, label: "Volatility Sentiment Engine", time: "2s ago" },
                { icon: Database, label: "Private Order Flow", time: "5s ago" },
            ],
            description: "Terminal-grade market signals with high-frequency processing capabilities."
        },
        {
            bentoComponent: "chat", aiIcon: Bot,
            userIcon: User,
            exchanges: [
                { userMessage: "Alpha Signal Check?", aiResponse: "Institutional accumulation detected in major tech indices with 14% relative outperformance." },
                { userMessage: "Liquidity status?", aiResponse: "Global flows remain concentrated in high-conviction momentum assets." },
            ],
            placeholder: "Query terminal...", title: "Quantitative Intelligence", description: "Deep-dive equity analysis with predictive sentiment modeling."
        },
        {
            bentoComponent: "3d-card-grid", items: [
                { name: "Capital Flow", icon: DollarSign },
                { name: "Asset Rotation", icon: RefreshCcw },
                { name: "Risk Sentiment", icon: Shield },
                { name: "Macro Alpha", icon: Activity },
            ],
            centerIcon: Brain,
            title: "Global Macro Flows", description: "Monitor cross-border intelligence and institutional capital rotation."
        },
    ];

    return (
        <ThemeProvider
            defaultButtonVariant="hover-magnetic"
            defaultTextAnimation="reveal-blur"
            borderRadius="soft"
            contentWidth="mediumLarge"
            sizing="mediumLargeSizeLargeTitles"
            background="noiseDiagonalGradient"
            cardStyle="glass-elevated"
            primaryButtonStyle="diagonal-gradient"
            secondaryButtonStyle="glass"
            headingFontWeight="bold"
        >
            <div id="nav" data-section="nav">
                <NavbarStyleFullscreen
                    navItems={navItems}
                    brandName="QuantTerminal"
                    bottomLeftText="INSTITUTIONAL // SECURE"
                    bottomRightText="SECURE@TERMINAL.NET"
                />
            </div>
            <div id="hero" data-section="hero">
                <HeroBillboardDashboard
                    background={{ variant: "gradient-bars" }}
                    tag="Institutional Terminal OS"
                    tagIcon={Shield}
                    title="Quantitative Intelligence Environment"
                    description="Deploy private-cloud data widgets for high-conviction market analysis and institutional asset tracking."
                    buttons={[
                        { text: "Terminal Access", href: "#" },
                        { text: "API Documentation", href: "#" },
                    ]}
                    dashboard={{
                        title: "Live Terminal Feed", logoIcon: BarChart3, 
                        imageSrc: "https://images.unsplash.com/photo-1590283603385-17ffb3a7f29f?w=800&h=600&fit=crop", imageAlt: "Terminal Workspace", 
                        buttons: [
                            { text: "Deploy Widget", href: "#" },
                            { text: "Stream Data", href: "#" },
                        ],
                        sidebarItems: [
                            { icon: Activity, active: true },
                            { icon: LineChart },
                            { icon: Database },
                            { icon: TrendingUp },
                            { icon: Settings },
                        ],
                        stats: [
                            { title: "NASDAQ Sentiment", values: [18450, 18520, 18490], description: "Real-time Alpha Index." },
                            { title: "Alpha Velocity", values: [420, 580, 510], description: "Flows (Billions USD)." },
                            { title: "Signal Conviction", values: [88, 92, 95], valueSuffix: "%", description: "Model Confidence." },
                        ],
                        chartTitle: "Flow Velocity (24h)", chartData: [{ value: 120 }, { value: 85 }, { value: 140 }, { value: 95 }, { value: 170 }, { value: 130 }, { value: 155 }, { value: 110 }],
                        listTitle: "Institutional Alert Stream", listItems: [
                            { icon: TrendingUp, title: "NVDA: Accumulation Detected", status: "High Conviction" },
                            { icon: LineChart, title: "NASDAQ: Trend Rotation", status: "Analysis" },
                            { icon: DollarSign, title: "Macro: Flow Inbound", status: "Validated" },
                        ],
                    }}
                />
            </div>
            <div id="features" data-section="features">
                <FeatureBento
                    features={features}
                    animationType="blur-reveal"
                    tag="System Components"
                    tagIcon={Sparkles}
                    title="Scalable Infrastructure"
                    description="Modular intelligence components built for quantitative high-frequency analysis."
                    textboxLayout="split"
                    useInvertedBackground={true}
                />
            </div>
            <div id="footer" data-section="footer">
                <FooterBaseCard
                    logoText="QuantTerminal"
                    columns={[
                        { title: "Core Data", items: [{ label: "Market Analysis" }, { label: "Signal Intelligence" }, { label: "Flow Tracking" }] },
                        { title: "Developer", items: [{ label: "REST API" }, { label: "Direct Socket" }, { label: "SDK" }] },
                        { title: "Legal", items: [{ label: "Security" }, { label: "Terms" }, { label: "Policy" }] },
                    ]}
                    copyrightText="© 2025 QuantTerminal. Proprietary Intelligence Systems."
                />
            </div>
        </ThemeProvider>
    );
}
