import { Button, Card, Input, ErrorState } from '../ui'
import { t } from '@/lib/i18n'
import { RelayList } from './RelayList'
import type { RelayManagerContentProps } from './types'

export function RelayManagerContent(params: RelayManagerContentProps): React.ReactElement {
  return (
    <div className="space-y-6">
      {params.error ? <ErrorBanner error={params.error} onClear={params.onClearError} /> : null}
      <Header showAddForm={params.showAddForm} onToggleAddForm={params.onToggleAddForm} />
      {params.showAddForm ? <AddForm newUrl={params.newUrl} onNewUrlChange={params.onNewUrlChange} onAdd={params.onAddRelay} onCancel={params.onCancelAdd} /> : null}
      <RelayList
        relays={params.relays}
        editingId={params.editingId}
        draggedId={params.draggedId}
        dragOverId={params.dragOverId}
        onStartEditing={params.onStartEditing}
        onStopEditing={params.onStopEditing}
        onUpdateUrl={params.onUpdateUrl}
        onToggleEnabled={params.onToggleEnabled}
        onRemoveRelay={params.onRemoveRelay}
        onDragStart={params.onDragStart}
        onDragOver={params.onDragOver}
        onDragLeave={params.onDragLeave}
        onDrop={params.onDrop}
        onDragEnd={params.onDragEnd}
      />
      <Notes />
    </div>
  )
}

function ErrorBanner(params: { error: string; onClear: () => void }): React.ReactElement {
  return (
    <div>
      <ErrorState message={params.error} />
      <Button type="button" variant="ghost" size="small" onClick={params.onClear} className="mt-2">
        ×
      </Button>
    </div>
  )
}

function Header(params: { showAddForm: boolean; onToggleAddForm: () => void }): React.ReactElement {
  return (
    <div className="flex justify-between items-center">
      <h2 className="text-2xl font-bold text-neon-cyan">{t('settings.relay.title')}</h2>
      <Button
        type="button"
        variant="primary"
        onClick={params.onToggleAddForm}
      >
        {params.showAddForm ? t('settings.relay.add.cancel') : t('settings.relay.addButton')}
      </Button>
    </div>
  )
}

function AddForm(params: { newUrl: string; onNewUrlChange: (value: string) => void; onAdd: () => void; onCancel: () => void }): React.ReactElement {
  return (
    <Card variant="default" className="space-y-4">
      <Input
        type="text"
        label={t('settings.relay.add.url')}
        value={params.newUrl}
        onChange={(e) => params.onNewUrlChange(e.target.value)}
        placeholder={t('settings.relay.add.placeholder')}
      />
      <div className="flex gap-2">
        <Button
          type="button"
          variant="primary"
          onClick={params.onAdd}
        >
          {t('settings.relay.add.add')}
        </Button>
        <Button
          type="button"
          variant="ghost"
          onClick={params.onCancel}
        >
          {t('settings.relay.add.cancel')}
        </Button>
      </div>
    </Card>
  )
}

function Notes(): React.ReactElement {
  return (
    <div className="text-sm text-cyber-accent space-y-2">
      <p>
        <strong>{t('settings.relay.note.title')}</strong> {t('settings.relay.note.priority')}
      </p>
      <p>{t('settings.relay.note.rotation')}</p>
    </div>
  )
}