import { useEffect, useState } from "react";
import { Brain } from "lucide-react";

import type { Config as MindRoomConfig, MemoryBackend } from "@/types/config";
import { EditorPanel } from "@/components/shared/EditorPanel";
import { FieldGroup } from "@/components/shared/FieldGroup";
import { Input } from "@/components/ui/input";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { useConfigStore } from "@/store/configStore";

const EMBEDDER_PROVIDERS = [
  { value: "openai", label: "OpenAI" },
  { value: "ollama", label: "Ollama" },
  { value: "sentence_transformers", label: "Sentence Transformers" },
];

const MEMORY_BACKENDS = [
  { value: "mem0", label: "Mem0 (vector)" },
  { value: "file", label: "File (markdown)" },
  { value: "none", label: "Disabled (stateless)" },
];

const DEFAULT_MODELS: Record<string, string> = {
  openai: "text-embedding-3-small",
  ollama: "nomic-embed-text",
  sentence_transformers: "sentence-transformers/all-MiniLM-L6-v2",
};

const DEFAULT_HOSTS: Record<string, string> = {
  openai: "",
  ollama: "http://localhost:11434",
  sentence_transformers: "",
};

const MODEL_PLACEHOLDERS: Record<string, string> = {
  openai: "e.g. text-embedding-3-small",
  ollama: "e.g. nomic-embed-text",
  sentence_transformers: "e.g. sentence-transformers/all-MiniLM-L6-v2",
};

type MemorySettings = MindRoomConfig["memory"];

const DEFAULT_MEMORY_SETTINGS: MemorySettings = {
  backend: "mem0",
  team_reads_member_memory: false,
  embedder: {
    provider: "openai",
    config: {
      model: "text-embedding-3-small",
      host: "",
    },
  },
  file: {
    path: "",
    max_entrypoint_lines: 200,
  },
  search: {
    mode: "keyword",
    include: ["memory/**/*.md"],
    include_entrypoint: false,
  },
  auto_flush: {
    enabled: false,
    flush_interval_seconds: 1800,
    idle_seconds: 120,
    max_dirty_age_seconds: 600,
    stale_ttl_seconds: 86400,
    max_cross_session_reprioritize: 5,
    retry_cooldown_seconds: 30,
    max_retry_cooldown_seconds: 300,
    batch: {
      max_sessions_per_cycle: 10,
      max_sessions_per_agent_per_cycle: 3,
    },
    extractor: {
      no_reply_token: "NO_REPLY",
      max_messages_per_flush: 20,
      max_chars_per_flush: 12000,
      max_extraction_seconds: 30,
      include_memory_context: {
        memory_snippets: 5,
        snippet_max_chars: 400,
      },
    },
  },
};

function normalizeMemorySettings(
  memory: MindRoomConfig["memory"] | undefined,
): MemorySettings {
  const merged: MemorySettings = {
    ...DEFAULT_MEMORY_SETTINGS,
    ...(memory || {}),
    embedder: {
      ...DEFAULT_MEMORY_SETTINGS.embedder,
      ...(memory?.embedder || {}),
      config: {
        ...DEFAULT_MEMORY_SETTINGS.embedder.config,
        ...(memory?.embedder?.config || {}),
      },
    },
    file: {
      ...DEFAULT_MEMORY_SETTINGS.file,
      ...(memory?.file || {}),
    },
    search: {
      ...DEFAULT_MEMORY_SETTINGS.search,
      ...(memory?.search || {}),
    },
    auto_flush: {
      ...DEFAULT_MEMORY_SETTINGS.auto_flush,
      ...(memory?.auto_flush || {}),
      batch: {
        ...DEFAULT_MEMORY_SETTINGS.auto_flush?.batch,
        ...(memory?.auto_flush?.batch || {}),
      },
      extractor: {
        ...DEFAULT_MEMORY_SETTINGS.auto_flush?.extractor,
        ...(memory?.auto_flush?.extractor || {}),
        include_memory_context: {
          ...DEFAULT_MEMORY_SETTINGS.auto_flush?.extractor
            ?.include_memory_context,
          ...(memory?.auto_flush?.extractor?.include_memory_context || {}),
        },
      },
    },
  };

  if (!merged.embedder.config.host) {
    merged.embedder.config.host = DEFAULT_HOSTS[merged.embedder.provider] || "";
  }
  return merged;
}

