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

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 (
    <div className="bg-yellow-900/20 border border-yellow-400/50 rounded-lg p-4">
      <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}
    </div>
  )
}

function KeyManagementImportTextarea(params: {
  importKey: string
  onChangeImportKey: (value: string) => void
}): React.ReactElement {
  return (
    <div>
      <label htmlFor="importKey" className="block text-sm font-medium text-cyber-accent mb-2">
        {t('settings.keyManagement.import.label')}
      </label>
      <textarea
        id="importKey"
        value={params.importKey}
        onChange={(e) => {
          params.onChangeImportKey(e.target.value)
        }}
        placeholder={t('settings.keyManagement.import.placeholder')}
        className="w-full px-3 py-2 bg-cyber-dark border border-neon-cyan/30 rounded-lg font-mono text-sm text-neon-cyan focus:border-neon-cyan focus:outline-none"
        rows={4}
      />
      <p className="text-sm text-cyber-accent/70 mt-2">{t('settings.keyManagement.import.help')}</p>
    </div>
  )
}

function KeyManagementReplaceWarning(params: {
  show: boolean
  importing: boolean
  onCancel: () => void
  onConfirm: () => void
}): React.ReactElement | null {
  if (!params.show) {
    return null
  }
  return (
    <div className="bg-red-900/20 border border-red-400/50 rounded-lg p-4">
      <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"
          onClick={params.onCancel}
          className="flex-1 py-2 px-4 bg-cyber-light border border-neon-cyan/30 hover:border-neon-cyan/50 hover:bg-cyber-dark text-cyber-accent hover:text-neon-cyan rounded-lg font-medium transition-colors"
        >
          {t('settings.keyManagement.replace.cancel')}
        </button>
        <button
          type="button"
          onClick={params.onConfirm}
          disabled={params.importing}
          className="flex-1 py-2 px-4 bg-red-600/20 hover:bg-red-600/30 text-red-400 rounded-lg font-medium transition-all border border-red-400/50 hover:shadow-glow-red disabled:opacity-50"
        >
          {params.importing ? t('settings.keyManagement.replace.replacing') : t('settings.keyManagement.replace.confirm')}
        </button>
      </div>
    </div>
  )
}

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"
        onClick={params.onCancel}
        className="flex-1 py-2 px-4 bg-cyber-light border border-neon-cyan/30 hover:border-neon-cyan/50 hover:bg-cyber-dark text-cyber-accent hover:text-neon-cyan rounded-lg font-medium transition-colors"
      >
        {t('settings.keyManagement.import.cancel')}
      </button>
      <button
        type="button"
        onClick={params.onImport}
        disabled={params.importing}
        className="flex-1 py-2 px-4 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 disabled:opacity-50"
      >
        {params.importing ? t('settings.keyManagement.import.importing') : t('settings.keyManagement.import.import')}
      </button>
    </div>
  )
}