import { invoke } from "@tauri-apps/api/core";
import {
  startTransition,
  useDeferredValue,
  useEffect,
  useState,
  type ChangeEvent,
  type FormEvent,
  type ReactElement,
} from "react";
import {
  Activity,
  CircleAlert,
  ClipboardList,
  Copy,
  Database,
  KeyRound,
  PanelLeft,
  PlugZap,
  Search,
  ShieldAlert,
  TerminalSquare,
  TimerReset,
  Trash2,
} from "lucide-react";
import { Badge } from "./components/ui/badge";
import { Button } from "./components/ui/button";
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "./components/ui/dialog";
import { Input } from "./components/ui/input";
import { Textarea } from "./components/ui/textarea";
import { cn } from "./lib/utils";

declare const __APP_VERSION__: string;

type RedisKeyType = string;
type TlsMode = "disabled" | "preferred" | "required";
type ConnectionStatus = "healthy" | "idle" | "checking" | "error";
type ConsoleEntryStatus = "ok" | "blocked" | "error";
type ConsoleEntrySource = "live" | "mock";
type RedisValueWriteCapability = "none" | "replace_string";

type ConnectionProfile = {
  id: string;
  name: string;
  environment: "dev" | "test" | "local";
  detail: string;
  status: ConnectionStatus;
  password: string;
  target: {
    host: string;
    port: number;
    database: number;
    username: string | null;
    tls_mode: TlsMode;
  };
};

type KeyRecord = {
  id: string;
  name: string;
  type: RedisKeyType;
  ttl: string;
  preview: string;
  editable: boolean;
  value: string;
  summary: string;
};

type ConsoleEntry = {
  command: string;
  output: string;
  status: ConsoleEntryStatus;
  source: ConsoleEntrySource;
};

type ConnectionDraft = {
  name: string;
  host: string;
  port: string;
  database: string;
  user: string;
  password: string;
};

type ConnectionDraftErrors = Partial<
  Record<"name" | "host" | "port" | "database", string>
>;

type BackendBootstrap = {
  app_name: string;
  surface: string;
  persistence: {
    connection_catalog: string;
    secrets: string;
  };
  command_execution: string;
  key_browsing: string;
  next_backend_milestone: string;
};

type BackendError = {
  code: string;
  message: string;
  detail: string | null;
};

type RedisConnectionRequest = {
  target: ConnectionProfile["target"];
  password: string | null;
};

type ConnectionTestResult = {
  selected_database: number;
  authenticated_as: string | null;
  round_trip_status: string;
};

type RedisCommandRequest = {
  connection: RedisConnectionRequest;
  command: string;
  arguments: string[];
};

type RedisKeyTtl =
  | { kind: "persistent" }
  | { kind: "missing" }
  | { kind: "expires_in_millis"; value: number };

type RedisKeyMetadata = {
  name: string;
  database: number;
  exists: boolean;
  key_type: string;
  ttl: RedisKeyTtl;
};

type RedisKeyBrowseRequest = {
  connection: RedisConnectionRequest;
  cursor: string;
  pattern: string | null;
  page_size: number;
};

type RedisKeyBrowseResult = {
  database: number;
  submitted_cursor: string;
  next_cursor: string;
  has_more: boolean;
  page_size: number;
  pattern: string | null;
  keys: RedisKeyMetadata[];
};

type RedisValueContent =
  | { kind: "string"; value: string }
  | { kind: "binary"; bytes: number[] };

type RedisFieldValueEntry = {
  field: RedisValueContent;
  value: RedisValueContent;
};

type RedisSortedSetEntry = {
  member: RedisValueContent;
  score: string;
};

type RedisStreamEntry = {
  id: string;
  fields: RedisFieldValueEntry[];
};

type RedisValueData =
  | { kind: "missing" }
  | { kind: "string"; value: RedisValueContent }
  | { kind: "hash"; entries: RedisFieldValueEntry[] }
  | { kind: "list"; items: RedisValueContent[] }
  | { kind: "set"; members: RedisValueContent[] }
  | { kind: "sorted_set"; entries: RedisSortedSetEntry[] }
  | { kind: "stream"; entries: RedisStreamEntry[] };

type RedisValueRecord = {
  metadata: RedisKeyMetadata;
  data: RedisValueData;
  write_capability: RedisValueWriteCapability;
  ttl_write_supported: boolean;
};

type RedisValueReadRequest = {
  connection: RedisConnectionRequest;
  key: string;
};

type RedisValueWriteRequest = {
  connection: RedisConnectionRequest;
  key: string;
  value: {
    kind: "string";
    value: string;
  };
};

type RedisKeyTtlUpdate =
  | { kind: "persist" }
  | { kind: "expires_in_millis"; value: number };

type RedisKeyTtlUpdateRequest = {
  connection: RedisConnectionRequest;
  key: string;
  operation: RedisKeyTtlUpdate;
};

type RedisKeyTtlUpdateResult = {
  metadata: RedisKeyMetadata;
};

type RedisResponse =
  | { kind: "null" }
  | { kind: "integer"; value: number }
  | { kind: "string"; value: string }
  | { kind: "binary"; bytes: number[] }
  | { kind: "array"; items: RedisResponse[] };

type CommandExecutionResult = {
  command: string;
  arguments: string[];
  database: number;
  response: RedisResponse;
};

const browsePageSize = 50;

const initialConnections: ConnectionProfile[] = [
  {
    id: "redis-dev-eu-1",
    name: "redis-dev-eu-1",
    environment: "dev",
    detail: "13 ms",
    status: "healthy",
    password: "",
    target: {
      host: "127.0.0.1",
      port: 6379,
      database: 0,
      username: null,
      tls_mode: "disabled",
    },
  },
  {
    id: "redis-test-audit",
    name: "redis-test-audit",
    environment: "test",
    detail: "28 ms",
    status: "healthy",
    password: "",
    target: {
      host: "10.42.2.19",
      port: 6379,
      database: 0,
      username: "readonly",
      tls_mode: "disabled",
    },
  },
  {
    id: "redis-local-fixture",
    name: "redis-local-fixture",
    environment: "local",
    detail: "Fixture profile",
    status: "idle",
    password: "",
    target: {
      host: "127.0.0.1",
      port: 6380,
      database: 0,
      username: null,
      tls_mode: "disabled",
    },
  },
];

const keyData: KeyRecord[] = [
  {
    id: "session:42",
    name: "session:42",
    type: "hash",
    ttl: "13m",
    preview: "user profile and auth state",
    editable: false,
    value: "userId=42, role=editor, featureFlag=beta",
    summary: "Read-only in V1. Structured hash inspection ships before editing support to avoid unsafe partial writes.",
  },
  {
    id: "cache:homepage",
    name: "cache:homepage",
    type: "string",
    ttl: "48s",
    preview: "serialized landing payload",
    editable: true,
    value: "{\"hero\":\"Redis GUI\",\"updatedAt\":\"2026-03-27T12:00:00Z\"}",
    summary: "String keys are editable in V1 and should refresh browser metadata after save without reconnecting.",
  },
  {
    id: "jobs:failed",
    name: "jobs:failed",
    type: "list",
    ttl: "persistent",
    preview: "3 queued failure payloads",
    editable: false,
    value: "[payload-1, payload-2, payload-3]",
    summary: "Lists remain inspectable but read only in the first visible shell.",
  },
  {
    id: "feature:enabled",
    name: "feature:enabled",
    type: "set",
    ttl: "1h",
    preview: "5 active feature flags",
    editable: false,
    value: "{search_v2, audit_log, compact_ui, qa_mode, canary_cli}",
    summary: "Collections keep structural hints visible so support work stays fast without raw CLI fallback.",
  },
];

const databases = ["db0", "db1", "db2", "db5"];

const fallbackBootstrap: BackendBootstrap = {
  app_name: "Redis GUI Foundation",
  surface: "desktop",
  persistence: {
    connection_catalog: "not_configured",
    secrets: "memory_only",
  },
  command_execution: "single_instance_enabled",
  key_browsing: "scan_metadata_enabled",
  next_backend_milestone: "value_surface_and_catalog_persistence",
};

const initialConsoleHistory: ConsoleEntry[] = [
  {
    command: "TTL cache:homepage",
    output: "(integer) 48",
    status: "ok",
    source: "mock",
  },
  {
    command: "TYPE session:42",
    output: "hash",
    status: "ok",
    source: "mock",
  },
  {
    command: "FLUSHALL",
    output: "Blocked in V1. Dangerous administrative commands are intentionally unavailable.",
    status: "blocked",
    source: "mock",
  },
];

