frontend/src/components/settings/ProfileSettingsForm.tsx

'use client';

import { useState, useRef, useEffect } from 'react';
import Image from 'next/image';
import { useSession, signIn } from 'next-auth/react';
import { uploadService } from '@/services/upload.service';
import { agentsService } from '@/services/agents.service';
import { usersService } from '@/services/users.service';
import { authService, AuthService } from '@/services/auth.service';

interface ProfileSettingsFormProps {
  initialData?: {
    firstName: string;
    lastName: string;
    career: string;
    email: string;
    phone: string;
    avatar?: string;
  };
  onSave?: (data: {
    firstName: string;
    lastName: string;
    career: string;
    email: string;
    phone: string;
  }) => void;
  descriptionText?: string;
}

export function ProfileSettingsForm({
  initialData,
  onSave,
  descriptionText = 'This information will be displayed on your public profile page.',
}: ProfileSettingsFormProps) {
  const { data: session, update: updateSession } = useSession();
  const fileInputRef = useRef<HTMLInputElement>(null);

  const [formData, setFormData] = useState({
    firstName: initialData?.firstName || '',
    lastName: initialData?.lastName || '',
    career: initialData?.career || '',
    email: initialData?.email || '',
    phone: initialData?.phone || '',
  });

  const [avatarUrl, setAvatarUrl] = useState<string | null>(null);
  const [avatarLoaded, setAvatarLoaded] = useState(false);
  const [isUploading, setIsUploading] = useState(false);
  const [uploadProgress, setUploadProgress] = useState(0);
  const [isLoading, setIsLoading] = useState(true);
  const [isSaving, setIsSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [successMessage, setSuccessMessage] = useState<string | null>(null);
  const [isEmailModalOpen, setIsEmailModalOpen] = useState(false);
  const [emailModalData, setEmailModalData] = useState({ newEmail: '', password: '' });
  const [emailModalError, setEmailModalError] = useState<string | null>(null);
  const [emailModalSubmitting, setEmailModalSubmitting] = useState(false);

  const handleRequestEmailChange = async () => {
    setEmailModalError(null);
    if (!emailModalData.newEmail.trim() || !emailModalData.password) {
      setEmailModalError('Please enter a new email and your current password');
      return;
    }
    setEmailModalSubmitting(true);
    try {
      const res = await authService.requestEmailChange({
        newEmail: emailModalData.newEmail.trim(),
        password: emailModalData.password,
      });
      setSuccessMessage(res.data?.message || 'Verification email sent. Please check your new inbox.');
      setIsEmailModalOpen(false);
      setEmailModalData({ newEmail: '', password: '' });
    } catch (err) {
      setEmailModalError(AuthService.getErrorMessage(err));
    } finally {
      setEmailModalSubmitting(false);
    }
  };
  // Reset avatar loaded state when URL changes (e.g., after upload)
  useEffect(() => {
    setAvatarLoaded(false);
  }, [avatarUrl]);

  // Store original data for cancel/reset functionality
  const [originalData, setOriginalData] = useState<typeof formData | null>(null);
  // Track if initial profile fetch is done to avoid re-showing loading spinner
  const hasFetchedRef = useRef(false);

  const fetchProfile = async () => {
    try {
      // Only show loading spinner on initial fetch, not on session-triggered re-fetches
      if (!hasFetchedRef.current) {
        setIsLoading(true);
      }
      const role = (session?.user as any)?.role;

      if (role === 'AGENT') {
        const profile = await agentsService.getMyProfile();
        const profileData = {
          firstName: profile.firstName || '',
          lastName: profile.lastName || '',
          career: profile.headline || profile.agentType?.name || 'Real Estate Agent',
          email: profile.email || session?.user?.email || '',
          phone: profile.phone || '',
        };
        setFormData(profileData);
        setOriginalData(profileData);

        // If backend email diverges from session (email change verified in another tab),
        // refresh the next-auth JWT so header/other places also pick up the new address.
        if (profile.email && session?.user?.email && profile.email !== session.user.email) {
          try {
            await updateSession({ user: { email: profile.email } });
          } catch {
            // updateSession is best-effort
          }
        }

        if (profile.avatar) {
          try {
            const presignedUrl = await uploadService.getPresignedDownloadUrl(profile.avatar);
            setAvatarUrl(presignedUrl);
          } catch {
            setAvatarUrl(profile.avatar);
          }
        }
      } else if (role === 'USER') {
        const profile = await usersService.getMyProfile();
        const profileData = {
          firstName: profile.firstName || '',
          lastName: profile.lastName || '',
          career: '',
          email: profile.email || session?.user?.email || '',
          phone: profile.phone || '',
        };
        setFormData(profileData);
        setOriginalData(profileData);

        if (profile.email && session?.user?.email && profile.email !== session.user.email) {
          try {
            await updateSession({ user: { email: profile.email } });
          } catch {
            // best-effort
          }
        }

        if (profile.avatar) {
          try {
            const presignedUrl = await uploadService.getPresignedDownloadUrl(profile.avatar);
            setAvatarUrl(presignedUrl);
          } catch {
            setAvatarUrl(profile.avatar);
          }
        }
      }
    } catch (err) {
      console.error('Failed to fetch profile:', err);
      if (session?.user) {
        const nameParts = (session.user?.name || '').split(' ');
        setFormData(prev => ({
          ...prev,
          firstName: nameParts[0] || prev.firstName,
          lastName: nameParts.slice(1).join(' ') || prev.lastName,
          email: session.user?.email || prev.email,
        }));
        if (session.user.image) {
          setAvatarUrl(session.user.image);
        }
      }
    } finally {
      setIsLoading(false);
      hasFetchedRef.current = true;
    }
  };

  // Initial fetch on mount
  useEffect(() => {
    if (session) {
      if (hasFetchedRef.current) return;
      fetchProfile();
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [session]);

  // Re-fetch when the tab becomes visible again (e.g. user verified email
  // change in another tab and returned). Ensures email/phone/avatar stay in
  // sync with the source of truth.
  useEffect(() => {
    const onVisible = () => {
      if (document.visibilityState === 'visible' && session && hasFetchedRef.current) {
        fetchProfile();
      }
    };
    document.addEventListener('visibilitychange', onVisible);
    return () => document.removeEventListener('visibilitychange', onVisible);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [session]);

  const handleChange = (field: string, value: string) => {
    setFormData((prev) => ({ ...prev, [field]: value }));
    setError(null);
    setSuccessMessage(null);
  };

  const handleUploadClick = () => {
    fileInputRef.current?.click();
  };

  const handleFileChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    if (!file) return;

    // Validate file type
    const validTypes = ['image/jpeg', 'image/png', 'image/gif'];
    if (!validTypes.includes(file.type)) {
      setError('Please upload a JPEG, PNG, or GIF image.');
      return;
    }

    // Validate file size (2MB max)
    const maxSize = 2 * 1024 * 1024;
    if (file.size > maxSize) {
      setError('File size must be less than 2MB.');
      return;
    }

    try {
      setIsUploading(true);
      setError(null);
      setUploadProgress(0);

      // Show local preview immediately for instant feedback
      const localPreviewUrl = URL.createObjectURL(file);
      setAvatarUrl(localPreviewUrl);

      const role = (session?.user as any)?.role;

      // Upload the avatar based on role
      let uploadedFile;
      if (role === 'AGENT') {
        uploadedFile = await uploadService.uploadAvatar(file, (progress) => {
          setUploadProgress(progress.percentage);
        });
        // Update the agent profile with the new avatar key
        await agentsService.updateProfile({ avatar: uploadedFile.url });
      } else {
        uploadedFile = await uploadService.uploadUserAvatar(file, (progress) => {
          setUploadProgress(progress.percentage);
        });
        // Update the user profile with the new avatar key
        await usersService.updateProfile({ avatar: uploadedFile.url });
      }

      // Small delay to ensure S3 has processed the upload
      await new Promise(resolve => setTimeout(resolve, 500));

      // Get the presigned URL for display
      try {
        const presignedUrl = await uploadService.getPresignedDownloadUrl(uploadedFile.url);
        setAvatarUrl(presignedUrl);
        // Clean up local preview URL only after successful presigned URL
        URL.revokeObjectURL(localPreviewUrl);

        // Dispatch event to notify header to refresh profile data
        window.dispatchEvent(new Event('profile-updated'));
      } catch {
        // If presigned URL fails, keep the local preview (don't revoke it)
        console.warn('Could not get presigned URL, using local preview');
        // Still dispatch event to refresh header
        window.dispatchEvent(new Event('profile-updated'));
      }

      setSuccessMessage('Profile picture updated successfully!');
    } catch (err) {
      console.error('Upload failed:', err);
      setError('Failed to upload profile picture. Please try again.');
    } finally {
      setIsUploading(false);
      setUploadProgress(0);
      // Reset file input
      if (fileInputRef.current) {
        fileInputRef.current.value = '';
      }
    }
  };

  const handleDeleteAvatar = async () => {
    try {
      setIsUploading(true);
      setError(null);

      const role = (session?.user as any)?.role;

      // Get current avatar key from profile to delete from S3
      let avatarKey: string | null = null;
      if (role === 'AGENT') {
        const profile = await agentsService.getMyProfile();
        avatarKey = profile.avatar;
      } else {
        const profile = await usersService.getMyProfile();
        avatarKey = profile.avatar;
      }

      // Delete from S3 if avatar exists
      if (avatarKey) {
        try {
          await uploadService.deleteFile(avatarKey);
        } catch (s3Error) {
          console.warn('Could not delete from S3:', s3Error);
          // Continue even if S3 delete fails - still clear database reference
        }
      }

      // Update profile to remove avatar reference from database
      if (role === 'AGENT') {
        await agentsService.updateProfile({ avatar: null });
      } else {
        await usersService.updateProfile({ avatar: null });
      }
      setAvatarUrl(null);

      // Dispatch event to notify header to refresh profile data
      window.dispatchEvent(new Event('profile-updated'));

      setSuccessMessage('Profile picture removed successfully!');
    } catch (err) {
      console.error('Delete failed:', err);
      setError('Failed to remove profile picture. Please try again.');
    } finally {
      setIsUploading(false);
    }
  };

  const handleSave = async () => {
    try {
      setIsSaving(true);
      setError(null);

      const role = (session?.user as any)?.role;

      // Update profile based on role (email is not editable - tied to auth)
      if (role === 'AGENT') {
        await agentsService.updateProfile({
          firstName: formData.firstName,
          lastName: formData.lastName,
          phone: formData.phone,
          headline: formData.career,
        });
      } else {
        await usersService.updateProfile({
          firstName: formData.firstName,
          lastName: formData.lastName,
          phone: formData.phone,
        });
      }

      // Dispatch event to notify header and other components to refresh profile data
      // (Don't call updateSession as it can trigger a full page reload in next-auth v5)
      window.dispatchEvent(new Event('profile-updated'));

      if (onSave) {
        onSave(formData);
      }

      // Update original data so Cancel will reset to the newly saved values
      setOriginalData(formData);
      setSuccessMessage('Profile settings saved successfully!');
    } catch (err) {
      console.error('Save failed:', err);
      setError('Failed to save profile settings. Please try again.');
    } finally {
      setIsSaving(false);
    }
  };

  const hasChanges = originalData
    ? JSON.stringify(formData) !== JSON.stringify(originalData)
    : false;

  const handleCancel = () => {
    if (!hasChanges) return;
    // Reset to last saved data
    if (originalData) {
      setFormData(originalData);
    }
    setError(null);
    setSuccessMessage(null);
  };

  if (isLoading) {
    return (
      <div className="border border-[#00293d]/20 rounded-[15px] bg-white p-8 flex items-center justify-center min-h-[400px]">
        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-[#e58625]"></div>
      </div>
    );
  }

  return (
    <div className="border border-[#00293d]/20 rounded-[15px] bg-white p-8">
      {/* Header */}
      <div className="mb-6">
        <h1 className="font-fractul font-bold text-[20px] leading-[24px] text-[#00293D] mb-2">
          Public Profile
        </h1>
        <p className="font-serif text-[13px] leading-[17px] text-[#00293D]/60">
          {descriptionText}
        </p>
      </div>

      {/* Error/Success Messages */}
      {error && (
        <div className="mb-4 p-3 bg-red-50 border border-red-200 rounded-[10px] text-red-600 text-sm font-serif">
          {error}
        </div>
      )}
      {successMessage && (
        <div className="mb-4 p-3 bg-green-50 border border-green-200 rounded-[10px] text-green-600 text-sm font-serif">
          {successMessage}
        </div>
      )}

      {/* Profile Photo Section */}
      <div className="mb-8">
        <div className="flex items-start gap-4">
          <div className="w-[60px] h-[60px] rounded-full overflow-hidden border border-[#00293D]/20 flex-shrink-0 bg-gray-100 relative">
            {(!avatarUrl || !avatarLoaded) && (
              <div className="absolute inset-0 rounded-full shimmer-loading" />
            )}
            {avatarUrl && (
              <img
                ref={(el) => { if (el?.complete && el.naturalWidth > 0) setAvatarLoaded(true); }}
                src={avatarUrl}
                alt="Profile"
                className={`absolute inset-0 w-full h-full object-cover transition-opacity duration-300 ${avatarLoaded ? 'opacity-100' : 'opacity-0'}`}
                onLoad={() => setAvatarLoaded(true)}
              />
            )}
          </div>
          <div>
            <p className="font-serif font-medium text-[14px] text-[#00293D] mb-2">
              Public Picture
            </p>
            <div className="flex items-center gap-2 mb-2">
              <input
                ref={fileInputRef}
                type="file"
                accept="image/jpeg,image/png,image/gif"
                onChange={handleFileChange}
                className="hidden"
              />
              <button
                onClick={handleUploadClick}
                disabled={isUploading}
                className="px-4 py-1.5 bg-[#e58625] text-white rounded-[20px] font-serif text-[12px] hover:bg-[#d47920] transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
              >
                {isUploading ? `Uploading ${uploadProgress}%` : 'Upload Now'}
              </button>
              <button
                onClick={handleDeleteAvatar}
                disabled={isUploading || !avatarUrl}
                className="px-4 py-1.5 border border-[#00293D]/30 text-[#00293D] rounded-[20px] font-serif text-[12px] hover:bg-[#00293d]/5 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
              >
                Delete
              </button>
            </div>
            <p className="font-serif text-[11px] text-[#00293D]/50">
              Supported formats: JPEG, PNG, GIF Max file size: 2MB
            </p>
          </div>
        </div>
      </div>

      {/* Form Fields */}
      <div className="space-y-5">
        {/* Row 1: First Name & Last Name */}
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
          <div>
            <label className="block text-[12px] font-bold text-[#00293D] font-serif mb-2">
              First Name
            </label>
            <input
              type="text"
              value={formData.firstName}
              onChange={(e) => handleChange('firstName', e.target.value)}
              className="w-full h-[44px] px-4 border border-[#00293D]/20 rounded-[10px] text-[14px] font-serif text-[#00293D] focus:outline-none focus:border-[#E58625]"
            />
          </div>
          <div>
            <label className="block text-[12px] font-bold text-[#00293D] font-serif mb-2">
              Last Name
            </label>
            <input
              type="text"
              value={formData.lastName}
              onChange={(e) => handleChange('lastName', e.target.value)}
              className="w-full h-[44px] px-4 border border-[#00293D]/20 rounded-[10px] text-[14px] font-serif text-[#00293D] focus:outline-none focus:border-[#E58625]"
            />
          </div>
        </div>

        {/* Career (only for agents, read-only - set during onboarding) */}
        {(session?.user as any)?.role === 'AGENT' && (
          <div>
            <label className="block text-[12px] font-bold text-[#00293D] font-serif mb-2">
              Career
            </label>
            <input
              type="text"
              value={formData.career}
              disabled
              className="w-full sm:w-1/2 h-[44px] px-4 border border-[#00293D]/20 rounded-[10px] text-[14px] font-serif text-[#00293D]/60 bg-gray-50 cursor-not-allowed"
            />
          </div>
        )}

        {/* Row 2: Email & Phone */}
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
          <div>
            <label className="block text-[12px] font-bold text-[#00293D] font-serif mb-2">
              Email Address
            </label>
            <div className="relative">
              <input
                type="email"
                value={formData.email}
                disabled
                className="w-full h-[44px] pl-4 pr-[88px] border border-[#00293D]/20 rounded-[10px] text-[14px] font-serif text-[#00293D]/60 bg-gray-50 cursor-not-allowed"
              />
              <button
                type="button"
                onClick={() => {
                  setEmailModalError(null);
                  setEmailModalData({ newEmail: '', password: '' });
                  setIsEmailModalOpen(true);
                }}
                className="absolute right-2 top-1/2 -translate-y-1/2 px-3 py-1.5 text-[12px] font-serif font-semibold text-[#e58625] hover:bg-[#e58625]/10 rounded-[6px] transition-colors"
              >
                Change
              </button>
            </div>
          </div>
          <div>
            <label className="block text-[12px] font-bold text-[#00293D] font-serif mb-2">
              Phone Number
            </label>
            <input
              type="tel"
              value={formData.phone}
              onChange={(e) => handleChange('phone', e.target.value)}
              className="w-full h-[44px] px-4 border border-[#00293D]/20 rounded-[10px] text-[14px] font-serif text-[#00293D] focus:outline-none focus:border-[#E58625]"
            />
          </div>
        </div>

      </div>

      {/* Action Buttons */}
      <div className="mt-8 flex justify-end gap-3">
        <button
          onClick={handleCancel}
          disabled={isSaving || !hasChanges}
          className="px-8 py-3 border border-[#00293D]/30 text-[#00293D] rounded-[10px] font-serif font-medium text-[14px] hover:bg-[#00293d]/5 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
        >
          Cancel
        </button>
        <button
          onClick={handleSave}
          disabled={isSaving}
          className="px-8 py-3 bg-[#e58625] text-white rounded-[10px] font-serif font-medium text-[14px] hover:bg-[#d47920] transition-colors disabled:opacity-50"
        >
          {isSaving ? 'Saving...' : 'Save Changes'}
        </button>
      </div>

      {/* Change Email Modal */}
      {isEmailModalOpen && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
          <div
            className="absolute inset-0 bg-black/30"
            onClick={() => !emailModalSubmitting && setIsEmailModalOpen(false)}
          />
          <div className="relative bg-white rounded-[20px] w-full max-w-[480px] shadow-xl flex flex-col">
            <div className="px-6 py-4 border-b border-[#d9d9d9] flex items-center justify-between">
              <h2 className="font-fractul font-bold text-[18px] text-[#00293d]">Change Email Address</h2>
              <button
                onClick={() => !emailModalSubmitting && setIsEmailModalOpen(false)}
                className="text-[#00293d] hover:opacity-70"
              >
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
                  <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
              </button>
            </div>
            <div className="px-6 py-5 space-y-4">
              <p className="font-serif text-[13px] text-[#00293d]/70">
                A verification link will be sent to your new email. Your email changes only after you click the link.
              </p>
              <div>
                <label className="block text-[12px] font-bold text-[#00293D] font-serif mb-2">New Email</label>
                <input
                  type="email"
                  value={emailModalData.newEmail}
                  onChange={(e) => setEmailModalData({ ...emailModalData, newEmail: e.target.value })}
                  placeholder="new@example.com"
                  autoComplete="off"
                  className="w-full h-[44px] px-4 border border-[#00293D]/20 rounded-[10px] text-[14px] font-serif text-[#00293D] focus:outline-none focus:border-[#E58625]"
                />
              </div>
              <div>
                <label className="block text-[12px] font-bold text-[#00293D] font-serif mb-2">Current Password</label>
                <input
                  type="password"
                  value={emailModalData.password}
                  onChange={(e) => setEmailModalData({ ...emailModalData, password: e.target.value })}
                  placeholder="Enter your current password"
                  autoComplete="current-password"
                  className="w-full h-[44px] px-4 border border-[#00293D]/20 rounded-[10px] text-[14px] font-serif text-[#00293D] focus:outline-none focus:border-[#E58625]"
                />
              </div>
              {emailModalError && (
                <div className="p-3 bg-red-50 border border-red-200 rounded-[10px]">
                  <p className="text-red-700 text-[13px] font-serif">{emailModalError}</p>
                </div>
              )}
            </div>
            <div className="px-6 py-4 border-t border-[#d9d9d9] flex items-center justify-end gap-3">
              <button
                onClick={() => setIsEmailModalOpen(false)}
                disabled={emailModalSubmitting}
                className="px-5 py-2.5 border border-[#00293D]/30 text-[#00293D] rounded-[10px] font-serif font-medium text-[13px] hover:bg-[#00293d]/5 transition-colors disabled:opacity-50"
              >
                Cancel
              </button>
              <button
                onClick={handleRequestEmailChange}
                disabled={emailModalSubmitting}
                className="px-5 py-2.5 bg-[#e58625] text-white rounded-[10px] font-serif font-medium text-[13px] hover:bg-[#d47920] transition-colors disabled:opacity-50"
              >
                {emailModalSubmitting ? 'Sending...' : 'Send Verification Link'}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}