import { Download, Loader2 } from "lucide-react"; import { useCallback, useEffect, useState } from "react"; import { formatHeaders } from "@/lib/api"; import { formatFileSize } from "@/lib/download"; import type { DuplicateResult } from "@/stores/duplicate-store"; import { useDuplicateStore } from "@/stores/duplicate-store"; import { useFileStore } from "@/stores/file-store"; type Preset = "exact" | "similar" | "loose"; const PRESET_THRESHOLDS: Record = { exact: 2, similar: 8, loose: 14 }; const PRESET_DESCRIPTIONS: Record = { exact: "Pixel-identical copies, same image in different formats.", similar: "Resized, recompressed, or lightly edited copies.", loose: "Visually related images, mild crops, different exposures.", }; export function FindDuplicatesSettings() { const { files } = useFileStore(); const { results, scanning, bestOverrides, setResults, setScanning, reset: resetDuplicates, } = useDuplicateStore(); const [preset, setPreset] = useState("similar"); const [threshold, setThreshold] = useState(8); const [error, setError] = useState(null); // Reset scan results when files change // biome-ignore lint/correctness/useExhaustiveDependencies: files is a store value that triggers reset when changed useEffect(() => { resetDuplicates(); setError(null); }, [files, resetDuplicates]); const handlePreset = (p: Preset) => { setPreset(p); setThreshold(PRESET_THRESHOLDS[p]); }; const handleSlider = (val: number) => { setThreshold(val); // Deselect preset if slider doesn't match any const match = (Object.entries(PRESET_THRESHOLDS) as [Preset, number][]).find( ([, t]) => t === val, ); setPreset(match ? match[0] : null); }; const handleScan = async () => { if (files.length < 2) return; setScanning(true); setError(null); setResults(null); try { const formData = new FormData(); for (const file of files) { formData.append("file", file); } formData.append("threshold", String(threshold)); const res = await fetch("/api/v1/tools/find-duplicates", { method: "POST", headers: formatHeaders(), body: formData, }); if (!res.ok) { const body = await res.json().catch(() => ({})); throw new Error(body.error || `Failed: ${res.status}`); } const data: DuplicateResult = await res.json(); setResults(data); } catch (err) { setError(err instanceof Error ? err.message : "Detection failed"); } finally { setScanning(false); } }; const handleDownloadUnique = useCallback(async () => { if (!results) return; const { zipSync } = await import("fflate"); // Collect filenames of "best" per group (respecting overrides) + all non-duplicate files const duplicateFilenames = new Set(); const bestFilenames = new Set(); for (let gi = 0; gi < results.duplicateGroups.length; gi++) { const group = results.duplicateGroups[gi]; const bestIdx = gi in bestOverrides ? bestOverrides[gi] : group.files.findIndex((f) => f.isBest); for (let fi = 0; fi < group.files.length; fi++) { duplicateFilenames.add(group.files[fi].filename); if (fi === bestIdx) bestFilenames.add(group.files[fi].filename); } } const filesToInclude = files.filter( (f) => !duplicateFilenames.has(f.name) || bestFilenames.has(f.name), ); const zipData: Record = {}; for (const file of filesToInclude) { const buf = await file.arrayBuffer(); zipData[file.name] = new Uint8Array(buf); } const zipped = zipSync(zipData); const blob = new Blob([zipped as Uint8Array], { type: "application/zip" }); const url = URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; a.download = "unique-images.zip"; a.click(); URL.revokeObjectURL(url); }, [files, results, bestOverrides]); const handleDownloadAll = useCallback(async () => { const { zipSync } = await import("fflate"); const zipData: Record = {}; for (const file of files) { const buf = await file.arrayBuffer(); zipData[file.name] = new Uint8Array(buf); } const zipped = zipSync(zipData); const blob = new Blob([zipped as Uint8Array], { type: "application/zip" }); const url = URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; a.download = "all-images.zip"; a.click(); URL.revokeObjectURL(url); }, [files]); const hasFiles = files.length >= 2; const activeDesc = preset ? PRESET_DESCRIPTIONS[preset] : null; const presetBtnClass = (p: Preset) => `flex-1 text-xs py-1.5 rounded ${preset === p ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"}`; return (
{/* Sensitivity presets */}
Detection Mode
{/* Sensitivity slider */}
{threshold} / 128
handleSlider(Number(e.target.value))} className="w-full mt-1" />
Strict match Broad match
{activeDesc &&

{activeDesc}

} {error &&

{error}

} {/* Scan button */} {!results && ( )} {/* Results: summary + actions */} {results && (
{/* Summary stats */}
Total scanned {results.totalImages}
Duplicate groups {results.duplicateGroups.length}
Unique images {results.uniqueImages}
{results.spaceSaveable > 0 && (
Space saveable {formatFileSize(results.spaceSaveable)}
)}
{/* Download actions */} {results.duplicateGroups.length > 0 && ( <> )} {/* Re-scan */}
)}
); }