"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import FaqDouble from "@/components/sections/faq/FaqDouble";
import AboutMetric from "@/components/sections/about/AboutMetric";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import { ThumbsUp, AlertCircle, TrendingUp } from "lucide-react";

export default function HITLDecisionsPage() {
  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>

      {/* HITL Decision Statistics */}
      <div id="hitl-stats" data-section="hitl-stats">
        <AboutMetric
          title="Human-in-the-Loop Decision Impact Summary"
          useInvertedBackground={false}
          metricsAnimation="slide-up"
          metrics={[
            { icon: ThumbsUp, label: "Decisions Accepted", value: "87%" },
            { icon: AlertCircle, label: "Critical Alerts Resolved", value: "94%" },
            { icon: TrendingUp, label: "Optimization Improvements", value: "+12.8%" },
            { icon: AlertCircle, label: "Decision Response Time", value: "<2 min" },
          ]}
          ariaLabel="HITL Decision Metrics"
        />
      </div>

      {/* HITL Decision Log */}
      <div id="hitl-decision-log" data-section="hitl-decision-log">
        <FaqDouble
          title="Human-in-the-Loop Decision Log"
          description="Review and learn from operator decisions that improved batch optimization over time. Each decision contributes to system learning and future Golden Signature refinement."
          tag="Decision History"
          tagAnimation="slide-up"
          faqsAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="smooth"
          faqs={[
            {
              id: "1",
              title: "Drive Unit Motor Current Anomaly - Decision ID #H-2024-001",
              content: "<strong>Recommendation:</strong> Motor current 17% above ECO mode baseline. Pattern matches bearing misalignment.<br><strong>Action Taken:</strong> ✅ Accepted - Operator verified and adjusted belt tension to 4.2 kN.<br><strong>Outcome:</strong> Improved - Current normalized within 5 minutes, energy savings realized.",
            },
            {
              id: "2",
              title: "Heater Temperature Drift - Decision ID #H-2024-002",
              content: "<strong>Recommendation:</strong> Temperature stabilization drift detected at 2:14 PM. Suggests PID parameter adjustment.<br><strong>Action Taken:</strong> ✏️ Modified - Operator reduced hold time from 13 to 12.5 minutes based on batch composition variance.<br><strong>Outcome:</strong> Improved - Batch quality maintained at 91.2% with 15 kWh energy savings.",
            },
            {
              id: "3",
              title: "CO₂ Budget Threshold Warning - Decision ID #H-2024-003",
              content: "<strong>Recommendation:</strong> Monthly carbon budget at 70% consumption. Switch to ECO mode for remaining batches.<br><strong>Action Taken:</strong> ✅ Accepted - Operator acknowledged and activated ECO mode immediately.<br><strong>Outcome:</strong> Improved - On track to stay within budget with 15% margin, sustainability KPI achieved.",
            },
            {
              id: "4",
              title: "Quality vs Energy Trade-off Analysis - Decision ID #H-2024-004",
              content: "<strong>Recommendation:</strong> Batch #B-2024-087 : Increase temperature by 1°C for 0.5% quality gain at 8 kWh energy cost.<br><strong>Action Taken:</strong> ✅ Accepted - Operator chose quality priority for this batch due to customer SLA.<br><strong>Outcome:</strong> Improved - Quality increased to 92.1%, customer satisfaction priority justified the trade-off.",
            },
            {
              id: "5",
              title: "Compression Unit Pressure Variance - Decision ID #H-2024-005",
              content: "<strong>Recommendation:</strong> Pressure variance detected at 8.5% above target. Maintenance flag raised for bearing inspection.<br><strong>Action Taken:</strong> ❌ Rejected - Operator noted existing maintenance work in progress.<br><strong>Outcome:</strong> No Change - System acknowledged rejection, maintenance team contacted for priority scheduling within 24 hours.",
            },
            {
              id: "6",
              title: "Feed Inlet Calibration Update - Decision ID #H-2024-006",
              content: "<strong>Recommendation:</strong> Inlet flow calibration offset detected (+0.3%). Apply correction factor to normalize flow rate.<br><strong>Action Taken:</strong> ✏️ Modified - Operator applied partial correction (0.2%) pending equipment certification renewal.<br><strong>Outcome:</strong> Pending - System awaiting certification verification before finalizing adjustment. Follow-up scheduled.",
            },
          ]}
          ariaLabel="HITL Decisions FAQ Section"
        />
      </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>
  );
}