import { useState } from 'react'
import { uploadNip95Media } from '@/lib/nip95'
import { t } from '@/lib/i18n'
import Image from 'next/image'

interface ImageUploadFieldProps {
  id: string
  label?: string | undefined
  value?: string | undefined
  onChange: (url: string) => void
  helpText?: string | undefined
}

function ImagePreview({ value }: { value: string }) {
  return (
    <div className="relative w-32 h-32 rounded-lg overflow-hidden border border-neon-cyan/20">
      <Image
        src={value}
        alt={t('presentation.field.picture')}
        fill
        className="object-cover"
      />
    </div>
  )
}

function UploadButtonLabel({ uploading, value }: { uploading: boolean; value: string | undefined }) {
  if (uploading) {
    return <>{t('presentation.field.picture.uploading')}</>
  }
  return <>{value ? t('presentation.field.picture.change') : t('presentation.field.picture.upload')}</>
}

function RemoveButton({ value, onChange }: { value: string | undefined; onChange: (url: string) => void }) {
  if (!value) {
    return null
  }
  return (
    <button
      type="button"
      onClick={() => onChange('')}
      className="px-4 py-2 bg-red-500/20 hover:bg-red-500/30 text-red-400 rounded-lg text-sm font-medium transition-all border border-red-500/50"
    >
      {t('presentation.field.picture.remove')}
    </button>
  )
}

function ImageUploadControls({
  id,
  uploading,
  value,
  onChange,
  onFileSelect,
}: {
  id: string
  uploading: boolean
  value: string | undefined
  onChange: (url: string) => void
  onFileSelect: (e: React.ChangeEvent<HTMLInputElement>) => Promise<void>
}) {
  return (
    <div className="flex items-center gap-2">
      <label
        htmlFor={id}
        className="px-4 py-2 bg-neon-cyan/20 hover:bg-neon-cyan/30 text-neon-cyan rounded-lg text-sm font-medium transition-all border border-neon-cyan/50 hover:shadow-glow-cyan cursor-pointer"
      >
        <UploadButtonLabel uploading={uploading} value={value} />
      </label>
      <input
        id={id}
        type="file"
        accept="image/png,image/jpeg,image/jpg,image/webp"
        className="hidden"
        onChange={(e) => {
          void onFileSelect(e)
        }}
        disabled={uploading}
      />
      <RemoveButton value={value} onChange={onChange} />
    </div>
  )
}

async function processFileUpload(file: File, onChange: (url: string) => void, setError: (error: string | null) => void) {
  const media = await uploadNip95Media(file)
  if (media.type === 'image') {
    onChange(media.url)
  } else {
    setError(t('presentation.field.picture.error.imagesOnly'))
  }
}

function useImageUpload(onChange: (url: string) => void) {
  const [uploading, setUploading] = useState(false)
  const [error, setError] = useState<string | null>(null)

  const handleFileSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0]
    if (!file) {
      return
    }

    setError(null)
    setUploading(true)

    try {
      await processFileUpload(file, onChange, setError)
    } catch (e) {
      setError(e instanceof Error ? e.message : t('presentation.field.picture.error.uploadFailed'))
    } finally {
      setUploading(false)
    }
  }

  return { uploading, error, handleFileSelect }
}

export function ImageUploadField({ id, label, value, onChange, helpText }: ImageUploadFieldProps) {
  const { uploading, error, handleFileSelect } = useImageUpload(onChange)
  const displayLabel = label ?? t('presentation.field.picture')
  const displayHelpText = helpText ?? t('presentation.field.picture.help')

  return (
    <div className="space-y-2">
      <label htmlFor={id} className="block text-sm font-medium text-neon-cyan">
        {displayLabel}
      </label>
      {value && <ImagePreview value={value} />}
      <ImageUploadControls
        id={id}
        uploading={uploading}
        value={value}
        onChange={onChange}
        onFileSelect={handleFileSelect}
      />
      {error && <p className="text-sm text-red-400">{error}</p>}
      {displayHelpText && <p className="text-sm text-cyber-accent">{displayHelpText}</p>}
    </div>
  )
}