function App() {
  const [connections, setConnections] = useState(initialConnections);
  const [activeConnectionId, setActiveConnectionId] = useState(initialConnections[0].id);
  const [activeDb, setActiveDb] = useState(databases[0]);
  const [search, setSearch] = useState("");
  const [selectedKeyId, setSelectedKeyId] = useState<string | null>(keyData[1].id);
  const [draftValue, setDraftValue] = useState(keyData[1].value);
  const [consoleInput, setConsoleInput] = useState("GET cache:homepage");
  const [consoleHistory, setConsoleHistory] = useState(initialConsoleHistory);
  const [bootstrap, setBootstrap] = useState(fallbackBootstrap);
  const [banner, setBanner] = useState("String edits stay local to the shell until the backend write contract is wired.");
  const [connectionDialogOpen, setConnectionDialogOpen] = useState(false);
  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
  const [isConnectionTestRunning, setIsConnectionTestRunning] = useState(false);
  const [isCommandRunning, setIsCommandRunning] = useState(false);
  const [isBrowseLoading, setIsBrowseLoading] = useState(false);
  const [isInspectorLoading, setIsInspectorLoading] = useState(false);
  const [isSaveRunning, setIsSaveRunning] = useState(false);
  const [isTtlUpdateRunning, setIsTtlUpdateRunning] = useState(false);
  const [copyFeedback, setCopyFeedback] = useState<"idle" | "copied" | "unavailable">("idle");
  const [liveKeys, setLiveKeys] = useState<KeyRecord[]>([]);
  const [liveNextCursor, setLiveNextCursor] = useState("0");
  const [liveHasMore, setLiveHasMore] = useState(false);
  const [selectedValueRecord, setSelectedValueRecord] = useState<RedisValueRecord | null>(null);
  const [ttlDraft, setTtlDraft] = useState("");
  const [connectionDraft, setConnectionDraft] = useState<ConnectionDraft>({
    name: "redis-staging-preview",
    host: "10.42.8.12",
    port: "6379",
    database: "0",
    user: "readonly",
    password: "",
  });
  const deferredSearch = useDeferredValue(search);
  const tauriAvailable = isTauriRuntimeAvailable();
  const appVersion = __APP_VERSION__;
  const buildMode = import.meta.env.DEV ? "dev" : "production";
  const runtimeMode = tauriAvailable ? "live desktop bridge" : "browser demo fallback";

  const activeConnection =
    connections.find((connection) => connection.id === activeConnectionId) ??
    connections[0];

  const demoQuery = deferredSearch.trim().toLowerCase();
  const demoKeys = !demoQuery
    ? keyData
    : keyData.filter((item) => item.name.toLowerCase().includes(demoQuery));
  const filteredKeys = tauriAvailable ? liveKeys : demoKeys;
  const draftErrors = validateConnectionDraft(connectionDraft, connections);
  const draftErrorList = Object.values(draftErrors);

  const selectedKey =
    filteredKeys.length === 0
      ? null
      : filteredKeys.find((item) => item.id === selectedKeyId) ?? filteredKeys[0];

  const isEditable = tauriAvailable
    ? selectedValueRecord?.write_capability === "replace_string" &&
      selectedValueRecord.data.kind === "string"
    : selectedKey?.editable === true && selectedKey.type === "string";

  const inspectorText = tauriAvailable
    ? formatInspectorValue(selectedValueRecord, selectedKey, isInspectorLoading)
    : (selectedKey?.value ?? "");

  const supportNote = tauriAvailable
    ? buildLiveSupportNote(selectedValueRecord, selectedKey)
    : (selectedKey?.summary ??
      `Search currently returns zero keys in ${activeDb}. This is an intentional empty state, not a backend failure.`);
  const ttlWriteSupported = tauriAvailable
    ? selectedValueRecord?.ttl_write_supported === true
    : selectedKey !== null;
  const ttlDraftError = ttlDraft.trim() ? validateTtlDraft(ttlDraft) : null;
  const canSubmitTtlUpdate =
    selectedKey !== null &&
    ttlWriteSupported &&
    ttlDraft.trim() !== "" &&
    ttlDraftError === null &&
    !isTtlUpdateRunning;
  const canPersistTtl =
    selectedKey !== null &&
    ttlWriteSupported &&
    !isTtlUpdateRunning &&
    (tauriAvailable
      ? selectedValueRecord?.metadata.ttl.kind !== "persistent"
      : selectedKey?.ttl !== "persistent");
  const latestConsoleEntry = consoleHistory[0] ?? null;
  const qaSnapshot = [
    `app=${bootstrap.app_name}`,
    `version=${appVersion}`,
    `runtime=${runtimeMode}`,
    `build=${buildMode}`,
    `connection=${activeConnection.name}`,
    `endpoint=${formatEndpoint(activeConnection.target)}`,
    `database=${activeDb}`,
    `selectedKey=${selectedKey?.name ?? "none"}`,
    `selectedType=${selectedKey?.type ?? "none"}`,
    `selectedTtl=${selectedKey?.ttl ?? "none"}`,
    `browseVisible=${filteredKeys.length}${tauriAvailable && liveHasMore ? "+" : ""}`,
    `latestCommand=${latestConsoleEntry?.command ?? "none"}`,
    `latestCommandSource=${latestConsoleEntry?.source ?? "none"}`,
    `latestCommandStatus=${latestConsoleEntry?.status ?? "none"}`,
    `banner=${banner}`,
  ].join("\n");

  useEffect(() => {
    if (!tauriAvailable) {
      startTransition(() => {
        setBootstrap(fallbackBootstrap);
      });
      return;
    }

    let active = true;

    invoke<BackendBootstrap>("backend_bootstrap")
      .then((result) => {
        if (!active) {
          return;
        }

        startTransition(() => {
          setBootstrap(result);
        });
      })
      .catch(() => {
        if (!active) {
          return;
        }

        startTransition(() => {
          setBootstrap(fallbackBootstrap);
        });
      });

    return () => {
      active = false;
    };
  }, [tauriAvailable]);

  useEffect(() => {
    if (!tauriAvailable) {
      startTransition(() => {
        setLiveKeys([]);
        setLiveNextCursor("0");
        setLiveHasMore(false);
        setSelectedValueRecord(null);
        setDraftValue(selectedKey?.value ?? "");
        setTtlDraft("");
      });
      return;
    }

    let active = true;
    const request: RedisKeyBrowseRequest = {
      connection: toRedisConnectionRequest(activeConnection, activeDb),
      cursor: "0",
      pattern: toRedisSearchPattern(deferredSearch),
      page_size: browsePageSize,
    };

    startTransition(() => {
      setIsBrowseLoading(true);
      setLiveKeys([]);
      setLiveNextCursor("0");
      setLiveHasMore(false);
      setSelectedValueRecord(null);
      setDraftValue("");
      setTtlDraft("");
    });

    invoke<RedisKeyBrowseResult>("browse_redis_keys", { request })
      .then((result) => {
        if (!active) {
          return;
        }

        const nextKeys = result.keys.map(toLiveKeyRecordFromMetadata);
        startTransition(() => {
          setLiveKeys(nextKeys);
          setLiveNextCursor(result.next_cursor);
          setLiveHasMore(result.has_more);
          setSelectedKeyId((current) =>
            nextKeys.some((item) => item.id === current) ? current : (nextKeys[0]?.id ?? null),
          );
          setIsBrowseLoading(false);
        });
      })
      .catch((error) => {
        if (!active) {
          return;
        }

        const backendError = toBackendError(error);
        startTransition(() => {
          setLiveKeys([]);
          setLiveNextCursor("0");
          setLiveHasMore(false);
          setSelectedKeyId(null);
          setSelectedValueRecord(null);
          setDraftValue("");
          setTtlDraft("");
          setIsBrowseLoading(false);
          setBanner(`Live key browse failed on ${activeConnection.name} / ${activeDb}: ${formatBackendError(backendError)}.`);
        });
      });

    return () => {
      active = false;
    };
  }, [activeConnectionId, activeDb, deferredSearch, tauriAvailable]);

  useEffect(() => {
    if (!tauriAvailable) {
      startTransition(() => {
        setSelectedValueRecord(null);
        setDraftValue(selectedKey?.value ?? "");
        setTtlDraft("");
      });
      return;
    }

    if (!selectedKey) {
      startTransition(() => {
        setSelectedValueRecord(null);
        setDraftValue("");
        setTtlDraft("");
        setIsInspectorLoading(false);
      });
      return;
    }

    let active = true;
    const request: RedisValueReadRequest = {
      connection: toRedisConnectionRequest(activeConnection, activeDb),
      key: selectedKey.name,
    };

    startTransition(() => {
      setSelectedValueRecord(null);
      setDraftValue("");
      setTtlDraft("");
      setIsInspectorLoading(true);
    });

    invoke<RedisValueRecord>("read_redis_value", { request })
      .then((record) => {
        if (!active) {
          return;
        }

        const nextRecord = toLiveKeyRecordFromValue(record);
        startTransition(() => {
          setSelectedValueRecord(record);
          setLiveKeys((current) => replaceKeyRecord(current, nextRecord));
          setDraftValue(
            record.data.kind === "string" && record.write_capability === "replace_string"
              ? formatRedisValueContent(record.data.value)
              : formatRedisValueData(record.data),
          );
          setTtlDraft(record.metadata.ttl.kind === "expires_in_millis" ? String(record.metadata.ttl.value) : "");
          setIsInspectorLoading(false);
        });
      })
      .catch((error) => {
        if (!active) {
          return;
        }

        const backendError = toBackendError(error);
        startTransition(() => {
          setSelectedValueRecord(null);
          setDraftValue("");
          setTtlDraft("");
          setIsInspectorLoading(false);
          setBanner(`Live value read failed for ${selectedKey.name} on ${activeConnection.name}: ${formatBackendError(backendError)}.`);
        });
      });

    return () => {
      active = false;
    };
  }, [activeConnectionId, activeDb, selectedKey?.id, tauriAvailable]);

  const handleConnectionDraftChange =
    (field: keyof typeof connectionDraft) =>
    (event: ChangeEvent<HTMLInputElement>) => {
      const value = event.target.value;

      setConnectionDraft((current) => ({
        ...current,
        [field]: value,
      }));
    };

  const handleSelectConnection = (connection: ConnectionProfile) => {
    startTransition(() => {
      setActiveConnectionId(connection.id);
      setActiveDb(formatDatabaseLabel(connection.target.database));
      setSelectedKeyId(null);
      setBanner(`Switched workspace context to ${connection.name} on ${formatDatabaseLabel(connection.target.database)}.`);
    });
  };

  const handleSelectDatabase = (database: string) => {
    const nextDatabase = parseDatabaseLabel(database);

    startTransition(() => {
      setActiveDb(database);
      setSelectedKeyId(null);
      setConnections((current) =>
        current.map((connection) =>
          connection.id === activeConnectionId
            ? {
                ...connection,
                target: {
                  ...connection.target,
                  database: nextDatabase,
                },
              }
            : connection,
        ),
      );
      setBanner(`Scoped the workspace to ${database} for ${activeConnection.name}.`);
    });
  };

  const handleCreateDraftConnection = () => {
    if (draftErrorList.length > 0) {
      setBanner(`Connection draft is incomplete: ${draftErrorList[0]}`);
      return;
    }

    const nextDatabase = parseDatabaseInput(connectionDraft.database);
    const nextName = connectionDraft.name.trim();
    const nextConnection: ConnectionProfile = {
      id: nextName,
      name: nextName,
      environment: "dev",
      detail: "Draft profile",
      status: "idle",
      password: connectionDraft.password,
      target: {
        host: connectionDraft.host.trim() || "127.0.0.1",
        port: parsePortInput(connectionDraft.port),
        database: nextDatabase,
        username: normalizeOptionalString(connectionDraft.user),
        tls_mode: "disabled",
      },
    };

    startTransition(() => {
      setConnections((current) => [nextConnection, ...current]);
      setActiveConnectionId(nextConnection.id);
      setActiveDb(formatDatabaseLabel(nextDatabase));
      setSelectedKeyId(null);
      setBanner("A draft connection profile was added to the shell. Credentials remain memory-only.");
      setConnectionDialogOpen(false);
    });
  };

  const handleSaveString = async () => {
    if (!selectedKey) {
      setBanner(`Select a key in ${activeDb} before attempting a shell-level save.`);
      return;
    }

    if (!tauriAvailable) {
      setBanner(`Saved mock string value for ${selectedKey.name} in ${activeDb}. Backend persistence is not wired yet.`);
      return;
    }

    startTransition(() => {
      setIsSaveRunning(true);
    });

    try {
      const result = await invoke<RedisValueRecord>("write_redis_value", {
        request: {
          connection: toRedisConnectionRequest(activeConnection, activeDb),
          key: selectedKey.name,
          value: {
            kind: "string",
            value: draftValue,
          },
        } satisfies RedisValueWriteRequest,
      });

      const nextRecord = toLiveKeyRecordFromValue(result);
      startTransition(() => {
        setSelectedValueRecord(result);
        setLiveKeys((current) => replaceKeyRecord(current, nextRecord));
        setDraftValue(
          result.data.kind === "string"
            ? formatRedisValueContent(result.data.value)
            : formatRedisValueData(result.data),
        );
        setIsSaveRunning(false);
        setBanner(`Saved live string value for ${selectedKey.name} in ${activeDb} and preserved the current TTL boundary.`);
      });
    } catch (error) {
      const backendError = toBackendError(error);
      startTransition(() => {
        setIsSaveRunning(false);
        setBanner(`Live string save failed for ${selectedKey.name}: ${formatBackendError(backendError)}.`);
      });
    }
  };

  const handleDeleteKey = () => {
    if (!selectedKey) {
      return;
    }

    setDeleteDialogOpen(false);
    setBanner(`Delete confirmation completed for ${selectedKey.name} in ${activeDb}. Mutation stays mocked until a delete contract is approved.`);
  };

  const handleApplyTtl = async () => {
    if (!selectedKey) {
      setBanner(`Select a key in ${activeDb} before attempting a TTL update.`);
      return;
    }

    const validationError = validateTtlDraft(ttlDraft);
    if (validationError) {
      setBanner(`TTL update is invalid: ${validationError}`);
      return;
    }

    if (!tauriAvailable) {
      setBanner(`Browser dev mode keeps TTL changes in demo fallback for ${selectedKey.name}. Use desktop runtime for a live TTL update.`);
      return;
    }

    startTransition(() => {
      setIsTtlUpdateRunning(true);
    });

    try {
      const result = await invoke<RedisKeyTtlUpdateResult>("update_redis_key_ttl", {
        request: {
          connection: toRedisConnectionRequest(activeConnection, activeDb),
          key: selectedKey.name,
          operation: {
            kind: "expires_in_millis",
            value: Number.parseInt(ttlDraft, 10),
          },
        } satisfies RedisKeyTtlUpdateRequest,
      });

      startTransition(() => {
        syncUpdatedMetadata(result.metadata);
        setTtlDraft(
          result.metadata.ttl.kind === "expires_in_millis"
            ? String(result.metadata.ttl.value)
            : "",
        );
        setIsTtlUpdateRunning(false);
        setBanner(`Updated live TTL for ${selectedKey.name} to ${formatRedisKeyTtl(result.metadata.ttl)} in ${activeDb}.`);
      });
    } catch (error) {
      const backendError = toBackendError(error);
      startTransition(() => {
        setIsTtlUpdateRunning(false);
        setBanner(`Live TTL update failed for ${selectedKey.name}: ${formatBackendError(backendError)}.`);
      });
    }
  };

  const handlePersistTtl = async () => {
    if (!selectedKey) {
      setBanner(`Select a key in ${activeDb} before attempting to remove TTL.`);
      return;
    }

    if (!tauriAvailable) {
      setBanner(`Browser dev mode keeps TTL removal in demo fallback for ${selectedKey.name}. Use desktop runtime for a live TTL change.`);
      return;
    }

    startTransition(() => {
      setIsTtlUpdateRunning(true);
    });

    try {
      const result = await invoke<RedisKeyTtlUpdateResult>("update_redis_key_ttl", {
        request: {
          connection: toRedisConnectionRequest(activeConnection, activeDb),
          key: selectedKey.name,
          operation: {
            kind: "persist",
          },
        } satisfies RedisKeyTtlUpdateRequest,
      });

      startTransition(() => {
        syncUpdatedMetadata(result.metadata);
        setTtlDraft("");
        setIsTtlUpdateRunning(false);
        setBanner(`Removed TTL for ${selectedKey.name}; the key is now ${formatRedisKeyTtl(result.metadata.ttl)}.`);
      });
    } catch (error) {
      const backendError = toBackendError(error);
      startTransition(() => {
        setIsTtlUpdateRunning(false);
        setBanner(`Removing TTL failed for ${selectedKey.name}: ${formatBackendError(backendError)}.`);
      });
    }
  };

  const handleRefreshInspector = async () => {
    if (!selectedKey) {
      setBanner(`No key is selected in ${activeDb}. Adjust or clear the current search pattern first.`);
      return;
    }

    if (!tauriAvailable) {
      setBanner(`Refreshed shell metadata for ${selectedKey.name} in ${activeDb}. Live value reload remains downstream of backend browse contracts.`);
      return;
    }

    startTransition(() => {
      setIsInspectorLoading(true);
      setSelectedValueRecord(null);
      setDraftValue("");
    });

    try {
      const result = await invoke<RedisValueRecord>("read_redis_value", {
        request: {
          connection: toRedisConnectionRequest(activeConnection, activeDb),
          key: selectedKey.name,
        } satisfies RedisValueReadRequest,
      });

      const nextRecord = toLiveKeyRecordFromValue(result);
      startTransition(() => {
        setSelectedValueRecord(result);
        setLiveKeys((current) => replaceKeyRecord(current, nextRecord));
        setDraftValue(
          result.data.kind === "string" && result.write_capability === "replace_string"
            ? formatRedisValueContent(result.data.value)
            : formatRedisValueData(result.data),
        );
        setTtlDraft(result.metadata.ttl.kind === "expires_in_millis" ? String(result.metadata.ttl.value) : "");
        setIsInspectorLoading(false);
        setBanner(`Refreshed live metadata and value surface for ${selectedKey.name} in ${activeDb}.`);
      });
    } catch (error) {
      const backendError = toBackendError(error);
      startTransition(() => {
        setIsInspectorLoading(false);
        setBanner(`Live metadata refresh failed for ${selectedKey.name}: ${formatBackendError(backendError)}.`);
      });
    }
  };

  const handleCopyQaSnapshot = async () => {
    if (typeof navigator === "undefined" || !navigator.clipboard?.writeText) {
      setCopyFeedback("unavailable");
      setBanner("Clipboard export is unavailable in this runtime. Copy the QA snapshot text manually from the side rail.");
      return;
    }

    try {
      await navigator.clipboard.writeText(qaSnapshot);
      setCopyFeedback("copied");
      setBanner("Copied the current QA snapshot to the clipboard for smoke evidence.");
    } catch {
      setCopyFeedback("unavailable");
      setBanner("Clipboard export failed in this runtime. Copy the QA snapshot text manually from the side rail.");
    }
  };

  const syncUpdatedMetadata = (metadata: RedisKeyMetadata) => {
    if (selectedValueRecord) {
      const nextRecord = {
        ...selectedValueRecord,
        metadata,
      };
      setSelectedValueRecord(nextRecord);
      setLiveKeys((current) => replaceKeyRecord(current, toLiveKeyRecordFromValue(nextRecord)));
      return;
    }

    setLiveKeys((current) => replaceKeyRecord(current, toLiveKeyRecordFromMetadata(metadata)));
  };

  const handleLoadMoreKeys = async () => {
    if (!tauriAvailable || !liveHasMore || isBrowseLoading) {
      return;
    }

    startTransition(() => {
      setIsBrowseLoading(true);
    });

    try {
      const result = await invoke<RedisKeyBrowseResult>("browse_redis_keys", {
        request: {
          connection: toRedisConnectionRequest(activeConnection, activeDb),
          cursor: liveNextCursor,
          pattern: toRedisSearchPattern(deferredSearch),
          page_size: browsePageSize,
        } satisfies RedisKeyBrowseRequest,
      });

      const nextKeys = result.keys.map(toLiveKeyRecordFromMetadata);
      startTransition(() => {
        setLiveKeys((current) => appendKeyRecords(current, nextKeys));
        setLiveNextCursor(result.next_cursor);
        setLiveHasMore(result.has_more);
        setIsBrowseLoading(false);
      });
    } catch (error) {
      const backendError = toBackendError(error);
      startTransition(() => {
        setIsBrowseLoading(false);
        setBanner(`Loading more keys failed on ${activeConnection.name} / ${activeDb}: ${formatBackendError(backendError)}.`);
      });
    }
  };

  const handleTestConnection = async () => {
    const connection = activeConnection;
    const request = toRedisConnectionRequest(connection, activeDb);

    startTransition(() => {
      setIsConnectionTestRunning(true);
      setConnections((current) =>
        current.map((item) =>
          item.id === connection.id
            ? {
                ...item,
                status: "checking",
                detail: "Live test in progress",
              }
            : item,
        ),
      );
      setBanner(`Testing ${connection.name} against ${activeDb} using the current desktop contract.`);
    });

    if (!tauriAvailable) {
      startTransition(() => {
        setConnections((current) =>
          current.map((item) =>
            item.id === connection.id
              ? {
                  ...item,
                  status: "idle",
                  detail: "Demo fallback",
                }
              : item,
          ),
        );
        setBanner(`Tauri runtime is unavailable in browser dev mode, so connection testing stayed in demo fallback for ${connection.name}.`);
        setIsConnectionTestRunning(false);
      });
      return;
    }

    try {
      const result = await invoke<ConnectionTestResult>("test_redis_connection", {
        request,
      });

      startTransition(() => {
        setConnections((current) =>
          current.map((item) =>
            item.id === connection.id
              ? {
                  ...item,
                  status: "healthy",
                  detail: result.round_trip_status,
                  target: {
                    ...item.target,
                    database: result.selected_database,
                    username: result.authenticated_as ?? item.target.username,
                  },
                }
              : item,
          ),
        );
        setActiveDb(formatDatabaseLabel(result.selected_database));
        setBanner(`Live Redis test passed for ${connection.name} on ${formatDatabaseLabel(result.selected_database)}. Round-trip status: ${result.round_trip_status}.`);
        setIsConnectionTestRunning(false);
      });
    } catch (error) {
      const backendError = toBackendError(error);

      startTransition(() => {
        setConnections((current) =>
          current.map((item) =>
            item.id === connection.id
              ? {
                  ...item,
                  status: "error",
                  detail: backendError.code,
                }
              : item,
          ),
        );
        setBanner(`Live Redis test failed for ${connection.name}: ${formatBackendError(backendError)}.`);
        setIsConnectionTestRunning(false);
      });
    }
  };

  const handleConsoleSubmit = async (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();

    const trimmed = consoleInput.trim();
    if (!trimmed) {
      return;
    }

    const tokens = tokenizeCommand(trimmed);
    if (tokens.length === 0) {
      return;
    }

    const [command, ...argumentsList] = tokens;
    const upper = command.toUpperCase();
    const blocked = upper.includes("FLUSH") || upper.includes("CONFIG") || upper.includes("SHUTDOWN");
    if (blocked) {
      startTransition(() => {
        setConsoleHistory((current) => [
          {
            command: trimmed,
            output: "Blocked in V1. Destructive or administrative commands remain outside the visible shell.",
            status: "blocked",
            source: "mock",
          },
          ...current.slice(0, 4),
        ]);
        setBanner(`Blocked ${command.toUpperCase()} in ${activeDb}. Administrative commands remain outside the visible shell.`);
      });
      return;
    }

    startTransition(() => {
      setIsCommandRunning(true);
    });

    if (!tauriAvailable) {
      startTransition(() => {
        setConsoleHistory((current) => [
          {
            command: trimmed,
            output: buildMockCommandOutput(command, selectedKey),
            status: "ok",
            source: "mock",
          },
          ...current.slice(0, 4),
        ]);
        setBanner(`Tauri runtime is unavailable in browser dev mode, so ${command.toUpperCase()} ran against the visible demo data only.`);
        setConsoleInput(trimmed);
        setIsCommandRunning(false);
      });
      return;
    }

    try {
      const result = await invoke<CommandExecutionResult>("execute_redis_command", {
        request: {
          connection: toRedisConnectionRequest(activeConnection, activeDb),
          command,
          arguments: argumentsList,
        } satisfies RedisCommandRequest,
      });

      startTransition(() => {
        setConsoleHistory((current) => [
          {
            command: [result.command, ...result.arguments].join(" "),
            output: formatRedisResponse(result.response),
            status: "ok",
            source: "live",
          },
          ...current.slice(0, 4),
        ]);
        setBanner(`Live Redis command completed on ${activeConnection.name} / ${formatDatabaseLabel(result.database)}.`);
        setConsoleInput(trimmed);
        setIsCommandRunning(false);
      });
    } catch (error) {
      const backendError = toBackendError(error);

      startTransition(() => {
        setConsoleHistory((current) => [
          {
            command: trimmed,
            output: formatBackendError(backendError),
            status: "error",
            source: "live",
          },
          ...current.slice(0, 4),
        ]);
        setBanner(`Live Redis command failed on ${activeConnection.name} / ${activeDb}: ${backendError.message}.`);
        setConsoleInput(trimmed);
        setIsCommandRunning(false);
      });
    }
  };

  return (
    <div className="min-h-screen bg-[var(--surface-base)] text-[var(--ink-0)]">
      <div className="mx-auto flex min-h-screen max-w-[1600px] flex-col px-4 py-4 sm:px-6 lg:px-8">
        <header className="mb-4 flex flex-col gap-3 rounded-[28px] border border-[var(--line-soft)] bg-[var(--surface-raised)] px-5 py-4 shadow-[var(--shadow-panel)] lg:flex-row lg:items-center lg:justify-between">
          <div className="flex items-start gap-3">
            <div className="mt-0.5 rounded-2xl border border-[var(--line-strong)] bg-[var(--surface-strong)] p-3 text-[var(--accent-strong)]">
              <PanelLeft className="h-5 w-5" />
            </div>
            <div>
              <p className="font-mono text-xs uppercase tracking-[0.28em] text-[var(--ink-muted)]">
                {bootstrap.app_name}
              </p>
              <h1 className="mt-1 text-2xl font-semibold tracking-[-0.03em]">
                Quiet desktop workspace for Redis inspection and low-risk edits
              </h1>
              <div className="mt-3 flex flex-wrap gap-2">
                <Badge variant="neutral">v{appVersion}</Badge>
                <Badge variant={tauriAvailable ? "accent" : "neutral"}>{runtimeMode}</Badge>
                <Badge variant="neutral">{buildMode}</Badge>
              </div>
            </div>
          </div>

          <div className="grid gap-2 text-sm text-[var(--ink-soft)] sm:grid-cols-2 xl:grid-cols-4">
            <StatusPill
              icon={<PlugZap className="h-4 w-4" />}
              label="Connection"
              value={activeConnection.name}
            />
            <StatusPill
              icon={<Database className="h-4 w-4" />}
              label="Database"
              value={activeDb}
            />
            <StatusPill
              icon={<Activity className="h-4 w-4" />}
              label="Status"
              value={formatConnectionStatus(activeConnection)}
            />
            <StatusPill
              icon={<PanelLeft className="h-4 w-4" />}
              label="Build"
              value={`v${appVersion}`}
            />
          </div>
        </header>

        <div className="mb-4 rounded-[24px] border border-[var(--line-soft)] bg-[var(--surface-raised)] px-4 py-3 shadow-[var(--shadow-panel)]">
          <p className="text-sm text-[var(--ink-soft)]">{banner}</p>
        </div>

        <main className="grid min-h-0 flex-1 gap-4 xl:grid-cols-[310px_minmax(360px,1.1fr)_minmax(420px,1fr)]">
          <aside className="rounded-[28px] border border-[var(--line-soft)] bg-[var(--surface-raised)] p-4 shadow-[var(--shadow-panel)]">
            <div className="space-y-5">
              <section>
                <SectionEyebrow icon={<PlugZap className="h-4 w-4" />} label="Connection library" />
                <div className="mt-3 space-y-2">
                  {connections.map((connection) => {
                    const active = connection.id === activeConnection.id;

                    return (
                      <button
                        key={connection.id}
                        type="button"
                        onClick={() => handleSelectConnection(connection)}
                        className={cn(
                          "w-full rounded-[22px] border px-4 py-3 text-left transition",
                          active
                            ? "border-[var(--accent-strong)] bg-[var(--accent-faint)]"
                            : "border-[var(--line-soft)] bg-[var(--surface-base)] hover:border-[var(--line-strong)]",
                        )}
                      >
                        <div className="flex items-start justify-between gap-3">
                          <div>
                            <p className="text-sm font-medium text-[var(--ink-0)]">{connection.name}</p>
                            <p className="mt-1 text-sm text-[var(--ink-soft)]">{formatEndpoint(connection.target)}</p>
                            <p className="mt-2 font-mono text-xs uppercase tracking-[0.14em] text-[var(--ink-muted)]">
                              {formatConnectionCardDetail(connection)}
                            </p>
                          </div>
                          <Badge variant={active ? "accent" : "neutral"}>{connection.environment}</Badge>
                        </div>
                      </button>
                    );
                  })}
                </div>

                <div className="mt-3 grid grid-cols-2 gap-2">
                  <Dialog open={connectionDialogOpen} onOpenChange={setConnectionDialogOpen}>
                    <DialogTrigger asChild>
                      <Button variant="default" size="sm">
                        New
                      </Button>
                    </DialogTrigger>
                    <DialogContent>
                      <DialogHeader>
                        <p className="font-mono text-xs uppercase tracking-[0.22em] text-[var(--ink-muted)]">
                          Connection draft
                        </p>
                        <DialogTitle>Create a visible shell profile</DialogTitle>
                        <DialogDescription>
                          This form demonstrates the entry point and keeps credentials out of persistent storage in the current foundation scope.
                        </DialogDescription>
                      </DialogHeader>

                      <div className="grid gap-3 sm:grid-cols-2">
                        <div className="grid gap-2">
                          <label className="text-sm font-medium text-[var(--ink-0)]" htmlFor="draft-name">
                            Profile name
                          </label>
                          <Input
                            id="draft-name"
                            value={connectionDraft.name}
                            onChange={handleConnectionDraftChange("name")}
                          />
                        </div>
                        <div className="grid gap-2">
                          <label className="text-sm font-medium text-[var(--ink-0)]" htmlFor="draft-user">
                            User
                          </label>
                          <Input
                            id="draft-user"
                            value={connectionDraft.user}
                            onChange={handleConnectionDraftChange("user")}
                          />
                        </div>
                        <div className="grid gap-2">
                          <label className="text-sm font-medium text-[var(--ink-0)]" htmlFor="draft-host">
                            Host
                          </label>
                          <Input
                            id="draft-host"
                            value={connectionDraft.host}
                            onChange={handleConnectionDraftChange("host")}
                          />
                        </div>
                        <div className="grid gap-2">
                          <label className="text-sm font-medium text-[var(--ink-0)]" htmlFor="draft-port">
                            Port
                          </label>
                          <Input
                            id="draft-port"
                            value={connectionDraft.port}
                            onChange={handleConnectionDraftChange("port")}
                          />
                        </div>
                        <div className="grid gap-2 sm:col-span-2">
                          <label className="text-sm font-medium text-[var(--ink-0)]" htmlFor="draft-db">
                            Default DB
                          </label>
                          <Input
                            id="draft-db"
                            value={connectionDraft.database}
                            onChange={handleConnectionDraftChange("database")}
                          />
                        </div>
                        <div className="grid gap-2 sm:col-span-2">
                          <label className="text-sm font-medium text-[var(--ink-0)]" htmlFor="draft-password">
                            Password
                          </label>
                          <Input
                            id="draft-password"
                            type="password"
                            value={connectionDraft.password}
                            onChange={handleConnectionDraftChange("password")}
                            placeholder="Optional, memory-only"
                          />
                        </div>
                      </div>

                      <div className="rounded-[22px] border border-[var(--line-soft)] bg-[var(--surface-base)] px-4 py-3 text-sm text-[var(--ink-soft)]">
                        Secrets stay memory-only in the foundation phase. This dialog is intentionally limited to a visible draft flow, and TLS remains fixed to disabled until the product scope asks for transport controls.
                      </div>

                      {draftErrorList.length > 0 ? (
                        <div className="rounded-[22px] border border-[var(--danger-soft)] bg-[var(--danger-faint)] px-4 py-3 text-sm text-[var(--danger-strong)]">
                          {draftErrorList[0]}
                        </div>
                      ) : null}

                      <DialogFooter>
                        <DialogClose asChild>
                          <Button variant="outline">Cancel</Button>
                        </DialogClose>
                        <Button onClick={handleCreateDraftConnection} disabled={draftErrorList.length > 0}>
                          Create draft
                        </Button>
                      </DialogFooter>
                    </DialogContent>
                  </Dialog>

                  <Button
                    variant="outline"
                    size="sm"
                    onClick={handleTestConnection}
                    disabled={isConnectionTestRunning}
                  >
                    {isConnectionTestRunning ? "Testing..." : tauriAvailable ? "Test live" : "Test demo"}
                  </Button>
                </div>
              </section>

              <section>
                <SectionEyebrow icon={<Database className="h-4 w-4" />} label="Database switcher" />
                <div className="mt-3 grid gap-2">
                  {databases.map((database) => {
                    const active = database === activeDb;

                    return (
                      <button
                        key={database}
                        type="button"
                        onClick={() => handleSelectDatabase(database)}
                        className={cn(
                          "flex items-center justify-between rounded-2xl border px-3 py-2 text-left transition",
                          active
                            ? "border-[var(--accent-strong)] bg-[var(--accent-faint)] text-[var(--ink-0)]"
                            : "border-[var(--line-soft)] bg-[var(--surface-base)] text-[var(--ink-soft)] hover:border-[var(--line-strong)] hover:text-[var(--ink-0)]",
                        )}
                      >
                        <span className="font-medium">{database}</span>
                        <span className="font-mono text-xs">{active ? "active" : "idle"}</span>
                      </button>
                    );
                  })}
                </div>
              </section>

              <section>
                <SectionEyebrow icon={<ShieldAlert className="h-4 w-4" />} label="Safety posture" />
                <div className="mt-3 space-y-3 rounded-[22px] border border-[var(--line-soft)] bg-[var(--surface-base)] p-4 text-sm text-[var(--ink-soft)]">
                  <InfoLine label="Surface" value={bootstrap.surface} />
                  <InfoLine label="Connection catalog" value={bootstrap.persistence.connection_catalog} />
                  <InfoLine label="Secrets" value={bootstrap.persistence.secrets} />
                  <InfoLine label="Command execution" value={bootstrap.command_execution} />
                  <InfoLine label="Key browsing" value={bootstrap.key_browsing} />
                  <InfoLine label="Next backend milestone" value={bootstrap.next_backend_milestone} />
                  <p>Delete and rename stay behind an explicit confirmation step.</p>
                  <p>Administrative commands stay blocked in both the UI and backend scope.</p>
                </div>
              </section>

              <section>
                <SectionEyebrow icon={<ClipboardList className="h-4 w-4" />} label="QA snapshot" />
                <div className="mt-3 rounded-[22px] border border-[var(--line-soft)] bg-[var(--surface-base)] p-4">
                  <p className="text-sm text-[var(--ink-soft)]">
                    Copy this summary into a smoke log when screenshots are unavailable.
                  </p>
                  <Textarea
                    readOnly
                    value={qaSnapshot}
                    className="mt-3 h-40 resize-none border-[var(--line-soft)] bg-[var(--surface-muted)] font-mono text-xs text-[var(--ink-soft)]"
                  />
                  <div className="mt-3 flex items-center justify-between gap-3">
                    <p className="text-xs text-[var(--ink-muted)]">
                      {copyFeedback === "copied"
                        ? "Snapshot copied."
                        : copyFeedback === "unavailable"
                          ? "Clipboard unavailable in this runtime."
                          : "Includes version, runtime, context, and latest command state."}
                    </p>
                    <Button variant="outline" size="sm" onClick={handleCopyQaSnapshot}>
                      <Copy className="h-4 w-4" />
                      Copy snapshot
                    </Button>
                  </div>
                </div>
              </section>
            </div>
          </aside>

          <section className="flex min-h-0 flex-col rounded-[28px] border border-[var(--line-soft)] bg-[var(--surface-raised)] p-4 shadow-[var(--shadow-panel)]">
            <div className="flex flex-col gap-4 border-b border-[var(--line-soft)] pb-4">
              <div className="flex items-start justify-between gap-3">
                <div>
                  <SectionEyebrow icon={<KeyRound className="h-4 w-4" />} label="Key browser" />
                  <h2 className="mt-2 text-xl font-semibold tracking-[-0.03em]">Incremental browse with fast pattern search</h2>
                </div>
                <Badge variant="neutral">
                  {tauriAvailable
                    ? `${filteredKeys.length}${liveHasMore ? "+" : ""} visible in ${activeDb}`
                    : `${filteredKeys.length} of ${keyData.length} keys in ${activeDb}`}
                </Badge>
              </div>

              <label className="flex items-center gap-3 rounded-2xl border border-[var(--line-soft)] bg-[var(--surface-base)] px-3 py-3">
                <Search className="h-4 w-4 text-[var(--ink-muted)]" />
                <input
                  value={search}
                  onChange={(event) => setSearch(event.target.value)}
                  className="w-full bg-transparent text-sm text-[var(--ink-0)] outline-none placeholder:text-[var(--ink-muted)]"
                  placeholder="Search key name or pattern"
                />
              </label>
            </div>

            <div className="mt-4 min-h-0 flex-1 space-y-2 overflow-auto pr-1">
              {filteredKeys.map((item) => {
                const active = item.id === selectedKey?.id;

                return (
                  <button
                    key={item.id}
                    type="button"
                    onClick={() => {
                      setSelectedKeyId(item.id);
                      setDraftValue(item.value);
                    }}
                    className={cn(
                      "w-full rounded-[24px] border px-4 py-4 text-left transition",
                      active
                        ? "border-[var(--accent-strong)] bg-[var(--accent-faint)]"
                        : "border-[var(--line-soft)] bg-[var(--surface-base)] hover:border-[var(--line-strong)]",
                    )}
                  >
                    <div className="flex items-start justify-between gap-3">
                      <div>
                        <p className="font-mono text-sm text-[var(--ink-0)]">{item.name}</p>
                        <p className="mt-1 text-sm text-[var(--ink-soft)]">{item.preview}</p>
                      </div>
                      <div className="flex flex-col items-end gap-2">
                        <Badge variant={active ? "accent" : "neutral"}>{item.type}</Badge>
                        <span className="font-mono text-xs text-[var(--ink-muted)]">{item.ttl}</span>
                      </div>
                    </div>
                  </button>
                );
              })}

              {filteredKeys.length === 0 ? (
                <div className="rounded-[24px] border border-dashed border-[var(--line-strong)] bg-[var(--surface-base)] px-4 py-8 text-center text-sm text-[var(--ink-soft)]">
                  {isBrowseLoading
                    ? `Loading keys from ${activeDb}...`
                    : `No keys match the current pattern in ${activeDb}.`}
                </div>
              ) : null}

              {tauriAvailable && liveHasMore ? (
                <Button
                  variant="outline"
                  onClick={handleLoadMoreKeys}
                  disabled={isBrowseLoading}
                  className="w-full"
                >
                  {isBrowseLoading ? "Loading..." : "Load more keys"}
                </Button>
              ) : null}
            </div>
          </section>

          <section className="flex min-h-0 flex-col gap-4">
            <div className="flex min-h-0 flex-1 flex-col rounded-[28px] border border-[var(--line-soft)] bg-[var(--surface-raised)] p-4 shadow-[var(--shadow-panel)]">
              <div className="flex items-start justify-between gap-3 border-b border-[var(--line-soft)] pb-4">
                <div>
                  <SectionEyebrow icon={<Database className="h-4 w-4" />} label="Inspector" />
                  <h2 className="mt-2 text-xl font-semibold tracking-[-0.03em]">
                    {selectedKey?.name ?? "No key selected"}
                  </h2>
                </div>

                {selectedKey ? (
                  <div className="flex items-center gap-2">
                    <Badge variant="neutral">{selectedKey.type}</Badge>
                    <Badge variant="neutral">TTL {selectedKey.ttl}</Badge>
                  </div>
                ) : null}
              </div>

              <div className="grid gap-4 py-4 lg:grid-cols-[1.05fr_0.95fr]">
                <div className="rounded-[24px] border border-[var(--line-soft)] bg-[var(--surface-base)] p-4">
                  <div className="flex items-center justify-between gap-3">
                    <p className="text-sm font-medium text-[var(--ink-0)]">Value surface</p>
                    <span className="font-mono text-xs text-[var(--ink-muted)]">
                      {selectedKey
                        ? isInspectorLoading
                          ? "loading"
                          : isEditable
                            ? "editable"
                            : "read only"
                        : "awaiting selection"}
                    </span>
                  </div>

                  {selectedKey ? (
                    <Textarea
                      value={isEditable ? draftValue : inspectorText}
                      onChange={(event) => setDraftValue(event.target.value)}
                      readOnly={!isEditable}
                      className={cn(
                        "mt-3 h-64 resize-none font-mono",
                        !isEditable && "border-[var(--line-soft)] bg-[var(--surface-muted)] text-[var(--ink-soft)]",
                      )}
                    />
                  ) : (
                    <div className="mt-3 flex h-64 items-center justify-center rounded-[22px] border border-dashed border-[var(--line-strong)] bg-[var(--surface-muted)] px-6 text-center text-sm text-[var(--ink-soft)]">
                      No key matches the current pattern in {activeDb}. Clear or adjust the search to restore an inspector target.
                    </div>
                  )}

                  <div className="mt-3 flex flex-wrap gap-2">
                    <Button
                      onClick={handleSaveString}
                      disabled={!selectedKey || !isEditable || isSaveRunning || isInspectorLoading}
                    >
                      {isSaveRunning ? "Saving..." : "Save string value"}
                    </Button>
                    <Button
                      variant="outline"
                      onClick={handleRefreshInspector}
                      disabled={!selectedKey || isInspectorLoading}
                    >
                      {isInspectorLoading ? "Refreshing..." : "Refresh metadata"}
                    </Button>

                    <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
                      <DialogTrigger asChild>
                        <Button
                          variant="subtle"
                          disabled={!selectedKey}
                          className="border-[var(--danger-soft)] bg-[var(--danger-faint)] text-[var(--danger-strong)] hover:border-[var(--danger-soft)]"
                        >
                          Delete key
                        </Button>
                      </DialogTrigger>
                      <DialogContent className="border-[var(--danger-soft)]">
                        <DialogHeader>
                          <div className="flex items-start gap-3">
                            <div className="rounded-2xl border border-[var(--danger-soft)] bg-[var(--danger-faint)] p-3 text-[var(--danger-strong)]">
                              <Trash2 className="h-5 w-5" />
                            </div>
                            <div>
                              <p className="font-mono text-xs uppercase tracking-[0.22em] text-[var(--ink-muted)]">
                                Confirm delete
                              </p>
                              <DialogTitle className="mt-2">
                                Remove <span className="font-mono">{selectedKey?.name ?? "the selected key"}</span> from {activeDb}?
                              </DialogTitle>
                            </div>
                          </div>
                          <DialogDescription>
                            This step stays separate from the browser and repeats both key name and DB context before mutation.
                          </DialogDescription>
                        </DialogHeader>

                        <DialogFooter>
                          <DialogClose asChild>
                            <Button variant="outline">Cancel</Button>
                          </DialogClose>
                          <Button variant="danger" onClick={handleDeleteKey}>
                            Delete key
                          </Button>
                        </DialogFooter>
                      </DialogContent>
                    </Dialog>
                  </div>
                </div>

                <div className="space-y-4">
                  <InfoCard
                    title="Key metadata"
                    icon={<TimerReset className="h-4 w-4" />}
                    lines={[
                      `Active DB: ${activeDb}`,
                      `TTL: ${selectedKey?.ttl ?? "no active key"}`,
                      `Editor support: ${selectedKey ? (isEditable ? "string write enabled" : "inspection only") : "awaiting matching selection"}`,
                    ]}
                  />
                  <div className="rounded-[24px] border border-[var(--line-soft)] bg-[var(--surface-base)] p-4">
                    <div className="flex items-center gap-2">
                      <span className="text-[var(--accent-strong)]">
                        <TimerReset className="h-4 w-4" />
                      </span>
                      <p className="text-sm font-medium text-[var(--ink-0)]">TTL control</p>
                    </div>

                    <div className="mt-3 space-y-3">
                      <div>
                        <p className="font-mono text-[11px] uppercase tracking-[0.18em] text-[var(--ink-muted)]">
                          Current state
                        </p>
                        <p className="mt-1 text-sm text-[var(--ink-0)]">
                          {selectedKey ? `TTL ${selectedKey.ttl}` : "Select a key to manage TTL."}
                        </p>
                      </div>

                      <div className="grid gap-2">
                        <label className="text-sm font-medium text-[var(--ink-0)]" htmlFor="ttl-millis">
                          Expire in milliseconds
                        </label>
                        <Input
                          id="ttl-millis"
                          inputMode="numeric"
                          placeholder="60000"
                          value={ttlDraft}
                          onChange={(event) => setTtlDraft(event.target.value)}
                          disabled={!selectedKey || isTtlUpdateRunning}
                        />
                      </div>

                      <p
                        className={cn(
                          "text-sm",
                          ttlDraftError ? "text-[var(--danger-strong)]" : "text-[var(--ink-soft)]",
                        )}
                      >
                        {ttlDraftError ??
                          (tauriAvailable
                            ? "Uses the existing desktop TTL contract. String saves preserve the active TTL."
                            : "Browser dev mode keeps TTL controls in explicit demo fallback.")}
                      </p>

                      <div className="flex flex-wrap gap-2">
                        <Button
                          size="sm"
                          onClick={handleApplyTtl}
                          disabled={!canSubmitTtlUpdate}
                        >
                          {isTtlUpdateRunning ? "Updating..." : "Set TTL"}
                        </Button>
                        <Button
                          variant="outline"
                          size="sm"
                          onClick={handlePersistTtl}
                          disabled={!canPersistTtl}
                        >
                          Remove TTL
                        </Button>
                      </div>
                    </div>
                  </div>
                  <InfoCard
                    title="Support note"
                    icon={<CircleAlert className="h-4 w-4" />}
                    lines={[supportNote]}
                  />
                </div>
              </div>
            </div>

            <section className="rounded-[28px] border border-[var(--line-soft)] bg-[var(--surface-raised)] p-4 shadow-[var(--shadow-panel)]">
              <div className="flex items-start justify-between gap-3 border-b border-[var(--line-soft)] pb-4">
                <div>
                  <SectionEyebrow icon={<TerminalSquare className="h-4 w-4" />} label="Command tray" />
                  <h2 className="mt-2 text-xl font-semibold tracking-[-0.03em]">
                    Scoped console with visible safety boundary
                  </h2>
                </div>
                <Badge variant="neutral">
                  {activeConnection.name} / {activeDb}
                </Badge>
              </div>

              <div className="mt-4 flex flex-col gap-3">
                <form className="flex flex-col gap-3 sm:flex-row" onSubmit={handleConsoleSubmit}>
                  <Input
                    value={consoleInput}
                    onChange={(event) => setConsoleInput(event.target.value)}
                    className="font-mono"
                  />
                  <Button type="submit" className="sm:self-start" disabled={isCommandRunning}>
                    {isCommandRunning ? "Running..." : tauriAvailable ? "Run live command" : "Run demo command"}
                  </Button>
                </form>

                <div className="grid gap-2">
                  {consoleHistory.map((entry) => (
                    <div
                      key={`${entry.command}-${entry.output}`}
                      className={cn(
                        "rounded-[22px] border px-4 py-3",
                        entry.status === "blocked"
                          ? "border-[var(--danger-soft)] bg-[var(--danger-faint)]"
                          : "border-[var(--line-soft)] bg-[var(--surface-base)]",
                      )}
                    >
                      <div className="flex items-start justify-between gap-3">
                        <p className="font-mono text-sm text-[var(--ink-0)]">{entry.command}</p>
                        <div className="flex items-center gap-2">
                          <Badge variant={entry.source === "live" ? "accent" : "neutral"}>
                            {entry.source}
                          </Badge>
                          <Badge
                            variant={entry.status === "ok" ? "neutral" : "danger"}
                          >
                            {entry.status}
                          </Badge>
                        </div>
                      </div>
                      <p className="mt-1 text-sm text-[var(--ink-soft)]">{entry.output}</p>
                    </div>
                  ))}
                </div>
              </div>
            </section>
          </section>
        </main>
      </div>
    </div>
  );
}

