import { Button, ErrorState } from '@/components/ui'
import { t } from '@/lib/i18n'
import type { KeyManagementManagerActions } from './useKeyManagementManager'
import type { KeyManagementManagerState } from './keyManagementController'
import { KeyManagementImportForm } from './KeyManagementImportForm'

export function KeyManagementImportSection(params: {
  state: KeyManagementManagerState
  actions: KeyManagementManagerActions
}): React.ReactElement {
  return (
    <>
      <KeyManagementErrorBanner error={params.state.error} />
      <KeyManagementPublicKeysPanel
        publicKeys={params.state.publicKeys}
        copiedNpub={params.state.copiedNpub}
        copiedPublicKey={params.state.copiedPublicKey}
        onCopyNpub={params.actions.onCopyNpub}
        onCopyPublicKey={params.actions.onCopyPublicKey}
      />
      <KeyManagementNoAccountBanner publicKeys={params.state.publicKeys} accountExists={params.state.accountExists} />
      <KeyManagementImportButton
        accountExists={params.state.accountExists}
        showImportForm={params.state.showImportForm}
        onClick={params.actions.onShowImportForm}
      />
      <KeyManagementImportForm state={params.state} actions={params.actions} />
    </>
  )
}

function KeyManagementErrorBanner(params: { error: string | null }): React.ReactElement | null {
  if (!params.error) {
    return null
  }
  return (
    <div className="mb-4">
      <ErrorState message={params.error} />
    </div>
  )
}

function KeyManagementPublicKeysPanel(params: {
  publicKeys: KeyManagementManagerState['publicKeys']
  copiedNpub: boolean
  copiedPublicKey: boolean
  onCopyNpub: () => void
  onCopyPublicKey: () => void
}): React.ReactElement | null {
  if (!params.publicKeys) {
    return null
  }
  return (
    <div className="space-y-4 mb-6">
      <KeyManagementKeyCard
        label={t('settings.keyManagement.publicKey.npub')}
        value={params.publicKeys.npub}
        copied={params.copiedNpub}
        onCopy={params.onCopyNpub}
      />
      <KeyManagementKeyCard
        label={t('settings.keyManagement.publicKey.hex')}
        value={params.publicKeys.publicKey}
        copied={params.copiedPublicKey}
        onCopy={params.onCopyPublicKey}
      />
    </div>
  )
}

function KeyManagementKeyCard(params: {
  label: string
  value: string
  copied: boolean
  onCopy: () => void
}): React.ReactElement {
  return (
    <div className="bg-neon-blue/10 border border-neon-blue/30 rounded-lg p-4">
      <div className="flex justify-between items-start mb-2">
        <p className="text-neon-blue font-semibold">{params.label}</p>
        <Button
          type="button"
          variant="secondary"
          size="small"
          onClick={params.onCopy}
        >
          {params.copied ? t('settings.keyManagement.copied') : t('settings.keyManagement.copy')}
        </Button>
      </div>
      <p className="text-neon-cyan text-sm font-mono break-all">{params.value}</p>
    </div>
  )
}

function KeyManagementNoAccountBanner(params: {
  publicKeys: KeyManagementManagerState['publicKeys']
  accountExists: boolean
}): React.ReactElement | null {
  if (params.publicKeys || params.accountExists) {
    return null
  }
  return (
    <div className="bg-yellow-900/20 border border-yellow-400/50 rounded-lg p-4 mb-6">
      <p className="text-yellow-400 font-semibold mb-2">{t('settings.keyManagement.noAccount.title')}</p>
      <p className="text-yellow-300/90 text-sm">{t('settings.keyManagement.noAccount.description')}</p>
    </div>
  )
}

function KeyManagementImportButton(params: {
  accountExists: boolean
  showImportForm: boolean
  onClick: () => void
}): React.ReactElement | null {
  if (params.showImportForm) {
    return null
  }
  return (
    <button
      type="button"
      onClick={params.onClick}
      className="w-full py-3 px-6 bg-neon-cyan/20 hover:bg-neon-cyan/30 text-neon-cyan rounded-lg font-medium transition-all border border-neon-cyan/50 hover:shadow-glow-cyan"
    >
      {params.accountExists ? t('settings.keyManagement.import.button.replace') : t('settings.keyManagement.import.button.new')}
    </button>
  )
}
