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';

interface ProfileSettingsFormProps {
  initialData?: {
    fullName: string;
    career: string;
    email: string;
    phone: string;
    location: string;
    avatar?: string;
  };
  onSave?: (data: {
    fullName: string;
    career: string;
    email: string;
    phone: string;
    location: 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({
    fullName: initialData?.fullName || '',
    career: initialData?.career || '',
    email: initialData?.email || '',
    phone: initialData?.phone || '',
    location: initialData?.location || '',
  });

  const [avatarUrl, setAvatarUrl] = useState<string | null>(null);
  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);

  // Fetch profile data on mount based on user role
  useEffect(() => {
    const fetchProfile = async () => {
      try {
        setIsLoading(true);
        const role = (session?.user as any)?.role;

        if (role === 'AGENT') {
          const profile = await agentsService.getMyProfile();
          setFormData({
            fullName: `${profile.firstName || ''} ${profile.lastName || ''}`.trim(),
            career: profile.agentType?.name || 'Real Estate Agent',
            email: profile.email || session?.user?.email || '',
            phone: profile.phone || '',
            location: profile.serviceAreas?.[0] || '',
          });

          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();
          setFormData({
            fullName: `${profile.firstName || ''} ${profile.lastName || ''}`.trim(),
            career: '', // Users don't have career/agent type
            email: profile.email || session?.user?.email || '',
            phone: profile.phone || '',
            location: [profile.city, profile.state, profile.country].filter(Boolean).join(', '),
          });

          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);
        // Use session data as fallback
        if (session?.user) {
          setFormData(prev => ({
            ...prev,
            fullName: session.user?.name || prev.fullName,
            email: session.user?.email || prev.email,
          }));
          if (session.user.image) {
            setAvatarUrl(session.user.image);
          }
        }
      } finally {
        setIsLoading(false);
      }
    };

    if (session) {
      fetchProfile();
    }
  }, [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);

        // Update the session to reflect the new avatar
        await updateSession({
          ...session,
          user: {
            ...session?.user,
            image: presignedUrl,
          },
        });
      } catch {
        // If presigned URL fails, keep the local preview (don't revoke it)
        console.warn('Could not get presigned URL, using local preview');
      }

      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;

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

      // Update session
      await updateSession({
        ...session,
        user: {
          ...session?.user,
          image: null,
        },
      });

      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;

      // Split full name into first and last name
      const nameParts = formData.fullName.trim().split(' ');
      const firstName = nameParts[0] || '';
      const lastName = nameParts.slice(1).join(' ') || '';

      // Update profile based on role (email is not editable - tied to auth)
      if (role === 'AGENT') {
        await agentsService.updateProfile({
          firstName,
          lastName,
          phone: formData.phone,
          serviceAreas: formData.location ? [formData.location] : [],
        });
      } else {
        // Parse location into city, state, country for users
        const locationParts = formData.location.split(',').map(s => s.trim());
        await usersService.updateProfile({
          firstName,
          lastName,
          phone: formData.phone,
          city: locationParts[0] || undefined,
          state: locationParts[1] || undefined,
          country: locationParts[2] || undefined,
        });
      }

      // Update session with new name
      await updateSession({
        ...session,
        user: {
          ...session?.user,
          name: formData.fullName,
        },
      });

      if (onSave) {
        onSave(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 handleCancel = () => {
    // Reset to initial data or session data
    if (session?.user) {
      setFormData(prev => ({
        ...prev,
        fullName: session.user?.name || prev.fullName,
        email: session.user?.email || prev.email,
      }));
    }
    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">
            {avatarUrl ? (
              <img
                src={avatarUrl}
                alt="Profile"
                className="w-full h-full object-cover"
              />
            ) : (
              <Image
                src="/assets/icons/user-placeholder-icon.svg"
                alt="Profile"
                width={60}
                height={60}
                className="w-full h-full object-cover"
              />
            )}
          </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: Full Name & Career (Career only for agents) */}
        <div className={`grid grid-cols-1 ${(session?.user as any)?.role === 'AGENT' ? 'sm:grid-cols-2' : ''} gap-5`}>
          <div>
            <label className="block text-[12px] font-medium text-[#00293D]/70 font-serif mb-2">
              Full Name
            </label>
            <input
              type="text"
              value={formData.fullName}
              onChange={(e) => handleChange('fullName', 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>
          {(session?.user as any)?.role === 'AGENT' && (
            <div>
              <label className="block text-[12px] font-medium text-[#00293D]/70 font-serif mb-2">
                Career
              </label>
              <input
                type="text"
                value={formData.career}
                onChange={(e) => handleChange('career', 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>

        {/* Row 2: Email & Phone */}
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
          <div>
            <label className="block text-[12px] font-medium text-[#00293D]/70 font-serif mb-2">
              Email Address
            </label>
            <input
              type="email"
              value={formData.email}
              disabled
              className="w-full h-[44px] px-4 border border-[#00293D]/20 rounded-[10px] text-[14px] font-serif text-[#00293D]/60 bg-gray-50 cursor-not-allowed"
            />
          </div>
          <div>
            <label className="block text-[12px] font-medium text-[#00293D]/70 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>

        {/* Row 3: Location */}
        <div>
          <label className="block text-[12px] font-medium text-[#00293D]/70 font-serif mb-2">
            Location
          </label>
          <div className="relative">
            <div className="absolute left-4 top-1/2 -translate-y-1/2">
              <Image
                src="/assets/icons/location-icon.svg"
                alt="Location"
                width={16}
                height={16}
              />
            </div>
            <input
              type="text"
              value={formData.location}
              onChange={(e) => handleChange('location', e.target.value)}
              className="w-full sm:w-1/2 h-[44px] pl-10 pr-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}
          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"
        >
          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>
    </div>
  );
}