"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 { Plus, Minus } from "lucide-react";

export default function UsersManagementPage() {
  // Dummy data for users
  const users = [
    { id: "u1", username: "johndoe", email: "john@example.com", balance: 150.75, status: "Active" },
    { id: "u2", username: "janesmith", email: "jane@example.com", balance: 23.50, status: "Active" },
    { id: "u3", username: "alicej", email: "alice@example.com", balance: 0.00, status: "Inactive" },
    { id: "u4", username: "bobw", email: "bob@example.com", balance: 500.00, status: "Active" },
    { id: "u5", username: "charlieb", email: "charlie@example.com", balance: 12.30, status: "Active" },
  ];

  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">Users Management</h1>

          <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">Username</th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-foreground uppercase tracking-wider">Email</th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-foreground uppercase tracking-wider">Balance</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">
                {users.map(user => (
                  <tr key={user.id} className="hover:bg-background-accent transition-colors">
                    <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-foreground">{user.username}</td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-foreground">{user.email}</td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-foreground">${user.balance.toFixed(2)}</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 ${
                        user.status === 'Active' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
                      }`}>
                        {user.status}
                      </span>
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium flex space-x-2">
                      <button className="px-3 py-1 bg-primary-cta text-white rounded-md text-xs flex items-center hover:opacity-90 transition-opacity">
                        <Plus size={14} className="mr-1" /> Add Funds
                      </button>
                      <button className="px-3 py-1 bg-secondary-cta text-white rounded-md text-xs flex items-center hover:opacity-90 transition-opacity">
                        <Minus size={14} className="mr-1" /> Deduct Funds
                      </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>
  );
}