SweetHome/app/profile/page.js

"use client";

import { useState, useEffect } from "react";
import { motion } from "framer-motion";
import { useRouter } from "next/navigation";
import Link from "next/link";
import { useTranslation } from "react-i18next";
import {
  User,
  Mail,
  Phone,
  MessageCircle,
  Check,
  X,
  ArrowLeft,
  Building,
  Home,
  Calendar,
  MapPin,
  Loader2,
  Pencil,
} from "lucide-react";
import toast, { Toaster } from "react-hot-toast";
import AuthService from "../services/AuthService";
import { getCustomerByUserId, getOwnerByUserId } from "../utils/api";

export default function ProfilePage() {
  const { t, i18n } = useTranslation();
  const router = useRouter();
  const [user, setUser] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  const [editingBio, setEditingBio] = useState(false);
  const [bioDraft, setBioDraft] = useState("");

  const [formData, setFormData] = useState({
    name: "",
    email: "",
    phone: "",
    whatsapp: "",
    bio: "",
    location: "",
    joinedDate: "",
  });

  const [avatarPreview, setAvatarPreview] = useState("");

  useEffect(() => {
    const authUser = AuthService.getUser();
    if (authUser) {
      const userData = {
        id: authUser.id,
        name: authUser.name || "",
        email: authUser.email || "",
        phone: authUser.phone || "",
        role: AuthService.isOwner() ? "owner" : "customer",
      };
      setUser(userData);

      async function fetchProfile() {
        try {
          const fetchFn =
            userData.role === "owner" ? getOwnerByUserId : getCustomerByUserId;
          const profile = await fetchFn(userData.id);

          if (profile) {
            const profileData = {
              name:
                profile.fullName ||
                profile.name ||
                `${profile.firstName || ""} ${profile.lastName || ""}`.trim() ||
                userData.name ||
                "",
              email: profile.email || userData.email || "",
              phone:
                profile.phone || profile.phoneNumber || userData.phone || "",
              whatsapp: profile.whatsAppNumber || profile.whatsapp || "",
              bio: profile.bio || "",
              location: profile.address || profile.location || "",
              joinedDate: profile.createdAt
                ? new Date(profile.createdAt).toLocaleDateString(i18n.language === 'ar' ? 'ar-SA' : 'en-US', {
                    month: "long",
                    year: "numeric",
                  })
                : new Date().toLocaleDateString(i18n.language === 'ar' ? 'ar-SA' : 'en-US', {
                    month: "long",
                    year: "numeric",
                  }),
            };
            setFormData(profileData);
            setBioDraft(profileData.bio);
            localStorage.setItem("userProfile", JSON.stringify(profileData));
            setIsLoading(false);
            return;
          }
        } catch (err) {
          // Ignore API errors and fall back to local data.
        }

        const savedProfile = localStorage.getItem("userProfile");
        let profileData;
        if (savedProfile) {
          profileData = JSON.parse(savedProfile);
        } else {
          profileData = {
            name: userData.name || "",
            email: userData.email || "",
            phone: "",
            whatsapp: "",
            bio: "",
            location: "",
            joinedDate: new Date().toLocaleDateString(i18n.language === 'ar' ? 'ar-SA' : 'en-US', {
              month: "long",
              year: "numeric",
            }),
          };
        }
        setFormData(profileData);
        setBioDraft(profileData.bio || "");
        setIsLoading(false);
      }

      const savedAvatar = localStorage.getItem("userAvatar");
      if (savedAvatar) {
        setAvatarPreview(savedAvatar);
      }

      fetchProfile();
    } else {
      router.push("/login");
    }
  }, [router]);

  const startBioEditing = () => {
    setBioDraft(formData.bio || "");
    setEditingBio(true);
  };

  const cancelBioEditing = () => {
    setBioDraft(formData.bio || "");
    setEditingBio(false);
  };

  const saveBio = () => {
    const updatedData = { ...formData, bio: bioDraft };
    setFormData(updatedData);
    localStorage.setItem("userProfile", JSON.stringify(updatedData));
    setEditingBio(false);
    toast.success(t('bio-updated-success'));
  };

  const fadeInUp = {
    initial: { opacity: 0, y: 20 },
    animate: { opacity: 1, y: 0 },
    transition: { duration: 0.5 },
  };

  if (isLoading) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <div className="text-center">
          <Loader2 className="w-12 h-12 text-amber-500 animate-spin mx-auto mb-4" />
          <p className="text-gray-600">{t('loading-profile')}</p>
        </div>
      </div>
    );
  }

  return (
    <div dir={i18n.language === 'ar' ? 'rtl' : 'ltr'} className="min-h-screen bg-gray-50 py-8">
      <Toaster position="top-center" reverseOrder={false} />

      <div className="container mx-auto px-4 max-w-4xl">
        <motion.div
          initial={{ opacity: 0, y: -20 }}
          animate={{ opacity: 1, y: 0 }}
          className="flex justify-between items-center mb-6"
        >
          <Link
            href="/"
            className="flex items-center gap-2 text-gray-600 hover:text-amber-600 transition-colors"
          >
            <ArrowLeft className="w-5 h-5" />
            <span>{t('backToHome')}</span>
          </Link>
        </motion.div>

        <motion.div
          variants={fadeInUp}
          initial="initial"
          animate="animate"
          className="bg-white rounded-3xl shadow-xl overflow-hidden"
        >
          <div className="h-48 bg-gradient-to-r from-amber-500 to-amber-600 relative overflow-hidden">
            <motion.div
              className="absolute inset-0 bg-white/10"
              animate={{
                x: ["-100%", "100%"],
              }}
              transition={{
                duration: 3,
                repeat: Infinity,
                ease: "linear",
              }}
            />
          </div>

          <div className="px-8 pb-8">
            <div className="flex justify-center -mt-16 mb-6">
              <div className="relative group">
                <div className="w-32 h-32 rounded-full border-4 border-white bg-gradient-to-br from-amber-500 to-amber-600 flex items-center justify-center text-white text-4xl font-bold shadow-xl overflow-hidden">
                  {avatarPreview ? (
                    <img
                      src={avatarPreview}
                      alt={formData.name}
                      className="w-full h-full object-cover"
                    />
                  ) : (
                    formData.name?.charAt(0).toUpperCase() || "U"
                  )}
                </div>
              </div>
            </div>

            <div className="text-center mb-6">
              <div className="flex items-center justify-center gap-2">
                <h1 className="text-3xl font-bold text-gray-900">
                  {formData.name}
                </h1>
              </div>

              <div className="flex items-center justify-center gap-2 text-gray-500 mt-2">
                <MapPin className="w-4 h-4" />
                <span>{formData.location || t('addressNotSpecified')}</span>
              </div>

              <div className="flex items-center justify-center gap-2 text-gray-500 mt-1">
                <Calendar className="w-4 h-4" />
                <span>                {t('member-since')} {formData.joinedDate}</span>
              </div>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div className="bg-gray-50 p-4 rounded-xl group">
                <div className="flex justify-between items-start mb-2">
                  <label className="text-sm font-medium text-gray-600">
                    {t('emailLabel')}
                  </label>
                </div>
                <div className="flex items-center gap-2 text-gray-900">
                  <Mail className="w-5 h-5 text-gray-400" />
                  <span>{formData.email}</span>
                </div>
              </div>

              <div className="bg-gray-50 p-4 rounded-xl group">
                <div className="flex justify-between items-start mb-2">
                  <label className="text-sm font-medium text-gray-600">
                    {t('phoneLabel')}
                  </label>
                </div>
                <div className="flex items-center gap-2 text-gray-900">
                  <Phone className="w-5 h-5 text-gray-400" />
                  <span>{formData.phone || t('not-specified')}</span>
                </div>
              </div>

              <div className="bg-gray-50 p-4 rounded-xl group">
                <div className="flex justify-between items-start mb-2">
                  <label className="text-sm font-medium text-gray-600">
                    {t('whatsapp-label')}
                  </label>
                </div>
                <div className="flex items-center gap-2 text-gray-900">
                  <MessageCircle className="w-5 h-5 text-gray-400" />
                  <span>{formData.whatsapp || t('not-specified')}</span>
                </div>
              </div>

              <div className="bg-gray-50 p-4 rounded-xl">
                  <label className="block text-sm font-medium text-gray-600 mb-2">
                    {t('account-type')}
                  </label>
                <div className="flex items-center gap-2">
                  {user?.role === "owner" ? (
                    <>
                      <Building className="w-5 h-5 text-amber-500" />
                      <span className="text-gray-900">{t('property-owner')}</span>
                    </>
                  ) : (
                    <>
                      <Home className="w-5 h-5 text-blue-500" />
                      <span className="text-gray-900">{t('customer')}</span>
                    </>
                  )}
                </div>
              </div>
            </div>
            {/* noo need for the descption of me on the profile*/}
            {/* <div className="mt-6 bg-gray-50 p-4 rounded-xl group">
              <div className="flex justify-between items-start mb-2">
                <label className="text-sm font-medium text-gray-600">
                  نبذة عني
                </label>
                {!editingBio && (
                  <button
                    onClick={startBioEditing}
                    className="opacity-0 group-hover:opacity-100 transition-opacity text-gray-400 hover:text-amber-500"
                  >
                    <Pencil className="w-4 h-4" />
                  </button>
                )}
              </div>

              {editingBio ? (
                <div className="space-y-2">
                  <textarea
                    value={bioDraft}
                    onChange={(e) => setBioDraft(e.target.value)}
                    rows="4"
                    autoFocus
                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-amber-500 focus:border-transparent"
                    placeholder="اكتب نبذة عن نفسك..."
                  />
                  <div className="flex justify-end gap-2">
                    <button
                      onClick={saveBio}
                      className="px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 flex items-center gap-2"
                    >
                      <Check className="w-4 h-4" />
                      حفظ
                    </button>
                    <button
                      onClick={cancelBioEditing}
                      className="px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 flex items-center gap-2"
                    >
                      <X className="w-4 h-4" />
                      إلغاء
                    </button>
                  </div>
                </div>
              ) : (
                <p className="text-gray-700 leading-relaxed">
                  {formData.bio || 'لا توجد نبذة تعريفية بعد'}
                </p>
              )}
            </div> */}

            {user?.role === "owner" && (
              <div className="grid grid-cols-3 gap-4 mt-6">
                <div className="bg-amber-50 p-4 rounded-xl text-center">
                  <div className="text-2xl font-bold text-amber-600">12</div>
                  <div className="text-xs text-gray-600">{t('propertiesListed')}</div>
                </div>
                <div className="bg-blue-50 p-4 rounded-xl text-center">
                  <div className="text-2xl font-bold text-blue-600">8</div>
                  <div className="text-xs text-gray-600">{t('citiesCovered')}</div>
                </div>
                <div className="bg-green-50 p-4 rounded-xl text-center">
                  <div className="text-2xl font-bold text-green-600">4.8</div>
                  <div className="text-xs text-gray-600">{t('customerSatisfaction')}</div>
                </div>
              </div>
            )}
          </div>
        </motion.div>
      </div>
    </div>
  );
}