function SectionEyebrow({ icon, label }: { icon: ReactElement; label: string }) {
  return (
    <div className="flex items-center gap-2 font-mono text-xs uppercase tracking-[0.24em] text-[var(--ink-muted)]">
      <span className="text-[var(--accent-strong)]">{icon}</span>
      <span>{label}</span>
    </div>
  );
}

function StatusPill({
  icon,
  label,
  value,
}: {
  icon: ReactElement;
  label: string;
  value: string;
}) {
  return (
    <div className="flex items-center gap-3 rounded-full border border-[var(--line-soft)] bg-[var(--surface-base)] px-3 py-2">
      <span className="text-[var(--accent-strong)]">{icon}</span>
      <div>
        <p className="text-[11px] uppercase tracking-[0.2em] text-[var(--ink-muted)]">{label}</p>
        <p className="font-medium text-[var(--ink-0)]">{value}</p>
      </div>
    </div>
  );
}

function InfoLine({ label, value }: { label: string; value: string }) {
  return (
    <div className="flex flex-col gap-1">
      <p className="font-mono text-[11px] uppercase tracking-[0.18em] text-[var(--ink-muted)]">
        {label}
      </p>
      <p className="text-sm text-[var(--ink-0)]">{value}</p>
    </div>
  );
}

function InfoCard({
  title,
  icon,
  lines,
}: {
  title: string;
  icon: ReactElement;
  lines: string[];
}) {
  return (
    <div className="rounded-[24px] border border-[var(--line-soft)] bg-[var(--surface-base)] p-4">
      <div className="flex items-center gap-2">
        <span className="text-[var(--accent-strong)]">{icon}</span>
        <p className="text-sm font-medium text-[var(--ink-0)]">{title}</p>
      </div>

      <div className="mt-3 space-y-2 text-sm text-[var(--ink-soft)]">
        {lines.map((line) => (
          <p key={line}>{line}</p>
        ))}
      </div>
    </div>
  );
}

