import React from 'react'
import ProfileWorldRecognitionBadge from './ProfileWorldRecognitionBadge'

function formatDate(value) {
  if (!value) return null

  try {
    const date = new Date(value)
    if (Number.isNaN(date.getTime())) return null

    return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })
  } catch {
    return null
  }
}

export default function ProfileWorldHistoryCard({ entry }) {
  const recognitionBadges = Array.isArray(entry?.recognitions) ? entry.recognitions : []
  const artwork = entry?.linked_artwork
  const challenge = entry?.challenge

  return (
    <article className="rounded-[28px] border border-white/10 bg-white/[0.04] p-5 shadow-[0_18px_48px_rgba(2,6,23,0.18)] transition-colors hover:border-white/15 hover:bg-white/[0.055] md:p-6">
      <div className="flex flex-col gap-5 lg:flex-row lg:items-start">
        <div className="min-w-0 flex-1">
          <div className="flex flex-wrap items-center gap-2">
            {recognitionBadges.map((recognition, index) => (
              <ProfileWorldRecognitionBadge key={`${entry.id}-${recognition.key}`} recognition={recognition} isPrimary={index === 0} />
            ))}
          </div>

          <div className="mt-4 flex flex-wrap items-baseline gap-x-3 gap-y-2">
            <h3 className="text-xl font-semibold tracking-[-0.02em] text-white">{entry?.world?.title}</h3>
            {entry?.world?.edition_year ? (
              <span className="text-sm text-slate-400">Edition {entry.world.edition_year}</span>
            ) : null}
            {entry?.world?.type_label ? (
              <span className="rounded-full border border-white/10 bg-white/[0.05] px-2.5 py-1 text-[11px] font-medium text-slate-300">{entry.world.type_label}</span>
            ) : null}
          </div>

          <div className="mt-3 flex flex-wrap items-center gap-x-4 gap-y-2 text-sm text-slate-400">
            {entry?.world?.family_label ? (
              <span className="inline-flex items-center gap-2">
                <i className="fa-solid fa-layer-group text-[11px] text-slate-500" />
                {entry.world.family_label}
              </span>
            ) : null}
            {formatDate(entry?.occurred_at) ? (
              <span className="inline-flex items-center gap-2">
                <i className="fa-regular fa-calendar text-[11px] text-slate-500" />
                {formatDate(entry.occurred_at)}
              </span>
            ) : null}
            {challenge?.title ? (
              <span className="inline-flex items-center gap-2">
                <i className="fa-solid fa-flag-checkered text-[11px] text-slate-500" />
                {challenge.title}
              </span>
            ) : null}
          </div>

          <div className="mt-4 flex flex-wrap items-center gap-3">
            {entry?.world?.url ? (
              <a
                href={entry.world.url}
                className="inline-flex items-center gap-2 rounded-2xl border border-white/10 bg-white/[0.05] px-4 py-2.5 text-sm font-medium text-slate-100 transition-colors hover:bg-white/[0.08]"
              >
                <i className="fa-solid fa-globe text-xs" />
                View world
              </a>
            ) : null}
            {artwork?.url ? (
              <a
                href={artwork.url}
                className="inline-flex items-center gap-2 rounded-2xl border border-white/10 bg-white/[0.05] px-4 py-2.5 text-sm font-medium text-slate-100 transition-colors hover:bg-white/[0.08]"
              >
                <i className="fa-solid fa-image text-xs" />
                View artwork
              </a>
            ) : null}
            {challenge?.url ? (
              <a
                href={challenge.url}
                className="inline-flex items-center gap-2 rounded-2xl border border-white/10 bg-white/[0.05] px-4 py-2.5 text-sm font-medium text-slate-100 transition-colors hover:bg-white/[0.08]"
              >
                <i className="fa-solid fa-arrow-up-right-from-square text-xs" />
                View challenge
              </a>
            ) : null}
          </div>
        </div>

        <div className="w-full shrink-0 lg:w-44">
          {artwork?.thumbnail_url ? (
            <a href={artwork.url || '#'} className="group block overflow-hidden rounded-[24px] border border-white/10 bg-white/[0.03]">
              <div className="aspect-[4/3] overflow-hidden bg-slate-900/60">
                <img
                  src={artwork.thumbnail_url}
                  alt={artwork.title || entry?.world?.title || 'World artwork'}
                  className="h-full w-full object-cover transition duration-300 group-hover:scale-[1.03]"
                  loading="lazy"
                />
              </div>
              <div className="border-t border-white/10 px-4 py-3">
                <div className="truncate text-sm font-medium text-white">{artwork.title}</div>
                <div className="mt-1 text-xs text-slate-400">Linked artwork</div>
              </div>
            </a>
          ) : (
            <div className="flex aspect-[4/3] items-center justify-center rounded-[24px] border border-dashed border-white/12 bg-white/[0.02] text-slate-500">
              <div className="text-center">
                <i className="fa-solid fa-globe text-xl" />
                <div className="mt-2 text-xs uppercase tracking-[0.18em]">World entry</div>
              </div>
            </div>
          )}
        </div>
      </div>
    </article>
  )
}