"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: "NASDAQ Market Analysis", items: [
                { icon: LineChart, label: "Real-time Index Tracking", time: "Live" },
                { icon: TrendingUp, label: "Volatility Sentiment", time: "5m ago" },
                { icon: Database, label: "Institutional Flow", time: "10m ago" },
            ],
            description: "Institutional-grade NASDAQ analytics widgets with real-time signal processing."},
        {
            bentoComponent: "chat", aiIcon: Bot,
            userIcon: User,
            exchanges: [
                { userMessage: "Analyze NVDA trends", aiResponse: "NVDA is showing strong institutional accumulation with 12% relative strength." },
                { userMessage: "Capital flow report?", aiResponse: "Global flows favor tech-heavy NASDAQ indices with rotation into semi-conductors." },
            ],
            placeholder: "Analyze ticker...", title: "Single Stock Intelligence", description: "Deep-dive analysis for specific equities with advanced visualization."},
        {
            bentoComponent: "3d-card-grid", items: [
                { name: "Global Flows", icon: DollarSign },
                { name: "Asset Rotation", icon: RefreshCcw },
                { name: "Institutional Sentiment", icon: Shield },
                { name: "Macro Signals", icon: Activity },
            ],
            centerIcon: Brain,
            title: "Global Capital Flows", description: "Monitor cross-border capital intelligence and macro-market shifts."},
    ];

    return (
        <ThemeProvider
            defaultButtonVariant="icon-arrow"
            defaultTextAnimation="background-highlight"
            borderRadius="rounded"
            contentWidth="medium"
            sizing="medium"
            background="none"
            cardStyle="gradient-bordered"
            primaryButtonStyle="gradient"
            secondaryButtonStyle="layered"
            headingFontWeight="semibold"
        >
            <div id="nav" data-section="nav">
                <NavbarStyleFullscreen
                    navItems={navItems}
                    brandName="QuantStream"
                    bottomLeftText="Institutional Intelligence"
                    bottomRightText="api@quantstream.io"
                />
            </div>
            <div id="hero" data-section="hero">
                <HeroBillboardDashboard
                    background={{ variant: "canvas-reveal" }}
                    tag="Institutional Data Systems"
                    tagIcon={LineChart}
                    title="Professional Grade Market Intelligence for Quants"
                    description="Deploy modular widgets to track NASDAQ, analyze individual stocks, and map global capital flows in real-time."
                    buttons={[
                        { text: "View API Docs", href: "#" },
                        { text: "Request Access", href: "#" },
                    ]}
                    dashboard={{
                        title: "Quant Dashboard", logoIcon: BarChart3,
                        imageSrc: "https://images.unsplash.com/photo-1590283603385-17ffb3a7f29f?w=100&h=100&fit=crop", imageAlt: "Quant Terminal",                        buttons: [
                            { text: "Add Widget", href: "#" },
                            { text: "Export Data", href: "#" },
                        ],
                        sidebarItems: [
                            { icon: Activity, active: true },
                            { icon: LineChart },
                            { icon: Database },
                            { icon: TrendingUp },
                            { icon: Settings },
                        ],
                        stats: [
                            { title: "NASDAQ Performance", values: [18450, 18520, 18490], description: "Real-time index performance." },
                            { title: "Net Capital Flow", values: [420, 580, 510], description: "Billions USD inflow/outflow." },
                            { title: "Institutional Signal", values: [88, 92, 85], valueSuffix: "%", description: "High-conviction market signals." },
                        ],
                        chartTitle: "Capital Flow Velocity (24h)", chartData: [{ value: 120 }, { value: 85 }, { value: 140 }, { value: 95 }, { value: 170 }, { value: 130 }, { value: 155 }, { value: 110 }],
                        listTitle: "Recent Market Signals", listItems: [
                            { icon: TrendingUp, title: "NVDA: Bullish Signal detected", status: "Validated" },
                            { icon: LineChart, title: "NASDAQ-100: Trend shift", status: "Analysis" },
                            { icon: DollarSign, title: "Macro: Global inflow surge", status: "Validated" },
                        ],
                    }}
                />
            </div>
            <div id="features" data-section="features">
                <FeatureBento
                    features={features}
                    animationType="slide-up"
                    tag="Widgets & Systems"
                    tagIcon={Sparkles}
                    title="Modular Intelligence Widgets"
                    description="Scalable data components designed for institutional-level integration and high-frequency analysis."
                    textboxLayout="default"
                    useInvertedBackground={false}
                />
            </div>
            <div id="footer" data-section="footer">
                <FooterBaseCard
                    logoText="QuantStream"
                    columns={[
                        { title: "Widgets", items: [{ label: "NASDAQ Analysis" }, { label: "Stock Intelligence" }, { label: "Capital Flows" }] },
                        { title: "Data", items: [{ label: "Market APIs" }, { label: "Documentation" }] },
                        { title: "Company", items: [{ label: "About" }, { label: "Contact" }] },
                    ]}
                    copyrightText="© 2025 QuantStream. Professional Financial Intelligence."
                />
            </div>
        </ThemeProvider>
    );
}