"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
import HeroLogoBillboard from "@/components/sections/hero/HeroLogoBillboard";
import MetricCardTen from "@/components/sections/metrics/MetricCardTen";
import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia";
import FooterSimple from "@/components/sections/footer/FooterSimple";
import { HelpCircle } from "lucide-react";

export default function AdminPage() {
  const navItems = [
    { name: "Home", id: "home" },
    { name: "Features", id: "features" },
    { name: "How It Works", id: "how-it-works" },
    { name: "Admin", id: "admin" },
  ];

  const footerColumns = [
    {
      title: "Product",
      items: [
        { label: "Free Audit Tool", href: "/" },
        { label: "How It Works", href: "/" },
        { label: "Results Dashboard", href: "/results" },
        { label: "Admin Dashboard", href: "/admin" },
      ],
    },
    {
      title: "Resources",
      items: [
        { label: "E-commerce Blog", href: "#" },
        { label: "SEO Guide", href: "#" },
        { label: "Optimization Tips", href: "#" },
        { label: "Case Studies", href: "#" },
      ],
    },
    {
      title: "Company",
      items: [
        { label: "About Us", href: "#" },
        { label: "Contact", href: "#" },
        { label: "Privacy Policy", href: "#" },
        { label: "Terms of Service", href: "#" },
      ],
    },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="compact"
      sizing="largeSizeMediumTitles"
      background="fluid"
      cardStyle="outline"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="glass"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          navItems={navItems}
          brandName="StoreAudit"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogoBillboard
          logoText="Admin Dashboard"
          description="Manage your store audits, view historical reports, and monitor optimization progress over time. Access all your audit data and team collaboration features."
          buttons={[
            { text: "Access Dashboard", href: "#" },
            { text: "View Documentation", href: "#" },
          ]}
          buttonAnimation="slide-up"
          background={{ variant: "cell-wave" }}
          mediaAnimation="slide-up"
          frameStyle="card"
        />
      </div>

      <div id="admin-stats" data-section="admin-stats">
        <MetricCardTen
          title="Your Audit Portal Statistics"
          description="Track your organization's audit activity and improvements across all monitored stores."
          metrics={[
            {
              id: "total-audits",
              title: "Total Audits Run",
              subtitle: "since account creation",
              category: "Activity",
              value: "247",
            },
            {
              id: "stores-monitored",
              title: "Stores Monitored",
              subtitle: "active tracking",
              category: "Portfolio",
              value: "12",
            },
            {
              id: "avg-improvement",
              title: "Average Score Improvement",
              subtitle: "month over month",
              category: "Progress",
              value: "+8.4%",
            },
            {
              id: "critical-issues",
              title: "Critical Issues Resolved",
              subtitle: "across all stores",
              category: "Success",
              value: "156",
            },
          ]}
          animationType="slide-up"
          textboxLayout="centered"
          useInvertedBackground={false}
        />
      </div>

      <div id="admin-faq" data-section="admin-faq">
        <FaqSplitMedia
          title="Admin Dashboard Help"
          description="Find answers about managing your audit portal, accessing reports, and maximizing insights for your e-commerce teams."
          tag="Admin Guide"
          tagIcon={HelpCircle}
          faqs={[
            {
              id: "q1",
              title: "How do I add team members?",
              content: "Navigate to Settings > Team Members and click 'Invite Team Member'. Enter their email address and select their permission level. They'll receive an invitation to join your organization's dashboard.",
            },
            {
              id: "q2",
              title: "Can I schedule automatic audits?",
              content: "Yes, premium plans include scheduled audit functionality. Go to Store Settings > Schedule and set your preferred frequency (daily, weekly, or monthly). You'll receive alerts for any critical issues detected.",
            },
            {
              id: "q3",
              title: "How do I export audit reports?",
              content: "From any audit result, click the 'Export' button to download as PDF or CSV. Reports include all recommendations, priority levels, and implementation tips. Bulk exports are available under Reports > Batch Export.",
            },
            {
              id: "q4",
              title: "What's included in the API access?",
              content: "API access allows you to programmatically retrieve audit data, schedule scans, and integrate results into your workflows. Documentation is available in Settings > API Keys with code examples for popular languages.",
            },
            {
              id: "q5",
              title: "How are my results secured?",
              content: "All data is encrypted in transit and at rest using bank-level security. You control who has access through granular permission settings. We comply with GDPR, CCPA, and SOC 2 Type II standards.",
            },
            {
              id: "q6",
              title: "Can I white-label the tool?",
              content: "Enterprise plans include white-label options. You can customize branding, domain, colors, and communication templates. Contact our sales team for enterprise pricing and implementation details.",
            },
          ]}
          mediaAnimation="slide-up"
          mediaPosition="left"
          faqsAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B25Hs1BWiFe17Y6WtCSxZeJVX7/a-friendly-modern-illustration-of-an-faq-1773674307565-d772722c.png"
          imageAlt="Admin help illustration"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterSimple
          columns={footerColumns}
          bottomLeftText="© 2024 StoreAudit. All rights reserved."
          bottomRightText="Built for e-commerce success"
        />
      </div>
    </ThemeProvider>
  );
}