"use client";

import Link from "next/link";
import { useParams } from "next/navigation";

import { FaUser, FaHeart, FaArrowLeft } from "react-icons/fa";

import Navbar from "@/components/Navbar/Navbar";
import Footer from "@/components/Footer";

/* =====================================================
   TRANSLATIONS
===================================================== */

const translations = {
  en: {
    account: "My Account",
    welcome: "Welcome to your account.",
    profile: "Profile",
    profileDescription: "Manage your profile information.",
    wishlist: "Wishlist",
    wishlistDescription: "View your saved products.",
    backHome: "Back to Home",
  },

  de: {
    account: "Mein Konto",
    welcome: "Willkommen in Ihrem Konto.",
    profile: "Profil",
    profileDescription: "Verwalten Sie Ihre Profilinformationen.",
    wishlist: "Wunschliste",
    wishlistDescription: "Sehen Sie sich Ihre gespeicherten Produkte an.",
    backHome: "Zurück zur Startseite",
  },

  ru: {
    account: "Мой аккаунт",
    welcome: "Добро пожаловать в ваш аккаунт.",
    profile: "Профиль",
    profileDescription: "Управляйте информацией своего профиля.",
    wishlist: "Избранное",
    wishlistDescription: "Просматривайте сохранённые товары.",
    backHome: "Вернуться на главную",
  },

  ar: {
    account: "حسابي",
    welcome: "مرحبًا بك في حسابك.",
    profile: "الملف الشخصي",
    profileDescription: "إدارة معلومات ملفك الشخصي.",
    wishlist: "المفضلة",
    wishlistDescription: "عرض المنتجات المحفوظة.",
    backHome: "العودة إلى الصفحة الرئيسية",
  },
};

/* =====================================================
   PAGE
===================================================== */

export default function AccountPage() {
  const params = useParams();

  const locale = params?.locale || "en";

  const t = translations[locale] || translations.en;

  const isRTL = locale === "ar";

  return (
    <div
      dir={isRTL ? "rtl" : "ltr"}
      className="
        min-h-screen
        bg-black
        text-white
        
      "
    >
      {/* =================================================
          NAVBAR
      ================================================= */}

      <Navbar locale={locale} />

      {/* =================================================
          MAIN
      ================================================= */}

      <main
        className="
          min-h-[70vh]
       w-full
          sm:px-6
          sm:py-20
           mt-10
            mx-auto px-6 py-16

            mt-40
        "
      >
        <div
          className="
              px-6 pb-20 md:px-16
          "
        >
          {/* =================================================
              HEADER
          ================================================= */}

          <div
            className="
              mb-8
            "
          >
            <h1
              className="
                text-3xl
                font-semibold
                text-white
                sm:text-4xl
              "
            >
              {t.account}
            </h1>

            <p
              className="
                mt-3
                text-gray-400
              "
            >
              {t.welcome}
            </p>
          </div>

          {/* =================================================
              ACCOUNT CARD
          ================================================= */}

          <div
            className="
              rounded-2xl
              border
              border-gray-800
              bg-gray
              p-6
              sm:p-8
            "
          >
            <div
              className="
                grid
                gap-4
                sm:grid-cols-2
                lg:grid-cols-3
              "
            >
              {/* =================================================
                  PROFILE
              ================================================= */}

              <Link
                href={`/${locale}/account/profile`}
                className="
                  group
                  rounded-xl
                  border
                  border-gray-800
                  bg-gold
                  p-6
                  transition
                  duration-300
                  hover:border-[#c9a46c]
                  hover:bg-dark
                "
              >
                <div
                  className="
                    flex
                    h-11
                    w-11
                    items-center
                    justify-center
                    rounded-lg
                    bg-black
                    text-[#c9a46c]
                    transition
                    group-hover:bg-gold
                    group-hover:text-black
                  "
                >
                  <FaUser size={18} />
                </div>

                <h2
                  className="
                    mt-5
                    text-lg
                    font-semibold
                    text-white
                  "
                >
                  {t.profile}
                </h2>

                <p
                  className="
                    mt-2
                    text-sm
                    leading-6
                    text-gray-500
                  "
                >
                  {t.profileDescription}
                </p>
              </Link>

              {/* =================================================
                  WISHLIST
              ================================================= */}

              <Link
                href={`/${locale}/account/wishlist`}
                className="
                  group
                  rounded-xl
                  border
                  border-gray-800
                  bg-gold
                  p-6
                  transition
                  duration-300
                  hover:border-gold
                  hover:bg-dark
                "
              >
                <div
                  className="
                    flex
                    h-11
                    w-11
                    items-center
                    justify-center
                    rounded-lg
                    bg-black
                    text-[#c9a46c]
                    transition
                    group-hover:bg-gold
                    group-hover:text-black
                  "
                >
                  <FaHeart size={18} />
                </div>

                <h2
                  className="
                    mt-5
                    text-lg
                    font-semibold
                    text-white
                  "
                >
                  {t.wishlist}
                </h2>

                <p
                  className="
                    mt-2
                    text-sm
                    leading-6
                    text-gray-500
                  "
                >
                  {t.wishlistDescription}
                </p>
              </Link>
            </div>

            {/* =================================================
                BACK HOME
            ================================================= */}

            <div
              className="
                mt-8
                border-t
                border-gray-800
                pt-8
              "
            >
              <Link
                href={`/${locale}`}
                className="
                  inline-flex
                  items-center
                  gap-2
                  rounded-lg
                  bg-gold
                  px-6
                  py-3
                  font-semibold
                  text-black
                  transition
                  duration-300
                  hover:bg-[#b48f58]
                "
              >
                <FaArrowLeft size={14} />

                {t.backHome}
              </Link>
            </div>
          </div>
        </div>
      </main>

      {/* =================================================
          FOOTER
      ================================================= */}

      <Footer locale={locale} />
    </div>
  );
}