"use client";
import LocalePath from "@/shared/LocalePath";
import ToggleNotifications from "@/components/profile/settings/ToggleNotifications";
import { useLocale } from "next-intl";
import { usePathname, useRouter } from "next/navigation";
import { UseMutate } from "@/hooks/UseMutate";
import Cookies from "js-cookie";
import UseSession from "@/hooks/UseSession";
import { useTranslations } from "next-intl";

export default function Settings() {
  const t = useTranslations();
  const locale = useLocale();
  const session = UseSession();

  const router = useRouter();
  const pathname = usePathname();
  const { mutate } = UseMutate({
    endpoint: "client/profile/settings",
    onSuccess() {},
    method: "PUT",
  });
  const setLanguage = async (locale: string) => {
    const lang = locale === "ar" ? "en" : "ar";
    await mutate({ locale: lang });

    Cookies.set("NEXT_LOCALE", lang);
    const url = new URL(window.location.href);
    const searchParams = url.search;
    let newPathname = pathname;
    if (newPathname.startsWith("/en")) {
      newPathname = `/${lang}/${newPathname.slice(3)}`;
    } else {
      newPathname = `/${lang}${newPathname}`;
    }
    router.push(`${newPathname}${searchParams}`);
  };
  return (
    <div className="container max-w-4xl">
      <h1 className="text-3xl md:text-4xl mb-6"> {t("NAV.settings")}</h1>
      <div className="space-y-4">
        <div className="border border-gray-200 rounded-2xl shadow-md shadow-black/10 bg-white p-6">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-4">
              <div className="w-12 h-12 bg-primary-light rounded-lg flex items-center justify-center">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  className="lucide lucide-globe *:stroke-primary"
                >
                  <circle cx="12" cy="12" r="10"></circle>
                  <path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"></path>
                  <path d="M2 12h20"></path>
                </svg>
              </div>
              <div>
                <h3 className="mb-1">{t("LABELS.lang")}</h3>
                <p className="text-sm text-text-secondary">
                  {t("LABELS.chooseLanguage")}
                </p>
              </div>
            </div>
            <div className="flex gap-2">
              <button
                onClick={() => setLanguage(locale)}
                className="px-4 py-2 rounded-lg transition-all duration-300 bg-primary text-white"
              >
                {session?.settings?.language === "ar" ? "English" : "العربية"}
              </button>
            </div>
          </div>
        </div>
        <ToggleNotifications />
        <div className="border border-gray-200 rounded-2xl shadow-md shadow-black/10 bg-white p-6">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-4">
              <div className="w-12 h-12 bg-[var(--info)]/20 rounded-lg flex items-center justify-center">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  className="lucide lucide-shield text-info"
                >
                  <path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"></path>
                </svg>
              </div>
              <div>
                <h3 className="mb-1">{t("LABELS.changePassword")}</h3>
                <p className="text-sm text-text-secondary">
                  {t("LABELS.updatePassword")}
                </p>
              </div>
            </div>
            <LocalePath
              href="/profile/change-password"
              className="bg-transparent border border-gray-200 text-text-primary text-base px-8 py-3.5 rounded-lg font-medium shadow-sm transition-all duration-300 flex items-center gap-2 group"
            >
              {t("BUTTONS.change")}
            </LocalePath>
          </div>
        </div>
      </div>
    </div>
  );
}