story-research-zapwall/components/keyManagement/KeyManagementImportForm.tsx

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

export function KeyManagementImportForm(params: {
  state: KeyManagementManagerState
  actions: KeyManagementManagerActions
}): React.ReactElement | null {
  if (!params.state.showImportForm) {
    return null
  }
  return (
    <div className="space-y-4">
      <KeyManagementImportWarning accountExists={params.state.accountExists} />
      <KeyManagementImportTextarea importKey={params.state.importKey} onChangeImportKey={params.actions.onChangeImportKey} />
      <KeyManagementReplaceWarning
        show={params.state.showReplaceWarning}
        importing={params.state.importing}
        onCancel={params.actions.onDismissReplaceWarning}
        onConfirm={params.actions.onConfirmReplace}
      />
      <KeyManagementImportFormActions
        show={!params.state.showReplaceWarning}
        importing={params.state.importing}
        onCancel={params.actions.onCancelImport}
        onImport={params.actions.onImport}
      />
    </div>
  )
}

function KeyManagementImportWarning(params: { accountExists: boolean }): React.ReactElement {
  return (
    <Card variant="default" className="bg-yellow-900/20 border-yellow-400/50">
      <p className="text-yellow-400 font-semibold mb-2">{t('settings.keyManagement.import.warning.title')}</p>
      <p className="text-yellow-300/90 text-sm" dangerouslySetInnerHTML={{ __html: t('settings.keyManagement.import.warning.description') }} />
      {params.accountExists ? (
        <p className="text-yellow-300/90 text-sm mt-2" dangerouslySetInnerHTML={{ __html: t('settings.keyManagement.import.warning.replace') }} />
      ) : null}
    </Card>
  )
}

function KeyManagementImportTextarea(params: {
  importKey: string
  onChangeImportKey: (value: string) => void
}): React.ReactElement {
  return (
    <div>
      <Textarea
        id="importKey"
        label={t('settings.keyManagement.import.label')}
        value={params.importKey}
        onChange={(e) => {
          params.onChangeImportKey(e.target.value)
        }}
        placeholder={t('settings.keyManagement.import.placeholder')}
        className="font-mono text-sm text-neon-cyan"
        rows={4}
        helperText={t('settings.keyManagement.import.help')}
      />
    </div>
  )
}

function KeyManagementReplaceWarning(params: {
  show: boolean
  importing: boolean
  onCancel: () => void
  onConfirm: () => void
}): React.ReactElement | null {
  if (!params.show) {
    return null
  }
  return (
    <Card variant="default" className="bg-red-900/20 border-red-400/50">
      <p className="text-red-400 font-semibold mb-2">{t('settings.keyManagement.replace.warning.title')}</p>
      <p className="text-red-300/90 text-sm mb-4">{t('settings.keyManagement.replace.warning.description')}</p>
      <div className="flex gap-4">
        <Button
          type="button"
          variant="secondary"
          onClick={params.onCancel}
          className="flex-1"
        >
          {t('settings.keyManagement.replace.cancel')}
        </Button>
        <Button
          type="button"
          variant="danger"
          onClick={params.onConfirm}
          disabled={params.importing}
          loading={params.importing}
          className="flex-1"
        >
          {params.importing ? t('settings.keyManagement.replace.replacing') : t('settings.keyManagement.replace.confirm')}
        </Button>
      </div>
    </Card>
  )
}

function KeyManagementImportFormActions(params: {
  show: boolean
  importing: boolean
  onCancel: () => void
  onImport: () => void
}): React.ReactElement | null {
  if (!params.show) {
    return null
  }
  return (
      <div className="flex gap-4">
        <Button
          type="button"
          variant="secondary"
          onClick={params.onCancel}
          className="flex-1"
        >
          {t('settings.keyManagement.import.cancel')}
        </Button>
        <Button
          type="button"
          variant="primary"
          onClick={params.onImport}
          disabled={params.importing}
          loading={params.importing}
          className="flex-1"
        >
          {params.importing ? t('settings.keyManagement.import.importing') : t('settings.keyManagement.import.import')}
        </Button>
      </div>
  )
}