"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import { useParams } from "next/navigation";

import { FaUser, FaEnvelope, FaCamera, FaArrowLeft, FaSave, FaLock } from "react-icons/fa";

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

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

const translations = {
  en: {
    profile: "My Profile",
    profileDescription: "Manage your account information.",

    backAccount: "Back to Account",

    fullName: "Full Name",

    email: "Email",
    emailCannot: "Email cannot be changed here.",

    save: "Save Changes",
    saving: "Saving...",

    upload: "Uploading...",

    changePassword: "Change Password",
    passwordDescription: "Keep your account secure.",

    currentPassword: "Current Password",
    newPassword: "New Password",
    confirmPassword: "Confirm Password",

    minimumPassword: "Minimum 8 characters.",

    change: "Change Password",
    changing: "Changing...",

    profileUpdated: "Profile updated successfully.",

    avatarUpdated: "Avatar updated successfully.",

    passwordUpdated: "Password changed successfully.",

    loadError: "Unable to load profile.",

    updateError: "Unable to update profile.",

    avatarError: "Unable to upload avatar.",

    passwordError: "Unable to change password.",

    invalidImage: "Please select a valid image.",

    imageSize: "Avatar must be smaller than 5MB.",

    loading: "Loading profile...",
  },

  de: {
    profile: "Mein Profil",
    profileDescription: "Verwalten Sie Ihre Kontoinformationen.",

    backAccount: "Zurück zum Konto",

    fullName: "Vollständiger Name",

    email: "E-Mail",
    emailCannot: "Die E-Mail-Adresse kann hier nicht geändert werden.",

    save: "Änderungen speichern",
    saving: "Speichern...",

    upload: "Hochladen...",

    changePassword: "Passwort ändern",
    passwordDescription: "Halten Sie Ihr Konto sicher.",

    currentPassword: "Aktuelles Passwort",

    newPassword: "Neues Passwort",

    confirmPassword: "Passwort bestätigen",

    minimumPassword: "Mindestens 8 Zeichen.",

    change: "Passwort ändern",
    changing: "Wird geändert...",

    profileUpdated: "Profil erfolgreich aktualisiert.",

    avatarUpdated: "Profilbild erfolgreich aktualisiert.",

    passwordUpdated: "Passwort erfolgreich geändert.",

    loadError: "Profil konnte nicht geladen werden.",

    updateError: "Profil konnte nicht aktualisiert werden.",

    avatarError: "Profilbild konnte nicht hochgeladen werden.",

    passwordError: "Passwort konnte nicht geändert werden.",

    invalidImage: "Bitte wählen Sie ein gültiges Bild aus.",

    imageSize: "Das Profilbild darf nicht größer als 5 MB sein.",

    loading: "Profil wird geladen...",
  },

  ru: {
    profile: "Мой профиль",
    profileDescription: "Управляйте информацией своей учетной записи.",

    backAccount: "Вернуться к аккаунту",

    fullName: "Полное имя",

    email: "Электронная почта",

    emailCannot: "Электронную почту нельзя изменить здесь.",

    save: "Сохранить изменения",

    saving: "Сохранение...",

    upload: "Загрузка...",

    changePassword: "Изменить пароль",

    passwordDescription: "Защитите свою учетную запись.",

    currentPassword: "Текущий пароль",

    newPassword: "Новый пароль",

    confirmPassword: "Подтвердите пароль",

    minimumPassword: "Минимум 8 символов.",

    change: "Изменить пароль",

    changing: "Изменение...",

    profileUpdated: "Профиль успешно обновлен.",

    avatarUpdated: "Изображение профиля успешно обновлено.",

    passwordUpdated: "Пароль успешно изменен.",

    loadError: "Не удалось загрузить профиль.",

    updateError: "Не удалось обновить профиль.",

    avatarError: "Не удалось загрузить изображение профиля.",

    passwordError: "Не удалось изменить пароль.",

    invalidImage: "Выберите допустимое изображение.",

    imageSize: "Размер изображения не должен превышать 5 МБ.",

    loading: "Загрузка профиля...",
  },

  ar: {
    profile: "ملفي الشخصي",

    profileDescription: "إدارة معلومات حسابك.",

    backAccount: "العودة إلى الحساب",

    fullName: "الاسم الكامل",

    email: "البريد الإلكتروني",

    emailCannot: "لا يمكن تغيير البريد الإلكتروني من هنا.",

    save: "حفظ التغييرات",

    saving: "جارٍ الحفظ...",

    upload: "جارٍ الرفع...",

    changePassword: "تغيير كلمة المرور",

    passwordDescription: "حافظ على أمان حسابك.",

    currentPassword: "كلمة المرور الحالية",

    newPassword: "كلمة المرور الجديدة",

    confirmPassword: "تأكيد كلمة المرور",

    minimumPassword: "8 أحرف على الأقل.",

    change: "تغيير كلمة المرور",

    changing: "جارٍ التغيير...",

    profileUpdated: "تم تحديث الملف الشخصي بنجاح.",

    avatarUpdated: "تم تحديث صورة الملف الشخصي بنجاح.",

    passwordUpdated: "تم تغيير كلمة المرور بنجاح.",

    loadError: "تعذر تحميل الملف الشخصي.",

    updateError: "تعذر تحديث الملف الشخصي.",

    avatarError: "تعذر رفع صورة الملف الشخصي.",

    passwordError: "تعذر تغيير كلمة المرور.",

    invalidImage: "يرجى اختيار صورة صالحة.",

    imageSize: "يجب ألا يتجاوز حجم الصورة 5 ميجابايت.",

    loading: "جارٍ تحميل الملف الشخصي...",
  },
};

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

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

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

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

  const isRTL = locale === "ar";

  /* ===================================================
     STATE
  =================================================== */

  const [user, setUser] = useState(null);

  const [name, setName] = useState("");

  const [avatar, setAvatar] = useState("");

  const [loading, setLoading] = useState(true);

  const [saving, setSaving] = useState(false);

  const [uploadingAvatar, setUploadingAvatar] = useState(false);

  const [error, setError] = useState("");

  const [success, setSuccess] = useState("");

  /* ===================================================
     LOAD PROFILE
  =================================================== */

  useEffect(() => {
    async function loadProfile() {
      try {
        setLoading(true);
        setError("");

        const response = await fetch("/api/account/profile", {
          method: "GET",
          cache: "no-store",
        });

        const data = await response.json();

        if (!response.ok) {
          throw new Error(data.message || t.loadError);
        }

        setUser(data.user);

        setName(data.user?.name || "");

        setAvatar(data.user?.avatar || "");
      } catch (error) {
        console.error("PROFILE LOAD ERROR:", error);

        setError(error.message || t.loadError);
      } finally {
        setLoading(false);
      }
    }

    loadProfile();
  }, [t.loadError]);

  /* ===================================================
     SAVE PROFILE
  =================================================== */

  async function handleSubmit(event) {
    event.preventDefault();

    setSaving(true);
    setError("");
    setSuccess("");

    try {
      const response = await fetch("/api/account/profile", {
        method: "PUT",

        headers: {
          "Content-Type": "application/json",
        },

        body: JSON.stringify({
          name: name.trim(),
          avatar,
        }),
      });

      const data = await response.json();

      if (!response.ok) {
        throw new Error(data.message || t.updateError);
      }

      setUser(data.user);

      setName(data.user?.name || "");

      setAvatar(data.user?.avatar || "");

      setSuccess(t.profileUpdated);
    } catch (error) {
      console.error("PROFILE SAVE ERROR:", error);

      setError(error.message || t.updateError);
    } finally {
      setSaving(false);
    }
  }

  /* ===================================================
     AVATAR UPLOAD
  =================================================== */

  async function handleAvatarUpload(event) {
    const file = event.target.files?.[0];

    if (!file) {
      return;
    }

    const allowedTypes = ["image/jpeg", "image/png", "image/webp", "image/gif", "image/avif"];

    if (!allowedTypes.includes(file.type)) {
      setError(t.invalidImage);

      event.target.value = "";

      return;
    }

    if (file.size > 5 * 1024 * 1024) {
      setError(t.imageSize);

      event.target.value = "";

      return;
    }

    setUploadingAvatar(true);
    setError("");
    setSuccess("");

    try {
      const formData = new FormData();

      formData.append("avatar", file);

      const response = await fetch("/api/account/profile/avatar", {
        method: "POST",
        body: formData,
      });

      const data = await response.json();

      if (!response.ok) {
        throw new Error(data.message || t.avatarError);
      }

      setAvatar(data.avatar);

      setUser((previous) => ({
        ...(previous || {}),
        avatar: data.avatar,
      }));

      setSuccess(t.avatarUpdated);
    } catch (error) {
      console.error("AVATAR UPLOAD ERROR:", error);

      setError(error.message || t.avatarError);
    } finally {
      setUploadingAvatar(false);

      event.target.value = "";
    }
  }

  /* ===================================================
     LOADING
  =================================================== */

  if (loading) {
    return (
      <div
        dir={isRTL ? "rtl" : "ltr"}
        className="
          min-h-screen
          bg-black
          text-white
        "
      >
        <Navbar locale={locale} />

        <main
          className="
            min-h-[70vh]
            px-4
            py-12
            sm:px-6
            sm:py-20
          "
        >
          <div
            className="
              mx-auto
              max-w-4xl
            "
          >
            <div
              className="
                animate-pulse
                rounded-2xl
                border
                border-gray-800
                bg-[#111111]
                p-8
                text-gray-500
              "
            >
              {t.loading}
            </div>
          </div>
        </main>

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

  /* ===================================================
     RENDER
  =================================================== */

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

      <Navbar locale={locale} />

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

      <main
        className="
          min-h-[70vh]
          px-4
          py-10
          sm:px-6
          w-full
          sm:py-16
        "
      >
        <div
          className="
            mx-auto
            px-6 pb-20 md:px-16
          "
        >
          {/* =================================================
              HEADER
          ================================================= */}

          <div
            className="
              mb-8
              flex
              flex-col
              gap-4
              sm:flex-row
              sm:items-center
              sm:justify-between
            "
          >
            <div>
              <h1
                className="
                  text-3xl
                  font-light
                  text-white
                  sm:text-4xl
                "
              >
                {t.profile}
              </h1>

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

            <Link
              href={`/${locale}/account`}
              className="
                inline-flex
                w-fit
                items-center
                gap-2
                rounded-lg
                border
                border-gray-800
                px-4
                py-2
                text-sm
                text-gray-400
                transition
                duration-300
                hover:border-[#c9a46c]
                hover:text-[#c9a46c]
              "
            >
              <FaArrowLeft size={13} />

              {t.backAccount}
            </Link>
          </div>

          {/* =================================================
              ERROR
          ================================================= */}

          {error && (
            <div
              className="
                mb-6
                rounded-xl
                border
                border-red-900
                bg-red-500/10
                px-5
                py-4
                text-sm
                text-red-400
              "
            >
              {error}
            </div>
          )}

          {/* =================================================
              SUCCESS
          ================================================= */}

          {success && (
            <div
              className="
                mb-6
                rounded-xl
                border
                border-green-900
                bg-green-500/10
                px-5
                py-4
                text-sm
                text-green-400
              "
            >
              {success}
            </div>
          )}

          {/* =================================================
              PROFILE CARD
          ================================================= */}

          <div
            className="
              overflow-hidden
              rounded-2xl
              border
              border-gray-800
              bg-[#111111]
            "
          >
            {/* =================================================
                PROFILE HEADER
            ================================================= */}

            <div
              className="
                border-b
                border-gray-800
                p-6
                sm:p-8
              "
            >
              <div
                className="
                  flex
                  flex-col
                  gap-6
                  sm:flex-row
                  sm:items-center
                "
              >
                {/* =================================================
                    AVATAR
                ================================================= */}

                <div
                  className="
                    relative
                    h-28
                    w-28
                    shrink-0
                  "
                >
                  {avatar ? (
                    <img
                      src={avatar}
                      alt={user?.name || "Profile"}
                      className="
                        h-28
                        w-28
                        rounded-full
                        border
                        border-gray-700
                        bg-gray-900
                        object-cover
                      "
                    />
                  ) : (
                    <div
                      className="
                        flex
                        h-28
                        w-28
                        items-center
                        justify-center
                        rounded-full
                        border
                        border-gray-700
                        bg-gray-900
                        text-gray-500
                      "
                    >
                      <FaUser size={38} />
                    </div>
                  )}

                  {/* UPLOAD */}

                  <label
                    className={`
                      absolute
                      bottom-0
                      right-0
                      flex
                      h-9
                      w-9
                      items-center
                      justify-center
                      rounded-full
                      border
                      border-gray-800
                      bg-[#c9a46c]
                      text-black
                      transition
                      duration-300
                      ${
                        uploadingAvatar
                          ? "cursor-not-allowed opacity-50"
                          : "cursor-pointer hover:bg-[#b58e57]"
                      }
                    `}
                  >
                    <FaCamera size={14} />

                    <input
                      type="file"
                      accept="
                        image/jpeg,
                        image/png,
                        image/webp,
                        image/gif,
                        image/avif
                      "
                      className="hidden"
                      disabled={uploadingAvatar}
                      onChange={handleAvatarUpload}
                    />
                  </label>

                  {uploadingAvatar && (
                    <div
                      className="
                        absolute
                        inset-0
                        flex
                        items-center
                        justify-center
                        rounded-full
                        bg-black/70
                        text-xs
                        text-white
                      "
                    >
                      {t.upload}
                    </div>
                  )}
                </div>

                {/* =================================================
                    USER INFO
                ================================================= */}

                <div>
                  <h2
                    className="
                      text-2xl
                      font-semibold
                      text-white
                    "
                  >
                    {user?.name}
                  </h2>

                  <p
                    className="
                      mt-1
                      text-gray-500
                    "
                  >
                    {user?.email}
                  </p>

                  {user?.role && (
                    <span
                      className="
                        mt-3
                        inline-block
                        rounded-full
                        bg-[#c9a46c]/10
                        px-3
                        py-1
                        text-xs
                        uppercase
                        tracking-wider
                        text-[#c9a46c]
                      "
                    >
                      {user.role}
                    </span>
                  )}
                </div>
              </div>
            </div>

            {/* =================================================
                PROFILE FORM
            ================================================= */}

            <form
              onSubmit={handleSubmit}
              className="
                p-6
                sm:p-8
              "
            >
              <div
                className="
                  grid
                  gap-6
                  md:grid-cols-2
                "
              >
                {/* =================================================
                    NAME
                ================================================= */}

                <div>
                  <label
                    className="
                      mb-2
                      block
                      text-sm
                      text-gray-400
                    "
                  >
                    {t.fullName}
                  </label>

                  <div
                    className="
                      relative
                    "
                  >
                    <FaUser
                      className={`
                        absolute
                        top-1/2
                        -translate-y-1/2
                        text-gray-600
                        ${isRTL ? "right-4" : "left-4"}
                      `}
                      size={15}
                    />

                    <input
                      type="text"
                      value={name}
                      onChange={(event) => setName(event.target.value)}
                      maxLength={100}
                      autoComplete="name"
                      className={`
                        h-12
                        w-full
                        rounded-lg
                        border
                        border-gray-700
                        bg-black
                        text-white
                        outline-none
                        transition
                        duration-300
                        focus:border-[#c9a46c]
                        ${isRTL ? "pr-11 pl-4" : "pl-11 pr-4"}
                      `}
                    />
                  </div>
                </div>

                {/* =================================================
                    EMAIL
                ================================================= */}

                <div>
                  <label
                    className="
                      mb-2
                      block
                      text-sm
                      text-gray-400
                    "
                  >
                    {t.email}
                  </label>

                  <div
                    className="
                      relative
                    "
                  >
                    <FaEnvelope
                      className={`
                        absolute
                        top-1/2
                        -translate-y-1/2
                        text-gray-600
                        ${isRTL ? "right-4" : "left-4"}
                      `}
                      size={15}
                    />

                    <input
                      type="email"
                      value={user?.email || ""}
                      disabled
                      className={`
                        h-12
                        w-full
                        cursor-not-allowed
                        rounded-lg
                        border
                        border-gray-800
                        bg-gray-900
                        text-gray-500
                        ${isRTL ? "pr-11 pl-4" : "pl-11 pr-4"}
                      `}
                    />
                  </div>

                  <p
                    className="
                      mt-2
                      text-xs
                      text-gray-600
                    "
                  >
                    {t.emailCannot}
                  </p>
                </div>
              </div>

              {/* =================================================
                  SAVE
              ================================================= */}

              <div
                className={`
                  mt-8
                  flex
                  ${isRTL ? "justify-start" : "justify-end"}
                `}
              >
                <button
                  type="submit"
                  disabled={saving || uploadingAvatar}
                  className="
                    flex
                    h-12
                    items-center
                    gap-2
                    rounded-lg
                    bg-gold
                    px-6
                    font-semibold
                    text-black
                    transition
                    duration-300
                    hover:bg-[#b58e57]
                    disabled:cursor-not-allowed
                    disabled:opacity-50
                  "
                >
                  <FaSave size={15} />

                  {saving ? t.saving : t.save}
                </button>
              </div>
            </form>
          </div>

          {/* =================================================
              CHANGE PASSWORD
          ================================================= */}

          <ChangePassword t={t} isRTL={isRTL} />
        </div>
      </main>

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

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

/* =====================================================
   CHANGE PASSWORD
===================================================== */

function ChangePassword({ t, isRTL }) {
  const [currentPassword, setCurrentPassword] = useState("");

  const [newPassword, setNewPassword] = useState("");

  const [confirmPassword, setConfirmPassword] = useState("");

  const [passwordLoading, setPasswordLoading] = useState(false);

  const [passwordError, setPasswordError] = useState("");

  const [passwordSuccess, setPasswordSuccess] = useState("");

  async function handlePasswordSubmit(event) {
    event.preventDefault();

    setPasswordLoading(true);
    setPasswordError("");
    setPasswordSuccess("");

    if (newPassword.length < 8) {
      setPasswordError(t.minimumPassword);

      setPasswordLoading(false);

      return;
    }

    if (newPassword !== confirmPassword) {
      setPasswordError(t.confirmPassword);

      setPasswordLoading(false);

      return;
    }

    try {
      const response = await fetch("/api/account/profile/password", {
        method: "PUT",

        headers: {
          "Content-Type": "application/json",
        },

        body: JSON.stringify({
          currentPassword,
          newPassword,
          confirmPassword,
        }),
      });

      const data = await response.json();

      if (!response.ok) {
        throw new Error(data.message || t.passwordError);
      }

      setCurrentPassword("");
      setNewPassword("");
      setConfirmPassword("");

      setPasswordSuccess(t.passwordUpdated);
    } catch (error) {
      console.error("CHANGE PASSWORD ERROR:", error);

      setPasswordError(error.message || t.passwordError);
    } finally {
      setPasswordLoading(false);
    }
  }

  return (
    <section
      className="
        mt-8
        overflow-hidden
        rounded-2xl
        border
        border-gray-800
        bg-[#111111]
      "
    >
      {/* =================================================
          HEADER
      ================================================= */}

      <div
        className="
          border-b
          border-gray-800
          p-6
          sm:p-8
        "
      >
        <div
          className="
            flex
            items-center
            gap-4
          "
        >
          <div
            className="
              flex
              h-11
              w-11
              shrink-0
              items-center
              justify-center
              rounded-lg
              border
              border-gray-700
              bg-gray-900
              text-[#c9a46c]
            "
          >
            <FaLock size={18} />
          </div>

          <div>
            <h2
              className="
                text-xl
                font-semibold
                text-white
              "
            >
              {t.changePassword}
            </h2>

            <p
              className="
                mt-1
                text-sm
                text-gray-500
              "
            >
              {t.passwordDescription}
            </p>
          </div>
        </div>
      </div>

      {/* =================================================
          FORM
      ================================================= */}

      <form
        onSubmit={handlePasswordSubmit}
        className="
          p-6
          sm:p-8
        "
      >
        {passwordError && (
          <div
            className="
              mb-6
              rounded-lg
              border
              border-red-900
              bg-red-500/10
              p-4
              text-sm
              text-red-400
            "
          >
            {passwordError}
          </div>
        )}

        {passwordSuccess && (
          <div
            className="
              mb-6
              rounded-lg
              border
              border-green-900
              bg-green-500/10
              p-4
              text-sm
              text-green-400
            "
          >
            {passwordSuccess}
          </div>
        )}

        <div
          className="
            grid
            gap-5
            md:grid-cols-2
          "
        >
          {/* CURRENT PASSWORD */}

          <div
            className="
              md:col-span-2
            "
          >
            <label
              className="
                mb-2
                block
                text-sm
                text-gray-400
              "
            >
              {t.currentPassword}
            </label>

            <input
              type="password"
              value={currentPassword}
              onChange={(event) => setCurrentPassword(event.target.value)}
              autoComplete="current-password"
              className="
                h-12
                w-full
                rounded-lg
                border
                border-gray-700
                bg-black
                px-4
                text-white
                outline-none
                transition
                duration-300
                focus:border-[#c9a46c]
              "
            />
          </div>

          {/* NEW PASSWORD */}

          <div>
            <label
              className="
                mb-2
                block
                text-sm
                text-gray-400
              "
            >
              {t.newPassword}
            </label>

            <input
              type="password"
              value={newPassword}
              onChange={(event) => setNewPassword(event.target.value)}
              autoComplete="new-password"
              minLength={8}
              maxLength={128}
              className="
                h-12
                w-full
                rounded-lg
                border
                border-gray-700
                bg-black
                px-4
                text-white
                outline-none
                transition
                duration-300
                focus:border-[#c9a46c]
              "
            />

            <p
              className="
                mt-2
                text-xs
                text-gray-600
              "
            >
              {t.minimumPassword}
            </p>
          </div>

          {/* CONFIRM PASSWORD */}

          <div>
            <label
              className="
                mb-2
                block
                text-sm
                text-gray-400
              "
            >
              {t.confirmPassword}
            </label>

            <input
              type="password"
              value={confirmPassword}
              onChange={(event) => setConfirmPassword(event.target.value)}
              autoComplete="new-password"
              minLength={8}
              maxLength={128}
              className="
                h-12
                w-full
                rounded-lg
                border
                border-gray-700
                bg-black
                px-4
                text-white
                outline-none
                transition
                duration-300
                focus:border-[#c9a46c]
              "
            />
          </div>
        </div>

        {/* SUBMIT */}

        <div
          className={`
            mt-8
            flex
            ${isRTL ? "justify-start" : "justify-end"}
          `}
        >
          <button
            type="submit"
            disabled={passwordLoading}
            className="
              flex
              h-12
              items-center
              gap-2
              rounded-lg
              bg-gold
              px-6
              font-semibold
              text-black
              transition
              duration-300
              hover:bg-[#b58e57]
              disabled:cursor-not-allowed
              disabled:opacity-50
            "
          >
            <FaLock size={14} />

            {passwordLoading ? t.changing : t.change}
          </button>
        </div>
      </form>
    </section>
  );
}