"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import FooterBase from '@/components/sections/footer/FooterBase';

export default function MyOrdersPage() {
  const orders = [
    { id: "#1001", service: "Instagram Likes", quantity: "1000", status: "Completed", date: "2024-07-20" },
    { id: "#1002", service: "YouTube Views", quantity: "5000", status: "Processing", date: "2024-07-21" },
    { id: "#1003", service: "TikTok Followers", quantity: "100", status: "Pending", date: "2024-07-21" },
    { id: "#1004", service: "Twitter Retweets", quantity: "500", status: "Completed", date: "2024-07-19" },
    { id: "#1005", service: "Facebook Comments", quantity: "10", status: "Cancelled", date: "2024-07-18" }
  ];

  return (
    <ThemeProvider
        defaultButtonVariant="icon-arrow"
        defaultTextAnimation="background-highlight"
        borderRadius="soft"
        contentWidth="medium"
        sizing="large"
        background="grid"
        cardStyle="solid"
        primaryButtonStyle="gradient"
        secondaryButtonStyle="glass"
        headingFontWeight="normal"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarStyleFullscreen
            navItems={[
              { name: "Home", id: "/" },
              { name: "Services", id: "/services" },
              { name: "Pricing", id: "/pricing" },
              { name: "My Orders", id: "/my-orders" },
              { name: "Add Funds", id: "/add-funds" },
              { name: "Profile", id: "/profile" },
              { name: "FAQ", id: "/faq" },
              { name: "Contact", id: "/contact" }
            ]}
            logoSrc="http://img.b2bpic.net/free-photo/isolated-white-house-silhouette-minimal-black-landscape_1194-641505.jpg"
            logoAlt="SocBoost Logo"
            brandName="SocBoost"
            button={{
              text: "Register",              href: "/register"
            }}
          />
        </div>

        <div className="min-h-screen py-16 px-4 sm:px-6 lg:px-8 bg-background">
          <div className="max-w-7xl mx-auto">
            <h1 className="text-4xl font-bold text-foreground text-center mb-6">My Orders</h1>
            <p className="text-lg text-muted-foreground text-center mb-10">View and manage your recent orders.</p>

            <div className="mb-8 flex justify-end">
              <select className="p-2 rounded-md bg-card border border-border text-foreground">
                <option value="all">All Statuses</option>
                <option value="pending">Pending</option>
                <option value="processing">Processing</option>
                <option value="completed">Completed</option>
                <option value="cancelled">Cancelled</option>
              </select>
            </div>

            <div className="overflow-x-auto rounded-lg shadow-md border border-border">
              <table className="min-w-full divide-y divide-border">
                <thead className="bg-card">
                  <tr>
                    <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">ID</th>
                    <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">Service</th>
                    <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">Quantity</th>
                    <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">Status</th>
                    <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">Date</th>
                  </tr>
                </thead>
                <tbody className="bg-background divide-y divide-border">
                  {orders.map((order) => (
                    <tr key={order.id}>
                      <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-foreground">{order.id}</td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm text-foreground">{order.service}</td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm text-foreground">{order.quantity}</td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm text-foreground">
                        <span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${
                          order.status === 'Completed' ? 'bg-green-100 text-green-800' :
                          order.status === 'Processing' ? 'bg-blue-100 text-blue-800' :
                          order.status === 'Pending' ? 'bg-yellow-100 text-yellow-800' :
                          'bg-red-100 text-red-800'
                        }`}>
                          {order.status}
                        </span>
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm text-foreground">{order.date}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        </div>

        <div id="footer" data-section="footer">
          <FooterBase
            columns={[
              {
                title: "Services",                items: [
                  { label: "Instagram", href: "/services#instagram" },
                  { label: "YouTube", href: "/services#youtube" },
                  { label: "TikTok", href: "/services#tiktok" },
                  { label: "Twitter", href: "/services#twitter" },
                  { label: "Facebook", href: "/services#facebook" },
                  { label: "Telegram", href: "/services#telegram" },
                ],
              },
              {
                title: "Company",                items: [
                  { label: "About Us", href: "/#features" },
                  { label: "Pricing", href: "/pricing" },
                  { label: "FAQ", href: "/faq" },
                  { label: "Contact", href: "/contact" },
                ],
              },
              {
                title: "Legal",                items: [
                  { label: "Terms of Service", href: "/terms" },
                  { label: "Privacy Policy", href: "/privacy" },
                ],
              },
              {
                title: "Resources",                items: [
                  { label: "Blog", href: "#" },
                  { label: "API Docs", href: "#" },
                ],
              },
            ]}
            logoSrc="http://img.b2bpic.net/free-photo/isolated-white-house-silhouette-minimal-black-landscape_1194-641505.jpg"
            logoAlt="SocBoost Logo"
            logoText="SocBoost"
            copyrightText="© 2024 SocBoost. All rights reserved."
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
