import React from 'react'
import { getContentTypeValue, getContentTypeVisualKey } from '../../lib/uploadUtils'

/**
 * ContentTypeSelector
 *
 * Reusable mascot-icon content-type picker.
 * Displays each content type as a card with a mascot icon.
 *
 * @param {object}   props
 * @param {Array}    props.contentTypes    List of content type objects from API
 * @param {string}   props.selected        Currently selected type value
 * @param {string}   [props.error]         Validation error message
 * @param {function} props.onChange        Called with new type value string
 */
export default function ContentTypeSelector({ contentTypes = [], selected = '', error = '', onChange }) {
  if (!Array.isArray(contentTypes) || contentTypes.length === 0) {
    return (
      <div className="rounded-xl ring-1 ring-white/10 bg-white/5 px-4 py-3 text-sm text-white/60">
        No content types available.
      </div>
    )
  }

  return (
    <div>
      <div className="flex gap-3 overflow-x-auto py-2 no-scrollbar">
        {contentTypes.map((ct) => {
          const typeValue = getContentTypeValue(ct)
          const active = String(typeValue) === String(selected || '')
          const visualKey = getContentTypeVisualKey(ct)
          const iconPath = `/gfx/mascot_${visualKey}.webp`

          return (
            <button
              key={typeValue || ct.name}
              type="button"
              onClick={() => onChange?.(String(typeValue))}
              aria-pressed={active}
              className={[
                'group flex flex-col items-center gap-2 min-w-[96px] rounded-xl border px-3 py-2.5',
                'transition-all duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-400/50',
                active
                  ? 'border-emerald-400/70 bg-emerald-400/15 shadow-lg shadow-emerald-900/30 scale-105'
                  : 'border-white/10 bg-white/[0.03] hover:border-white/20 hover:bg-white/[0.06] hover:-translate-y-0.5 hover:scale-[1.03]',
              ].join(' ')}
            >
              {/* Mascot icon */}
              <div className="h-16 w-16 rounded-full overflow-hidden flex items-center justify-center">
                <img
                  src={iconPath}
                  alt={`${ct.name || 'Content type'} icon`}
                  loading="lazy"
                  decoding="async"
                  width={64}
                  height={64}
                  className={[
                    'h-full w-full object-contain transition-all duration-200',
                    active
                      ? 'grayscale-0 opacity-100'
                      : 'grayscale opacity-40 group-hover:grayscale-0 group-hover:opacity-85',
                  ].join(' ')}
                  onError={(e) => {
                    if (!e.currentTarget.src.includes('mascot_other.webp')) {
                      e.currentTarget.src = '/gfx/mascot_other.webp'
                    }
                  }}
                />
              </div>

              {/* Label */}
              <span className={`text-xs font-semibold text-center leading-snug ${active ? 'text-white' : 'text-white/60 group-hover:text-white/85'}`}>
                {ct.name || 'Type'}
              </span>

              {/* Active indicator bar */}
              <div className={`h-0.5 w-8 rounded-full transition-all ${active ? 'bg-emerald-400/80' : 'bg-white/10 group-hover:bg-white/25'}`} />
            </button>
          )
        })}
      </div>

      {error && (
        <p className="mt-2 text-xs text-red-300" role="alert">{error}</p>
      )}
    </div>
  )
}
