J621/frontend/src/features/library/DuplicatesPage.tsx

import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { useMemo, useState } from "react";
import { Link } from "react-router-dom";

import { Button, Spinner, inputClass } from "@/components/ui";
import { api, apiUrl, errorMessage } from "@/lib/api";
import { cn } from "@/lib/cn";
import { formatBytes } from "@/lib/format";
import type {
  DuplicateEntry,
  VisualGroupsResponse,
  VisualMatchesResponse,
} from "@/lib/types";
import { confirmAction } from "@/store/confirm";
import { toast } from "@/store/toasts";

const ALGORITHMS = [
  { value: "ahash", label: "aHash" },
  { value: "dhash", label: "dHash" },
  { value: "phash", label: "pHash" },
  { value: "whash", label: "wHash" },
];

interface DeleteResult {
  deleted: string[];
  errors: { j_id?: string; location?: number; error: string }[];
}

function MemberCard({
  entry,
  selected,
  onToggle,
}: {
  entry: DuplicateEntry;
  selected: boolean;
  onToggle: () => void;
}) {
  const preview = apiUrl(
    entry.thumbnail_url ?? `/api/files/${entry.j_id}/thumbnail/`,
  );
  return (
    <div
      className={cn(
        "overflow-hidden rounded-lg border bg-ctp-base",
        selected ? "border-ctp-mauve" : "border-ctp-surface0",
      )}
    >
      <button type="button" onClick={onToggle} className="block w-full text-left">
        <div className="relative aspect-square overflow-hidden bg-ctp-mantle">
          <img
            src={preview}
            alt={entry.j_id}
            loading="lazy"
            className="h-full w-full object-cover"
          />
          <span
            className={cn(
              "absolute left-2 top-2 flex h-5 w-5 items-center justify-center rounded border text-[11px]",
              selected
                ? "border-ctp-mauve bg-ctp-mauve text-ctp-crust"
                : "border-ctp-surface1 bg-ctp-crust/70 text-transparent",
            )}
          >
            ✓
          </span>
          {entry.similarity !== undefined ? (
            <span className="absolute right-2 top-2 rounded-sm bg-ctp-crust/80 px-1.5 py-0.5 font-mono text-[10px] text-ctp-peach">
              {entry.similarity}%
            </span>
          ) : null}
        </div>
      </button>
      <div className="px-2 py-1.5">
        <Link
          to={`/detail/${entry.j_id}`}
          className="font-mono text-[10px] text-ctp-blue hover:underline"
        >
          {entry.j_id}
        </Link>
        <p
          className="truncate font-mono text-[11px] text-ctp-subtext1"
          title={entry.filename}
        >
          {entry.filename}
        </p>
        <p className="font-mono text-[10px] text-ctp-overlay0">
          {formatBytes(entry.size)}
          {entry.location_count > 1 ? ` · ${entry.location_count} copies` : ""}
        </p>
      </div>
    </div>
  );
}

