"use client";
import ChangePassword from "@/app/(user)/account-settings/ChangePassword";
import NotificationSettings from "@/app/(user)/account-settings/NotificationSettings";
import TwoFactorAuth from "@/app/(user)/account-settings/TwoFactorAuth";
import DeleteAccount from "@/app/(user)/account-settings/DeleteAccount";
import SocialMediaAccounts from "@/app/(user)/account-settings/SocialMediaAccounts";
import React, { useState, useEffect, useRef } from "react";
import { IoIosArrowDown, IoIosArrowForward } from "react-icons/io";
import { getAccountSettings } from "@/lib/actions/accountSettingsActions";
import { useAppSelector, useAppDispatch } from "@/app/store/hooks";
import { toast } from "react-toastify";
import { useTranslations } from "next-intl";
import MobilePageHeader from "@/components/common/MobilePageHeader";
import { useRouter } from "next/navigation";
import { checkAuthErrorGet } from "@/lib/checkAuthError";
import Link from "next/link";
import { ChevronDown } from "lucide-react";
import AccountDropdown from "@/components/common/AccountDropdown";

const AccountSettings = () => {
  const t = useTranslations();
  const { user } = useAppSelector((state) => state?.auth);
  const token = user?.token;
  const router = useRouter();
  const [activeIndex, setActiveIndex] = useState(0);
  const [settings, setSettings] = useState<any>(null);
  const dispatch = useAppDispatch();

  useEffect(() => {
    if (!token) {
      router.replace("/login");
    }
  }, [token, router]);

  useEffect(() => {
    async function fetchSettings() {
      try {
        const data = await getAccountSettings(token);
        setSettings(data?.data || {});
      } catch (err: any) {
        if (checkAuthErrorGet(err, dispatch, router)) return;
        toast.error(t("account_settings.fetch_error"));
      }
    }
    if (token) fetchSettings();
  }, [token]);

  const items = [
    {
      title: t("account_settings.change_password.title"),
      content: <ChangePassword />,
    },
    {
      title: t("account_settings.notification_settings.title"),
      content: (
        <NotificationSettings
          settings={settings?.notification_settings}
          token={token}
        />
      ),
    },
    // {
    //   title: t("account_settings.social_media_accounts.title"),
    //   content: (
    //     <SocialMediaAccounts
    //       accounts={settings?.social_media_accounts}
    //       token={token}
    //     />
    //   ),
    // },
  ];

  const handleBack = () => {
    window.history.back();
  };


const [isOpen, setIsOpen] = useState(false);
  const dropdownRef = useRef<HTMLDivElement>(null);

  // Close on outside click
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
        setIsOpen(false);
      }
    };

    document.addEventListener('mousedown', handleClickOutside);
    return () => document.removeEventListener('mousedown', handleClickOutside);
  }, []);
  return (
    <>
      <MobilePageHeader
        title={t("account_settings.title")}
        onBack={handleBack}
       
      />
      <main className="flex-1 max-md:px-0">
        <div className="flex items-center justify-between gap-2 pb-6 max-md:hidden">
          <h1 className="text-lg font-semibold text-neutrals900 dark:text-white">
            {t("account_settings.title")}
          </h1>

          <AccountDropdown t={t} />
        </div>


        <div>
          {items.map((item, i) => (
            <div
              key={i}
              className={`mb-5 ${activeIndex === i ? "shadow-Shadow3" : ""}`}
            >
              <button
                onClick={() => setActiveIndex(i === activeIndex ? -1 : i)}
                className={`w-full flex justify-between items-center text-neutrals800 px-4 py-3 border-b border-neutrals100 text-left font-semibold dark:border-darkborder dark:text-neutrals400  ${
                  activeIndex === i
                    ? "active bg-neutrals100 border-hidden text-primary500 dark:bg-cardfooter dark:text-white"
                    : ""
                }`}
                aria-label="title"
              >
                {item.title}
                <span
                  className={`text-neutrals500 rtl:rotate-180 ${
                    activeIndex === i
                      ? " text-primary500 dark:text-primary400 rtl:rotate-180"
                      : ""
                  }`}
                >
                  {activeIndex === i ? (
                    <IoIosArrowDown className="rtl:rotate-180" />
                  ) : (
                    <IoIosArrowForward />
                  )}
                </span>
              </button>
              {activeIndex === i && <div>{item.content}</div>}
            </div>
          ))}
        </div>
        <TwoFactorAuth
          twofa={settings?.two_factor_authentication}
          token={token}
        />
        
        <div className="delete-account">
          <DeleteAccount />
        </div>
        
      </main>
    </>
  );
};

export default AccountSettings;