import { useMemo, useRef, useState, type ChangeEvent, type ReactNode } from "react";
import { driverById } from "./catalog";
import { DriverIcon } from "./DriverIcon";
import { DriverManager } from "./DriverManager";
import { useWorkspaceStore, type ConnectionGroup, type SavedConnection, DEFAULT_CONN_GROUP } from "./store";

function hostSummary(c: SavedConnection) {
  const d = driverById(c.driver);
  if (c.driver === "sqlite") {
    return c.database || "本地文件";
  }
  const host = c.host || "127.0.0.1";
  const port = c.port ? `:${c.port}` : "";
  const db = c.database ? ` / ${c.database}` : "";
  return `${host}${port}${db}`;
}

function matchesQuery(c: SavedConnection, needle: string): boolean {
  if (!needle) return true;
  const d = driverById(c.driver);
  const hay = [c.name, c.host || "", c.driver, d?.name ?? "", c.database || "", String(c.port || "")]
    .join(" ")
    .toLowerCase();
  return hay.includes(needle);
}

function ConnRow({
  c,
  onOpen,
  onDelete,
  setDefaultConnection,
  editConnection,
  notify,
}: {
  c: SavedConnection;
  onOpen: (c: SavedConnection) => void;
  onDelete: (c: SavedConnection) => void;
  setDefaultConnection: (id: string) => void;
  editConnection: (c: SavedConnection) => void;
  notify: ReturnType<typeof useWorkspaceStore.getState>["notify"];
}) {
  const d = driverById(c.driver);
  return (
    <div className="ops-conn-row group">
      <button type="button" className="flex min-w-0 flex-1 items-center gap-3 text-left" onClick={() => onOpen(c)}>
        <DriverIcon driver={c.driver} size={22} />
        <div className="min-w-0 flex-1">
          <div className="flex items-center gap-2 truncate text-[12.5px] font-medium">
            <span className="truncate">{c.name}</span>
            {c.isDefault && (
              <span
                className="shrink-0 rounded px-1 text-[10px] font-semibold"
                style={{
                  color: "var(--ops-accent)",
                  background: "color-mix(in srgb, var(--ops-accent) 14%, transparent)",
                }}
              >
                默认
              </span>
            )}
          </div>
          <div className="truncate text-[11px]" style={{ color: "var(--ops-muted)" }}>
            {d?.name ?? c.driver} · {hostSummary(c)}
          </div>
        </div>
      </button>
      <div className="flex shrink-0 items-center gap-1 opacity-0 transition group-hover:opacity-100">
        {!c.isDefault && (
          <button
            type="button"
            className="ops-btn-ghost text-[11px]"
            onClick={() => {
              setDefaultConnection(c.id);
              notify({ kind: "success", title: "默认连接", message: `已设「${c.name}」为默认。`, mode: "toast" });
            }}
          >
            设默认
          </button>
        )}
        <button type="button" className="ops-btn-ghost text-[11px]" onClick={() => editConnection(c)}>
          编辑
        </button>
        <button
          type="button"
          className="ops-btn-ghost text-[11px]"
          style={{ color: "var(--ops-danger)" }}
          onClick={() => void onDelete(c)}
        >
          删除
        </button>
      </div>
    </div>
  );
}

function SectionLabel({ children }: { children: ReactNode }) {
  return (
    <div
      className="sticky top-0 z-[1] px-3 py-1 text-[10px] font-semibold uppercase tracking-wide"
      style={{
        color: "var(--ops-muted)",
        background: "color-mix(in srgb, var(--ops-surface) 92%, transparent)",
        borderBottom: "1px solid var(--ops-border)",
      }}
    >
      {children}
    </div>
  );
}

const RECENT_N = 5;

