"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';
import { CheckCircle, XCircle } from "lucide-react";

export default function OrdersManagementPage() {
  // Dummy data for orders
  const orders = [
    { id: "#1001", user: "John Doe", service: "Instagram Likes", quantity: 1000, status: "Completed", date: "2024-01-15", amount: "$1.00" },
    { id: "#1002", user: "Jane Smith", service: "YouTube Views", quantity: 5000, status: "Pending", date: "2024-01-16", amount: "$5.00" },
    { id: "#1003", user: "Alice Johnson", service: "TikTok Followers", quantity: 200, status: "Processing", date: "2024-01-17", amount: "$0.80" },
    { id: "#1004", user: "Bob Williams", service: "Twitter Retweets", quantity: 100, status: "Cancelled", date: "2024-01-18", amount: "$0.20" },
    { id: "#1005", user: "Charlie Brown", service: "Facebook Shares", quantity: 50, status: "Completed", date: "2024-01-19", amount: "$0.15" },
  ];

  const statuses = ["All", "Completed", "Pending", "Processing", "Cancelled"];

  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: "FAQ", id: "/faq" },
              { name: "Contact", id: "/contact" },
              { name: "Orders", id: "/orders" },
              { name: "Users", id: "/users" }
            ]}
            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>

        <main className="container mx-auto px-4 py-8">
          <h1 className="text-4xl font-bold mb-8">Orders Management</h1>

          <div className="mb-6 flex justify-between items-center">
            <div className="flex items-center space-x-2">
              <label htmlFor="status-filter" className="font-medium">Filter by Status:</label>
              <select id="status-filter" className="p-2 border rounded-md bg-white dark:bg-gray-800 dark:border-gray-700">
                {statuses.map(status => (
                  <option key={status} value={status.toLowerCase()}>{status}</option>
                ))}
              </select>
            </div>
            <button className="px-4 py-2 bg-primary-cta text-white rounded-md hover:opacity-90 transition-opacity">Refresh Orders</button>
          </div>

          <div className="overflow-x-auto bg-card rounded-lg shadow-lg p-6">
            <table className="min-w-full divide-y divide-border">
              <thead className="bg-background-accent">
                <tr>
                  <th className="px-6 py-3 text-left text-xs font-medium text-foreground uppercase tracking-wider">Order ID</th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-foreground uppercase tracking-wider">User</th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-foreground uppercase tracking-wider">Service</th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-foreground uppercase tracking-wider">Quantity</th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-foreground uppercase tracking-wider">Amount</th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-foreground uppercase tracking-wider">Date</th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-foreground uppercase tracking-wider">Status</th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-foreground uppercase tracking-wider">Actions</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-border">
                {orders.map(order => (
                  <tr key={order.id} className="hover:bg-background-accent transition-colors">
                    <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.user}</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">{order.amount}</td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-foreground">{order.date}</td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm">
                      <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 === 'Pending' ? 'bg-yellow-100 text-yellow-800' :
                        order.status === 'Processing' ? 'bg-blue-100 text-blue-800' :
                        'bg-red-100 text-red-800'
                      }`}>
                        {order.status}
                      </span>
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                      <select className="p-1 border rounded-md bg-white dark:bg-gray-700 dark:border-gray-600 mr-2">
                        {statuses.filter(s => s !== 'All').map(status => (
                          <option key={status} value={status.toLowerCase()} selected={order.status === status}>{status}</option>
                        ))}
                      </select>
                      <button className="px-3 py-1 bg-accent text-white rounded-md text-xs hover:opacity-90 transition-opacity">Update</button>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </main>

        <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>
  );
}