function isTauriRuntimeAvailable() {
  return typeof window !== "undefined" && "__TAURI_INTERNALS__" in window;
}

function normalizeOptionalString(value: string) {
  const normalized = value.trim();
  return normalized ? normalized : null;
}

function parseDatabaseLabel(value: string) {
  const parsed = Number.parseInt(value.replace(/^db/i, ""), 10);
  return Number.isFinite(parsed) && parsed >= 0 ? parsed : 0;
}

function parseDatabaseInput(value: string) {
  const parsed = Number.parseInt(value, 10);
  return Number.isFinite(parsed) && parsed >= 0 ? parsed : 0;
}

function parsePortInput(value: string) {
  const parsed = Number.parseInt(value, 10);
  return Number.isFinite(parsed) && parsed > 0 && parsed <= 65535 ? parsed : 6379;
}

function formatDatabaseLabel(database: number) {
  return `db${database}`;
}

function formatEndpoint(target: ConnectionProfile["target"]) {
  return `${target.host}:${target.port}`;
}

function formatConnectionStatus(connection: ConnectionProfile) {
  if (connection.status === "healthy") {
    return `Healthy · ${connection.detail}`;
  }

  if (connection.status === "checking") {
    return "Testing live connection";
  }

  if (connection.status === "error") {
    return `Error · ${connection.detail}`;
  }

  return connection.detail;
}

