"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import FeatureCardTwentyFive from "@/components/sections/feature/FeatureCardTwentyFive";
import MetricCardSeven from "@/components/sections/metrics/MetricCardSeven";
import ContactCenter from "@/components/sections/contact/ContactCenter";
import FooterCard from "@/components/sections/footer/FooterCard";
import {
  UserX,
  Eye,
  FileText,
  Layers,
  Lock,
  Heart,
  MessageCircle,
  Globe,
  Mail,
} from "lucide-react";

export default function AdminPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="small"
      sizing="mediumLarge"
      background="none"
      cardStyle="outline"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="layered"
      headingFontWeight="extrabold"
    >
      {/* Navbar */}
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Bayat Al-Islam"
          navItems={[
            { name: "Home", id: "/" },
            { name: "Features", id: "/features" },
            { name: "Dashboard", id: "/admin" },
            { name: "Chat", id: "/chat" },
          ]}
          button={{ text: "Join Community", href: "/contact" }}
          animateOnLoad={true}
          className="shadow-lg backdrop-blur-sm"
        />
      </div>

      {/* Admin Controls Section */}
      <div id="admin" data-section="admin">
        <FeatureCardTwentyFive
          title="Advanced Admin Controls"
          description="Enterprise-grade moderation and community management tools"
          tag="Administration"
          tagIcon={Lock}
          tagAnimation="entrance-slide"
          features={[
            {
              title: "User Management",
              description:
                "Ban, kick, and manage members with detailed action logs. Track user history, warnings, and infractions across the platform.",
              icon: UserX,
              mediaItems: [
                {
                  imageSrc:
                    "http://img.b2bpic.net/free-photo/mobile-security-app_53876-98145.jpg?_wi=2",
                  imageAlt: "User moderation",
                },
                {
                  imageSrc:
                    "http://img.b2bpic.net/free-photo/luxurious-boardroom-space-within-multinational-company-used-meetings_482257-124520.jpg?_wi=3",
                  imageAlt: "User management interface",
                },
              ],
            },
            {
              title: "Content Moderation",
              description:
                "Advanced filtering, auto-moderation, and word filters. Flag inappropriate content and maintain community standards.",
              icon: Eye,
              mediaItems: [
                {
                  imageSrc:
                    "http://img.b2bpic.net/free-photo/modern-workspace-with-analytical-data-dashboards-displayed-devices_482257-126633.jpg?_wi=2",
                  imageAlt: "Content analysis",
                },
                {
                  imageSrc:
                    "http://img.b2bpic.net/free-photo/e-mail-global-communications-connection-social-networking-concept_53876-134026.jpg?_wi=2",
                  imageAlt: "Content filtering",
                },
              ],
            },
            {
              title: "Audit Logs",
              description:
                "Detailed logging of all administrative actions. Track who did what and when for complete transparency and accountability.",
              icon: FileText,
              mediaItems: [
                {
                  imageSrc:
                    "http://img.b2bpic.net/free-photo/luxurious-boardroom-space-within-multinational-company-used-meetings_482257-124520.jpg?_wi=4",
                  imageAlt: "Audit logs",
                },
                {
                  imageSrc:
                    "http://img.b2bpic.net/free-photo/modern-workspace-with-analytical-data-dashboards-displayed-devices_482257-126633.jpg?_wi=3",
                  imageAlt: "Activity tracking",
                },
              ],
            },
            {
              title: "Channel Control",
              description:
                "Create and organize channels by category. Set permissions, manage topics, and configure automated channels.",
              icon: Layers,
              mediaItems: [
                {
                  imageSrc:
                    "http://img.b2bpic.net/free-vector/image-upload-concept-landing-page_23-2148309692.jpg?_wi=2",
                  imageAlt: "Channel organization",
                },
                {
                  imageSrc:
                    "http://img.b2bpic.net/free-vector/flat-organizational-chart-infographic_23-2149016825.jpg?_wi=2",
                  imageAlt: "Permission management",
                },
              ],
            },
          ]}
          animationType="depth-3d"
          textboxLayout="default"
          useInvertedBackground={true}
          buttons={[{ text: "Access Dashboard", href: "/admin" }]}
        />
      </div>

      {/* Admin Metrics Section */}
      <div id="admin-metrics" data-section="admin-metrics">
        <MetricCardSeven
          title="Admin Dashboard Analytics"
          description="Real-time insights into community management and moderation effectiveness"
          tag="Administration"
          metrics={[
            {
              id: "1",
              value: "2,500+",
              title: "Moderation Actions This Month",
              items: [
                "500+ warnings issued",
                "150+ members banned",
                "1,200+ messages flagged",
              ],
            },
            {
              id: "2",
              value: "98%",
              title: "Community Satisfaction Rate",
              items: [
                "Positive member feedback",
                "Safe environment maintained",
                "Swift response to issues",
              ],
            },
            {
              id: "3",
              value: "50+",
              title: "Active Moderators",
              items: [
                "24/7 coverage across time zones",
                "Dedicated admin team",
                "Regular training programs",
              ],
            },
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      {/* CTA Section */}
      <div id="admin-cta" data-section="admin-cta">
        <ContactCenter
          tag="Ready to Manage?"
          tagIcon={Heart}
          title="Take Control of Your Community"
          description="Our admin dashboard gives you all the tools needed to manage a thriving, safe community. Monitor metrics, moderate content, and grow your platform with confidence."
          background={{ variant: "radial-gradient" }}
          useInvertedBackground={false}
          inputPlaceholder="Enter your email"
          buttonText="Get Admin Access"
          termsText="By requesting admin access, you agree to uphold our Community Guidelines. We'll review your request and provide training."
        />
      </div>

      {/* Footer */}
      <div id="footer" data-section="footer">
        <FooterCard
          logoText="Bayat Al-Islam"
          copyrightText="© 2025 Bayat Al-Islam Community. All rights reserved. Built with faith and inclusivity."
          socialLinks={[
            {
              icon: MessageCircle,
              href: "https://discord.gg/bayatalislamm",
              ariaLabel: "Discord Community",
            },
            {
              icon: Globe,
              href: "https://bayatalislamm.com",
              ariaLabel: "Official Website",
            },
            {
              icon: Mail,
              href: "mailto:info@bayatalislamm.com",
              ariaLabel: "Email Contact",
            },
          ]}
        />
      </div>
    </ThemeProvider>
  );
}