import { useEffect } from 'react'
import { useNostrAuth } from '@/hooks/useNostrAuth'
import { useAuthorPresentation } from '@/hooks/useAuthorPresentation'
import { Button, Card, Skeleton } from '../ui'
import { t } from '@/lib/i18n'
import { NoAccountView } from './NoAccountView'
import { PresentationForm } from './PresentationForm'
import { useExistingPresentation } from './useExistingPresentation'
import { useAuthorPresentationState } from './useAuthorPresentationState'

function SuccessNotice(params: { pubkey: string | null }): React.ReactElement {
  return (
    <Card variant="default" className="border-neon-green/50 bg-neon-green/10">
      <h3 className="text-lg font-semibold text-neon-green mb-2">{t('presentation.success')}</h3>
      <p className="text-cyber-accent mb-4">{t('presentation.successMessage')}</p>
      {params.pubkey ? (
        <div className="mt-4">
          <a href={`/author/${params.pubkey}`}>
            <Button variant="primary">
              {t('presentation.manageSeries')}
            </Button>
          </a>
        </div>
      ) : null}
    </Card>
  )
}

function LoadingNotice(): React.ReactElement {
  return (
    <div className="space-y-6">
      <div className="space-y-4">
        <Skeleton variant="rectangular" height={24} className="w-1/3" />
        <Skeleton variant="rectangular" height={100} className="w-full" />
      </div>
      <div className="space-y-4">
        <Skeleton variant="rectangular" height={24} className="w-1/4" />
        <Skeleton variant="rectangular" height={200} className="w-full" />
      </div>
      <div className="space-y-4">
        <Skeleton variant="rectangular" height={24} className="w-1/4" />
        <Skeleton variant="rectangular" height={150} className="w-full" />
      </div>
    </div>
  )
}

function AuthorPresentationFormView(props: { pubkey: string | null; profile: { name?: string; pubkey: string } | null }): React.ReactElement {
  const { checkPresentationExists } = useAuthorPresentation(props.pubkey)
  const presentation = useExistingPresentation({ pubkey: props.pubkey, checkPresentationExists })
  const state = useAuthorPresentationState(props.pubkey, props.profile?.name, presentation.existingPresentation)

  if (!props.pubkey) {
    return <NoAccountView />
  }
  if (presentation.loadingPresentation) {
    return <LoadingNotice />
  }
  if (state.success) {
    return <SuccessNotice pubkey={props.pubkey} />
  }
  return (
    <PresentationForm
      draft={state.draft}
      setDraft={state.setDraft}
      validationError={state.validationError}
      error={state.error}
      loading={state.loading}
      handleSubmit={state.handleSubmit}
      deleting={state.deleting}
      handleDelete={() => {
        void state.handleDelete()
      }}
      hasExistingPresentation={presentation.existingPresentation !== null}
    />
  )
}

function useAutoLoadPubkey(accountExists: boolean | null, pubkey: string | null, connect: () => Promise<void>): void {
  useEffect(() => {
    if (accountExists === true && !pubkey) {
      void connect()
    }
  }, [accountExists, pubkey, connect])
}

export function AuthorPresentationEditor(): React.ReactElement {
  const { pubkey, profile, accountExists, connect } = useNostrAuth()
  useAutoLoadPubkey(accountExists, pubkey ?? null, connect)
  return <AuthorPresentationFormView pubkey={pubkey ?? null} profile={profile} />
}