function formatConnectionCardDetail(connection: ConnectionProfile) {
  if (connection.status === "checking") {
    return "live test in progress";
  }

  if (connection.status === "healthy") {
    return `checked ${connection.detail}`;
  }

  if (connection.status === "error") {
    return `failed ${connection.detail}`;
  }

  return connection.detail;
}

function toRedisConnectionRequest(
  connection: ConnectionProfile,
  activeDb: string,
): RedisConnectionRequest {
  return {
    target: {
      ...connection.target,
      database: parseDatabaseLabel(activeDb),
      username: connection.target.username,
    },
    password: normalizeOptionalString(connection.password),
  };
}

function tokenizeCommand(value: string) {
  return (value.match(/"[^"]*"|'[^']*'|\S+/g) ?? []).map((part) => {
    if (
      (part.startsWith("\"") && part.endsWith("\"")) ||
      (part.startsWith("'") && part.endsWith("'"))
    ) {
      return part.slice(1, -1);
    }

    return part;
  });
}

function buildMockCommandOutput(command: string, selectedKey: KeyRecord | null) {
  if (!selectedKey) {
    return "No key is selected in the visible shell.";
  }

  const upper = command.toUpperCase();

  if (upper === "GET") {
    return selectedKey.value;
  }

  if (upper === "TTL") {
    return `(integer) ${selectedKey.ttl === "persistent" ? -1 : selectedKey.ttl.replace(/[^0-9]/g, "")}`;
  }

  if (upper === "TYPE") {
    return selectedKey.type;
  }

  return "OK (demo result)";
}

