"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";

export default function OrderHistoryPage() {
  // Placeholder for order history data
  const orders = [
    { id: "ORD001", date: "2024-03-15", total: "$1,250", status: "Delivered", items: ["Chronos Elegance Watch"] },
    { id: "ORD002", date: "2024-02-28", total: "$450", status: "Shipped", items: ["Versailles Silk Scarf"] },
    { id: "ORD003", date: "2024-01-10", total: "$8,900", status: "Delivered", items: ["Empress Alligator Handbag"] },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="compact"
      sizing="largeSmall"
      background="circleGradient"
      cardStyle="glass-depth"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="light"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarLayoutFloatingInline
            navItems={[
              { name: "Home", id: "#hero" },
              { name: "About", id: "#about" },
              { name: "Products", id: "#products" },
              { name: "Features", id: "#features" },
              { name: "Testimonials", id: "#testimonials" },
              { name: "Contact", id: "#contact" },
              { name: "Signup", id: "/signup" },
              { name: "Order History", id: "/order-history" },
              { name: "Account", id: "/account" },
            ]}
            logoSrc="http://img.b2bpic.net/free-vector/wedding-badge-vector-gold-vintage-ornamental-style_53876-140182.jpg"
            logoAlt="Elegance Atelier Logo"
            brandName="Elegance Atelier"
            button={{
              text: "Login",              href: "/login"}}
            animateOnLoad={true}
          />
        </div>

        <main className="container mx-auto py-12 px-4 min-h-[calc(100vh-200px)]">
          <h1 className="text-4xl font-bold mb-8 text-center">Your Order History</h1>
          {
            orders.length === 0 ? (
              <p className="text-center text-lg text-foreground">You haven't placed any orders yet.</p>
            ) : (
              <div className="space-y-6">
                {orders.map((order) => (
                  <div key={order.id} className="p-6 rounded-lg shadow-md bg-card border border-border">
                    <div className="flex justify-between items-center mb-4">
                      <h2 className="text-xl font-semibold text-foreground">Order ID: {order.id}</h2>
                      <span className="text-sm font-medium text-accent">{order.status}</span>
                    </div>
                    <p className="text-foreground mb-2">Date: {order.date}</p>
                    <p className="text-foreground mb-4">Total: {order.total}</p>
                    <div className="border-t border-border pt-4">
                      <h3 className="text-lg font-medium text-foreground mb-2">Items:</h3>
                      <ul className="list-disc list-inside text-foreground">
                        {order.items.map((item, index) => (
                          <li key={index}>{item}</li>
                        ))}
                      </ul>
                    </div>
                  </div>
                ))}
              </div>
            )
          }
        </main>

        <div id="footer" data-section="footer">
          <FooterLogoEmphasis
            logoSrc="http://img.b2bpic.net/free-vector/wedding-badge-vector-gold-vintage-ornamental-style_53876-140182.jpg"
            logoAlt="Elegance Atelier Logo"
            columns={[
              {
                items: [
                  { label: "Home", href: "#hero" },
                  { label: "About Us", href: "#about" },
                  { label: "Collections", href: "#products" },
                  { label: "Membership", href: "#pricing" },
                ],
              },
              {
                items: [
                  { label: "Contact", href: "#contact" },
                  { label: "FAQ", href: "#faq" },
                  { label: "Login", href: "/login" },
                  { label: "Signup", href: "/signup" },
                  { label: "Order History", href: "/order-history" },
                  { label: "Account", href: "/account" },
                ],
              },
              {
                items: [
                  { label: "Privacy Policy", href: "#" },
                  { label: "Terms of Service", href: "#" },
                  { label: "Shipping & Returns", href: "#" },
                ],
              },
            ]}
            logoText="Elegance Atelier"
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
