"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import MetricCardEleven from "@/components/sections/metrics/MetricCardEleven";
import ProductCardThree from "@/components/sections/product/ProductCardThree";
import FaqDouble from "@/components/sections/faq/FaqDouble";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";

export default function DashboardPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="small"
      sizing="largeSizeMediumTitles"
      background="blurBottom"
      cardStyle="inset"
      primaryButtonStyle="flat"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="extrabold"
    >
      {/* Navbar */}
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="BatchMind AI"
          navItems={[
            { name: "Features", id: "features" },
            { name: "How It Works", id: "how-it-works" },
            { name: "Demo", id: "demo" },
            { name: "Login", id: "login" },
          ]}
          button={{ text: "Launch Dashboard", href: "/dashboard" }}
          className="fixed top-4 left-4 right-4 z-50"
          buttonClassName="bg-[#00BFA5] text-[#0F172A] font-semibold rounded-lg px-6 py-2 hover:brightness-110 transition-all duration-200"
        />
      </div>

      {/* Dashboard Metrics Display */}
      <div id="dashboard-metrics" data-section="dashboard-metrics">
        <MetricCardEleven
          title="Real-Time Batch Performance Dashboard"
          description="Live monitoring of all active batches and their optimization status across key KPIs."
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          metrics={[
            {
              id: "1",
              value: "91.4%",
              title: "Current Quality Score",
              description: "Batch performance against Golden Signature baseline",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP0AjJmV3m6mh1sukO97SYkjcn/real-time-batch-monitoring-interface-sho-1772479138124-2b115611.png?_wi=5",
              imageAlt: "Quality Score Visualization",
            },
            {
              id: "2",
              value: "78.4",
              title: "Sustainability Index",
              description: "Combined carbon footprint and energy efficiency metrics",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP0AjJmV3m6mh1sukO97SYkjcn/monthly-carbon-budget-tracker-showing-ho-1772479137486-8a27a3ff.png?_wi=3",
              imageAlt: "Sustainability Metrics",
            },
          ]}
          ariaLabel="Dashboard Real-Time Metrics"
        />
      </div>

      {/* KPI Overview Cards */}
      <div id="kpi-overview" data-section="kpi-overview">
        <ProductCardThree
          title="Active Batch KPIs"
          description="Comprehensive view of current batch parameters and performance indicators."
          gridVariant="four-items-2x2-equal-grid"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          products={[
            {
              id: "1",
              name: "Energy Consumption",
              price: "312 kWh",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP0AjJmV3m6mh1sukO97SYkjcn/advanced-industrial-saas-dashboard-inter-1772479139028-807f53a6.png?_wi=3",
              imageAlt: "Energy metrics",
            },
            {
              id: "2",
              name: "Production Yield",
              price: "88.3%",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP0AjJmV3m6mh1sukO97SYkjcn/real-time-batch-monitoring-interface-sho-1772479138124-2b115611.png?_wi=6",
              imageAlt: "Yield percentage",
            },
            {
              id: "3",
              name: "Carbon Emissions",
              price: "145 kg CO₂",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP0AjJmV3m6mh1sukO97SYkjcn/monthly-carbon-budget-tracker-showing-ho-1772479137486-8a27a3ff.png?_wi=4",
              imageAlt: "Carbon footprint",
            },
            {
              id: "4",
              name: "Machine Health",
              price: "98%",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP0AjJmV3m6mh1sukO97SYkjcn/top-down-schematic-diagram-of-manufactur-1772479137455-01b744bb.png?_wi=2",
              imageAlt: "Machine status",
            },
          ]}
          ariaLabel="Dashboard KPI Cards"
        />
      </div>

      {/* Dashboard FAQ/Help Section */}
      <div id="dashboard-help" data-section="dashboard-help">
        <FaqDouble
          title="Dashboard Guide & Troubleshooting"
          description="Quick answers to common questions about navigating and using the BatchMind AI dashboard."
          faqsAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="smooth"
          faqs={[
            {
              id: "1",
              title: "How do I switch between Golden Signature modes?",
              content: "Navigate to the Operating Modes panel on the left sidebar. Select ECO, QUALITY, or BALANCED mode based on your current priority. The system will automatically apply the optimized parameters within 2-3 seconds.",
            },
            {
              id: "2",
              title: "What does the Quality Score represent?",
              content: "The Quality Score compares your current batch's output against the Golden Signature baseline. A score of 91.4% means your batch is performing 8.6% below the optimal parameters. Higher scores indicate better alignment with quality targets.",
            },
            {
              id: "3",
              title: "Can I override AI recommendations?",
              content: "Yes. All AI recommendations appear in the Human-in-the-Loop panel. You can Accept, Modify, or Reject any recommendation. Your decision is logged for future learning and optimization.",
            },
            {
              id: "4",
              title: "How often are batches automatically optimized?",
              content: "BatchMind AI continuously monitors your production line and generates optimization recommendations every 5 minutes or when anomalies are detected. You control when to apply these recommendations.",
            },
            {
              id: "5",
              title: "What should I do if the Quality Score drops suddenly?",
              content: "Check the Alerts panel for fault detection messages. BatchMind AI will flag potential issues (e.g., Drive Unit current anomaly, temperature drift) with recommended actions. Review machine health indicators for any red flags.",
            },
            {
              id: "6",
              title: "How is the Carbon Budget calculated?",
              content: "Monthly carbon budget is based on your facility's baseline and sustainability targets. The tracker shows remaining capacity. When you reach 70%, a warning alert activates. Stay within budget by switching to ECO mode.",
            },
          ]}
          ariaLabel="Dashboard Help and FAQ"
        />
      </div>

      {/* Footer */}
      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="BatchMind AI"
          leftLink={{ text: "Privacy Policy", href: "/privacy" }}
          rightLink={{ text: "Terms of Service", href: "/terms" }}
          ariaLabel="Site footer"
        />
      </div>
    </ThemeProvider>
  );
}