sozsoft-platform/ui/src/views/intranet/widgets/UpcomingEvents.tsx

import React from 'react'
import { FaCalendarAlt } from 'react-icons/fa'
import dayjs from 'dayjs'
import { EventDto } from '@/proxy/intranet/models'
import useLocale from '@/utils/hooks/useLocale'
import { currentLocalDate } from '@/utils/dateUtils'
import { useLocalization } from '@/utils/hooks/useLocalization'

interface UpcomingEventsProps {
  events: EventDto[]
  onEventClick?: (event: EventDto) => void
}

const getFirstPhoto = (photos?: string): string | null => {
  if (!photos) return null
  const parts = photos.split('|').filter(Boolean)
  return parts.length > 0 ? parts[0] : null
}

const photoSrc = (img: string) => {
  if (
    img.startsWith('data:') ||
    img.startsWith('http://') ||
    img.startsWith('https://') ||
    img.startsWith('/')
  )
    return img
  return `data:image/jpeg;base64,${img}`
}

const UpcomingEvents: React.FC<UpcomingEventsProps> = ({ events, onEventClick }) => {
  const currentLocale = useLocale()
  const { translate } = useLocalization()

  const now = dayjs()
  const upcomingEvents = events
    .filter((event) => event.isPublished && !dayjs(event.date).isBefore(now, 'day'))
    .sort((left, right) => dayjs(left.date).valueOf() - dayjs(right.date).valueOf())

  return (
    <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
      <div className="p-4 border-b border-gray-200 dark:border-gray-700">
        <h2 className="text-base font-semibold text-gray-900 dark:text-white flex items-center gap-2">
          <FaCalendarAlt className="w-5 h-5" />
          {translate('::App.Platform.Intranet.Widgets.UpcomingEvents.Title')}
        </h2>
      </div>
      <div className="p-4 space-y-3">
        {upcomingEvents.length > 0 ? (
          upcomingEvents.slice(0, 3).map((event) => {
            const firstPhoto = getFirstPhoto(event.photos)
            return (
              <div
                key={event.id}
                onClick={() => onEventClick?.(event)}
                className={`p-3 rounded-lg border-l-4 bg-gray-50 dark:bg-gray-700/50 border-l-green-500 flex items-center gap-3 ${onEventClick ? 'cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600/50 transition-colors' : ''}`}
              >
                <div className="flex-1 min-w-0">
                  <h4 className="text-sm font-medium text-gray-900 dark:text-white">{event.name}</h4>
                  <p className="text-xs text-gray-600 dark:text-gray-400 mt-1">
                    {currentLocalDate(event.date, currentLocale || 'tr')} - {event.place}
                  </p>
                </div>
                {firstPhoto && (
                  <img
                    src={photoSrc(firstPhoto)}
                    alt={event.name}
                    className="w-14 h-14 rounded-lg object-cover flex-shrink-0"
                  />
                )}
              </div>
            )
          })
        ) : (
          <p className="text-sm text-gray-500 dark:text-gray-400 text-center py-4">
            {translate('::App.Platform.Intranet.Widgets.UpcomingEvents.NoEvent')}
          </p>
        )}
      </div>
    </div>
  )
}

export default UpcomingEvents