"use client";

import { useState, useMemo } from "react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import ProductCatalog from '@/components/ecommerce/productCatalog/ProductCatalog';

export default function AdminDashboardPage() {
  const [searchTerm, setSearchTerm] = useState("");
  const [paymentFilter, setPaymentFilter] = useState("All");

  const applicants = useMemo(() => [
    {
      id: "app-1",      name: "John Doe",      category: "Paid",      price: "$100", // Application Fee
      rating: 5, // Approval rating
      reviewCount: "5 documents",      imageSrc: "https://images.unsplash.com/photo-1535713875002-d1d0cfdce53c?auto=format&fit=crop&q=80&w=1780&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", // Example profile pic
      imageAlt: "John Doe profile",      onProductClick: () => alert("Viewing John Doe's details"),
    },
    {
      id: "app-2",      name: "Jane Smith",      category: "Pending",      price: "$100",      rating: 3,
      reviewCount: "3 documents",      imageSrc: "https://images.unsplash.com/photo-1544005313-94ddf0286df2?auto=format&fit=crop&q=80&w=1780&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",      imageAlt: "Jane Smith profile",      onProductClick: () => alert("Viewing Jane Smith's details"),
    },
    {
      id: "app-3",      name: "Robert Brown",      category: "Paid",      price: "$100",      rating: 4,
      reviewCount: "4 documents",      imageSrc: "https://images.unsplash.com/photo-1507003211169-e69fe254fe58?auto=format&fit=crop&q=80&w=1887&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",      imageAlt: "Robert Brown profile",      onProductClick: () => alert("Viewing Robert Brown's details"),
    },
    {
      id: "app-4",      name: "Emily White",      category: "Rejected",      price: "$100",      rating: 1,
      reviewCount: "2 documents",      imageSrc: "https://images.unsplash.com/photo-1580489944761-15a19d654956?auto=format&fit=crop&q=80&w=1961&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",      imageAlt: "Emily White profile",      onProductClick: () => alert("Viewing Emily White's details"),
    },
    {
      id: "app-5",      name: "Michael Green",      category: "Paid",      price: "$100",      rating: 5,
      reviewCount: "6 documents",      imageSrc: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&q=80&w=1887&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",      imageAlt: "Michael Green profile",      onProductClick: () => alert("Viewing Michael Green's details"),
    },
  ], []);

  const filteredApplicants = useMemo(() => {
    return applicants.filter((applicant) => {
      const matchesSearch = applicant.name.toLowerCase().includes(searchTerm.toLowerCase());
      const matchesFilter = paymentFilter === "All" || applicant.category === paymentFilter;
      return matchesSearch && matchesFilter;
    });
  }, [applicants, searchTerm, paymentFilter]);

  const navItems = [
    { name: "Properties", id: "properties" },
    { name: "About", id: "about" },
    { name: "Services", id: "services" },
    { name: "Team", id: "team" },
    { name: "Testimonials", id: "testimonials" },
    { name: "Contact", id: "contact" },
    { name: "Admin Dashboard", id: "/admin-dashboard" }
  ];

  const footerColumns = [
    {
      title: "Company",      items: [
        { label: "About Us", href: "#about" },
        { label: "Our Services", href: "#services" },
        { label: "Executive Team", href: "#team" },
        { label: "Properties", href: "#properties" },
        { label: "Contact", href: "#contact" },
        { label: "Apply Now", href: "/application-form" },
        { label: "Admin Dashboard", href: "/admin-dashboard" }
      ]
    },
    {
      title: "Resources",      items: [
        { label: "Investment Guide", href: "#" },
        { label: "Market Reports", href: "#" },
        { label: "FAQ", href: "#" },
        { label: "Blog", href: "#" }
      ]
    },
    {
      title: "Legal",      items: [
        { label: "Privacy Policy", href: "#" },
        { label: "Terms of Service", href: "#" },
        { label: "Cookie Policy", href: "#" }
      ]
    },
    {
      title: "Connect",      items: [
        { label: "LinkedIn", href: "#" },
        { label: "Instagram", href: "#" },
        { label: "WhatsApp", href: "#" }
      ]
    }
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="mediumSmall"
      sizing="mediumLarge"
      background="none"
      cardStyle="glass-elevated"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="Luxe Properties"
          navItems={navItems}
          button={{ text: "Apply Now", href: "/application-form" }}
        />
      </div>

      <div className="relative isolate min-h-screen py-10 lg:py-16">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <h1 className="mb-8 text-4xl font-bold tracking-tight lg:text-5xl">Admin Dashboard</h1>
          <p className="mb-12 text-lg text-gray-600 dark:text-gray-400">
            Manage applicants, view documents, and track payment statuses.
          </p>

          <ProductCatalog
            layout="page"
            products={filteredApplicants}
            searchValue={searchTerm}
            onSearchChange={setSearchTerm}
            searchPlaceholder="Search applicants..."
            filters={[
              {
                label: "Payment Status",                options: ["All", "Paid", "Pending", "Rejected"],
                selected: paymentFilter,
                onChange: setPaymentFilter,
              },
            ]}
            emptyMessage="No applicants found matching your criteria."
            title="Applicant Overview"
            description="Browse and filter applicants by name or payment status."
            className="pb-10" // Add some padding to the bottom
          />
        </div>
      </div>

      <div id="footer" data-section="footer">
        <FooterSimple
          columns={footerColumns}
          bottomLeftText="© 2025 Luxe Properties Dubai. All rights reserved."
          bottomRightText="Luxury Real Estate Excellence"
        />
      </div>
    </ThemeProvider>
  );
}