import Link from 'next/link'
import Image from 'next/image'
import { useNostrAuth } from '@/hooks/useNostrAuth'
import { useAuthorPresentation } from '@/hooks/useAuthorPresentation'
import { useEffect, useState } from 'react'
import { t } from '@/lib/i18n'
import type { Article } from '@/types/nostr'

const buttonClassName = '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'

function CreateAuthorPageLink() {
  return (
    <Link href="/presentation" className={buttonClassName}>
      {t('nav.createAuthorPage')}
    </Link>
  )
}

function PublishLink() {
  return (
    <Link href="/publish" className={buttonClassName}>
      {t('nav.publish')}
    </Link>
  )
}

function LoadingButton() {
  return (
    <div className="px-4 py-2 bg-neon-cyan/20 text-neon-cyan rounded-lg text-sm font-medium">
      {t('nav.loading')}
    </div>
  )
}

function AuthorProfileLink({ presentation, profile }: { presentation: Article; profile: { name?: string; picture?: string } | null }) {
  const authorName = presentation.title.replace(/^Présentation de /, '') || profile?.name || 'Auteur'
  const picture = presentation.bannerUrl || profile?.picture

  return (
    <Link
      href={`/author/${presentation.pubkey}`}
      className="flex items-center gap-2 px-3 py-2 bg-cyber-dark/50 hover:bg-cyber-dark border border-neon-cyan/20 hover:border-neon-cyan/40 rounded-lg transition-all"
    >
      {picture ? (
        <div className="relative w-8 h-8 rounded-full overflow-hidden border border-neon-cyan/30 flex-shrink-0">
          <Image
            src={picture}
            alt={authorName}
            fill
            className="object-cover"
          />
        </div>
      ) : (
        <div className="w-8 h-8 rounded-full bg-cyber-light border border-neon-cyan/30 flex items-center justify-center flex-shrink-0">
          <span className="text-xs text-neon-cyan font-medium">{authorName.charAt(0).toUpperCase()}</span>
        </div>
      )}
      <span className="text-sm text-neon-cyan font-medium truncate max-w-[120px]">{authorName}</span>
    </Link>
  )
}

export function ConditionalPublishButton() {
  const { connected, pubkey, profile } = useNostrAuth()
  const { checkPresentationExists } = useAuthorPresentation(pubkey ?? null)
  const [presentation, setPresentation] = useState<Article | null>(null)
  const [loading, setLoading] = useState(false)

  useEffect(() => {
    const check = async () => {
      if (!connected || !pubkey) {
        setPresentation(null)
        setLoading(false)
        return
      }
      setLoading(true)
      const pres = await checkPresentationExists()
      setPresentation(pres)
      setLoading(false)
    }
    void check()
  }, [connected, pubkey, checkPresentationExists])

  if (!connected || !pubkey) {
    return <CreateAuthorPageLink />
  }

  if (loading) {
    return <LoadingButton />
  }

  if (!presentation) {
    return <CreateAuthorPageLink />
  }

  // If presentation exists, show author profile link instead of publish button
  return <AuthorProfileLink presentation={presentation} profile={profile} />
}