/opt/canhelp/apps/web/src/app/users/[id]/

/opt/canhelp/apps/web/src/app/users/[id]

Name	Size	Mode	Actions
page.tsx	37659	0644	edit dl rm

Edit: /opt/canhelp/apps/web/src/app/users/[id]/page.tsx (37659B)

'use client'

import { useState, useEffect } from 'react'
import { useParams, useRouter } from 'next/navigation'
import { useLocale } from '@/context/locale'
import { useSession } from '@/lib/auth'
import { getUserProfile, getUserReviews, getUserRating, getSpecialistAvailability, getSpecialistCards, getCategories, getLocations, getSpecialistFavorites, addSpecialistFavorite, removeSpecialistFavorite, getOrCreateDirectRoom, getCanMessage, getPriceList } from '@/lib/api'
import { UpgradePrompt } from '@/components/UpgradePrompt'
import type { SpecialistCard, PriceListGroup } from '@/lib/api'
import { formatShortName, shortName } from '@/lib/formatName'
import { formatLastSeen } from '@/lib/formatLastSeen'
import { PlanBadge } from '@/components/PlanBadge'
import { CategoryIcon, isCategoryIconUrl } from '@/components/CategoryIcon'

const MONTHS_BY_LOCALE: Record<string, string[]> = {
  ru: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'],
  en: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
  el: ['Ιανουάριος', 'Φεβρουάριος', 'Μάρτιος', 'Απρίλιος', 'Μάιος', 'Ιούνιος', 'Ιούλιος', 'Αύγουστος', 'Σεπτέμβριος', 'Οκτώβριος', 'Νοέμβριος', 'Δεκέμβριος'],
  uk: ['Січень', 'Лютий', 'Березень', 'Квітень', 'Травень', 'Червень', 'Липень', 'Серпень', 'Вересень', 'Жовтень', 'Листопад', 'Грудень'],
}

const WEEK_DAYS_BY_LOCALE: Record<string, string[]> = {
  ru: ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'],
  en: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
  el: ['Δε', 'Τρ', 'Τε', 'Πε', 'Πα', 'Σά', 'Κυ'],
  uk: ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Нд'],
}

