import { useState } from "react";
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Trash2, ShieldAlert } from "lucide-react";
import { toast } from "sonner";
import { vault } from "@/lib/vault";
export function Delete() {
const [docId, setDocId] = useState("");
const [keyword, setKeyword] = useState("");
const [isDeleting, setIsDeleting] = useState(false);
const [logs, setLogs] = useState<string[]>([]);
const handleDelete = async () => {
if (!docId || !keyword) {
toast.error("Please provide both Document ID and Keyword");
return;
}
setIsDeleting(true);
setLogs(["[WASM] Starting Backward Security Type-II procedure...", "[WASM] Collecting tag addresses for old epoch..."]);
try {
const stats = await vault.deleteDocument(docId, keyword);
if (stats.tags_removed === 0 && stats.tags_added === 0) {
setLogs(prev => [
...prev,
`[WASM] delete_document() completed in ${stats.time_ms.toFixed(2)}ms`,
`[WASM] Document ID ${docId} not found under keyword "${keyword}".`,
`[WASM] No epoch bump required. State remains intact.`
]);
toast.info("Document Not Found", {
description: "No matching tags were found under this keyword to delete.",
});
} else {
setLogs(prev => [
...prev,
`[WASM] delete_document() completed in ${stats.time_ms.toFixed(2)}ms`,
`[WASM] Doc ${docId} evicted from state.`,
`[WASM] Epoch bumped for keyword "${keyword}".`,
`[WASM] Type-II Security: Orphaned/Removed ${stats.tags_removed} old tags.`,
`[WASM] Re-encrypted & Added ${stats.tags_added} surviving tags.`,
"[WASM] Atomic update committed to IndexedDbStore."
]);
toast.success("Document Securely Deleted", {
description: "The epoch has been bumped and old tags orphaned.",
});
}
console.log(`[ROSE-SDK] delete_document(${docId}, ${keyword}) ->`, stats);
setDocId("");
setKeyword("");
} catch (e) {
toast.error("WASM Delete Error", { description: String(e) });
console.error(e);
setLogs(prev => [...prev, `[ERROR] ${String(e)}`]);
} finally {
setIsDeleting(false);
}
};
return (
<div className="max-w-4xl mx-auto px-4 py-12">
<div className="mb-8">
<h1 className="text-3xl font-bold tracking-tight mb-2 text-white">Secure Delete</h1>
<p className="text-slate-400">Permanently orphan document tags via Backward Security Type-II.</p>
</div>
<Card className="border-red-900/30 shadow-2xl bg-slate-900/60 backdrop-blur-xl text-slate-100 relative overflow-hidden">
<div className="absolute inset-0 bg-gradient-to-br from-red-500/5 to-orange-500/5 pointer-events-none" />
<CardHeader className="relative z-10">
<CardTitle className="flex items-center text-xl text-white">
<Trash2 className="mr-2 h-5 w-5 text-red-400" />
Delete Entry
</CardTitle>
<CardDescription className="text-slate-400">
Deleting an entry triggers an O(|results|) epoch bump. This ensures absolute backward privacy against adaptive servers.
</CardDescription>
</CardHeader>
<CardContent className="space-y-6 relative z-10">
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div className="space-y-2">
<Label htmlFor="docId" className="text-slate-300">Document ID</Label>
<Input
id="docId"
placeholder="e.g. 17610a48..."
value={docId}
onChange={(e) => setDocId(e.target.value)}
className="bg-slate-950/50 border-slate-700 text-white placeholder:text-slate-600 focus-visible:ring-red-500"
/>
</div>
<div className="space-y-2">
<Label htmlFor="keyword" className="text-slate-300">Associated Keyword</Label>
<Input
id="keyword"
placeholder="e.g. finance"
value={keyword}
onChange={(e) => setKeyword(e.target.value)}
className="bg-slate-950/50 border-slate-700 text-white placeholder:text-slate-600 focus-visible:ring-red-500"
/>
</div>
</div>
<div className="bg-slate-950/80 p-4 rounded-lg border border-slate-800 text-sm font-mono text-slate-400 flex flex-col space-y-1 shadow-inner min-h-[120px]">
<span className="text-red-400 font-semibold mb-1 flex items-center">
<ShieldAlert className="mr-2 h-4 w-4" /> // Security Protocol Log
</span>
{logs.length === 0 ? (
<span>{'>'} System Idle. Waiting for removal trigger...</span>
) : (
logs.map((log, i) => (
<span key={i} className={isDeleting && i === logs.length - 1 ? "text-red-400 animate-pulse" : ""}>
{'>'} {log}
</span>
))
)}
</div>
</CardContent>
<CardFooter className="relative z-10 border-t border-slate-800/50 bg-slate-900/30 pt-6">
<Button onClick={handleDelete} disabled={isDeleting} variant="destructive" className="w-full sm:w-auto bg-red-600 hover:bg-red-500 text-white shadow-lg shadow-red-500/20">
{isDeleting ? "Epoch Bumping..." : "Secure Delete"}
</Button>
</CardFooter>
</Card>
</div>
);
}