frontend/src/components/home/TopProfessionals.tsx

'use client';

import { useState, useEffect } from 'react';
import Link from 'next/link';
import Image from 'next/image';
import { uploadService } from '@/services/upload.service';
import type { TopProfessionalsContent } from '@/types/cms';

interface ProfessionalCardProps {
  name: string;
  subtitle: string;
  location: string;
  experience: string;
  expertise: string[];
  imageUrl: string;
  isVerified: boolean;
  rating: number | null;
}

function ProfessionalCard({
  name,
  subtitle,
  location,
  experience,
  expertise,
  imageUrl,
  isVerified,
  rating,
}: ProfessionalCardProps) {
  const starCount = rating ? Math.round(rating) : 0;
  const [imgLoaded, setImgLoaded] = useState(false);
  const [imgError, setImgError] = useState(false);
  const placeholder = '/assets/icons/user-placeholder-icon.svg';
  const isPlaceholder = imageUrl === placeholder;
  const INITIAL_TAG_COUNT = 4;

  return (
      <div className="bg-white rounded-[15px] overflow-hidden shadow-[0px_4px_20px_rgba(0,0,0,0.08)] h-full flex flex-col">
        {/* Image */}
        <div className="relative h-[226px] w-full overflow-hidden bg-gray-100">
          {/* Shimmer while loading, initials only on error */}
          {imgError || isPlaceholder ? (
            <div className="absolute inset-0 bg-[#c4d9d4] flex items-center justify-center">
              <span className="font-bold text-[#00293d] text-[72px]">{name?.[0]?.toUpperCase() || '?'}</span>
            </div>
          ) : !imgLoaded ? (
            <div className="absolute inset-0 shimmer-loading" />
          ) : null}
          {!isPlaceholder && !imgError && (
            <Image
              src={imageUrl}
              alt={name}
              fill
              className={`object-cover transition-opacity duration-300 ${imgLoaded ? 'opacity-100' : 'opacity-0'}`}
              onLoad={() => setImgLoaded(true)}
              onError={() => setImgError(true)}
            />
          )}
        </div>

        {/* Content */}
        <div className="p-4 flex-1 flex flex-col">
          {/* Name */}
          <h3 className="font-fractul font-bold text-[14px] leading-normal text-[#00293d]">
            {name}
          </h3>

          {/* Subtitle */}
          <p className="font-serif font-normal text-[10px] leading-normal text-[#00293d] mt-1">
            {subtitle}
          </p>

          {/* Verified Badge */}
          {isVerified && (
            <div className="flex items-center gap-1.5 mt-2">
              <Image
                src="/assets/icons/verified-badge-blue.svg"
                alt="Verified"
                width={14}
                height={14}
              />
              <span className="font-serif font-medium text-[14px] leading-normal text-[#638559]">
                &ldquo;Verified local agent&rdquo;
              </span>
            </div>
          )}

          {/* Location */}
          {location && (
            <div className="mt-3">
              <p className="font-fractul font-bold text-[14px] leading-normal text-[#00293d]">
                Location:
              </p>
              <div className="flex items-center gap-1.5 mt-1">
                <Image
                  src="/assets/icons/location-pin-orange.svg"
                  alt="Location"
                  width={12}
                  height={15}
                />
                <span className="font-serif font-normal text-[10px] leading-normal text-[#00293d]">
                  {location}
                </span>
              </div>
            </div>
          )}

          {/* Expertise */}
          {expertise.length > 0 && (
            <div className="mt-3">
              <p className="font-fractul font-bold text-[14px] leading-normal text-[#00293d]">
                Expertise:
              </p>
              <div className="flex flex-wrap gap-1.5 mt-2 items-center">
                {expertise.slice(0, INITIAL_TAG_COUNT).map((tag, index) => (
                  <span
                    key={index}
                    className="border-[0.7px] border-[#00293d] rounded-[15px] px-[5px] h-[24px] flex items-center justify-center font-serif font-normal text-[13px] leading-[100%] text-[#00293d]"
                  >
                    {tag}
                  </span>
                ))}
                {expertise.length > INITIAL_TAG_COUNT && (
                  <span className="bg-[#e58625]/15 text-[#e58625] rounded-[15px] px-2 h-[24px] flex items-center justify-center font-serif font-semibold text-[12px] leading-[100%]">
                    +{expertise.length - INITIAL_TAG_COUNT} more
                  </span>
                )}
              </div>
            </div>
          )}

          {/* Experience */}
          {experience && (
            <p className="mt-3 text-[14px] leading-normal text-[#00293d]">
              <span className="font-fractul font-bold">Experience:</span>
              <span className="font-serif font-normal"> {experience}</span>
            </p>
          )}

          {/* Star Rating */}
          {starCount > 0 && (
            <div className="flex gap-1 mt-3">
              {[...Array(5)].map((_, i) => (
                <Image
                  key={i}
                  src={i < starCount ? '/assets/icons/star-yellow.svg' : '/assets/icons/star-empty-icon.svg'}
                  alt="Star"
                  width={18}
                  height={17}
                />
              ))}
            </div>
          )}
        </div>
      </div>
  );
}

