import { useTranslation } from 'react-i18next';
import { HelpText } from './HelpText';
import { FieldLabel, FieldInput } from './formUtils';
import { NamespaceEditor } from './NamespaceEditor';
import type { SectionFormProps } from './types';

/**
 * Legacy Knowledge (DKS) namespace settings.
 *
 * Replaces the `knowledge` tab of the legacy grab-bag `ToolsForm`.
 * The config keys are unchanged:
 *
 *   tools.knowledge_service_url
 *   tools.knowledge_namespaces
 *
 * Marked as legacy in PR #357; new knowledge integrations should go
 * through MCP servers. Existing namespaces remain editable / removable,
 * but adding new namespaces is disabled in the editor.
 */
export function KnowledgeNamespacesForm({ config, onChange }: SectionFormProps) {
  const { t } = useTranslation('settings');
  const tools = config.tools ?? {};

  return (
    <div className="space-y-5">
      <div className="flex items-center gap-2">
        <h2 className="text-base font-semibold text-slate-800">Knowledge (DKS)</h2>
        <span
          className="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-semibold uppercase tracking-wide bg-amber-100 dark:bg-amber-500/15 text-amber-800 dark:text-amber-300 border border-amber-300 dark:border-amber-500/30"
          title={t('knowledgeDks.legacyBadgeTitle')}
        >
          LEGACY
        </span>
      </div>

      <div
        role="note"
        className="rounded border border-amber-300 dark:border-amber-500/30 bg-amber-50 dark:bg-amber-500/15 px-3 py-2 text-xs text-amber-900 dark:text-amber-300"
      >
        {t('knowledgeDks.noteBody')}
        <a
          href="/help"
          className="underline text-amber-900 dark:text-amber-300 hover:text-amber-700 dark:hover:text-amber-300"
          target="_blank"
          rel="noopener noreferrer"
        >
          {t('knowledgeDks.mcpGuideLink')}
        </a>
      </div>

      <div>
        <FieldLabel>Knowledge Service URL</FieldLabel>
        <FieldInput value={tools.knowledgeServiceUrl ?? ''} onChange={v => onChange('tools.knowledgeServiceUrl', v)}
          placeholder="http://dks-server:8100" />
        <HelpText>{t('knowledgeDks.serviceUrlHelp')}</HelpText>
      </div>

      <div>
        <FieldLabel>Knowledge Namespaces</FieldLabel>
        <NamespaceEditor
          value={tools.knowledgeNamespaces ?? {}}
          onChange={v => onChange('tools.knowledgeNamespaces', v)}
          addDisabled
          addDisabledReason={t('knowledgeDks.addDisabledReason')}
          addDisabledHref="/help"
        />
        <HelpText>{t('knowledgeDks.namespacesHelp')}</HelpText>
      </div>
    </div>
  );
}
