frontend/src/app/(user)/user/profile/[id]/page.tsx

'use client';

import { useState, useEffect } from 'react';
import Image from 'next/image';
import { useParams } from 'next/navigation';
import { useSession } from 'next-auth/react';

// Import shared components
import {
  InfoCard,
  ExperienceSection,
  ProfileCard,
  SpecializationSection,
  TestimonialsSection,
  StatusButtons,
  ContactInfo,
} from '@/components/profile';
import { ConnectRequestModal } from '@/components/modals';
import { agentsService, AgentProfile, FieldValueResponse } from '@/services/agents.service';
import { connectionRequestsService, ConnectionStatus } from '@/services/connection-requests.service';
import { uploadService } from '@/services/upload.service';
import { testimonialsService, Testimonial } from '@/services/testimonials.service';
import { mapFieldValuesToExperience, mapFieldValuesToSpecializationFields, mapFieldValuesToProfileCard, mapFieldValuesToContactInfo, mapFieldValuesToAvailability, ExperienceData, SpecializationFieldsData, ProfileCardData, ContactInfoData, AvailabilityData } from '@/utils/profileDataMapper';

// Mock data for sections not yet available from API
const mockData = {
  preferredWorkEnvironment: 'Preferred work environment includes on-site property visits, in-depth market research, client consultations, property tours, and active involvement in negotiations to ensure the best outcomes',
};

// Default experience data when no field values are available
const defaultExperience: ExperienceData = {
  years: '-',
  contracts: '-',
  licensingAreas: [],
  expertiseYears: [],
  certifications: [],
};

// Default specialization fields data when no field values are available
const defaultSpecializationFieldsData: SpecializationFieldsData = {
  fields: [],
};

// Default profile card data when no field values are available
const defaultProfileCardData: ProfileCardData = {
  bio: '',
  expertise: [],
  serviceAreas: [],
  city: null,
  state: null,
};

// Default contact info data when no field values are available
const defaultContactInfoData: ContactInfoData = {
  email: null,
  phone: null,
};

// Default availability data when no field values are available
const defaultAvailabilityData: AvailabilityData = {
  type: '',
  schedule: [],
};