export default function UserProfilePage() {
  const { id } = useParams<{ id: string }>()
  const { t, locale } = useLocale()
  const { data: session } = useSession()
  const router = useRouter()

const [user, setUser] = useState<any>(null)
  const [reviews, setReviews] = useState<any[]>([])
  const [rating, setRating] = useState<string | null>(null)
  const [loading, setLoading] = useState(true)
  const [specialistCards, setSpecialistCards] = useState<SpecialistCard[]>([])
  const [priceLists, setPriceLists] = useState<Record<string, PriceListGroup[]>>({})
  const [catMap, setCatMap] = useState<Map<string, any>>(new Map())
  const [locMap, setLocMap] = useState<Map<string, any>>(new Map())
  const [isFavorite, setIsFavorite] = useState(false)
  const [favLoading, setFavLoading] = useState(false)
  const [msgLoading, setMsgLoading] = useState(false)
  const [canMsg, setCanMsg] = useState<{ allowed: boolean; senderTier?: string } | null>(null)

// Availability
  const now = new Date()
  const [availYear, setAvailYear] = useState(now.getFullYear())
  const [availMonth, setAvailMonth] = useState(now.getMonth())
  const [availMap, setAvailMap] = useState<Record<string, 'available' | 'busy'>>({})

const today = new Date().toISOString().slice(0, 10)

const dateLocale = locale === 'ru' ? 'ru-RU' : locale === 'uk' ? 'uk-UA' : locale === 'en' ? 'en-US' : 'el-GR'

useEffect(() => {
    if (!id) return
    Promise.all([
      getUserProfile(id, locale),
      getUserReviews(id),
      getUserRating(id),
      getCategories().catch(() => [] as any[]),
      getLocations().catch(() => [] as any[]),
    ])
      .then(([u, r, rt, cats, locs]) => {
        setUser(u)
        setReviews(r)
        setRating(rt.avg)
        setCatMap(new Map(flattenTree(cats as any[]).map((c) => [c.slug, c])))
        setLocMap(new Map(flattenTree(locs as any[]).map((l) => [l.slug, l])))
        if (u.role === 'specialist' || u.role === 'admin') {
          getSpecialistCards(id, locale).then((cards) => {
            setSpecialistCards(cards)
            cards.forEach((c) => {
              getPriceList(c.id, locale).then((pl) => {
                if (pl.length > 0) setPriceLists((prev) => ({ ...prev, [c.id]: pl }))
              }).catch(() => {})
            })
          }).catch(() => {})
        }
      })
      .catch(() => {})
      .finally(() => setLoading(false))
  }, [id, locale])

// Load favorite status when session available
  useEffect(() => {
    if (!session || !id) return
    getSpecialistFavorites()
      .then((rows) => setIsFavorite(rows.some((r) => r.specialist?.id === id)))
      .catch(() => {})
    // Check if current user can message this person
    const myId = (session.user as any)?.id
    if (myId && myId !== id) {
      getCanMessage(id).then(setCanMsg).catch(() => {})
    }
  }, [session, id])

async function toggleFavorite() {
    if (!session) { router.push('/register'); return }
    setFavLoading(true)
    try {
      if (isFavorite) {
        await removeSpecialistFavorite(id)
        setIsFavorite(false)
      } else {
        await addSpecialistFavorite(id)
        setIsFavorite(true)
      }
    } catch {}
    setFavLoading(false)
  }

async function handleMessage() {
    if (!session) { router.push('/login'); return }
    setMsgLoading(true)
    try {
      const { room } = await getOrCreateDirectRoom(id)
      router.push(`/chat?room=${room.id}`)
    } catch {}
    setMsgLoading(false)
  }

useEffect(() => {
    if (!id) return
    const monthKey = `${availYear}-${String(availMonth + 1).padStart(2, '0')}`
    getSpecialistAvailability(id, monthKey)
      .then((rows) => {
        setAvailMap((prev) => {
          const next = { ...prev }
          rows.forEach((r) => { next[r.date] = r.status })
          return next
        })
      })
      .catch(() => {})
  }, [id, availYear, availMonth])

if (loading) return <div className="text-center py-20 text-white">{t('common.loading')}</div>
  if (!user) return <div className="text-center py-20 text-white/70">{t('common.error')}</div>

const initials = `${user.firstName?.[0] ?? ''}${user.lastName?.[0] ?? ''}`.toUpperCase() || user.name?.[0]?.toUpperCase() || '?'
  const displayName = formatShortName(user.firstName, user.lastName, user.name)
  const profileBackgroundImage =
    typeof user.siteSettings?.profileBackgroundImage === 'string' && user.siteSettings.profileBackgroundImage.trim().length > 0
      ? user.siteSettings.profileBackgroundImage
      : null

return (
    <div className="max-w-3xl mx-auto px-4 py-10">
      {/* Profile card */}
      <div className="bg-white rounded-xl border border-gray-200 p-6 mb-6">
        <div
          className="relative -mx-6 -mt-6 mb-5 h-44 overflow-hidden rounded-t-xl"
          style={{
            backgroundImage: profileBackgroundImage
              ? `linear-gradient(135deg, rgba(21, 128, 61, 0.45), rgba(22, 163, 74, 0.65)), url(${profileBackgroundImage})`
              : 'linear-gradient(135deg, #22c55e 0%, #16a34a 45%, #166534 100%)',
            backgroundSize: 'cover',
            backgroundPosition: 'center',
          }}
        >
          <div className="absolute inset-0 bg-gradient-to-b from-black/10 to-black/30" />
          <div className="relative h-full w-full p-5 flex items-end justify-between">
            <div className="flex items-center gap-3 min-w-0">
              <div className="w-14 h-14 rounded-full bg-white/20 border border-white/40 overflow-hidden flex items-center justify-center text-white text-xl font-bold backdrop-blur-sm">
                {user.image ? (
                  <img src={user.image} alt={displayName} className="w-full h-full object-cover" />
                ) : (
                  initials
                )}
              </div>
              <div className="min-w-0">
                <p className="text-white text-lg font-bold truncate">{displayName}</p>
                <p className="text-white/85 text-xs">{t('profile.member_since')} {new Date(user.createdAt).toLocaleDateString(dateLocale)}</p>
              </div>
            </div>
            <div className="shrink-0">
              {user.planTier && user.planTier !== 'free' && (
                <PlanBadge tier={user.planTier} verified={user.hasVerifiedBadge} size="sm" />
              )}
              {user.hasVerifiedBadge && user.planTier === 'free' && (
                <PlanBadge tier="free" verified size="sm" />
              )}
            </div>
          </div>
        </div>

<div className="flex items-start gap-5">
          {/* Avatar */}
          <div className="w-20 h-20 rounded-full bg-green-100 flex-shrink-0 flex items-center justify-center text-green-700 text-2xl font-bold overflow-hidden border-2 border-gray-100">
            {user.image ? (
              <img src={user.image} alt={displayName} className="w-full h-full object-cover" />
            ) : (
              initials
            )}
          </div>

{/* Info */}
          <div className="flex-1 min-w-0">
            <div className="flex items-center gap-2 flex-wrap mb-1">
              <h1 className="text-xl font-bold text-gray-900">{displayName}</h1>
              {user.planTier && user.planTier !== 'free' && (
                <PlanBadge tier={user.planTier} verified={user.hasVerifiedBadge} size="sm" />
              )}
              {user.hasVerifiedBadge && user.planTier === 'free' && (
                <PlanBadge tier="free" verified size="sm" />
              )}
              {/* Active statuses */}
              {Array.isArray(user.activeStatuses) && user.activeStatuses.includes('can_help_now') && (
                <span className="inline-flex items-center gap-1 text-xs font-medium text-green-700 bg-green-50 border border-green-200 px-2 py-0.5 rounded-full">
                  <span className="w-1.5 h-1.5 rounded-full bg-green-500 animate-pulse" />
                  {t('status.can_help_now', 'Available now')}
                </span>
              )}
              {Array.isArray(user.activeStatuses) && user.activeStatuses.includes('need_help') && (
                <span className="inline-flex items-center gap-1 text-xs font-medium text-green-700 bg-green-50 border border-green-200 px-2 py-0.5 rounded-full">
                  <span className="w-1.5 h-1.5 rounded-full bg-green-500" />
                  {t('status.need_help', 'Need help')}
                </span>
              )}
              {(session ? (session.user as any)?.id !== id : true) && (
                <div className="ml-auto flex items-center gap-2">
                  {!session ? (
                    // Guest — show button that leads to registration
                    <a
                      href="/register"
                      className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium bg-green-50 text-green-600 border border-green-200 hover:bg-green-100 transition"
                    >
                      <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.8}>
                        <path strokeLinecap="round" strokeLinejoin="round" d="M8 10h.01M12 10h.01M16 10h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
                      </svg>
                      <span>{t('chat.write_btn', 'Write')}</span>
                    </a>
                  ) : canMsg?.allowed === false ? (
                    <UpgradePrompt
                      feature={t('chat.write_btn', 'Write')}
                      requiredTier="pro"
                      variant="inline"
                      t={t}
                    />
                  ) : (
                    <button
                      onClick={handleMessage}
                      disabled={msgLoading}
                      className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium bg-green-50 text-green-600 border border-green-200 hover:bg-green-100 transition disabled:opacity-50"
                    >
                      <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.8}>
                        <path strokeLinecap="round" strokeLinejoin="round" d="M8 10h.01M12 10h.01M16 10h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
                      </svg>
                      <span>{t('chat.write_btn')}</span>
                    </button>
                  )}
                  <button
                    onClick={toggleFavorite}
                    disabled={favLoading}
                    title={isFavorite ? t('specialist.unfavorite') : t('specialist.favorite')}
                    className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium transition disabled:opacity-50 ${
                      isFavorite
                        ? 'bg-pink-50 text-pink-600 border border-pink-200 hover:bg-pink-100'
                        : 'bg-gray-50 text-gray-600 border border-gray-200 hover:bg-gray-100'
                    }`}
                  >
                    <span>{isFavorite ? '❤️' : '🤍'}</span>
                    <span>{isFavorite ? t('specialist.unfavorite') : t('specialist.favorite')}</span>
                  </button>
                </div>
              )}
            </div>

{/* Rating */}
            {rating && (
              <div className="flex items-center gap-1.5 mb-2">
                <span className="text-yellow-400 text-lg">★</span>
                <span className="font-semibold text-gray-800">{Number(rating).toFixed(1)}</span>
                <span className="text-sm text-gray-400">({reviews.length} {t('profile.reviews').toLowerCase()})</span>
              </div>
            )}

{/* Member since */}
            <p className="text-sm text-gray-400">
              {t('profile.member_since')} {new Date(user.createdAt).toLocaleDateString(dateLocale)}
              {user.lastSeenAt && (
                <span className="ml-2">· {formatLastSeen(user.lastSeenAt, t)}</span>
              )}
            </p>
          </div>
        </div>

{/* Bio */}
          {user.bio && (
            <p className="mt-4 text-gray-700 text-sm leading-relaxed border-t border-gray-100 pt-4">
              {user.bio}
            </p>
          )}

{/* Phone (visible if showContactInfo enabled) */}
          {user.phone && (
            <div className="mt-4 border-t border-gray-100 pt-4 flex items-center gap-2">
              <svg className="w-4 h-4 text-gray-400 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.8}>
                <path strokeLinecap="round" strokeLinejoin="round" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
              </svg>
              <a href={`tel:${user.phone}`} className="text-sm font-medium text-gray-700 hover:text-green-600">{user.phone}</a>
            </div>
          )}

{/* Personal site link */}
          {user.personalSiteSlug && (
            <div className="mt-3 flex items-center gap-2">
              <svg className="w-4 h-4 text-gray-400 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.8}>
                <path strokeLinecap="round" strokeLinejoin="round" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
              </svg>
              <a href={`/site/${user.personalSiteSlug}`} target="_blank" rel="noopener noreferrer"
                className="text-sm text-green-600 hover:underline">
                canhelp.gr/site/{user.personalSiteSlug}
              </a>
            </div>
          )}

{/* Languages */}
        {user.languages && user.languages.length > 0 && (
          <div className="mt-4 border-t border-gray-100 pt-4">
            <p className="text-xs font-medium text-gray-500 mb-2 uppercase tracking-wide">{t('profile.languages')}</p>
            <div className="flex flex-wrap gap-2">
              {(user.languages as string[]).map((code) => {
                const langMap: Record<string, { flag: string; label: string }> = {
                  el: { flag: '🇬🇷', label: 'Ελληνικά' },
                  en: { flag: '🇬🇧', label: 'English' },
                  ru: { flag: '🇷🇺', label: 'Русский' },
                  uk: { flag: '🇺🇦', label: 'Українська' },
                  de: { flag: '🇩🇪', label: 'Deutsch' },
                  fr: { flag: '🇫🇷', label: 'Français' },
                  it: { flag: '🇮🇹', label: 'Italiano' },
                  es: { flag: '🇪🇸', label: 'Español' },
                  ar: { flag: '🇸🇦', label: 'العربية' },
                  zh: { flag: '🇨🇳', label: '中文' },
                }
                const lang = langMap[code]
                if (!lang) return null
                return (
                  <span key={code} className="flex items-center gap-1.5 bg-indigo-50 text-indigo-700 text-sm px-3 py-1 rounded-full border border-indigo-100">
                    <span>{lang.flag}</span>
                    <span>{lang.label}</span>
                  </span>
                )
              })}
            </div>
          </div>
        )}

{/* Skills (global, legacy) */}
        {user.skills && user.skills.length > 0 && specialistCards.length === 0 && (
          <div className="mt-4 border-t border-gray-100 pt-4">
            <p className="text-xs font-medium text-gray-500 mb-2 uppercase tracking-wide">{t('profile.skills.label')}</p>
            <div className="flex flex-wrap gap-2">
              {user.skills.map((skill: string) => (
                <span key={skill} className="bg-green-50 text-green-700 text-sm px-3 py-1 rounded-full">
                  {skill}
                </span>
              ))}
            </div>
          </div>
        )}

{/* Categories (legacy — hidden when cards exist) */}
        {user.role === 'specialist' && user.specialistCategories && user.specialistCategories.length > 0 && specialistCards.length === 0 && (
          <div className="mt-4 border-t border-gray-100 pt-4">
            <p className="text-xs font-medium text-gray-500 mb-2 uppercase tracking-wide">
              {t('user.categories')}
            </p>
            <div className="flex flex-wrap gap-2">
              {user.specialistCategories.map((slug: string) => (
                <span key={slug} className="bg-purple-50 text-purple-700 text-sm px-3 py-1 rounded-full">{slug}</span>
              ))}
            </div>
          </div>
        )}

{/* Geography (legacy — hidden when cards exist) */}
        {user.role === 'specialist' && user.specialistLocations && user.specialistLocations.length > 0 && specialistCards.length === 0 && (
          <div className="mt-4 border-t border-gray-100 pt-4">
            <p className="text-xs font-medium text-gray-500 mb-2 uppercase tracking-wide">
              {t('user.work_area')}
            </p>
            <div className="flex flex-wrap gap-2">
              {user.specialistLocations.map((slug: string) => (
                <span key={slug} className="bg-emerald-50 text-emerald-700 text-sm px-3 py-1 rounded-full">📍 {slug}</span>
              ))}
            </div>
          </div>
        )}
      </div>

{/* Reviews */}
      {user.role === 'specialist' && (
        <div className="bg-white rounded-xl border border-gray-200 p-6 mb-6">
          <div className="flex items-center justify-between mb-4">
            <h2 className="font-bold text-gray-900 text-lg">📅 {t('nav.schedule')}</h2>
            <div className="flex items-center gap-3 text-xs text-gray-500">
              <span className="flex items-center gap-1.5">
                <span className="w-3 h-3 rounded bg-emerald-200 border border-emerald-400 inline-block" />
                {t('schedule.available')}
              </span>
              <span className="flex items-center gap-1.5">
                <span className="w-3 h-3 rounded bg-red-200 border border-red-400 inline-block" />
                {t('schedule.busy')}
              </span>
            </div>
          </div>
          <ReadOnlyCalendar
            year={availYear}
            month={availMonth}
            availMap={availMap}
            today={today}
            onPrev={() => {
              if (availMonth === 0) { setAvailYear((y) => y - 1); setAvailMonth(11) }
              else setAvailMonth((m) => m - 1)
            }}
            onNext={() => {
              if (availMonth === 11) { setAvailYear((y) => y + 1); setAvailMonth(0) }
              else setAvailMonth((m) => m + 1)
            }}
          />
        </div>
      )}

{/* Specialist cards */}
      {(user.role === 'specialist' || user.role === 'admin') && specialistCards.length > 0 && (
        <div className="space-y-4 mb-6">
          <h2 className="font-bold text-white text-lg">
            {t('nav.specialists')}
          </h2>
          {specialistCards.map((card) => (
            <PublicCardView key={card.id} card={card} locale={locale} catMap={catMap} locMap={locMap} t={t} priceList={priceLists[card.id] ?? []} />
          ))}
        </div>
      )}

{/* Reviews */}
      <div className="bg-white rounded-xl border border-gray-200 p-6">
        <h2 className="font-bold text-gray-900 text-lg mb-4">
          {t('profile.reviews')}
          {reviews.length > 0 && <span className="text-gray-400 font-normal text-base ml-2">({reviews.length})</span>}
        </h2>

{reviews.length === 0 ? (
          <p className="text-gray-500 text-sm">{t('profile.no_reviews')}</p>
        ) : (
          <div className="space-y-4">
            {reviews.map(({ review, author }: any) => (
              <div key={review.id} className="border-b border-gray-50 pb-4 last:border-0 last:pb-0">
                <div className="flex items-start gap-3">
                  <div className="w-8 h-8 rounded-full bg-gray-100 flex-shrink-0 flex items-center justify-center text-gray-600 text-sm font-bold overflow-hidden">
                    {author?.image ? (
                      <img src={author.image} alt={author.name} className="w-full h-full object-cover" />
                    ) : (
                      author?.name?.[0]?.toUpperCase() ?? '?'
                    )}
                  </div>
                  <div className="flex-1">
                    <div className="flex items-center gap-2 mb-1">
                      <span className="text-sm font-medium text-gray-800">{shortName(author?.name) ?? '—'}</span>
                      <span className="text-yellow-400">{'★'.repeat(review.rating)}{'☆'.repeat(5 - review.rating)}</span>
                    </div>
                    {review.comment && (
                      <p className="text-sm text-gray-600">{review.comment}</p>
                    )}
                    <p className="text-xs text-gray-400 mt-1">
                      {new Date(review.createdAt).toLocaleDateString(dateLocale)}
                    </p>
                  </div>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  )
}

function ReadOnlyCalendar({
  year,
  month,
  availMap,
  today,
  onPrev,
  onNext,
}: {
  year: number
  month: number
  availMap: Record<string, 'available' | 'busy'>
  today: string
  onPrev: () => void
  onNext: () => void
}) {
  const { locale, t } = useLocale()
  const weekDays = WEEK_DAYS_BY_LOCALE[locale] ?? WEEK_DAYS_BY_LOCALE.ru
  const months = MONTHS_BY_LOCALE[locale] ?? MONTHS_BY_LOCALE.ru
  const firstDay = new Date(year, month, 1)
  const startDow = (firstDay.getDay() + 6) % 7
  const daysInMonth = new Date(year, month + 1, 0).getDate()
  const prevMonthDays = new Date(year, month, 0).getDate()

const cells: Array<{ day: number; cur: boolean; dateKey: string }> = []
  for (let i = startDow - 1; i >= 0; i--) {
    cells.push({ day: prevMonthDays - i, cur: false, dateKey: '' })
  }
  for (let d = 1; d <= daysInMonth; d++) {
    const dateKey = `${year}-${String(month + 1).padStart(2, '0')}-${String(d).padStart(2, '0')}`
    cells.push({ day: d, cur: true, dateKey })
  }
  const remainder = cells.length % 7
  if (remainder !== 0) {
    for (let d = 1; d <= 7 - remainder; d++) {
      cells.push({ day: d, cur: false, dateKey: '' })
    }
  }

const monthPrefix = `${year}-${String(month + 1).padStart(2, '0')}`
  const availCount = Object.entries(availMap).filter(([k, v]) => k.startsWith(monthPrefix) && k >= today && v === 'available').length

return (
    <div>
      {/* Month nav */}
      <div className="flex items-center justify-between mb-3">
        <button onClick={onPrev} className="w-7 h-7 rounded-lg hover:bg-gray-100 flex items-center justify-center text-gray-500">‹</button>
        <div className="text-center">
          <span className="font-medium text-gray-800 text-sm">{months[month]} {year}</span>
          {availCount > 0 && (
            <span className="ml-2 text-xs text-emerald-600">{availCount} {t('schedule.free_days')}</span>
          )}
        </div>
        <button onClick={onNext} className="w-7 h-7 rounded-lg hover:bg-gray-100 flex items-center justify-center text-gray-500">›</button>
      </div>

{/* Day headers */}
      <div className="grid grid-cols-7 mb-1">
        {weekDays.map((d) => (
          <div key={d} className="text-center text-xs text-gray-400 py-1">{d}</div>
        ))}
      </div>

{/* Cells */}
      <div className="grid grid-cols-7 gap-0.5">
        {cells.map((cell, idx) => {
          if (!cell.cur) {
            return <div key={`e-${idx}`} className="h-9 flex items-center justify-center text-xs text-gray-200">{cell.day}</div>
          }
          const status = availMap[cell.dateKey]
          const isPast = cell.dateKey < today
          const isToday = cell.dateKey === today

let cls = 'h-9 flex items-center justify-center rounded-lg text-sm font-medium '
          if (isPast) {
            cls += 'text-gray-200 '
          } else if (status === 'available') {
            cls += 'bg-emerald-100 border border-emerald-300 text-emerald-700 '
          } else if (status === 'busy') {
            cls += 'bg-red-100 border border-red-300 text-red-600 '
          } else {
            cls += 'text-gray-500 '
          }
          if (isToday) cls += 'ring-2 ring-blue-400 ring-offset-1 '

return (
            <div key={cell.dateKey} className={cls}>{cell.day}</div>
          )
        })}
      </div>
    </div>
  )
}

// ─── Public card view ─────────────────────────────────────────────────────────

function flattenTree(nodes: any[]): any[] {
  return nodes.flatMap((n) => [n, ...flattenTree(n.children ?? [])])
}

function PublicCardView({ card, locale, catMap, locMap, t, priceList }: { card: SpecialistCard; locale: string; catMap: Map<string, any>; locMap: Map<string, any>; t: (key: string) => string; priceList: PriceListGroup[] }) {
  const [lightbox, setLightbox] = useState<SpecialistCard['portfolio'][0] | null>(null)
  const [expandedAreas, setExpandedAreas] = useState<string[]>([])

const locById = new Map<string, any>()
  for (const node of locMap.values()) {
    if (node?.id) locById.set(node.id, node)
  }

const getLocName = (loc: any, fallback: string) => (loc?.names?.[locale] || loc?.names?.el || fallback)

const locationGroups = (() => {
    const grouped = new Map<string, { root: any; rootSlug: string; districts: any[]; districtSlugs: Set<string> }>()

for (const slug of card.locations ?? []) {
      const loc = locMap.get(slug)
      if (!loc) {
        if (!grouped.has(slug)) {
          grouped.set(slug, {
            root: { slug, names: { el: slug } },
            rootSlug: slug,
            districts: [],
            districtSlugs: new Set(),
          })
        }
        continue
      }

let root = loc
      const seenIds = new Set<string>()
      while (root?.parentId && locById.has(root.parentId) && !seenIds.has(root.parentId)) {
        seenIds.add(root.parentId)
        root = locById.get(root.parentId)
      }

const rootSlug = root?.slug ?? slug
      if (!grouped.has(rootSlug)) {
        grouped.set(rootSlug, { root, rootSlug, districts: [], districtSlugs: new Set() })
      }

const group = grouped.get(rootSlug)!
      if (loc.slug !== rootSlug && !group.districtSlugs.has(loc.slug)) {
        group.districtSlugs.add(loc.slug)
        group.districts.push(loc)
      }
    }

return Array.from(grouped.values())
  })()

return (
    <div className="bg-white rounded-xl border border-gray-200 overflow-hidden">
      {/* Card header */}
      <div className="px-5 py-4 border-b border-gray-100">
        <h3 className="font-bold text-gray-900">{card.title}</h3>
        {card.description && <p className="text-sm text-gray-600 mt-1">{card.description}</p>}
      </div>

<div className="p-5 space-y-4">
        {/* Skills */}
        {card.skills && card.skills.length > 0 && (
          <div>
            <p className="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-2">{t('card.skills')}</p>
            <div className="flex flex-wrap gap-2">
              {card.skills.map((s) => (
                <span key={s} className="bg-green-50 text-green-700 text-sm px-3 py-1 rounded-full">{s}</span>
              ))}
            </div>
          </div>
        )}

{/* Categories */}
        {card.categories && card.categories.length > 0 && (
          <div>
            <p className="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-2">{t('card.categories')}</p>
            <div className="flex flex-wrap gap-2">
              {card.categories.map((s) => {
                const cat = catMap.get(s)
                const name = cat ? (cat.names?.[locale] || cat.names?.el || s) : s
                return (
                  <span key={s} className="bg-purple-50 text-purple-700 text-sm px-3 py-1 rounded-full">
                    {cat?.icon ? (
                      <span className="mr-1 inline-flex align-middle">
                        <CategoryIcon
                          icon={cat.icon}
                          alt={name}
                          className={isCategoryIconUrl(cat.icon) ? 'h-4 w-4 object-contain' : 'text-sm leading-none'}
                          fallback="📦"
                        />
                      </span>
                    ) : null}
                    {name}
                  </span>
                )
              })}
            </div>
          </div>
        )}

{/* Geography */}
        {card.locations && card.locations.length > 0 && (
          <div>
            <p className="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-2">{t('user.work_area')}</p>
            <div className="space-y-2">
              <div className="flex flex-wrap gap-2">
                {locationGroups.map((group) => {
                  const expanded = expandedAreas.includes(group.rootSlug)
                  const canExpand = group.districts.length > 0
                  return (
                    <button
                      key={group.rootSlug}
                      type="button"
                      onClick={() => {
                        if (!canExpand) return
                        setExpandedAreas((prev) =>
                          prev.includes(group.rootSlug)
                            ? prev.filter((slug) => slug !== group.rootSlug)
                            : [...prev, group.rootSlug],
                        )
                      }}
                      className={`inline-flex items-center gap-1.5 text-sm px-3 py-1.5 rounded-full border transition ${
                        expanded
                          ? 'bg-emerald-100 text-emerald-800 border-emerald-300'
                          : 'bg-emerald-50 text-emerald-700 border-emerald-200 hover:bg-emerald-100'
                      } ${canExpand ? 'cursor-pointer' : 'cursor-default'}`}
                    >
                      <span>📍</span>
                      <span>{getLocName(group.root, group.rootSlug)}</span>
                      {canExpand && (
                        <span className="text-[11px] font-semibold px-1.5 py-0.5 rounded-full bg-white/80 text-emerald-700 border border-emerald-200">
                          {expanded ? '−' : `+${group.districts.length}`}
                        </span>
                      )}
                    </button>
                  )
                })}
              </div>

{locationGroups
                .filter((group) => expandedAreas.includes(group.rootSlug) && group.districts.length > 0)
                .map((group) => (
                  <div key={`${group.rootSlug}-children`} className="rounded-xl border border-emerald-100 bg-emerald-50/40 p-3">
                    <p className="text-xs text-emerald-700 font-medium mb-2">
                      {getLocName(group.root, group.rootSlug)}
                    </p>
                    <div className="flex flex-wrap gap-1.5">
                      {group.districts.map((district) => (
                        <span key={district.slug} className="text-xs px-2.5 py-1 rounded-full bg-white border border-emerald-200 text-emerald-700">
                          {getLocName(district, district.slug)}
                        </span>
                      ))}
                    </div>
                  </div>
                ))}
            </div>
          </div>
        )}

{/* Price list */}
        {priceList.length > 0 && (
          <div>
            <p className="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-3">{t('profile.card.tab.pricelist')}</p>
            <div className="space-y-3">
              {priceList.map((group) => (
                <div key={group.id} className="border border-gray-200 rounded-xl overflow-hidden">
                  <div className="bg-gray-50 px-4 py-2 border-b border-gray-200">
                    <span className="font-semibold text-sm text-gray-800">{group.title}</span>
                  </div>
                  <div className="divide-y divide-gray-100">
                    {group.items.map((item) => (
                      <div key={item.id} className="flex items-center gap-3 px-4 py-2.5 text-sm">
                        <div className="flex-1 min-w-0">
                          <p className="font-medium text-gray-800">{item.name}</p>
                          {item.description && <p className="text-xs text-gray-500">{item.description}</p>}
                        </div>
                        {(item.price || item.unit) && (
                          <span className="text-green-700 font-semibold whitespace-nowrap">
                            {item.price ? `€${item.price}` : ''}{item.unit ? ` ${item.unit}` : ''}
                          </span>
                        )}
                      </div>
                    ))}
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}

{/* Portfolio */}
        {card.portfolio && card.portfolio.length > 0 && (
          <div>
            <p className="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-2">{t('card.portfolio')}</p>
            <div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
              {card.portfolio.map((item) => (
                <button key={item.id} type="button" onClick={() => setLightbox(item)}
                  className="group relative rounded-xl overflow-hidden border border-gray-200 bg-gray-50 text-left">
                  <img src={item.imageUrl} alt={item.title ?? ''} className="w-full aspect-square object-cover group-hover:scale-105 transition-transform duration-200"/>
                  {item.title && <div className="px-2 py-1.5"><p className="text-xs font-medium text-gray-700 truncate">{item.title}</p></div>}
                </button>
              ))}
            </div>
          </div>
        )}
      </div>

{/* Lightbox */}
      {lightbox && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 px-4" onClick={() => setLightbox(null)}>
          <div className="bg-white rounded-2xl overflow-hidden max-w-lg w-full shadow-2xl" onClick={(e) => e.stopPropagation()}>
            <img src={lightbox.imageUrl} alt={lightbox.title ?? ''} className="w-full max-h-[60vh] object-contain bg-gray-900"/>
            {(lightbox.title || lightbox.description) && (
              <div className="p-4">
                {lightbox.title && <p className="font-semibold text-gray-800 mb-1">{lightbox.title}</p>}
                {lightbox.description && <p className="text-sm text-gray-600">{lightbox.description}</p>}
              </div>
            )}
            <div className="flex justify-end px-4 pb-4">
              <button type="button" onClick={() => setLightbox(null)}
                className="text-sm text-gray-500 hover:text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100">
                {t('card.close')}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}

'use client' import { useState, useEffect } from 'react' import { useParams, useRouter } from 'next/navigation' import { useLocale } from '@/context/locale' import { useSession } from '@/lib/auth' import { getUserProfile, getUserReviews, getUserRating, getSpecialistAvailability, getSpecialistCards, getCategories, getLocations, getSpecialistFavorites, addSpecialistFavorite, removeSpecialistFavorite, getOrCreateDirectRoom, getCanMessage, getPriceList } from '@/lib/api' import { UpgradePrompt } from '@/components/UpgradePrompt' import type { SpecialistCard, PriceListGroup } from '@/lib/api' import { formatShortName, shortName } from '@/lib/formatName' import { formatLastSeen } from '@/lib/formatLastSeen' import { PlanBadge } from '@/components/PlanBadge' import { CategoryIcon, isCategoryIconUrl } from '@/components/CategoryIcon' const MONTHS_BY_LOCALE: Record = { ru: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'], en: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'], el: ['Ιανουάριος', 'Φεβρουάριος', 'Μάρτιος', 'Απρίλιος', 'Μάιος', 'Ιούνιος', 'Ιούλιος', 'Αύγουστος', 'Σεπτέμβριος', 'Οκτώβριος', 'Νοέμβριος', 'Δεκέμβριος'], uk: ['Січень', 'Лютий', 'Березень', 'Квітень', 'Травень', 'Червень', 'Липень', 'Серпень', 'Вересень', 'Жовтень', 'Листопад', 'Грудень'], } const WEEK_DAYS_BY_LOCALE: Record = { ru: ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'], en: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'], el: ['Δε', 'Τρ', 'Τε', 'Πε', 'Πα', 'Σά', 'Κυ'], uk: ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Нд'], } export default function UserProfilePage() { const { id } = useParams<{ id: string }>() const { t, locale } = useLocale() const { data: session } = useSession() const router = useRouter() const [user, setUser] = useState(null) const [reviews, setReviews] = useState([]) const [rating, setRating] = useState(null) const [loading, setLoading] = useState(true) const [specialistCards, setSpecialistCards] = useState([]) const [priceLists, setPriceLists] = useState>({}) const [catMap, setCatMap] = useState>(new Map()) const [locMap, setLocMap] = useState>(new Map()) const [isFavorite, setIsFavorite] = useState(false) const [favLoading, setFavLoading] = useState(false) const [msgLoading, setMsgLoading] = useState(false) const [canMsg, setCanMsg] = useState<{ allowed: boolean; senderTier?: string } | null>(null) // Availability const now = new Date() const [availYear, setAvailYear] = useState(now.getFullYear()) const [availMonth, setAvailMonth] = useState(now.getMonth()) const [availMap, setAvailMap] = useState>({}) const today = new Date().toISOString().slice(0, 10) const dateLocale = locale === 'ru' ? 'ru-RU' : locale === 'uk' ? 'uk-UA' : locale === 'en' ? 'en-US' : 'el-GR' useEffect(() => { if (!id) return Promise.all([ getUserProfile(id, locale), getUserReviews(id), getUserRating(id), getCategories().catch(() => [] as any[]), getLocations().catch(() => [] as any[]), ]) .then(([u, r, rt, cats, locs]) => { setUser(u) setReviews(r) setRating(rt.avg) setCatMap(new Map(flattenTree(cats as any[]).map((c) => [c.slug, c]))) setLocMap(new Map(flattenTree(locs as any[]).map((l) => [l.slug, l]))) if (u.role === 'specialist' || u.role === 'admin') { getSpecialistCards(id, locale).then((cards) => { setSpecialistCards(cards) cards.forEach((c) => { getPriceList(c.id, locale).then((pl) => { if (pl.length > 0) setPriceLists((prev) => ({ ...prev, [c.id]: pl })) }).catch(() => {}) }) }).catch(() => {}) } }) .catch(() => {}) .finally(() => setLoading(false)) }, [id, locale]) // Load favorite status when session available useEffect(() => { if (!session || !id) return getSpecialistFavorites() .then((rows) => setIsFavorite(rows.some((r) => r.specialist?.id === id))) .catch(() => {}) // Check if current user can message this person const myId = (session.user as any)?.id if (myId && myId !== id) { getCanMessage(id).then(setCanMsg).catch(() => {}) } }, [session, id]) async function toggleFavorite() { if (!session) { router.push('/register'); return } setFavLoading(true) try { if (isFavorite) { await removeSpecialistFavorite(id) setIsFavorite(false) } else { await addSpecialistFavorite(id) setIsFavorite(true) } } catch {} setFavLoading(false) } async function handleMessage() { if (!session) { router.push('/login'); return } setMsgLoading(true) try { const { room } = await getOrCreateDirectRoom(id) router.push(`/chat?room=${room.id}`) } catch {} setMsgLoading(false) } useEffect(() => { if (!id) return const monthKey = `${availYear}-${String(availMonth + 1).padStart(2, '0')}` getSpecialistAvailability(id, monthKey) .then((rows) => { setAvailMap((prev) => { const next = { ...prev } rows.forEach((r) => { next[r.date] = r.status }) return next }) }) .catch(() => {}) }, [id, availYear, availMonth]) if (loading) return

{t('common.loading')}

if (!user) return

{t('common.error')}

const initials = `${user.firstName?.[0] ?? ''}${user.lastName?.[0] ?? ''}`.toUpperCase() || user.name?.[0]?.toUpperCase() || '?' const displayName = formatShortName(user.firstName, user.lastName, user.name) const profileBackgroundImage = typeof user.siteSettings?.profileBackgroundImage === 'string' && user.siteSettings.profileBackgroundImage.trim().length > 0 ? user.siteSettings.profileBackgroundImage : null return (

{/* Profile card */}

{user.image ? ( {displayName}

) : ( initials )}

{displayName}

{t('profile.member_since')} {new Date(user.createdAt).toLocaleDateString(dateLocale)}

{user.planTier && user.planTier !== 'free' && ( )} {user.hasVerifiedBadge && user.planTier === 'free' && ( )}

{/* Avatar */}

{user.image ? ( {displayName}

) : ( initials )}

{/* Info */}

{displayName}

{user.planTier && user.planTier !== 'free' && ( )} {user.hasVerifiedBadge && user.planTier === 'free' && ( )} {/* Active statuses */} {Array.isArray(user.activeStatuses) && user.activeStatuses.includes('can_help_now') && ( {t('status.can_help_now', 'Available now')} )} {Array.isArray(user.activeStatuses) && user.activeStatuses.includes('need_help') && ( {t('status.need_help', 'Need help')} )} {(session ? (session.user as any)?.id !== id : true) && (

{!session ? ( // Guest — show button that leads to registration {t('chat.write_btn', 'Write')} ) : canMsg?.allowed === false ? ( ) : ( )}

)}

{/* Rating */} {rating && (

★ {Number(rating).toFixed(1)} ({reviews.length} {t('profile.reviews').toLowerCase()})

)} {/* Member since */}

{t('profile.member_since')} {new Date(user.createdAt).toLocaleDateString(dateLocale)} {user.lastSeenAt && ( · {formatLastSeen(user.lastSeenAt, t)} )}

{/* Bio */} {user.bio && (

{user.bio}

)} {/* Phone (visible if showContactInfo enabled) */} {user.phone && (

{user.phone}

)} {/* Personal site link */} {user.personalSiteSlug && (

canhelp.gr/site/{user.personalSiteSlug}

)} {/* Languages */} {user.languages && user.languages.length > 0 && (

{t('profile.languages')}

{(user.languages as string[]).map((code) => { const langMap: Record = { el: { flag: '🇬🇷', label: 'Ελληνικά' }, en: { flag: '🇬🇧', label: 'English' }, ru: { flag: '🇷🇺', label: 'Русский' }, uk: { flag: '🇺🇦', label: 'Українська' }, de: { flag: '🇩🇪', label: 'Deutsch' }, fr: { flag: '🇫🇷', label: 'Français' }, it: { flag: '🇮🇹', label: 'Italiano' }, es: { flag: '🇪🇸', label: 'Español' }, ar: { flag: '🇸🇦', label: 'العربية' }, zh: { flag: '🇨🇳', label: '中文' }, } const lang = langMap[code] if (!lang) return null return ( {lang.flag} {lang.label} ) })}

)} {/* Skills (global, legacy) */} {user.skills && user.skills.length > 0 && specialistCards.length === 0 && (

{t('profile.skills.label')}

{user.skills.map((skill: string) => ( {skill} ))}

)} {/* Categories (legacy — hidden when cards exist) */} {user.role === 'specialist' && user.specialistCategories && user.specialistCategories.length > 0 && specialistCards.length === 0 && (

{t('user.categories')}

{user.specialistCategories.map((slug: string) => ( {slug} ))}

)} {/* Geography (legacy — hidden when cards exist) */} {user.role === 'specialist' && user.specialistLocations && user.specialistLocations.length > 0 && specialistCards.length === 0 && (

{t('user.work_area')}

{user.specialistLocations.map((slug: string) => ( 📍 {slug} ))}

)}

{/* Reviews */} {user.role === 'specialist' && (

📅 {t('nav.schedule')}

{t('schedule.available')} {t('schedule.busy')}

{ if (availMonth === 0) { setAvailYear((y) => y - 1); setAvailMonth(11) } else setAvailMonth((m) => m - 1) }} onNext={() => { if (availMonth === 11) { setAvailYear((y) => y + 1); setAvailMonth(0) } else setAvailMonth((m) => m + 1) }} />

)} {/* Specialist cards */} {(user.role === 'specialist' || user.role === 'admin') && specialistCards.length > 0 && (

{t('nav.specialists')}

{specialistCards.map((card) => ( ))}

)} {/* Reviews */}

{t('profile.reviews')} {reviews.length > 0 && ({reviews.length})}

{reviews.length === 0 ? (

{t('profile.no_reviews')}

) : (

{reviews.map(({ review, author }: any) => (

{author?.image ? ( {author.name}

) : ( author?.name?.[0]?.toUpperCase() ?? '?' )}

{shortName(author?.name) ?? '—'} {'★'.repeat(review.rating)}{'☆'.repeat(5 - review.rating)}

{review.comment && (

{review.comment}

)}

{new Date(review.createdAt).toLocaleDateString(dateLocale)}

))}

)}

) } function ReadOnlyCalendar({ year, month, availMap, today, onPrev, onNext, }: { year: number month: number availMap: Record today: string onPrev: () => void onNext: () => void }) { const { locale, t } = useLocale() const weekDays = WEEK_DAYS_BY_LOCALE[locale] ?? WEEK_DAYS_BY_LOCALE.ru const months = MONTHS_BY_LOCALE[locale] ?? MONTHS_BY_LOCALE.ru const firstDay = new Date(year, month, 1) const startDow = (firstDay.getDay() + 6) % 7 const daysInMonth = new Date(year, month + 1, 0).getDate() const prevMonthDays = new Date(year, month, 0).getDate() const cells: Array<{ day: number; cur: boolean; dateKey: string }> = [] for (let i = startDow - 1; i >= 0; i--) { cells.push({ day: prevMonthDays - i, cur: false, dateKey: '' }) } for (let d = 1; d <= daysInMonth; d++) { const dateKey = `${year}-${String(month + 1).padStart(2, '0')}-${String(d).padStart(2, '0')}` cells.push({ day: d, cur: true, dateKey }) } const remainder = cells.length % 7 if (remainder !== 0) { for (let d = 1; d <= 7 - remainder; d++) { cells.push({ day: d, cur: false, dateKey: '' }) } } const monthPrefix = `${year}-${String(month + 1).padStart(2, '0')}` const availCount = Object.entries(availMap).filter(([k, v]) => k.startsWith(monthPrefix) && k >= today && v === 'available').length return (

{/* Month nav */}

{months[month]} {year} {availCount > 0 && ( {availCount} {t('schedule.free_days')} )}

{/* Day headers */}

{weekDays.map((d) => (

{d}

))}

{/* Cells */}

{cells.map((cell, idx) => { if (!cell.cur) { return

{cell.day}

} const status = availMap[cell.dateKey] const isPast = cell.dateKey < today const isToday = cell.dateKey === today let cls = 'h-9 flex items-center justify-center rounded-lg text-sm font-medium ' if (isPast) { cls += 'text-gray-200 ' } else if (status === 'available') { cls += 'bg-emerald-100 border border-emerald-300 text-emerald-700 ' } else if (status === 'busy') { cls += 'bg-red-100 border border-red-300 text-red-600 ' } else { cls += 'text-gray-500 ' } if (isToday) cls += 'ring-2 ring-blue-400 ring-offset-1 ' return (

{cell.day}

) })}

) } // ─── Public card view ───────────────────────────────────────────────────────── function flattenTree(nodes: any[]): any[] { return nodes.flatMap((n) => [n, ...flattenTree(n.children ?? [])]) } function PublicCardView({ card, locale, catMap, locMap, t, priceList }: { card: SpecialistCard; locale: string; catMap: Map; locMap: Map; t: (key: string) => string; priceList: PriceListGroup[] }) { const [lightbox, setLightbox] = useState(null) const [expandedAreas, setExpandedAreas] = useState([]) const locById = new Map() for (const node of locMap.values()) { if (node?.id) locById.set(node.id, node) } const getLocName = (loc: any, fallback: string) => (loc?.names?.[locale] || loc?.names?.el || fallback) const locationGroups = (() => { const grouped = new Map }>() for (const slug of card.locations ?? []) { const loc = locMap.get(slug) if (!loc) { if (!grouped.has(slug)) { grouped.set(slug, { root: { slug, names: { el: slug } }, rootSlug: slug, districts: [], districtSlugs: new Set(), }) } continue } let root = loc const seenIds = new Set() while (root?.parentId && locById.has(root.parentId) && !seenIds.has(root.parentId)) { seenIds.add(root.parentId) root = locById.get(root.parentId) } const rootSlug = root?.slug ?? slug if (!grouped.has(rootSlug)) { grouped.set(rootSlug, { root, rootSlug, districts: [], districtSlugs: new Set() }) } const group = grouped.get(rootSlug)! if (loc.slug !== rootSlug && !group.districtSlugs.has(loc.slug)) { group.districtSlugs.add(loc.slug) group.districts.push(loc) } } return Array.from(grouped.values()) })() return (

{/* Card header */}

{card.title}

{card.description &&

{card.description}

}

{/* Skills */} {card.skills && card.skills.length > 0 && (

{t('card.skills')}

{card.skills.map((s) => ( {s} ))}

)} {/* Categories */} {card.categories && card.categories.length > 0 && (

{t('card.categories')}

{card.categories.map((s) => { const cat = catMap.get(s) const name = cat ? (cat.names?.[locale] || cat.names?.el || s) : s return ( {cat?.icon ? ( ) : null} {name} ) })}

)} {/* Geography */} {card.locations && card.locations.length > 0 && (

{t('user.work_area')}

{locationGroups.map((group) => { const expanded = expandedAreas.includes(group.rootSlug) const canExpand = group.districts.length > 0 return ( ) })}

{locationGroups .filter((group) => expandedAreas.includes(group.rootSlug) && group.districts.length > 0) .map((group) => (

{getLocName(group.root, group.rootSlug)}

{group.districts.map((district) => ( {getLocName(district, district.slug)} ))}

))}

)} {/* Price list */} {priceList.length > 0 && (

{t('profile.card.tab.pricelist')}

{priceList.map((group) => (

{group.title}

{group.items.map((item) => (

{item.name}

{item.description &&

{item.description}

}

{(item.price || item.unit) && ( {item.price ? `€${item.price}` : ''}{item.unit ? ` ${item.unit}` : ''} )}

))}

)} {/* Portfolio */} {card.portfolio && card.portfolio.length > 0 && (

{t('card.portfolio')}

{card.portfolio.map((item) => ( ))}

)}

{/* Lightbox */} {lightbox && (

setLightbox(null)}>

e.stopPropagation()}>

{(lightbox.title || lightbox.description) && (

{lightbox.title &&

{lightbox.title}

} {lightbox.description &&

{lightbox.description}

}

)}

) }