function validateConnectionDraft(
  draft: ConnectionDraft,
  connections: ConnectionProfile[],
): ConnectionDraftErrors {
  const errors: ConnectionDraftErrors = {};
  const trimmedName = draft.name.trim();
  const trimmedHost = draft.host.trim();
  const port = Number.parseInt(draft.port, 10);
  const database = Number.parseInt(draft.database, 10);

  if (!trimmedName) {
    errors.name = "Profile name is required.";
  } else if (
    connections.some((connection) => connection.name.toLowerCase() === trimmedName.toLowerCase())
  ) {
    errors.name = "Profile name must stay unique inside the visible shell.";
  }

  if (!trimmedHost) {
    errors.host = "Host is required for a connection draft.";
  }

  if (!Number.isFinite(port) || port < 1 || port > 65535) {
    errors.port = "Port must be a number between 1 and 65535.";
  }

  if (!Number.isFinite(database) || database < 0) {
    errors.database = "Default DB must be a non-negative integer.";
  }

  return errors;
}

function toBackendError(error: unknown): BackendError {
  if (
    typeof error === "object" &&
    error !== null &&
    "message" in error &&
    typeof error.message === "string"
  ) {
    return {
      code:
        "code" in error && typeof error.code === "string"
          ? error.code
          : "internal",
      message: error.message,
      detail:
        "detail" in error && typeof error.detail === "string"
          ? error.detail
          : null,
    };
  }

  return {
    code: "internal",
    message: error instanceof Error ? error.message : "Unknown backend error.",
    detail: null,
  };
}

