import React from 'react'

export default function SimilarArtworksHeader({ artwork }) {
  if (!artwork) return null

  const title = artwork.title || 'Artwork'
  const artworkUrl = artwork.url || '#'
  const authorName = artwork.author_name || 'Artist'
  const authorHref = artwork.author_profile_url || (artwork.author_username ? `/@${artwork.author_username}` : null)
  const browseHref = artwork.browse_url || (artwork.content_type_slug ? `/${artwork.content_type_slug}` : '/explore')
  const thumbUrl = artwork.thumb_lg || artwork.thumb_md || null
  const thumbSrcSet = artwork.thumb_srcset || undefined
  const tags = Array.isArray(artwork.tag_slugs) ? artwork.tag_slugs.filter(Boolean) : []

  return (
    <section className="relative overflow-hidden rounded-[34px] border border-white/10 bg-[radial-gradient(circle_at_top_left,rgba(56,189,248,0.16),transparent_28%),linear-gradient(145deg,rgba(8,17,29,0.96),rgba(11,20,34,0.94))] shadow-[0_28px_80px_rgba(2,6,23,0.34)]">
      <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(249,115,22,0.12),transparent_24%),radial-gradient(circle_at_bottom_left,rgba(59,130,246,0.12),transparent_30%)]" />
      <div className="relative grid gap-6 p-5 md:p-7 xl:grid-cols-[280px_minmax(0,1fr)] xl:items-center">
        <a
          href={artworkUrl}
          className="group relative overflow-hidden rounded-[28px] border border-white/10 bg-[#08111d] shadow-[0_18px_40px_rgba(2,6,23,0.28)]"
        >
          <div className="aspect-[5/4] overflow-hidden">
            {thumbUrl ? (
              <img
                src={thumbUrl}
                srcSet={thumbSrcSet}
                sizes="(min-width: 1280px) 280px, (min-width: 768px) 40vw, 100vw"
                alt={title}
                className="h-full w-full object-cover transition-transform duration-700 group-hover:scale-[1.03]"
              />
            ) : (
              <div className="flex h-full w-full items-center justify-center bg-white/[0.04] text-sm text-slate-500">
                Preview unavailable
              </div>
            )}
          </div>
          <div className="pointer-events-none absolute inset-0 bg-gradient-to-t from-slate-950/55 via-transparent to-transparent" />
        </a>

        <div className="min-w-0">
          <div className="inline-flex items-center gap-2 rounded-full border border-sky-300/20 bg-sky-400/10 px-3 py-1.5 text-[11px] font-semibold uppercase tracking-[0.22em] text-sky-200">
            <span className="h-2 w-2 rounded-full bg-sky-300 shadow-[0_0_12px_rgba(125,211,252,0.85)]" />
            Visual discovery
          </div>

          <h1 className="mt-4 max-w-4xl text-3xl font-semibold leading-tight tracking-[-0.04em] text-white md:text-4xl xl:text-5xl">
            Artworks similar to{' '}
            <a href={artworkUrl} className="underline decoration-white/15 underline-offset-4 transition hover:decoration-sky-300">
              {title}
            </a>
          </h1>

          <p className="mt-3 max-w-3xl text-sm leading-6 text-slate-300">
            Browse visually related artworks, compare style cues, and jump back into the original piece whenever you need context.
          </p>

          <div className="mt-4 flex flex-wrap items-center gap-2.5 text-sm text-slate-300">
            <span className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.05] px-3 py-1.5">
              {artwork.author_avatar ? (
                <img
                  src={artwork.author_avatar}
                  alt={authorName}
                  className="h-5 w-5 rounded-full object-cover ring-1 ring-white/15"
                />
              ) : null}
              {authorHref ? (
                <a href={authorHref} className="font-medium text-white/85 transition hover:text-white">
                  {authorName}
                </a>
              ) : (
                <span className="font-medium text-white/85">{authorName}</span>
              )}
            </span>

            {artwork.category_name ? (
              <span className="inline-flex items-center rounded-full border border-white/10 bg-white/[0.04] px-3 py-1.5 text-xs font-medium text-slate-300">
                {artwork.category_name}
              </span>
            ) : null}

            {artwork.content_type_name ? (
              <span className="inline-flex items-center rounded-full border border-amber-300/20 bg-amber-300/10 px-3 py-1.5 text-xs font-medium text-amber-100">
                {artwork.content_type_name}
              </span>
            ) : null}
          </div>

          {tags.length > 0 ? (
            <div className="mt-4 flex flex-wrap gap-2">
              {tags.map((tagSlug) => (
                <span
                  key={tagSlug}
                  className="rounded-full border border-white/[0.08] bg-white/[0.04] px-3 py-1 text-xs font-medium text-slate-300 transition hover:border-sky-300/30 hover:bg-sky-400/10 hover:text-white"
                >
                  #{tagSlug}
                </span>
              ))}
            </div>
          ) : null}

          <div className="mt-6 flex flex-wrap gap-3">
            <a
              href={artworkUrl}
              className="inline-flex items-center gap-2 rounded-2xl border border-white/10 bg-white/[0.06] px-4 py-2.5 text-sm font-semibold text-white/85 transition hover:bg-white/[0.1] hover:text-white"
            >
              <svg className="h-4 w-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2" aria-hidden="true">
                <path strokeLinecap="round" strokeLinejoin="round" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
              </svg>
              Back to artwork
            </a>

            <a
              href={browseHref}
              className="inline-flex items-center gap-2 rounded-2xl border border-sky-300/20 bg-sky-400/10 px-4 py-2.5 text-sm font-semibold text-sky-100 transition hover:bg-sky-400/15 hover:text-white"
            >
              Browse {artwork.content_type_name || 'artworks'}
            </a>
          </div>
        </div>
      </div>
    </section>
  )
}