export function ConnectionList() {
  const connections = useWorkspaceStore((s) => s.connections);
  const openPicker = useWorkspaceStore((s) => s.openPicker);
  const editConnection = useWorkspaceStore((s) => s.editConnection);
  const removeConnection = useWorkspaceStore((s) => s.removeConnection);
  const setDefaultConnection = useWorkspaceStore((s) => s.setDefaultConnection);
  const askConfirm = useWorkspaceStore((s) => s.askConfirm);
  const set = useWorkspaceStore((s) => s.set);
  const notify = useWorkspaceStore((s) => s.notify);
  const notifyError = useWorkspaceStore((s) => s.notifyError);
  const [search, setSearch] = useState("");
  const [showDrivers, setShowDrivers] = useState(false);
  /** R2-F5:导入文件选择 */
  const importFileRef = useRef<HTMLInputElement>(null);

  const needle = search.trim().toLowerCase();

  const filtered = useMemo(
    () =>
      [...connections]
        .filter((c) => matchesQuery(c, needle))
        .sort((a, b) => {
          if (a.isDefault && !b.isDefault) return -1;
          if (!a.isDefault && b.isDefault) return 1;
          return (b.lastUsedAt ?? 0) - (a.lastUsedAt ?? 0);
        }),
    [connections, needle],
  );

  const recent = useMemo(() => {
    const ids = new Set(filtered.map((c) => c.id));
    return [...connections]
      .filter((c) => (c.lastUsedAt ?? 0) > 0 && ids.has(c.id))
      .sort((a, b) => (b.lastUsedAt ?? 0) - (a.lastUsedAt ?? 0))
      .slice(0, RECENT_N);
  }, [connections, filtered]);

  /** 「全部」list: filtered, with recent still shown (pinned section above). */
  const allList = filtered;

  const onDelete = async (c: SavedConnection) => {
    const ok = await askConfirm({
      title: "删除连接",
      message: `确认删除「${c.name}」？此操作不可撤销。`,
      okLabel: "删除",
      danger: true,
    });
    if (!ok) return;
    removeConnection(c.id);
    notify({ kind: "success", title: "已删除", message: `「${c.name}」已移除。`, mode: "toast" });
  };

  const onOpen = (c: SavedConnection) => {
    set("activeConnectionId", c.id);
    set("view", "workbench");
    set("status", `已选择 ${c.name}`);
  };

  /** R2-F5:导出全部连接 —— 原样导出存储形态(含分组结构与加密态 secrets),文件头带版本 */
  const exportAll = () => {
    const st = useWorkspaceStore.getState();
    const payload = {
      exportedAt: new Date().toISOString(),
      version: 1,
      connections: st.connections,
      connGroups: st.connGroups,
    };
    const blob = new Blob([JSON.stringify(payload, null, 2)], { type: "application/json;charset=utf-8" });
    const a = document.createElement("a");
    a.href = URL.createObjectURL(blob);
    a.download = `opsxdb-connections-${new Date().toISOString().slice(0, 10)}.json`;
    a.click();
    URL.revokeObjectURL(a.href);
    notify({ kind: "success", title: "已导出", message: `${st.connections.length} 条连接`, mode: "toast", durationMs: 1600 });
  };

  /** R2-F5:导入连接 —— 校验数组结构;id 冲突重新生成后追加;持久化走 store 现有 action */
  const onImportFile = async (e: ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    e.target.value = "";
    if (!file) return;
    try {
      const text = await file.text();
      const parsed = JSON.parse(text) as { connections?: unknown; connGroups?: unknown } | unknown[];
      const arr = Array.isArray(parsed) ? parsed : (parsed as { connections?: unknown }).connections;
      if (!Array.isArray(arr)) throw new Error("不是有效的连接导出文件（缺少 connections 数组）");
      const st = useWorkspaceStore.getState();
      const existingIds = new Set(st.connections.map((c) => c.id));
      const groupIds = new Set(st.connGroups.map((g) => g.id));
      let n = 0;
      for (const raw of arr) {
        if (!raw || typeof raw !== "object") continue;
        const item = { ...(raw as SavedConnection) };
        if (!item.name || !item.driver) continue; // 跳过非法条目
        if (!item.id || existingIds.has(item.id)) item.id = crypto.randomUUID();
        existingIds.add(item.id);
        if (!item.groupId || !groupIds.has(item.groupId)) item.groupId = DEFAULT_CONN_GROUP;
        st.upsertConnection(item);
        n++;
      }
      if (!n) throw new Error("文件中没有可导入的连接");
      if (!Array.isArray(parsed) && Array.isArray((parsed as { connGroups?: unknown }).connGroups)) {
        st.importConnGroups((parsed as { connGroups: ConnectionGroup[] }).connGroups);
      }
      notify({ kind: "success", title: "导入完成", message: `已导入 ${n} 条连接`, mode: "toast", durationMs: 2000 });
    } catch (err) {
      notifyError(err, "modal");
    }
  };

  const rowProps = { onOpen, onDelete, setDefaultConnection, editConnection, notify };

  return (
    <div className="ops-shell flex h-screen flex-col">
      <header className="ops-chrome-header px-3">
        <div className="min-w-0">
          <div className="truncate text-[14px] font-semibold leading-tight">连接</div>
          <div className="text-[11px]" style={{ color: "var(--ops-muted)" }}>
            选择或新建数据库连接
          </div>
        </div>
        <div className="ml-auto flex flex-wrap items-center justify-end gap-1.5">
          <button
            type="button"
            className="ops-btn-ghost grid h-6 w-6 place-items-center p-0 text-[13px]"
            title="驱动管理（agent 驱动：MongoDB / ZooKeeper / 达梦）"
            aria-label="驱动管理"
            onClick={() => setShowDrivers(true)}
          >
            ⚙
          </button>
          {/* R2-F5:连接配置导入/导出 */}
          {connections.length > 0 && (
            <button
              type="button"
              className="ops-btn-ghost grid h-6 w-6 place-items-center p-0 text-[13px]"
              title="导出全部连接(JSON,含分组与密码存储形态)"
              aria-label="导出全部连接"
              onClick={exportAll}
            >
              ⤓
            </button>
          )}
          <button
            type="button"
            className="ops-btn-ghost grid h-6 w-6 place-items-center p-0 text-[13px]"
            title="导入连接(JSON)"
            aria-label="导入连接"
            onClick={() => importFileRef.current?.click()}
          >
            ⤒
          </button>
          <input
            ref={importFileRef}
            type="file"
            accept=".json,application/json"
            className="hidden"
            aria-label="选择连接导出文件"
            onChange={(e) => void onImportFile(e)}
          />
          <button type="button" className="ops-btn-primary px-3" onClick={() => openPicker()} title="新建数据库连接">
            新建
          </button>
          {connections.length > 0 && (
            <button type="button" className="ops-btn-secondary px-3" onClick={() => set("view", "workbench")} title="返回工作台">
              工作台
            </button>
          )}
        </div>
      </header>

      {connections.length > 0 && (
        <div
          className="flex shrink-0 items-center gap-2 border-b px-3"
          style={{ height: 36, borderColor: "var(--ops-border)", background: "var(--ops-surface)" }}
        >
          <input
            type="search"
            className="h-7 w-full max-w-md rounded border px-2 text-[12px] outline-none"
            style={{
              borderColor: "var(--ops-border)",
              background: "var(--ops-bg)",
              color: "var(--ops-text)",
            }}
            placeholder="搜索名称 / 主机 / 驱动…"
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            aria-label="搜索连接"
          />
          {search && (
            <button type="button" className="ops-btn-ghost shrink-0 text-[11px]" onClick={() => setSearch("")}>
              清除
            </button>
          )}
        </div>
      )}

      {connections.length === 0 ? (
        <div className="ops-empty">
          <h2>还没有连接</h2>
          <p>新建一个连接，保存后会出现在这里。</p>
          <button type="button" className="ops-btn-primary px-3" onClick={() => openPicker()} title="新建数据库连接">
            新建
          </button>
        </div>
      ) : filtered.length === 0 ? (
        <div className="ops-empty">
          <h2>没有匹配的连接</h2>
          <p>换个关键词试试，或清除搜索查看全部。</p>
          <button type="button" className="ops-btn-secondary" onClick={() => setSearch("")}>
            清除搜索
          </button>
        </div>
      ) : (
        <div className="min-h-0 flex-1 overflow-auto">
          {recent.length > 0 && (
            <>
              <SectionLabel>最近</SectionLabel>
              {recent.map((c) => (
                <ConnRow key={`recent-${c.id}`} c={c} {...rowProps} />
              ))}
            </>
          )}
          <SectionLabel>全部{needle ? ` · ${allList.length}` : ""}</SectionLabel>
          {allList.map((c) => (
            <ConnRow key={c.id} c={c} {...rowProps} />
          ))}
        </div>
      )}
      {showDrivers && <DriverManager onClose={() => setShowDrivers(false)} />}
    </div>
  );
}