"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import FeatureHoverPattern from "@/components/sections/feature/featureHoverPattern/FeatureHoverPattern";
import MetricCardSeven from "@/components/sections/metrics/MetricCardSeven";
import FaqSplitText from "@/components/sections/faq/FaqSplitText";
import FooterMedia from "@/components/sections/footer/FooterMedia";
import { Calendar, BarChart3, Download, Zap, TrendingUp, Filter } from "lucide-react";

export default function ReportsPage() {
  const navItems = [
    { name: "Dashboard", id: "dashboard" },
    { name: "Reports", id: "reports" },
    { name: "Vehicles", id: "vehicles" },
    { name: "Pricing", id: "pricing" },
  ];

  const footerColumns = [
    {
      title: "Product",
      items: [
        { label: "Features", href: "#features" },
        { label: "Reports", href: "/reports" },
        { label: "Vehicles", href: "/vehicles" },
        { label: "Pricing", href: "#pricing" },
      ],
    },
    {
      title: "Company",
      items: [
        { label: "About Us", href: "/" },
        { label: "Blog", href: "/" },
        { label: "Careers", href: "/" },
        { label: "Contact", href: "#contact" },
      ],
    },
    {
      title: "Legal",
      items: [
        { label: "Privacy Policy", href: "#" },
        { label: "Terms of Service", href: "#" },
        { label: "Security", href: "#" },
        { label: "Compliance", href: "#" },
      ],
    },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="mediumSmall"
      sizing="medium"
      background="aurora"
      cardStyle="glass-depth"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="glass"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="TransitFlow"
          navItems={navItems}
          button={{
            text: "Get Started",
            href: "#contact",
          }}
          animateOnLoad={true}
        />
      </div>

      <div id="reporting-features" data-section="reporting-features">
        <FeatureHoverPattern
          title="Advanced Reporting Capabilities"
          description="Comprehensive reporting tools tailored for your fleet management needs with multi-timeframe analysis and detailed insights."
          features={[
            {
              icon: Calendar,
              title: "Daily Reports",
              description: "Monitor daily vehicle operations, mileage, fuel consumption, and route efficiency with real-time updates",
            },
            {
              icon: BarChart3,
              title: "Monthly Analysis",
              description: "Comprehensive monthly summaries showing trends, cost analysis, and performance metrics across your fleet",
            },
            {
              icon: TrendingUp,
              title: "Quarterly Insights",
              description: "Strategic quarterly reviews with year-over-year comparisons and operational benchmarking",
            },
            {
              icon: Download,
              title: "Custom Exports",
              description: "Export reports in multiple formats including PDF, CSV, and Excel for easy sharing and archival",
            },
            {
              icon: Filter,
              title: "Advanced Filtering",
              description: "Filter reports by vehicle, service type, date range, and expense category for targeted analysis",
            },
            {
              icon: Zap,
              title: "Automated Scheduling",
              description: "Set up recurring reports that automatically generate and deliver to your inbox on schedule",
            },
          ]}
          animationType="slide-up"
          tag="Reporting Tools"
          tagAnimation="opacity"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="report-metrics" data-section="report-metrics">
        <MetricCardSeven
          title="Reporting Performance"
          description="Generate and analyze reports with unprecedented speed and accuracy"
          metrics={[
            {
              id: "1",
              value: "< 5s",
              title: "Report Generation Time",
              items: [
                "Advanced data processing",
                "Real-time data refresh",
                "Instant PDF export",
              ],
            },
            {
              id: "2",
              value: "99.9%",
              title: "Data Accuracy",
              items: [
                "Automated validation",
                "Error detection systems",
                "Compliance auditing",
              ],
            },
            {
              id: "3",
              value: "100+",
              title: "Report Templates",
              items: [
                "Pre-built dashboards",
                "Custom report builder",
                "Industry-standard formats",
              ],
            },
          ]}
          animationType="scale-rotate"
          tag="Analytics"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitText
          faqs={[
            {
              id: "1",
              title: "How do I generate custom date range reports?",
              content: "Simply navigate to the Reports section, select your desired date range using the calendar picker, choose the report type (Daily, Monthly, or Quarterly), select vehicles or service categories to include, and click Generate. The system processes your report in seconds and provides multiple export options.",
            },
            {
              id: "2",
              title: "Can I compare metrics across multiple vehicles?",
              content: "Yes! Our comparative reporting tool allows you to select multiple vehicles and view side-by-side metrics including fuel efficiency, cost per mile, maintenance frequency, and uptime. You can also compare across time periods to identify trends and anomalies.",
            },
            {
              id: "3",
              title: "Are reports automatically saved and archived?",
              content: "All reports are automatically saved to your account and archived for 7 years in compliance with regulatory requirements. You can access historical reports from the Report Archive section, and we provide bulk download capabilities for compliance audits.",
            },
            {
              id: "4",
              title: "Can I schedule automated weekly or monthly reports?",
              content: "Absolutely! The Scheduled Reports feature allows you to create recurring reports that automatically generate and email stakeholders on your chosen frequency (daily, weekly, monthly, or quarterly). You can set up multiple schedules with different recipients and customizations.",
            },
          ]}
          sideTitle="Reporting Questions"
          sideDescription="Find answers to common questions about our reporting features"
          textPosition="left"
          useInvertedBackground={false}
          faqsAnimation="slide-up"
          animationType="smooth"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APJhSPZ1ni4Gjd8AW0gwt4s63g/wide-aerial-view-of-a-modern-transportat-1772489121730-52e07e45.png"
          imageAlt="Fleet operations background"
          columns={footerColumns}
          logoText="TransitFlow"
          copyrightText="© 2025 TransitFlow | Smart Transportation Reporting"
        />
      </div>
    </ThemeProvider>
  );
}