function formatBackendError(error: BackendError) {
  return error.detail ? `${error.message} (${error.detail})` : error.message;
}

function formatRedisResponse(response: RedisResponse) {
  const normalized = normalizeRedisResponse(response);
  return typeof normalized === "string"
    ? normalized
    : JSON.stringify(normalized, null, 2);
}

function normalizeRedisResponse(response: RedisResponse): unknown {
  switch (response.kind) {
    case "null":
      return null;
    case "integer":
      return response.value;
    case "string":
      return response.value;
    case "binary":
      return `[binary ${response.bytes.length} bytes]`;
    case "array":
      return response.items.map(normalizeRedisResponse);
    default:
      return response;
  }
}

function toRedisSearchPattern(value: string) {
  const trimmed = value.trim();
  if (!trimmed) {
    return null;
  }

  if (/[*?\[\]]/.test(trimmed)) {
    return trimmed;
  }

  return `*${trimmed}*`;
}

function formatRedisKeyTtl(ttl: RedisKeyTtl) {
  switch (ttl.kind) {
    case "persistent":
      return "persistent";
    case "missing":
      return "missing";
    case "expires_in_millis":
      return formatDurationFromMillis(ttl.value);
    default:
      return "unknown";
  }
}

function formatDurationFromMillis(value: number) {
  if (value < 1_000) {
    return `${value}ms`;
  }

  const totalSeconds = Math.floor(value / 1_000);
  if (totalSeconds < 60) {
    return `${totalSeconds}s`;
  }

  const totalMinutes = Math.floor(totalSeconds / 60);
  if (totalMinutes < 60) {
    return `${totalMinutes}m`;
  }

  const totalHours = Math.floor(totalMinutes / 60);
  if (totalHours < 24) {
    return `${totalHours}h`;
  }

  const totalDays = Math.floor(totalHours / 24);
  return `${totalDays}d`;
}

