"use client";

import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import Link from "next/link";
import { Settings, MessageSquare } from "lucide-react";

export default function SettingsPage() {
  const navItems = [
    { name: "Home", href: "/" },
    { name: "Dashboard", href: "/dashboard" },
    { name: "Missions", href: "/missions" },
    { name: "Skill Tree", href: "/skill-tree" },
    { name: "Achievements", href: "/achievements" },
    { name: "Leaderboard", href: "/leaderboard" },
    { name: "Community", href: "/community" },
    { name: "Profile", href: "/profile" },
    { name: "Settings", href: "/settings" }
  ];

  const footerColumns = [
    {
      items: [
        { label: "Home", href: "/" },
        { label: "Dashboard", href: "/dashboard" },
        { label: "Missions", href: "/missions" }
      ]
    },
    {
      items: [
        { label: "Skill Tree", href: "/skill-tree" },
        { label: "Achievements", href: "/achievements" },
        { label: "Leaderboard", href: "/leaderboard" }
      ]
    },
    {
      items: [
        { label: "Community", href: "/community" },
        { label: "Profile", href: "/profile" },
        { label: "Settings", href: "/settings" }
      ]
    },
    {
      items: [
        { label: "Privacy Policy", href: "/privacy" },
        { label: "Terms of Service", href: "/terms" },
        { label: "Contact Us", href: "/contact" }
      ]
    }
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="mediumLarge"
      sizing="large"
      background="noiseDiagonalGradient"
      cardStyle="glass-elevated"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="layered"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="Creator Quest RPG"
          logoSrc="http://img.b2bpic.net/free-vector/gradient-metaverse-concept-labels_23-2149516151.jpg"
          logoAlt="Creator Quest RPG Logo"
          navItems={navItems}
          button={{
            text: "Sign Up",            href: "/register"
          }}
        />
      </div>

      <div id="settings-faq" data-section="settings-faq">
        <FaqSplitMedia
          faqs={[
            {
              id: "s_faq1",              title: "How do I change my password?",              content: "You can change your password from the 'Account Security' section within your Settings menu. You will need to verify your current password for security purposes."
            },
            {
              id: "s_faq2",              title: "Can I link/unlink social media accounts?",              content: "Yes, manage your connected social media platforms under 'Integrations'. Linking allows for follower tracking and mission verification."
            },
            {
              id: "s_faq3",              title: "What are my privacy options?",              content: "Access detailed privacy controls under the 'Privacy Settings' tab, allowing you to manage data sharing and profile visibility preferences."
            }
          ]}
          imageSrc="http://img.b2bpic.net/free-photo/multiethnic-secret-agents-discussing-isolated-mockup-display_482257-125698.jpg?_wi=2"
          imageAlt="Settings FAQ image"
          mediaAnimation="opacity"
          title="Account & Privacy Settings"
          description="Manage your Creator Quest RPG account, preferences, and privacy settings."
          tag="Account Management"
          tagIcon={Settings}
          faqsAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="contact-support" data-section="contact-support">
        <ContactSplit
          tag="Need Help?"
          title="Contact Support"
          description="If you have any issues or specific questions not covered in our FAQs, please reach out to our support team."
          tagIcon={MessageSquare}
          tagAnimation="slide-up"
          background={{ variant: "plain" }}
          useInvertedBackground={true}
          imageSrc="http://img.b2bpic.net/free-photo/person-using-laptop-keyboard_482257-85705.jpg"
          imageAlt="Contact Support image"
          mediaAnimation="opacity"
          inputPlaceholder="Enter your inquiry subject"
          buttonText="Send Message"
          termsText="By sending a message, you agree to our Support Policy."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoSrc="http://img.b2bpic.net/free-vector/gradient-metaverse-concept-labels_23-2149516151.jpg"
          logoAlt="Creator Quest RPG Logo"
          logoText="Creator Quest RPG"
          columns={footerColumns}
          useInvertedBackground={true}
        />
      </div>
    </ThemeProvider>
  );
}
