story-research-zapwall/pages/author/[pubkey].tsx

import { useRouter } from 'next/router'
import Head from 'next/head'
import { useEffect, useState } from 'react'
import { fetchAuthorPresentationFromPool } from '@/lib/articlePublisherHelpers'
import { getSeriesByAuthor } from '@/lib/seriesQueries'
import { getAuthorSponsoring } from '@/lib/sponsoring'
import { nostrService } from '@/lib/nostr'
import type { AuthorPresentationArticle, Series } from '@/types/nostr'
import { PageHeader } from '@/components/PageHeader'
import { Footer } from '@/components/Footer'
import { t } from '@/lib/i18n'
import Link from 'next/link'
import { SeriesCard } from '@/components/SeriesCard'
import Image from 'next/image'

function AuthorPageHeader({ presentation }: { presentation: AuthorPresentationArticle | null }) {
  if (!presentation) {
    return null
  }

  return (
    <div className="space-y-4 mb-8">
      <div className="flex items-start gap-6">
        {presentation.bannerUrl && (
          <div className="relative w-32 h-32 rounded-lg overflow-hidden border border-neon-cyan/20 flex-shrink-0">
            <Image
              src={presentation.bannerUrl}
              alt="Profile picture"
              fill
              className="object-cover"
            />
          </div>
        )}
        <div className="flex-1">
          <h1 className="text-3xl font-bold text-neon-cyan mb-2">
            {presentation.title || t('author.presentation')}
          </h1>
          <p className="text-xs text-cyber-accent/60 italic mb-4">
            {t('author.profileNote')}
          </p>
          <div className="prose prose-invert max-w-none">
            <p className="text-cyber-accent whitespace-pre-wrap">{presentation.content}</p>
          </div>
        </div>
      </div>
    </div>
  )
}

function SponsoringSummary({ totalSponsoring }: { totalSponsoring: number }) {
  const totalBTC = totalSponsoring / 100_000_000

  return (
    <div className="bg-cyber-dark/50 border border-neon-cyan/20 rounded-lg p-6 mb-8">
      <h2 className="text-xl font-semibold text-neon-cyan mb-4">{t('author.sponsoring')}</h2>
      <div className="space-y-2">
        <p className="text-cyber-accent">
          {t('author.sponsoring.total', { amount: totalBTC.toFixed(6) })}
        </p>
        <p className="text-cyber-accent">
          {t('author.sponsoring.sats', { amount: totalSponsoring.toLocaleString() })}
        </p>
      </div>
    </div>
  )
}

function SeriesList({ series }: { series: Series[]; authorPubkey: string }) {
  if (series.length === 0) {
    return (
      <div className="bg-cyber-dark/50 border border-neon-cyan/20 rounded-lg p-6">
        <p className="text-cyber-accent">{t('series.empty')}</p>
      </div>
    )
  }

  return (
    <div className="space-y-6">
      <h2 className="text-2xl font-semibold text-neon-cyan">{t('series.title')}</h2>
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        {series.map((s) => (
          <Link key={s.id} href={`/series/${s.id}`}>
            <SeriesCard series={s} onSelect={() => {}} />
          </Link>
        ))}
      </div>
    </div>
  )
}

async function loadAuthorData(authorPubkey: string) {
  const pool = nostrService.getPool()
  if (!pool) {
    throw new Error('Pool not initialized')
  }

  const [pres, seriesList, sponsoring] = await Promise.all([
    fetchAuthorPresentationFromPool(pool as import('@/types/nostr-tools-extended').SimplePoolWithSub, authorPubkey),
    getSeriesByAuthor(authorPubkey),
    getAuthorSponsoring(authorPubkey),
  ])

  return { pres, seriesList, sponsoring }
}

function useAuthorData(authorPubkey: string) {
  const [presentation, setPresentation] = useState<AuthorPresentationArticle | null>(null)
  const [series, setSeries] = useState<Series[]>([])
  const [totalSponsoring, setTotalSponsoring] = useState<number>(0)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

  useEffect(() => {
    if (!authorPubkey) {
      return
    }

    const load = async () => {
      setLoading(true)
      setError(null)

      try {
        const { pres, seriesList, sponsoring } = await loadAuthorData(authorPubkey)
        setPresentation(pres)
        setSeries(seriesList)
        setTotalSponsoring(sponsoring)
      } catch (e) {
        setError(e instanceof Error ? e.message : 'Erreur lors du chargement')
      } finally {
        setLoading(false)
      }
    }

    void load()
  }, [authorPubkey])

  return { presentation, series, totalSponsoring, loading, error }
}

function AuthorPageContent({
  presentation,
  series,
  totalSponsoring,
  authorPubkey,
  loading,
  error,
}: {
  presentation: AuthorPresentationArticle | null
  series: Series[]
  totalSponsoring: number
  authorPubkey: string
  loading: boolean
  error: string | null
}) {
  if (loading) {
    return <p className="text-cyber-accent">{t('common.loading')}</p>
  }

  if (error) {
    return <p className="text-red-400">{error}</p>
  }

  if (presentation) {
    return (
      <>
        <AuthorPageHeader presentation={presentation} />
        <SponsoringSummary totalSponsoring={totalSponsoring} />
        <SeriesList series={series} authorPubkey={authorPubkey} />
      </>
    )
  }

  return (
    <div className="bg-cyber-dark/50 border border-neon-cyan/20 rounded-lg p-6">
      <p className="text-cyber-accent">{t('author.notFound')}</p>
    </div>
  )
}

export default function AuthorPage() {
  const router = useRouter()
  const { pubkey } = router.query
  const authorPubkey = typeof pubkey === 'string' ? pubkey : ''
  const { presentation, series, totalSponsoring, loading, error } = useAuthorData(authorPubkey)

  if (!authorPubkey) {
    return null
  }

  return (
    <>
      <Head>
        <title>{t('author.title')} - {t('home.title')}</title>
        <meta name="description" content={t('author.presentation')} />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
      </Head>
      <main className="min-h-screen bg-cyber-darker">
        <PageHeader />
        <div className="max-w-4xl mx-auto px-4 py-8">
          <AuthorPageContent
            presentation={presentation}
            series={series}
            totalSponsoring={totalSponsoring}
            authorPubkey={authorPubkey}
            loading={loading}
            error={error}
          />
        </div>
        <Footer />
      </main>
    </>
  )
}