export default function DuplicatesPage() {
  const queryClient = useQueryClient();
  const [threshold, setThreshold] = useState(80);
  const [algorithms, setAlgorithms] = useState<string[]>(
    ALGORITHMS.map((algorithm) => algorithm.value),
  );
  const [groupsPage, setGroupsPage] = useState(1);
  const [groupsEnabled, setGroupsEnabled] = useState(false);
  const [selected, setSelected] = useState<string[]>([]);
  const [dismissed, setDismissed] = useState<string[]>([]);
  const [similarTarget, setSimilarTarget] = useState("");

  const exactQuery = useQuery({
    queryKey: ["duplicates-md5"],
    queryFn: () =>
      api<{ count: number; groups: DuplicateEntry[] }>("/api/duplicates/md5/"),
  });

  const groupsQuery = useQuery({
    queryKey: [
      "duplicate-groups",
      groupsEnabled,
      threshold,
      algorithms,
      groupsPage,
    ],
    queryFn: () =>
      api<VisualGroupsResponse>("/api/duplicates/visual_groups/", {
        method: "POST",
        json: { threshold, algorithms, page: groupsPage },
      }),
    enabled: groupsEnabled && algorithms.length > 0,
  });

  const similarMutation = useMutation({
    mutationFn: (jId: string) =>
      api<VisualMatchesResponse>("/api/duplicates/visual/", {
        method: "POST",
        json: { j_id: jId, threshold, algorithms },
      }),
    onError: (error) => toast.error(errorMessage(error)),
  });

  const deleteMutation = useMutation({
    mutationFn: (payload: { j_ids?: string[]; location_ids?: number[] }) =>
      api<DeleteResult>("/api/delete/", { method: "POST", json: payload }),
    onSuccess: (result) => {
      setSelected([]);
      const noun = result.deleted.length === 1 ? "entry" : "entries";
      toast.ok(`Deleted ${result.deleted.length} ${noun}.`);
      if (result.errors.length > 0) {
        toast.error(
          `${result.errors.length} ${noun} could not be deleted: ` +
            result.errors.map((entry) => entry.error).join(", "),
        );
      }
      void queryClient.invalidateQueries({ queryKey: ["duplicates-md5"] });
      void queryClient.invalidateQueries({ queryKey: ["duplicate-groups"] });
      void queryClient.invalidateQueries({ queryKey: ["files"] });
    },
    onError: (error) => toast.error(errorMessage(error)),
  });

  async function handleDeleteCopy(locationId: number) {
    const confirmed = await confirmAction({
      title: "Delete this copy?",
      description:
        "The file at this path is removed. The item stays as long as another copy exists.",
      confirmLabel: "Delete copy",
      danger: true,
    });
    if (confirmed) deleteMutation.mutate({ location_ids: [locationId] });
  }

  async function handleDeleteItem(jId: string) {
    const confirmed = await confirmAction({
      title: `Delete ${jId}?`,
      description: "The item and all of its copies are removed from the library.",
      confirmLabel: "Delete",
      danger: true,
    });
    if (confirmed) deleteMutation.mutate({ j_ids: [jId] });
  }

  async function handleDeleteSelected() {
    const confirmed = await confirmAction({
      title: `Delete ${selected.length} item(s)?`,
      description: "They are removed from the library along with all of their copies.",
      confirmLabel: "Delete",
      danger: true,
    });
    if (confirmed) deleteMutation.mutate({ j_ids: selected });
  }

  function toggleSelected(jId: string) {
    setSelected((current) =>
      current.includes(jId)
        ? current.filter((value) => value !== jId)
        : [...current, jId],
    );
  }

  function toggleAlgorithm(value: string) {
    setGroupsPage(1);
    setAlgorithms((current) =>
      current.includes(value)
        ? current.filter((algorithm) => algorithm !== value)
        : [...current, value],
    );
  }

  const groups = useMemo(
    () =>
      (groupsQuery.data?.groups ?? []).filter(
        (group) =>
          !dismissed.includes(
            group.members
              .map((member) => member.j_id)
              .sort()
              .join("|"),
          ),
      ),
    [groupsQuery.data, dismissed],
  );

  return (
    <div className="mx-auto flex w-full max-w-6xl flex-col gap-8">
      <header>
        <h1 className="text-lg font-semibold">Duplicates</h1>
        <p className="mt-1 text-sm text-ctp-overlay0">
          Clean up exact copies and visually similar files.
        </p>
      </header>

      <section className="flex flex-col gap-3">
        <header className="flex items-center justify-between gap-2">
          <h2 className="text-sm font-semibold text-ctp-subtext1">
            Exact duplicates
          </h2>
          <span className="font-mono text-[11px] text-ctp-overlay0">
            {exactQuery.data?.count ?? 0} item(s)
          </span>
        </header>
        {exactQuery.isPending ? (
          <Spinner className="h-5 w-5" />
        ) : (exactQuery.data?.count ?? 0) === 0 ? (
          <p className="rounded-lg border border-dashed border-ctp-surface1 px-3 py-6 text-center text-xs text-ctp-overlay0">
            No items exist at multiple paths.
          </p>
        ) : (
          <div className="flex flex-col gap-3">
            {exactQuery.data?.groups.map((group) => (
              <div
                key={group.j_id}
                className="flex flex-col gap-3 rounded-lg border border-ctp-surface0 bg-ctp-base p-3 lg:flex-row"
              >
                <div className="w-32 shrink-0">
                  <div className="aspect-square overflow-hidden rounded-md bg-ctp-mantle">
                    <img
                      src={apiUrl(
                        group.thumbnail_url ??
                          `/api/files/${group.j_id}/thumbnail/`,
                      )}
                      alt={group.j_id}
                      loading="lazy"
                      className="h-full w-full object-cover"
                    />
                  </div>
                  <Link
                    to={`/detail/${group.j_id}`}
                    className="font-mono text-[10px] text-ctp-blue hover:underline"
                  >
                    {group.j_id}
                  </Link>
                </div>
                <div className="min-w-0 flex-1">
                  <p className="truncate font-mono text-xs text-ctp-subtext1">
                    {group.filename}
                  </p>
                  <ul className="mt-2 flex flex-col gap-1.5">
                    {(group.locations ?? []).map((location) => (
                      <li
                        key={location.id}
                        className="flex items-center justify-between gap-3 rounded-md border border-ctp-surface0 px-2 py-1"
                      >
                        <span className="truncate font-mono text-[11px] text-ctp-overlay1" title={location.rel_path}>
                          {location.rel_path}
                        </span>
                        <button
                          type="button"
                          onClick={() => void handleDeleteCopy(location.id)}
                          className="shrink-0 rounded-md px-1.5 py-0.5 font-mono text-[10px] text-ctp-red transition hover:bg-ctp-red/15"
                        >
                          delete copy
                        </button>
                      </li>
                    ))}
                  </ul>
                </div>
                <div className="shrink-0">
                  <Button
                    variant="danger"
                    className="px-2 py-1 text-xs"
                    onClick={() => void handleDeleteItem(group.j_id)}
                  >
                    Delete item
                  </Button>
                </div>
              </div>
            ))}
          </div>
        )}
      </section>

      <section className="flex flex-col gap-3">
        <h2 className="text-sm font-semibold text-ctp-subtext1">
          Visual similarity
        </h2>
        <div className="flex flex-col gap-3 rounded-lg border border-ctp-surface0 bg-ctp-base p-3">
          <div className="flex flex-wrap items-center gap-4">
            <label className="flex flex-1 items-center gap-3 text-xs text-ctp-subtext0">
              Similarity {threshold}%
              <input
                type="range"
                min={50}
                max={100}
                value={threshold}
                onChange={(event) => {
                  setGroupsPage(1);
                  setThreshold(Number(event.target.value));
                }}
                className="flex-1"
              />
            </label>
            <div className="flex flex-wrap items-center gap-2">
              {ALGORITHMS.map((algorithm) => (
                <label
                  key={algorithm.value}
                  className={cn(
                    "cursor-pointer rounded-full border px-2.5 py-1 font-mono text-[11px] transition",
                    algorithms.includes(algorithm.value)
                      ? "border-ctp-mauve/40 bg-ctp-mauve/15 text-ctp-mauve"
                      : "border-ctp-surface1 text-ctp-subtext0 hover:border-ctp-surface2",
                  )}
                >
                  <input
                    type="checkbox"
                    className="hidden"
                    checked={algorithms.includes(algorithm.value)}
                    onChange={() => toggleAlgorithm(algorithm.value)}
                  />
                  {algorithm.label}
                </label>
              ))}
            </div>
            <Button
              onClick={() => {
                setGroupsEnabled(true);
                void groupsQuery.refetch();
              }}
              disabled={algorithms.length === 0 || groupsQuery.isFetching}
            >
              {groupsQuery.isFetching ? "Comparing…" : "Find groups"}
            </Button>
          </div>

          <div className="flex flex-wrap items-end gap-2 border-t border-ctp-surface0 pt-3">
            <label className="flex flex-col gap-1 text-xs text-ctp-subtext0">
              Find files similar to
              <input
                className={cn(inputClass, "w-32 font-mono")}
                placeholder="J-123"
                value={similarTarget}
                onChange={(event) => setSimilarTarget(event.target.value)}
              />
            </label>
            <Button
              variant="secondary"
              onClick={() => similarMutation.mutate(similarTarget.trim())}
              disabled={!similarTarget.trim() || similarMutation.isPending}
            >
              {similarMutation.isPending ? "Searching…" : "Search"}
            </Button>
          </div>

          {similarMutation.data ? (
            similarMutation.data.count === 0 ? (
              <p className="text-xs text-ctp-overlay0">
                No matches at {similarMutation.data.threshold}% similarity.
              </p>
            ) : (
              <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-5">
                {similarMutation.data.matches.map((entry) => (
                  <MemberCard
                    key={entry.j_id}
                    entry={entry}
                    selected={selected.includes(entry.j_id)}
                    onToggle={() => toggleSelected(entry.j_id)}
                  />
                ))}
              </div>
            )
          ) : null}
        </div>

        {groupsEnabled ? (
          groupsQuery.isPending ? (
            <Spinner className="h-5 w-5" />
          ) : groups.length === 0 ? (
            <p className="rounded-lg border border-dashed border-ctp-surface1 px-3 py-6 text-center text-xs text-ctp-overlay0">
              No groups at {threshold}% similarity.
            </p>
          ) : (
            <div className="flex flex-col gap-4">
              {groups.map((group) => {
                const groupKey = group.members
                  .map((member) => member.j_id)
                  .sort()
                  .join("|");
                return (
                  <div
                    key={groupKey}
                    className="rounded-lg border border-ctp-surface0 bg-ctp-base p-3"
                  >
                    <header className="flex items-center justify-between gap-2">
                      <span className="font-mono text-[11px] text-ctp-overlay0">
                        {group.size} similar items
                      </span>
                      <button
                        type="button"
                        onClick={() => setDismissed((current) => [...current, groupKey])}
                        className="rounded-md px-1.5 py-0.5 font-mono text-[10px] text-ctp-overlay0 transition hover:bg-ctp-surface0 hover:text-ctp-text"
                      >
                        dismiss
                      </button>
                    </header>
                    <div className="mt-3 grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-5">
                      {group.members.map((member) => (
                        <MemberCard
                          key={member.j_id}
                          entry={member}
                          selected={selected.includes(member.j_id)}
                          onToggle={() => toggleSelected(member.j_id)}
                        />
                      ))}
                    </div>
                  </div>
                );
              })}

              <div className="flex items-center justify-between gap-3">
                <Button
                  variant="secondary"
                  disabled={groupsPage <= 1 || groupsQuery.isFetching}
                  onClick={() => setGroupsPage((page) => Math.max(1, page - 1))}
                >
                  Previous
                </Button>
                <span className="font-mono text-xs text-ctp-overlay0">
                  Page {groupsQuery.data?.page ?? groupsPage} ·{" "}
                  {groupsQuery.data?.count ?? 0} group(s)
                </span>
                <Button
                  variant="secondary"
                  disabled={!groupsQuery.data?.has_next || groupsQuery.isFetching}
                  onClick={() => setGroupsPage((page) => page + 1)}
                >
                  Next
                </Button>
              </div>
            </div>
          )
        ) : null}

        {selected.length > 0 ? (
          <div className="sticky bottom-16 z-20 flex items-center justify-between gap-3 rounded-lg border border-ctp-mauve/40 bg-ctp-surface0 px-3 py-2 shadow-[0_4px_12px_rgba(17,17,27,0.6)]">
            <span className="text-xs text-ctp-subtext1">
              {selected.length} selected
            </span>
            <div className="flex items-center gap-2">
              <Button
                variant="ghost"
                className="px-2 py-1 text-xs"
                onClick={() => setSelected([])}
              >
                Clear
              </Button>
              <Button
                variant="danger"
                className="px-2 py-1 text-xs"
                disabled={deleteMutation.isPending}
                onClick={() => void handleDeleteSelected()}
              >
                {deleteMutation.isPending ? "Deleting…" : "Delete selected"}
              </Button>
            </div>
          </div>
        ) : null}
      </section>
    </div>
  );
}