import { useMemo, useState } from "react";
import { useSavedQueries, useDeleteSavedQuery } from "@/hooks/use-saved-queries";
import { useAppStore } from "@/stores/app-store";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Search, Trash2, Bookmark } from "lucide-react";
import type { SavedQuery, Tab } from "@/types";

type Scope = "active" | "all";

export function SavedQueriesPanel() {
  const [search, setSearch] = useState("");
  const [scope, setScope] = useState<Scope>("active");

  const { activeConnectionId, currentDatabase, addTab, connections } =
    useAppStore();
  const { data: queries } = useSavedQueries(search || undefined);
  const deleteMutation = useDeleteSavedQuery();

  // Effective scope: if no connection is active, "active" has nothing to filter
  // against, so we silently broaden to all.
  const effectiveScope: Scope = activeConnectionId ? scope : "all";

  const visible = useMemo(() => {
    if (!queries) return [];
    if (effectiveScope === "all") return queries;
    return queries.filter(
      (q) => !q.connection_id || q.connection_id === activeConnectionId
    );
  }, [queries, effectiveScope, activeConnectionId]);

  const connectionName = (id: string | undefined): string | undefined => {
    if (!id) return undefined;
    return connections.find((c) => c.id === id)?.name ?? id.slice(0, 8);
  };

  const handleOpen = (sql: string, queryConnectionId?: string) => {
    const cid = activeConnectionId ?? queryConnectionId ?? "";
    if (!cid) return;
    const tab: Tab = {
      id: crypto.randomUUID(),
      type: "query",
      title: "Saved Query",
      connectionId: cid,
      database: currentDatabase ?? undefined,
      sql,
    };
    addTab(tab);
  };

  return (
    <div className="flex h-full flex-col">
      <div className="flex flex-col gap-1.5 p-2">
        <div className="relative flex-1">
          <Search className="absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
          <Input
            placeholder="Search saved queries..."
            className="h-7 pl-7 text-xs"
            value={search}
            onChange={(e) => setSearch(e.target.value)}
          />
        </div>
        {activeConnectionId && (
          <div className="flex gap-1">
            <ScopeButton
              active={scope === "active"}
              onClick={() => setScope("active")}
            >
              This connection
            </ScopeButton>
            <ScopeButton
              active={scope === "all"}
              onClick={() => setScope("all")}
            >
              All
            </ScopeButton>
          </div>
        )}
      </div>
      <div className="min-h-0 flex-1 overflow-y-auto">
        {visible.map((query) => (
          <QueryRow
            key={query.id}
            query={query}
            showConnectionTag={effectiveScope === "all"}
            connectionLabel={connectionName(query.connection_id)}
            onOpen={() => handleOpen(query.sql, query.connection_id)}
            onDelete={() => deleteMutation.mutate(query.id)}
          />
        ))}
        {visible.length === 0 && (
          <div className="py-8 text-center text-xs text-muted-foreground">
            {effectiveScope === "active"
              ? "No saved queries for this connection"
              : "No saved queries"}
          </div>
        )}
      </div>
    </div>
  );
}

function ScopeButton({
  active,
  onClick,
  children,
}: {
  active: boolean;
  onClick: () => void;
  children: React.ReactNode;
}) {
  return (
    <button
      onClick={onClick}
      className={`h-6 rounded px-2 text-[11px] transition-colors ${
        active
          ? "bg-accent text-foreground"
          : "text-muted-foreground hover:text-foreground hover:bg-accent/50"
      }`}
    >
      {children}
    </button>
  );
}

function QueryRow({
  query,
  showConnectionTag,
  connectionLabel,
  onOpen,
  onDelete,
}: {
  query: SavedQuery;
  showConnectionTag: boolean;
  connectionLabel?: string;
  onOpen: () => void;
  onDelete: () => void;
}) {
  const tag = !query.connection_id
    ? "unattached"
    : showConnectionTag
      ? connectionLabel
      : null;

  return (
    <div
      className="group flex w-full flex-col gap-0.5 border-b px-3 py-2 text-left text-xs hover:bg-accent cursor-pointer"
      onDoubleClick={onOpen}
    >
      <div className="flex items-center gap-1.5">
        <Bookmark className="h-3 w-3 shrink-0 text-info" />
        <span className="truncate font-medium text-foreground">
          {query.name}
        </span>
        {tag && (
          <span className="shrink-0 rounded bg-muted/40 px-1 py-px text-[9px] uppercase tracking-wide text-muted-foreground">
            {tag}
          </span>
        )}
        <Button
          variant="ghost"
          size="icon"
          className="ml-auto h-5 w-5 shrink-0 opacity-0 group-hover:opacity-100 text-destructive hover:text-destructive"
          onClick={(e) => {
            e.stopPropagation();
            onDelete();
          }}
        >
          <Trash2 className="h-3 w-3" />
        </Button>
      </div>
      <span className="truncate font-mono text-muted-foreground">
        {query.sql.length > 80 ? query.sql.slice(0, 80) + "..." : query.sql}
      </span>
      <span className="text-muted-foreground">
        {new Date(query.created_at).toLocaleDateString()}
      </span>
    </div>
  );
}