function parseInteger(value: string, fallback: number): number {
  const parsed = Number.parseInt(value, 10);
  return Number.isNaN(parsed) ? fallback : parsed;
}

function parseBoolean(value: string): boolean {
  return value === "true";
}

function parseIncludePatterns(value: string): string[] {
  return value
    .split(",")
    .map((pattern) => pattern.trim())
    .filter((pattern) => pattern.length > 0);
}

function providerHelperText(provider: string): string {
  if (provider === "ollama") {
    return "Local embeddings using Ollama";
  }
  if (provider === "openai") {
    return "OpenAI or any OpenAI-compatible API (set Base URL below)";
  }
  if (provider === "sentence_transformers") {
    return "Fully local embeddings using the sentence-transformers Python runtime";
  }
  return "Choose your embedding provider";
}

function shouldShowHostField(provider: string): boolean {
  return provider !== "sentence_transformers";
}

function defaultEmbedderConfig(
  provider: string,
): MemorySettings["embedder"]["config"] {
  return {
    model: DEFAULT_MODELS[provider] || "",
    host: DEFAULT_HOSTS[provider] || "",
  };
}

export function MemoryConfig() {
  const { config, updateMemoryConfig, saveConfig, isDirty, isLoading } =
    useConfigStore();
  const [localConfig, setLocalConfig] = useState<MemorySettings>(() =>
    normalizeMemorySettings(config?.memory),
  );

  useEffect(() => {
    setLocalConfig(normalizeMemorySettings(config?.memory));
  }, [config]);

  const applyMemoryConfig = (nextConfig: MemorySettings) => {
    setLocalConfig(nextConfig);
    updateMemoryConfig(nextConfig);
  };

  const handleBackendChange = (backend: MemoryBackend) => {
    applyMemoryConfig({ ...localConfig, backend });
  };

  const handleProviderChange = (provider: string) => {
    applyMemoryConfig({
      ...localConfig,
      embedder: {
        ...localConfig.embedder,
        provider,
        config: defaultEmbedderConfig(provider),
      },
    });
  };

  const handleModelChange = (model: string) => {
    applyMemoryConfig({
      ...localConfig,
      embedder: {
        ...localConfig.embedder,
        config: {
          ...localConfig.embedder.config,
          model,
        },
      },
    });
  };

  const handleHostChange = (host: string) => {
    applyMemoryConfig({
      ...localConfig,
      embedder: {
        ...localConfig.embedder,
        config: {
          ...localConfig.embedder.config,
          host,
        },
      },
    });
  };

  const handleCredentialsServiceChange = (credentialsService: string) => {
    const config = { ...localConfig.embedder.config };
    const normalizedService = credentialsService.trim();
    if (normalizedService) {
      config.credentials_service = normalizedService;
    } else {
      delete config.credentials_service;
    }
    applyMemoryConfig({
      ...localConfig,
      embedder: {
        ...localConfig.embedder,
        config,
      },
    });
  };

  const handleFilePathChange = (path: string) => {
    applyMemoryConfig({
      ...localConfig,
      file: {
        ...localConfig.file,
        path,
      },
    });
  };

  const handleSearchModeChange = (mode: "keyword" | "semantic") => {
    applyMemoryConfig({
      ...localConfig,
      search: {
        ...localConfig.search,
        mode,
      },
    });
  };

  const handleSearchIncludeChange = (value: string) => {
    applyMemoryConfig({
      ...localConfig,
      search: {
        ...localConfig.search,
        include: parseIncludePatterns(value),
      },
    });
  };

  const handleIncludeEntrypointChange = (include_entrypoint: boolean) => {
    applyMemoryConfig({
      ...localConfig,
      search: {
        ...localConfig.search,
        include_entrypoint,
      },
    });
  };

  const handleAutoFlushEnabled = (enabled: boolean) => {
    applyMemoryConfig({
      ...localConfig,
      auto_flush: {
        ...localConfig.auto_flush,
        enabled,
      },
    });
  };

  const updateAutoFlush = (
    updates: Partial<NonNullable<MemorySettings["auto_flush"]>>,
  ) => {
    applyMemoryConfig({
      ...localConfig,
      auto_flush: {
        ...localConfig.auto_flush,
        ...updates,
      },
    });
  };

  const updateAutoFlushBatch = (
    updates: Partial<
      NonNullable<NonNullable<MemorySettings["auto_flush"]>["batch"]>
    >,
  ) => {
    updateAutoFlush({
      batch: {
        ...localConfig.auto_flush?.batch,
        ...updates,
      },
    });
  };

  const updateAutoFlushExtractor = (
    updates: Partial<
      NonNullable<NonNullable<MemorySettings["auto_flush"]>["extractor"]>
    >,
  ) => {
    updateAutoFlush({
      extractor: {
        ...localConfig.auto_flush?.extractor,
        ...updates,
      },
    });
  };

  const updateAutoFlushExtractorContext = (
    updates: Partial<
      NonNullable<
        NonNullable<
          NonNullable<MemorySettings["auto_flush"]>["extractor"]
        >["include_memory_context"]
      >
    >,
  ) => {
    updateAutoFlushExtractor({
      include_memory_context: {
        ...localConfig.auto_flush?.extractor?.include_memory_context,
        ...updates,
      },
    });
  };

  const handleSave = async () => {
    return saveConfig();
  };

  return (
    <EditorPanel
      icon={Brain}
      title="Memory Configuration"
      isDirty={isDirty}
      onSave={handleSave}
      onDelete={() => {}}
      showActions={true}
      disableSave={isLoading}
      disableDelete={true}
      className="h-full"
    >
      <div className="space-y-6">
        <div className="space-y-2">
          <p className="text-sm text-muted-foreground">
            Configure the embedder for agent memory storage and retrieval. You
            can also choose the memory backend and auto-flush behavior.
          </p>
        </div>

        <div className="space-y-4">
          <FieldGroup
            label="Memory Backend"
            helperText="Choose vector memory, file-based markdown memory, or disabled memory."
            required
            htmlFor="memory-backend"
          >
            <Select
              value={localConfig.backend || "mem0"}
              onValueChange={(value) =>
                handleBackendChange(value as MemoryBackend)
              }
            >
              <SelectTrigger
                id="memory-backend"
                className="transition-colors hover:border-ring"
              >
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                {MEMORY_BACKENDS.map((backend) => (
                  <SelectItem key={backend.value} value={backend.value}>
                    {backend.label}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </FieldGroup>

          <FieldGroup
            label="Team Reads Member Memory"
            helperText="Allow team-context memory reads to include member agent memories."
            htmlFor="team-reads-member-memory"
          >
            <Select
              value={String(localConfig.team_reads_member_memory ?? false)}
              onValueChange={(value) =>
                applyMemoryConfig({
                  ...localConfig,
                  team_reads_member_memory: parseBoolean(value),
                })
              }
            >
              <SelectTrigger
                id="team-reads-member-memory"
                className="transition-colors hover:border-ring"
              >
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="true">Enabled</SelectItem>
                <SelectItem value="false">Disabled</SelectItem>
              </SelectContent>
            </Select>
          </FieldGroup>

          <FieldGroup
            label="Embedder Provider"
            helperText={providerHelperText(localConfig.embedder.provider)}
            required
            htmlFor="provider"
          >
            <Select
              value={localConfig.embedder.provider}
              onValueChange={handleProviderChange}
            >
              <SelectTrigger
                id="provider"
                className="transition-colors hover:border-ring"
              >
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                {EMBEDDER_PROVIDERS.map((provider) => (
                  <SelectItem key={provider.value} value={provider.value}>
                    {provider.label}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </FieldGroup>

          <FieldGroup
            label="Embedding Model"
            helperText="The model used to generate embeddings for memory storage"
            required
            htmlFor="model"
          >
            <Input
              id="model"
              type="text"
              value={localConfig.embedder.config.model}
              onChange={(e) => handleModelChange(e.target.value)}
              placeholder={
                MODEL_PLACEHOLDERS[localConfig.embedder.provider] ||
                "Model name"
              }
              className="transition-colors hover:border-ring focus:border-ring"
            />
          </FieldGroup>

          {localConfig.embedder.provider === "openai" && (
            <FieldGroup
              label="Credential Service"
              helperText="Bind this embedder to a credential service. Leave empty for the legacy embedder-to-openai fallback."
              htmlFor="credentials-service"
            >
              <Input
                id="credentials-service"
                type="text"
                value={localConfig.embedder.config.credentials_service || ""}
                onChange={(e) => handleCredentialsServiceChange(e.target.value)}
                placeholder="embedder"
                className="transition-colors hover:border-ring focus:border-ring"
              />
            </FieldGroup>
          )}

          {shouldShowHostField(localConfig.embedder.provider) && (
            <FieldGroup
              label={
                localConfig.embedder.provider === "ollama"
                  ? "Ollama Host URL"
                  : "Base URL"
              }
              helperText={
                localConfig.embedder.provider === "ollama"
                  ? "The URL where your Ollama server is running"
                  : "Leave empty for official OpenAI API, or set for OpenAI-compatible servers"
              }
              required={localConfig.embedder.provider === "ollama"}
              htmlFor="host"
            >
              <Input
                id="host"
                type="url"
                value={localConfig.embedder.config.host || ""}
                onChange={(e) => handleHostChange(e.target.value)}
                placeholder={
                  localConfig.embedder.provider === "ollama"
                    ? "http://localhost:11434"
                    : "https://api.openai.com/v1"
                }
                className="transition-colors hover:border-ring focus:border-ring"
              />
            </FieldGroup>
          )}

          {localConfig.backend === "file" && (
            <>
              <FieldGroup
                label="File Memory Path"
                helperText="Directory containing MEMORY.md and daily files under memory/YYYY-MM-DD.md."
                htmlFor="file-memory-path"
              >
                <Input
                  id="file-memory-path"
                  type="text"
                  value={localConfig.file?.path || ""}
                  onChange={(e) => handleFilePathChange(e.target.value)}
                  placeholder="./mindroom_data/memory_files"
                  className="transition-colors hover:border-ring focus:border-ring"
                />
              </FieldGroup>

              <FieldGroup
                label="Entrypoint Max Lines"
                helperText="Maximum lines preloaded from the entrypoint file."
                htmlFor="entrypoint-max-lines"
              >
                <Input
                  id="entrypoint-max-lines"
                  type="number"
                  min={1}
                  value={localConfig.file?.max_entrypoint_lines ?? 200}
                  onChange={(e) =>
                    applyMemoryConfig({
                      ...localConfig,
                      file: {
                        ...localConfig.file,
                        max_entrypoint_lines: parseInteger(e.target.value, 200),
                      },
                    })
                  }
                  className="transition-colors hover:border-ring focus:border-ring"
                />
              </FieldGroup>

              <FieldGroup
                label="Search Mode"
                helperText="Keyword search is exact text matching; semantic search uses the memory embedder."
                htmlFor="memory-search-mode"
              >
                <Select
                  value={localConfig.search?.mode ?? "keyword"}
                  onValueChange={(value) =>
                    handleSearchModeChange(value as "keyword" | "semantic")
                  }
                >
                  <SelectTrigger
                    id="memory-search-mode"
                    className="transition-colors hover:border-ring"
                  >
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="keyword">Keyword</SelectItem>
                    <SelectItem value="semantic">Semantic</SelectItem>
                  </SelectContent>
                </Select>
              </FieldGroup>

              <FieldGroup
                label="Search Include"
                helperText="Comma-separated root-relative globs for file-memory search."
                htmlFor="memory-search-include"
              >
                <Input
                  id="memory-search-include"
                  type="text"
                  value={(localConfig.search?.include || []).join(", ")}
                  onChange={(e) => handleSearchIncludeChange(e.target.value)}
                  placeholder="memory/**/*.md"
                  className="transition-colors hover:border-ring focus:border-ring"
                />
              </FieldGroup>

              <FieldGroup
                label="Include Entrypoint"
                helperText="Include MEMORY.md in search results in addition to preloaded context."
                htmlFor="memory-search-entrypoint"
              >
                <Select
                  value={String(
                    localConfig.search?.include_entrypoint ?? false,
                  )}
                  onValueChange={(value) =>
                    handleIncludeEntrypointChange(parseBoolean(value))
                  }
                >
                  <SelectTrigger
                    id="memory-search-entrypoint"
                    className="transition-colors hover:border-ring"
                  >
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="true">Enabled</SelectItem>
                    <SelectItem value="false">Disabled</SelectItem>
                  </SelectContent>
                </Select>
              </FieldGroup>

              <FieldGroup
                label="Auto Flush"
                helperText="Automatically persist durable memory from dirty sessions."
                htmlFor="auto-flush-enabled"
              >
                <Select
                  value={String(localConfig.auto_flush?.enabled ?? false)}
                  onValueChange={(value) =>
                    handleAutoFlushEnabled(parseBoolean(value))
                  }
                >
                  <SelectTrigger
                    id="auto-flush-enabled"
                    className="transition-colors hover:border-ring"
                  >
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="true">Enabled</SelectItem>
                    <SelectItem value="false">Disabled</SelectItem>
                  </SelectContent>
                </Select>
              </FieldGroup>

              <FieldGroup
                label="Flush Interval (seconds)"
                helperText="Worker cycle interval for background flush processing."
                htmlFor="flush-interval-seconds"
              >
                <Input
                  id="flush-interval-seconds"
                  type="number"
                  min={5}
                  value={localConfig.auto_flush?.flush_interval_seconds ?? 1800}
                  onChange={(e) =>
                    updateAutoFlush({
                      flush_interval_seconds: parseInteger(
                        e.target.value,
                        1800,
                      ),
                    })
                  }
                  className="transition-colors hover:border-ring focus:border-ring"
                />
              </FieldGroup>

              <FieldGroup
                label="Idle Seconds"
                helperText="Minimum idle time before a dirty session is eligible."
                htmlFor="idle-seconds"
              >
                <Input
                  id="idle-seconds"
                  type="number"
                  min={0}
                  value={localConfig.auto_flush?.idle_seconds ?? 120}
                  onChange={(e) =>
                    updateAutoFlush({
                      idle_seconds: parseInteger(e.target.value, 120),
                    })
                  }
                  className="transition-colors hover:border-ring focus:border-ring"
                />
              </FieldGroup>

              <FieldGroup
                label="Max Dirty Age (seconds)"
                helperText="Force flush eligibility after this dirty age."
                htmlFor="max-dirty-age-seconds"
              >
                <Input
                  id="max-dirty-age-seconds"
                  type="number"
                  min={1}
                  value={localConfig.auto_flush?.max_dirty_age_seconds ?? 600}
                  onChange={(e) =>
                    updateAutoFlush({
                      max_dirty_age_seconds: parseInteger(e.target.value, 600),
                    })
                  }
                  className="transition-colors hover:border-ring focus:border-ring"
                />
              </FieldGroup>

              <FieldGroup
                label="Stale TTL (seconds)"
                helperText="How long to keep inactive dirty-session state entries."
                htmlFor="stale-ttl-seconds"
              >
                <Input
                  id="stale-ttl-seconds"
                  type="number"
                  min={60}
                  value={localConfig.auto_flush?.stale_ttl_seconds ?? 86400}
                  onChange={(e) =>
                    updateAutoFlush({
                      stale_ttl_seconds: parseInteger(e.target.value, 86400),
                    })
                  }
                  className="transition-colors hover:border-ring focus:border-ring"
                />
              </FieldGroup>

              <FieldGroup
                label="Cross-Session Reprioritize"
                helperText="Number of same-agent dirty sessions to boost on incoming prompts."
                htmlFor="max-cross-session-reprioritize"
              >
                <Input
                  id="max-cross-session-reprioritize"
                  type="number"
                  min={0}
                  value={
                    localConfig.auto_flush?.max_cross_session_reprioritize ?? 5
                  }
                  onChange={(e) =>
                    updateAutoFlush({
                      max_cross_session_reprioritize: parseInteger(
                        e.target.value,
                        5,
                      ),
                    })
                  }
                  className="transition-colors hover:border-ring focus:border-ring"
                />
              </FieldGroup>

              <FieldGroup
                label="Retry Cooldown (seconds)"
                helperText="Base cooldown before retrying failed extraction."
                htmlFor="retry-cooldown-seconds"
              >
                <Input
                  id="retry-cooldown-seconds"
                  type="number"
                  min={1}
                  value={localConfig.auto_flush?.retry_cooldown_seconds ?? 30}
                  onChange={(e) =>
                    updateAutoFlush({
                      retry_cooldown_seconds: parseInteger(e.target.value, 30),
                    })
                  }
                  className="transition-colors hover:border-ring focus:border-ring"
                />
              </FieldGroup>

              <FieldGroup
                label="Max Retry Cooldown (seconds)"
                helperText="Upper bound for retry cooldown backoff."
                htmlFor="max-retry-cooldown-seconds"
              >
                <Input
                  id="max-retry-cooldown-seconds"
                  type="number"
                  min={1}
                  value={
                    localConfig.auto_flush?.max_retry_cooldown_seconds ?? 300
                  }
                  onChange={(e) =>
                    updateAutoFlush({
                      max_retry_cooldown_seconds: parseInteger(
                        e.target.value,
                        300,
                      ),
                    })
                  }
                  className="transition-colors hover:border-ring focus:border-ring"
                />
              </FieldGroup>

              <FieldGroup
                label="Batch: Max Sessions Per Cycle"
                helperText="Upper bound of sessions processed in one flush iteration."
                htmlFor="max-sessions-per-cycle"
              >
                <Input
                  id="max-sessions-per-cycle"
                  type="number"
                  min={1}
                  value={
                    localConfig.auto_flush?.batch?.max_sessions_per_cycle ?? 10
                  }
                  onChange={(e) =>
                    updateAutoFlushBatch({
                      max_sessions_per_cycle: parseInteger(e.target.value, 10),
                    })
                  }
                  className="transition-colors hover:border-ring focus:border-ring"
                />
              </FieldGroup>

              <FieldGroup
                label="Batch: Max Sessions Per Agent"
                helperText="Per-agent cap for each flush iteration."
                htmlFor="max-sessions-per-agent"
              >
                <Input
                  id="max-sessions-per-agent"
                  type="number"
                  min={1}
                  value={
                    localConfig.auto_flush?.batch
                      ?.max_sessions_per_agent_per_cycle ?? 3
                  }
                  onChange={(e) =>
                    updateAutoFlushBatch({
                      max_sessions_per_agent_per_cycle: parseInteger(
                        e.target.value,
                        3,
                      ),
                    })
                  }
                  className="transition-colors hover:border-ring focus:border-ring"
                />
              </FieldGroup>

              <FieldGroup
                label="Extractor: Max Messages Per Flush"
                helperText="How much recent chat is considered during one extraction."
                htmlFor="max-messages-per-flush"
              >
                <Input
                  id="max-messages-per-flush"
                  type="number"
                  min={1}
                  value={
                    localConfig.auto_flush?.extractor?.max_messages_per_flush ??
                    20
                  }
                  onChange={(e) =>
                    updateAutoFlushExtractor({
                      max_messages_per_flush: parseInteger(e.target.value, 20),
                    })
                  }
                  className="transition-colors hover:border-ring focus:border-ring"
                />
              </FieldGroup>

              <FieldGroup
                label="Extractor: Max Chars Per Flush"
                helperText="Character cap for chat excerpt passed to extraction."
                htmlFor="max-chars-per-flush"
              >
                <Input
                  id="max-chars-per-flush"
                  type="number"
                  min={1}
                  value={
                    localConfig.auto_flush?.extractor?.max_chars_per_flush ??
                    12000
                  }
                  onChange={(e) =>
                    updateAutoFlushExtractor({
                      max_chars_per_flush: parseInteger(e.target.value, 12000),
                    })
                  }
                  className="transition-colors hover:border-ring focus:border-ring"
                />
              </FieldGroup>

              <FieldGroup
                label="Extractor: Max Duration (seconds)"
                helperText="Timeout for one extraction attempt."
                htmlFor="max-extraction-seconds"
              >
                <Input
                  id="max-extraction-seconds"
                  type="number"
                  min={1}
                  value={
                    localConfig.auto_flush?.extractor?.max_extraction_seconds ??
                    30
                  }
                  onChange={(e) =>
                    updateAutoFlushExtractor({
                      max_extraction_seconds: parseInteger(e.target.value, 30),
                    })
                  }
                  className="transition-colors hover:border-ring focus:border-ring"
                />
              </FieldGroup>

              <FieldGroup
                label="Extractor: NO_REPLY Token"
                helperText="Exact token used by the extractor when nothing should be stored."
                htmlFor="no-reply-token"
              >
                <Input
                  id="no-reply-token"
                  type="text"
                  value={
                    localConfig.auto_flush?.extractor?.no_reply_token ??
                    "NO_REPLY"
                  }
                  onChange={(e) =>
                    updateAutoFlushExtractor({
                      no_reply_token: e.target.value,
                    })
                  }
                  className="transition-colors hover:border-ring focus:border-ring"
                />
              </FieldGroup>

              <FieldGroup
                label="Context: Memory Snippets"
                helperText="How many existing memory snippets to include for dedupe context."
                htmlFor="memory-snippets"
              >
                <Input
                  id="memory-snippets"
                  type="number"
                  min={0}
                  value={
                    localConfig.auto_flush?.extractor?.include_memory_context
                      ?.memory_snippets ?? 5
                  }
                  onChange={(e) =>
                    updateAutoFlushExtractorContext({
                      memory_snippets: parseInteger(e.target.value, 5),
                    })
                  }
                  className="transition-colors hover:border-ring focus:border-ring"
                />
              </FieldGroup>

              <FieldGroup
                label="Context: Snippet Max Chars"
                helperText="Character cap per included memory snippet."
                htmlFor="snippet-max-chars"
              >
                <Input
                  id="snippet-max-chars"
                  type="number"
                  min={1}
                  value={
                    localConfig.auto_flush?.extractor?.include_memory_context
                      ?.snippet_max_chars ?? 400
                  }
                  onChange={(e) =>
                    updateAutoFlushExtractorContext({
                      snippet_max_chars: parseInteger(e.target.value, 400),
                    })
                  }
                  className="transition-colors hover:border-ring focus:border-ring"
                />
              </FieldGroup>
            </>
          )}
        </div>

        <div className="p-4 bg-muted/50 rounded-lg shadow-sm border border-border">
          <h3 className="text-sm font-medium mb-3">Current Configuration</h3>
          <div className="space-y-2 text-sm">
            <div className="flex justify-between">
              <span className="text-muted-foreground">Backend:</span>
              <span className="font-mono text-foreground">
                {localConfig.backend || "mem0"}
              </span>
            </div>
            {localConfig.embedder.config.credentials_service && (
              <div className="flex justify-between">
                <span className="text-muted-foreground">
                  Credential Service:
                </span>
                <span className="font-mono text-foreground">
                  {localConfig.embedder.config.credentials_service}
                </span>
              </div>
            )}
            <div className="flex justify-between">
              <span className="text-muted-foreground">Provider:</span>
              <span className="font-mono text-foreground">
                {localConfig.embedder.provider}
              </span>
            </div>
            <div className="flex justify-between">
              <span className="text-muted-foreground">Team Reads Members:</span>
              <span className="font-mono text-foreground">
                {localConfig.team_reads_member_memory ? "enabled" : "disabled"}
              </span>
            </div>
            <div className="flex justify-between">
              <span className="text-muted-foreground">Model:</span>
              <span className="font-mono text-foreground">
                {localConfig.embedder.config.model}
              </span>
            </div>
            {localConfig.backend === "file" && (
              <>
                <div className="flex justify-between">
                  <span className="text-muted-foreground">Auto Flush:</span>
                  <span className="font-mono text-foreground">
                    {localConfig.auto_flush?.enabled ? "enabled" : "disabled"}
                  </span>
                </div>
                <div className="flex justify-between">
                  <span className="text-muted-foreground">Batch Size:</span>
                  <span className="font-mono text-foreground">
                    {localConfig.auto_flush?.batch?.max_sessions_per_cycle ||
                      10}
                  </span>
                </div>
              </>
            )}
            {localConfig.embedder.config.host && (
              <div className="flex justify-between">
                <span className="text-muted-foreground">
                  {localConfig.embedder.provider === "ollama"
                    ? "Host:"
                    : "Base URL:"}
                </span>
                <span className="font-mono text-foreground">
                  {localConfig.embedder.config.host}
                </span>
              </div>
            )}
          </div>
        </div>
      </div>
    </EditorPanel>
  );
}
