import React from 'react'

function timeAgo(dateStr) {
  if (!dateStr) return ''
  const date = new Date(dateStr)
  const seconds = Math.floor((Date.now() - date.getTime()) / 1000)
  if (seconds < 60) return 'just now'
  const minutes = Math.floor(seconds / 60)
  if (minutes < 60) return `${minutes}m ago`
  const hours = Math.floor(minutes / 60)
  if (hours < 24) return `${hours}h ago`
  const days = Math.floor(hours / 24)
  if (days < 365) return `${days}d ago`
  return date.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' })
}

function Avatar({ user, size = 36 }) {
  if (user?.avatar_url) {
    return (
      <img
        src={user.avatar_url}
        alt={user.name || user.username || ''}
        width={size}
        height={size}
        className="rounded-full object-cover shrink-0"
        style={{ width: size, height: size }}
        loading="lazy"
      />
    )
  }
  const initials = (user?.name || user?.username || '?').slice(0, 1).toUpperCase()
  return (
    <span
      className="flex items-center justify-center rounded-full bg-neutral-700 text-sm font-bold text-white shrink-0"
      style={{ width: size, height: size }}
    >
      {initials}
    </span>
  )
}

export default function ArtworkComments({ comments = [] }) {
  if (!comments || comments.length === 0) return null

  return (
    <section aria-label="Comments">
      <h2 className="text-base font-semibold text-white mb-4">
        Comments{' '}
        <span className="text-neutral-500 font-normal">({comments.length})</span>
      </h2>

      <ul className="space-y-5">
        {comments.map((comment) => (
          <li key={comment.id} className="flex gap-3">
            {comment.user?.profile_url ? (
              <a href={comment.user.profile_url} className="shrink-0 mt-0.5">
                <Avatar user={comment.user} size={36} />
              </a>
            ) : (
              <span className="shrink-0 mt-0.5">
                <Avatar user={comment.user} size={36} />
              </span>
            )}

            <div className="min-w-0 flex-1">
              <div className="flex items-baseline gap-2 flex-wrap">
                {comment.user?.profile_url ? (
                  <a
                    href={comment.user.profile_url}
                    className="text-sm font-medium text-white hover:underline"
                  >
                    {comment.user.name || comment.user.username || 'Member'}
                  </a>
                ) : (
                  <span className="text-sm font-medium text-white">
                    {comment.user?.name || comment.user?.username || 'Member'}
                  </span>
                )}
                <time
                  dateTime={comment.created_at}
                  title={comment.created_at ? new Date(comment.created_at).toLocaleString() : ''}
                  className="text-xs text-neutral-500"
                >
                  {timeAgo(comment.created_at)}
                </time>
              </div>

              <p className="mt-1 text-sm text-neutral-300 whitespace-pre-line break-words leading-relaxed">
                {comment.content}
              </p>
            </div>
          </li>
        ))}
      </ul>
    </section>
  )
}