export default function AgentProfileView() {
  const params = useParams();
  const id = params.id as string;
  const { data: session } = useSession();

  const [agentProfile, setAgentProfile] = useState<AgentProfile | null>(null);
  const [fieldValues, setFieldValues] = useState<FieldValueResponse[]>([]);
  const [experienceData, setExperienceData] = useState<ExperienceData>(defaultExperience);
  const [specializationFieldsData, setSpecializationFieldsData] = useState<SpecializationFieldsData>(defaultSpecializationFieldsData);
  const [profileCardData, setProfileCardData] = useState<ProfileCardData>(defaultProfileCardData);
  const [contactInfoData, setContactInfoData] = useState<ContactInfoData>(defaultContactInfoData);
  const [availabilityData, setAvailabilityData] = useState<AvailabilityData>(defaultAvailabilityData);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [imageError, setImageError] = useState(false);
  const [imageLoaded, setImageLoaded] = useState(false);
  const [avatarUrl, setAvatarUrl] = useState<string | null>(null);

  const [testimonials, setTestimonials] = useState<{ id: string; text: string; author: string; role: string; rating: number }[]>([]);

  // Connect modal state
  const [showConnectModal, setShowConnectModal] = useState(false);
  const [connectionStatus, setConnectionStatus] = useState<ConnectionStatus | null>(null);
  const [connectionRequestId, setConnectionRequestId] = useState<string | null>(null);

  // Helper to check if avatar is an S3 key (not a full URL or local path)
  const isS3Key = (avatar: string | null | undefined): boolean => {
    if (!avatar) return false;
    // S3 keys don't start with http or /
    return !avatar.startsWith('http') && !avatar.startsWith('/');
  };

  // Fetch agent profile and field values on mount
  useEffect(() => {
    const fetchData = async () => {
      if (!id) return;

      try {
        setLoading(true);
        setError(null);

        // Fetch profile, field values, and testimonials in parallel
        const [profile, fieldValuesResponse, testimonialsData] = await Promise.all([
          agentsService.getAgentById(id),
          agentsService.getFieldValuesByAgentId(id),
          testimonialsService.getAgentTestimonials(id).catch(() => [] as Testimonial[]),
        ]);

        setAgentProfile(profile);
        setFieldValues(fieldValuesResponse.fieldValues);

        // Map field values to experience data structure
        const mappedExperience = mapFieldValuesToExperience(fieldValuesResponse.fieldValues);
        setExperienceData(mappedExperience);

        // Map field values to specialization fields data (only fields from "Specialization" section)
        const mappedSpecializationFields = mapFieldValuesToSpecializationFields(fieldValuesResponse.fieldValues);
        setSpecializationFieldsData(mappedSpecializationFields);

        // Map field values to profile card data (bio, expertise, location)
        const mappedProfileCard = mapFieldValuesToProfileCard(fieldValuesResponse.fieldValues);
        setProfileCardData(mappedProfileCard);

        // Map field values to contact info data (email, phone)
        const mappedContactInfo = mapFieldValuesToContactInfo(fieldValuesResponse.fieldValues);
        setContactInfoData(mappedContactInfo);

        // Map field values to availability data
        const mappedAvailability = mapFieldValuesToAvailability(fieldValuesResponse.fieldValues);
        setAvailabilityData(mappedAvailability);

        // Map testimonials for TestimonialsSection
        setTestimonials(
          testimonialsData.map((t) => ({
            id: t.id,
            text: t.text,
            author: t.authorName,
            role: t.authorRole,
            rating: t.rating,
          }))
        );

        // If avatar is an S3 key, fetch presigned URL
        if (profile.avatar && isS3Key(profile.avatar)) {
          try {
            const presignedUrl = await uploadService.getPresignedDownloadUrl(profile.avatar);
            setAvatarUrl(presignedUrl);
          } catch (avatarErr) {
            console.error('Failed to get avatar URL:', avatarErr);
          }
        } else if (profile.avatar) {
          setAvatarUrl(profile.avatar);
        }
      } catch (err) {
        console.error('Failed to fetch profile:', err);
        setError('Failed to load profile data');
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [id]);

  // Fetch connection status when user is logged in
  useEffect(() => {
    const fetchConnectionStatus = async () => {
      if (!id || !session) return;

      try {
        const statusResponse = await connectionRequestsService.getConnectionStatus(id);
        setConnectionStatus(statusResponse?.status || null);
        setConnectionRequestId(statusResponse?.id || null);
      } catch (err) {
        console.error('Failed to fetch connection status:', err);
        // Non-critical error, don't show to user
      }
    };

    fetchConnectionStatus();
  }, [id, session]);

  // Handle connection request success
  const handleConnectionSuccess = () => {
    setConnectionStatus('PENDING');
  };

  // Handle unlink/disconnect
  const handleUnlink = async () => {
    if (!connectionRequestId) return;

    try {
      await connectionRequestsService.cancelRequest(connectionRequestId);
      setConnectionStatus(null);
      setConnectionRequestId(null);
    } catch (err) {
      console.error('Failed to unlink connection:', err);
    }
  };

  const getProfileImageUrl = () => {
    // If image failed to load, return null
    if (imageError) {
      return null;
    }

    // If we have a presigned URL from S3, use it
    if (avatarUrl) {
      return avatarUrl;
    }

    // Check for null, undefined, or empty string
    if (!agentProfile?.avatar || agentProfile.avatar.trim() === '') {
      return null;
    }

    // For relative paths (local assets), return as-is
    if (agentProfile.avatar.startsWith('/')) {
      return agentProfile.avatar;
    }

    // No image available
    return null;
  };

  // Format member since date
  const formatMemberSince = (dateString?: string) => {
    if (!dateString) return 'Member';
    try {
      const date = new Date(dateString);
      return date.toLocaleDateString('en-US', { month: 'long', year: 'numeric' });
    } catch {
      return 'Member';
    }
  };

  if (loading) {
    return (
      <div className="max-w-7xl mx-auto px-4 lg:px-8 py-6">
        <div className="flex items-center justify-center h-[calc(100vh-180px)]">
          <div className="flex flex-col items-center gap-4">
            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[#E58625]"></div>
            <p className="text-[14px] font-serif text-[#00293D]/70">Loading profile...</p>
          </div>
        </div>
      </div>
    );
  }

  if (error || !agentProfile) {
    return (
      <div className="max-w-7xl mx-auto px-4 lg:px-8 py-6">
        <div className="flex items-center justify-center h-[calc(100vh-180px)]">
          <div className="bg-white rounded-[20px] p-8 shadow-[0px_10px_20px_rgba(217,217,217,0.5)] max-w-md text-center">
            <div className="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
              <svg className="w-8 h-8 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
              </svg>
            </div>
            <h2 className="text-[18px] font-bold font-serif text-[#00293D] mb-2">Unable to Load Profile</h2>
            <p className="text-[14px] font-serif text-[#00293D]/70 mb-4">{error || 'Profile not found'}</p>
            <button
              onClick={() => window.location.reload()}
              className="px-6 py-2 bg-[#E58625] rounded-full text-[14px] font-semibold font-serif text-white hover:bg-[#E58625]/90 transition-colors"
            >
              Try Again
            </button>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="max-w-7xl mx-auto px-4 lg:px-8 py-6 space-y-6">
      {/* Main Layout - Responsive: Column on mobile, Row on desktop */}
      <div className="flex flex-col lg:flex-row gap-6 lg:items-stretch">
        {/* Left Sidebar - Status & Contact */}
        <div className="w-full lg:w-[280px] flex-shrink-0 space-y-4 flex flex-col items-center lg:items-start">
          {/* Profile Image */}
          <div className="relative w-[200px] lg:w-[260px]">
            <div className="w-[200px] h-[200px] lg:w-[260px] lg:h-[260px] rounded-[15px] overflow-hidden bg-[#e8e8e8]">
              {getProfileImageUrl() ? (
                <>
                  {!imageLoaded && (
                    <div className="absolute inset-0 shimmer-loading rounded-[15px]" />
                  )}
                  {/* eslint-disable-next-line @next/next/no-img-element */}
                  <img
                    src={getProfileImageUrl()!}
                    alt="Profile"
                    className={`w-full h-full object-cover transition-opacity duration-300 ${imageLoaded ? 'opacity-100' : 'opacity-0'}`}
                    onLoad={() => setImageLoaded(true)}
                    onError={() => setImageError(true)}
                  />
                </>
              ) : (
                <div className="w-full h-full flex items-center justify-center">
                  <Image
                    src="/assets/icons/user-placeholder-icon.svg"
                    alt="Profile"
                    width={80}
                    height={80}
                    className="opacity-40"
                  />
                </div>
              )}
              {/* Gradient Overlay */}
              <div className="absolute inset-0 bg-gradient-to-t from-black/50 via-black/20 to-transparent pointer-events-none" />
            </div>
          </div>

          {/* Status Buttons - Public view shows availability status with Connect/Pending/Unlink button */}
          <StatusButtons
            isAvailable={agentProfile.isAvailable ?? true}
            connectionStatus={connectionStatus}
            onConnectClick={() => setShowConnectModal(true)}
            onUnlinkClick={handleUnlink}
          />

          {/* Contact Info */}
          <ContactInfo
            email={agentProfile.email || agentProfile.user?.email || contactInfoData.email || ''}
            phone={agentProfile.phone || contactInfoData.phone || ''}
          />
        </div>

        {/* Right Content - Profile Info + Experience + All Sections */}
        <div className="flex-1 space-y-4">
          {/* Profile Card - No edit button for user view */}
          <ProfileCard
            firstName={agentProfile.firstName}
            lastName={agentProfile.lastName}
            isVerified={agentProfile.isVerified}
            title={agentProfile.agentType?.name || 'Real Estate Agent'}
            location={profileCardData.city && profileCardData.state
              ? `${profileCardData.city}, ${profileCardData.state}`
              : profileCardData.city || profileCardData.state || agentProfile.serviceAreas?.[0] || '-'}
            memberSince={formatMemberSince((agentProfile as unknown as { createdAt?: string }).createdAt)}
            bio={profileCardData.bio || agentProfile.bio || ''}
            expertise={profileCardData.expertise.length > 0 ? profileCardData.expertise : (agentProfile.specializations || [])}
            showEditButton={false}
            messageHref="/user/message"
            connectionStatus={connectionStatus}
            onConnectClick={() => setShowConnectModal(true)}
            onUnlinkClick={handleUnlink}
          />

          {/* Experience Section - Dynamic data from profile fields */}
          <ExperienceSection experience={experienceData} />

          {/* Info Cards Section */}
          <div className="flex flex-col lg:grid lg:grid-cols-3 gap-6">
            <InfoCard
              title="Availability"
              icon={
                <Image
                  src="/assets/icons/availability-clock-icon.svg"
                  alt="Availability"
                  width={28}
                  height={31}
                />
              }
              content={
                <div>
                  {availabilityData.type && (
                    <p className="font-semibold font-serif text-[14px] leading-[19px] text-[#00293D] mb-2">{availabilityData.type}</p>
                  )}
                  <div className="space-y-1">
                    {availabilityData.schedule.length > 0 ? (
                      availabilityData.schedule.map((item, index) => (
                        <p key={index} className="font-normal font-serif text-[14px] leading-[19px] text-[#00293D]">{item}</p>
                      ))
                    ) : (
                      <p className="font-normal font-serif text-[14px] leading-[19px] text-[#00293D]/60">Not specified</p>
                    )}
                  </div>
                </div>
              }
            />
            <InfoCard
              title=""
              icon={
                <Image
                  src="/assets/icons/work-environment-icon.svg"
                  alt="Work environment"
                  width={28}
                  height={28}
                />
              }
              content={<p className="font-serif font-semibold text-[14px] leading-[19px] text-[#00293D]">{mockData.preferredWorkEnvironment}</p>}
            />
            {testimonials.length > 0 && (
              <InfoCard
                title=""
                icon={
                  <Image
                    src="/assets/icons/testimonial-star-icon.svg"
                    alt="Testimonial"
                    width={28}
                    height={28}
                  />
                }
                content={<p className="text-[14px] font-semibold font-serif leading-[19px] text-center text-[#00293D]">&ldquo;{testimonials[0].text.length > 150 ? testimonials[0].text.substring(0, 150) + '...' : testimonials[0].text}&rdquo;</p>}
              />
            )}
          </div>

          {/* Specialization Section */}
          <SpecializationSection fieldsData={specializationFieldsData} />

          {/* Testimonials Section */}
          <TestimonialsSection testimonials={testimonials} />
        </div>
      </div>

      {/* Connect Request Modal */}
      <ConnectRequestModal
        isOpen={showConnectModal}
        onClose={() => setShowConnectModal(false)}
        agentProfileId={id}
        agentName={`${agentProfile.firstName || ''} ${agentProfile.lastName || ''}`.trim() || 'Agent'}
        existingStatus={connectionStatus}
        onSuccess={handleConnectionSuccess}
      />
    </div>
  );
}