// Helper to resolve avatar URL
async function resolveAvatarUrl(avatar: string | null): Promise<string> {
  if (!avatar) return '/assets/icons/user-placeholder-icon.svg';
  if (avatar.startsWith('http') || avatar.startsWith('/')) return avatar;
  try {
    return await uploadService.getPresignedDownloadUrl(avatar);
  } catch {
    return '/assets/icons/user-placeholder-icon.svg';
  }
}

interface DisplayProfessional {
  id: string;
  name: string;
  subtitle: string;
  location: string;
  experience: string;
  expertise: string[];
  imageUrl: string;
  isVerified: boolean;
  rating: number | null;
  slug: string;
}

const defaultContent: TopProfessionalsContent = {
  title: '\u201cMeet top real estate professionals\u201d',
  ctaText: 'Discover 5,000+ Top Real Estate Agents in Our Network.',
  ctaButtonText: 'Browse Experts',
  agents: [],
  lenders: [],
};

export function TopProfessionals({ content }: { content?: TopProfessionalsContent }) {
  const data = content ?? defaultContent;
  const [activeTab, setActiveTab] = useState<'agents' | 'lenders'>('agents');
  const [agents, setAgents] = useState<DisplayProfessional[]>([]);
  const [lenders, setLenders] = useState<DisplayProfessional[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const loadProfessionals = async () => {
      try {
        // Map CMS data to display format, resolving avatar URLs
        const mapCmsEntries = async (
          entries: TopProfessionalsContent['agents'],
        ): Promise<DisplayProfessional[]> => {
          return Promise.all(
            entries.map(async (entry, index) => {
              const imageUrl = await resolveAvatarUrl(entry.imageUrl || null);
              return {
                id: `cms-${index}`,
                name: entry.name,
                subtitle: entry.subtitle || '',
                location: entry.location || '',
                experience: entry.experience || '',
                expertise: entry.expertise || [],
                imageUrl,
                isVerified: false,
                rating: null,
                slug: '',
              };
            }),
          );
        };

        const [mappedAgents, mappedLenders] = await Promise.all([
          mapCmsEntries(data.agents || []),
          mapCmsEntries(data.lenders || []),
        ]);

        setAgents(mappedAgents);
        setLenders(mappedLenders);
      } catch (err) {
        console.error('Failed to load top professionals:', err);
      } finally {
        setLoading(false);
      }
    };

    loadProfessionals();
  }, [data.agents, data.lenders]);

  const displayData = activeTab === 'agents' ? agents : lenders;

  return (
    <section className="py-10 md:py-12 bg-white">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* Section Header */}
        <div className="text-center mb-10">
          <h2 className="font-fractul font-bold text-[32px] md:text-[40px] leading-[1.2] text-[#00293d]">
            {data.title}
          </h2>
        </div>

        {/* Tabs Container */}
        <div className="flex justify-center mb-10">
          <div className="border border-[#00293d]/10 rounded-[5px] p-5 inline-flex items-center">
            {/* Agents Tab */}
            <button
              onClick={() => setActiveTab('agents')}
              className={`flex items-center gap-2 px-10 py-3 rounded-[5px] font-serif font-semibold text-[17px] transition-all ${
                activeTab === 'agents'
                  ? 'bg-[#00293d] text-[#f0f5fc]'
                  : 'border border-[#00293d]/20 text-[#00293d] hover:bg-gray-50'
              }`}
            >
              <Image
                src={activeTab === 'agents' ? '/assets/icons/agents-tab-icon-orange.svg' : '/assets/icons/agents-tab-icon.svg'}
                alt=""
                width={20}
                height={20}
              />
              Agents
            </button>

            {/* Divider */}
            <div className="h-[44px] w-px bg-[#00293d]/20 mx-4" />

            {/* Lenders Tab */}
            <button
              onClick={() => setActiveTab('lenders')}
              className={`flex items-center gap-2 px-10 py-3 rounded-[5px] font-serif font-semibold text-[17px] transition-all ${
                activeTab === 'lenders'
                  ? 'bg-[#00293d] text-[#f0f5fc]'
                  : 'border border-[#00293d]/20 text-[#00293d] hover:bg-gray-50'
              }`}
            >
              <Image
                src={activeTab === 'lenders' ? '/assets/icons/lenders-tab-icon-orange.svg' : '/assets/icons/lenders-tab-icon.svg'}
                alt=""
                width={20}
                height={20}
              />
              Lenders
            </button>
          </div>
        </div>

        {/* Cards Grid - 3 cards + CTA sidebar */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
          {loading ? (
            // Loading skeleton cards
            <>
              {[1, 2, 3].map((i) => (
                <div key={i} className="bg-white rounded-[15px] overflow-hidden shadow-[0px_4px_20px_rgba(0,0,0,0.08)] animate-pulse">
                  <div className="h-[226px] bg-gray-200" />
                  <div className="p-4 space-y-3">
                    <div className="h-4 bg-gray-200 rounded w-3/4" />
                    <div className="h-3 bg-gray-200 rounded w-1/2" />
                    <div className="h-4 bg-gray-200 rounded w-2/3" />
                    <div className="flex gap-1.5">
                      <div className="h-6 bg-gray-200 rounded-full w-16" />
                      <div className="h-6 bg-gray-200 rounded-full w-16" />
                      <div className="h-6 bg-gray-200 rounded-full w-16" />
                    </div>
                  </div>
                </div>
              ))}
            </>
          ) : displayData.length > 0 ? (
            displayData.map((professional) => (
              <ProfessionalCard
                key={professional.id}
                name={professional.name}
                subtitle={professional.subtitle}
                location={professional.location}
                experience={professional.experience}
                expertise={professional.expertise}
                imageUrl={professional.imageUrl}
                isVerified={professional.isVerified}
                rating={professional.rating}
              />
            ))
          ) : (
            // No data message
            <div className="col-span-3 flex items-center justify-center py-12">
              <p className="font-serif text-[14px] text-[#00293d]/60">
                No {activeTab === 'agents' ? 'agents' : 'lenders'} available yet.
              </p>
            </div>
          )}

          {/* CTA Sidebar Card */}
          <div
            className="rounded-[15px] p-6 flex flex-col items-center justify-center text-center min-h-[400px]"
            style={{
              background: 'linear-gradient(180deg, #C5D6D6 0%, #FFFFFF 100%)',
            }}
          >
            {/* Building Icon */}
            <div className="mb-4">
              <Image
                src="/assets/icons/building-icon.svg"
                alt="Building"
                width={50}
                height={38}
              />
            </div>

            {/* Text */}
            <p className="font-fractul font-normal text-[14px] leading-[1.4] text-[#00293d] mb-6">
              {data.ctaText}
            </p>

            {/* Browse Experts Button */}
            <Link href="/user/profiles">
              <button className="bg-[#e58625] hover:bg-[#d47820] text-white font-fractul font-bold text-[16px] leading-[19px] px-8 py-3 rounded-[15px] transition-colors">
                {data.ctaButtonText}
              </button>
            </Link>
          </div>
        </div>
      </div>
    </section>
  );
}