"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import { Clock } from "lucide-react";

export default function AdminViewPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="small"
      sizing="medium"
      background="noise"
      cardStyle="glass-elevated"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="glass"
      headingFontWeight="normal"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarStyleFullscreen
            navItems={[
              { name: "Home", id: "/" },
              { name: "Products", id: "/products" },
              { name: "Features", id: "#features" },
              { name: "About", id: "#about" },
              { name: "Testimonials", id: "#testimonials" },
              { name: "FAQ", id: "#faq" },
              { name: "Contact", id: "#contact" },
              { name: "Admin", id: "/admin-view" }
            ]}
            logoSrc="http://img.b2bpic.net/free-vector/flat-design-cross-country-template_23-2149493304.jpg"
            logoAlt="Sole & Style Logo"
            brandName="Sole & Style"
            bottomLeftText="Luxury Footwear"
            bottomRightText="info@solenstyle.com"
          />
        </div>

        <div id="admin-dashboard" data-section="admin-dashboard" className="py-20">
          <MetricCardEleven
            animationType="slide-up"
            useInvertedBackground={false}
            title="Admin Dashboard: Key Metrics"
            description="Overview of vital business statistics and performance indicators."
            metrics={[
              {
                id: "total-sales",                value: "$1.2M",                title: "Total Sales",                description: "Revenue generated this quarter.",                imageSrc: "http://img.b2bpic.net/free-photo/financial-graph-paper-with-market-exchange-rate_1163-5477.jpg",                imageAlt: "Financial graph"
              },
              {
                id: "new-users",                value: "5,400",                title: "New Users",                description: "New customer sign-ups last month.",                imageSrc: "http://img.b2bpic.net/free-photo/diverse-group-employees-working-together_1098-958.jpg",                imageAlt: "Group of people"
              },
              {
                id: "pending-orders-count",                value: "150",                title: "Pending Orders",                description: "Orders awaiting processing.",                imageSrc: "http://img.b2bpic.net/free-photo/close-up-cardboard-boxes-warehouse_176420-7988.jpg",                imageAlt: "Stack of boxes"
              },
              {
                id: "average-order-value",                value: "$220",                title: "AOV",                description: "Average transaction amount.",                imageSrc: "http://img.b2bpic.net/free-photo/businessman-using-calculator_1098-2831.jpg",                imageAlt: "Calculator"
              }
            ]}
            textboxLayout="default"
          />
        </div>

        <div id="pending-orders" data-section="pending-orders" className="py-20 bg-card rounded-lg mx-auto max-w-smallMedium px-6">
          <h2 className="text-4xl md:text-5xl font-bold text-foreground text-center mb-4">Pending Orders</h2>
          <p className="text-xl text-foreground/80 text-center mb-10 max-w-xl mx-auto">
            Detailed view of recent orders awaiting fulfillment.
          </p>
          <div className="space-y-4">
            <div className="p-4 bg-background-accent rounded-md flex items-center justify-between">
              <div>
                <p className="font-semibold text-lg text-foreground">Order #12345</p>
                <p className="text-sm text-foreground/70">Customer: Jane Doe, Items: 2</p>
              </div>
              <span className="text-accent font-medium flex items-center">Processing <Clock className="inline-block h-4 w-4 ml-2" /></span>
            </div>
            <div className="p-4 bg-background-accent rounded-md flex items-center justify-between">
              <div>
                <p className="font-semibold text-lg text-foreground">Order #12346</p>
                <p className="text-sm text-foreground/70">Customer: John Smith, Items: 1</p>
              </div>
              <span className="text-accent font-medium flex items-center">Processing <Clock className="inline-block h-4 w-4 ml-2" /></span>
            </div>
            <div className="p-4 bg-background-accent rounded-md flex items-center justify-between">
              <div>
                <p className="font-semibold text-lg text-foreground">Order #12347</p>
                <p className="text-sm text-foreground/70">Customer: Alice Johnson, Items: 3</p>
              </div>
              <span className="text-accent font-medium flex items-center">Processing <Clock className="inline-block h-4 w-4 ml-2" /></span>
            </div>
          </div>
        </div>

        <div id="footer" data-section="footer">
          <FooterLogoReveal
            logoSrc="http://img.b2bpic.net/free-vector/flat-design-cross-country-template_23-2149493304.jpg"
            logoText="Sole & Style"
            leftLink={{
              text: "Privacy Policy",              href: "#"
            }}
            rightLink={{
              text: "Terms of Service",              href: "#"
            }}
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