function toLiveKeyRecordFromMetadata(metadata: RedisKeyMetadata): KeyRecord {
  return {
    id: metadata.name,
    name: metadata.name,
    type: metadata.key_type,
    ttl: formatRedisKeyTtl(metadata.ttl),
    preview: buildMetadataPreview(metadata),
    editable: false,
    value: "",
    summary: buildMetadataSummary(metadata),
  };
}

function toLiveKeyRecordFromValue(record: RedisValueRecord): KeyRecord {
  return {
    id: record.metadata.name,
    name: record.metadata.name,
    type: record.metadata.key_type,
    ttl: formatRedisKeyTtl(record.metadata.ttl),
    preview: buildValuePreview(record),
    editable: record.write_capability === "replace_string",
    value: formatRedisValueData(record.data),
    summary: buildLiveSupportNote(record, null),
  };
}

function replaceKeyRecord(current: KeyRecord[], next: KeyRecord) {
  let replaced = false;
  const updated = current.map((item) => {
    if (item.id !== next.id) {
      return item;
    }

    replaced = true;
    return {
      ...item,
      ...next,
    };
  });

  return replaced ? updated : [next, ...current];
}

function appendKeyRecords(current: KeyRecord[], next: KeyRecord[]) {
  const seen = new Set(current.map((item) => item.id));
  const appended = [...current];

  for (const item of next) {
    if (seen.has(item.id)) {
      continue;
    }

    seen.add(item.id);
    appended.push(item);
  }

  return appended;
}

function buildMetadataPreview(metadata: RedisKeyMetadata) {
  return `${formatRedisKeyTypeLabel(metadata.key_type)} key · TTL ${formatRedisKeyTtl(metadata.ttl)}`;
}

function buildMetadataSummary(metadata: RedisKeyMetadata) {
  if (!metadata.exists) {
    return "The selected key disappeared before the inspector could read its value.";
  }

  return `${formatRedisKeyTypeLabel(metadata.key_type)} metadata is available. Open the inspector to load the live value surface.`;
}

function buildValuePreview(record: RedisValueRecord) {
  switch (record.data.kind) {
    case "missing":
      return "key disappeared before value read";
    case "string":
      return truncateText(formatRedisValueContent(record.data.value), 48);
    case "hash":
      return `${record.data.entries.length} field${record.data.entries.length === 1 ? "" : "s"}`;
    case "list":
      return `${record.data.items.length} list item${record.data.items.length === 1 ? "" : "s"}`;
    case "set":
      return `${record.data.members.length} set member${record.data.members.length === 1 ? "" : "s"}`;
    case "sorted_set":
      return `${record.data.entries.length} scored member${record.data.entries.length === 1 ? "" : "s"}`;
    case "stream":
      return `${record.data.entries.length} stream entr${record.data.entries.length === 1 ? "y" : "ies"}`;
    default:
      return "live value loaded";
  }
}

function buildLiveSupportNote(record: RedisValueRecord | null, selectedKey: KeyRecord | null) {
  if (!selectedKey) {
    return "Search currently returns zero keys in the active DB. This is an intentional empty state, not a backend failure.";
  }

  if (!record) {
    return "Loading live metadata and value surface for the current key.";
  }

  switch (record.data.kind) {
    case "missing":
      return "The key disappeared between browse and read. Refresh the browser list to clear stale state safely.";
    case "string":
      return record.write_capability === "replace_string"
        ? "String values are editable through the current desktop contract and preserve their existing TTL on save."
        : "String value is currently inspection only in the desktop contract.";
    case "hash":
    case "list":
    case "set":
    case "sorted_set":
    case "stream":
      return `${formatRedisKeyTypeLabel(record.metadata.key_type)} values are loaded live and remain explicitly read only in the current desktop contract.`;
    default:
      return "The current key is available for live inspection through the desktop backend contract.";
  }
}

function formatInspectorValue(
  record: RedisValueRecord | null,
  selectedKey: KeyRecord | null,
  isLoading: boolean,
) {
  if (!selectedKey) {
    return "";
  }

  if (isLoading || !record) {
    return "Loading live value...";
  }

  return formatRedisValueData(record.data);
}

function formatRedisValueData(data: RedisValueData) {
  switch (data.kind) {
    case "missing":
      return "Key no longer exists.";
    case "string":
      return formatRedisValueContent(data.value);
    case "hash":
      return JSON.stringify(
        data.entries.map((entry) => ({
          field: normalizeRedisValueContent(entry.field),
          value: normalizeRedisValueContent(entry.value),
        })),
        null,
        2,
      );
    case "list":
      return JSON.stringify(data.items.map(normalizeRedisValueContent), null, 2);
    case "set":
      return JSON.stringify(data.members.map(normalizeRedisValueContent), null, 2);
    case "sorted_set":
      return JSON.stringify(
        data.entries.map((entry) => ({
          member: normalizeRedisValueContent(entry.member),
          score: entry.score,
        })),
        null,
        2,
      );
    case "stream":
      return JSON.stringify(
        data.entries.map((entry) => ({
          id: entry.id,
          fields: entry.fields.map((field) => ({
            field: normalizeRedisValueContent(field.field),
            value: normalizeRedisValueContent(field.value),
          })),
        })),
        null,
        2,
      );
    default:
      return "Unsupported value payload.";
  }
}

function formatRedisValueContent(content: RedisValueContent) {
  switch (content.kind) {
    case "string":
      return content.value;
    case "binary":
      return `[binary ${content.bytes.length} bytes]`;
    default:
      return "unsupported";
  }
}

function normalizeRedisValueContent(content: RedisValueContent) {
  switch (content.kind) {
    case "string":
      return content.value;
    case "binary":
      return `[binary ${content.bytes.length} bytes]`;
    default:
      return content;
  }
}

function formatRedisKeyTypeLabel(value: string) {
  switch (value) {
    case "zset":
      return "sorted set";
    default:
      return value || "unknown";
  }
}

function truncateText(value: string, maxLength: number) {
  if (value.length <= maxLength) {
    return value;
  }

  return `${value.slice(0, maxLength - 1)}…`;
}

function validateTtlDraft(value: string) {
  const trimmed = value.trim();
  const parsed = Number.parseInt(trimmed, 10);

  if (!trimmed) {
    return "TTL must be provided in milliseconds.";
  }

  if (!Number.isFinite(parsed) || parsed <= 0) {
    return "TTL must be a positive integer number of milliseconds.";
  }

  return null;
}

export default App;