import Image from 'next/image'
import { t } from '@/lib/i18n'
import type { AuthorPresentationArticle } from '@/types/nostr'

export function AuthorPageHeader(params: { presentation: AuthorPresentationArticle | null }): React.ReactElement | null {
  if (!params.presentation) {
    return null
  }

  const authorName = getAuthorNameFromPresentationTitle(params.presentation.title)
  return (
    <div className="space-y-4 mb-8">
      <div className="flex items-start gap-6">
        <AuthorProfileImage bannerUrl={params.presentation.bannerUrl} />
        <div className="flex-1 space-y-4">
          <AuthorHeaderTitle authorName={authorName} />
          <AuthorPresentationSection title={t('presentation.field.presentation')} text={params.presentation.description} />
          <AuthorPresentationSection title={t('presentation.field.contentDescription')} text={params.presentation.contentDescription} />
        </div>
      </div>
    </div>
  )
}

function getAuthorNameFromPresentationTitle(title: string): string {
  const trimmed = title.replace(/^Présentation de /, '').trim()
  return trimmed.length > 0 ? trimmed : title
}

function AuthorProfileImage(params: { bannerUrl: string | undefined }): React.ReactElement | null {
  if (!params.bannerUrl) {
    return null
  }
  return (
    <div className="relative w-32 h-32 rounded-lg overflow-hidden border border-neon-cyan/20 flex-shrink-0">
      <Image src={params.bannerUrl} alt={t('author.profilePicture')} fill className="object-cover" />
    </div>
  )
}

function AuthorHeaderTitle(params: { authorName: string }): React.ReactElement {
  return (
    <div>
      <h1 className="text-3xl font-bold text-neon-cyan mb-2">{params.authorName}</h1>
      <p className="text-xs text-cyber-accent/60 italic mb-4">{t('author.profileNote')}</p>
    </div>
  )
}

function AuthorPresentationSection(params: { title: string; text: string | undefined }): React.ReactElement | null {
  if (!params.text) {
    return null
  }
  return (
    <div className="space-y-2">
      <h2 className="text-lg font-semibold text-neon-cyan">{params.title}</h2>
      <div className="prose prose-invert max-w-none">
        <p className="text-cyber-accent whitespace-pre-wrap">{params.text}</p>
      </div>
    </div>
  )
}