import { useState } from "react";
import { useQuery } from "@tanstack/react-query";
import { registerCustomCategories } from "@/lib/categories";
import { api } from "@/lib/api";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { ToolCard, QueryError, useToolAction } from "./shared";

export type CustomCategory = { id: string; name: string; archived: boolean };
export function CategoryTools() {
  const [name, setName] = useState("");
  const query = useQuery({ queryKey: ["enhanced", "categories"], queryFn: async () => { const rows = await api.enhanced.get<CustomCategory[]>("categories"); registerCustomCategories(rows.map(r => r.name)); return rows; } });
  const action = useToolAction();
  return <ToolCard title="Custom categories">
    <QueryError error={query.error} />
    <form className="flex gap-2" onSubmit={e => { e.preventDefault(); action.mutate(async () => { await api.enhanced.post("categories", { name: name.trim() }); setName(""); }); }}>
      <Input aria-label="New category name" maxLength={60} value={name} onChange={e => setName(e.target.value)} placeholder="e.g. Community garden" required />
      <Button disabled={!name.trim() || action.isPending}>Add</Button>
    </form>
    {query.data?.map(c => <div className="flex items-center justify-between gap-2" key={c.id}><span className="text-sm">{c.name}{c.archived ? " (archived)" : ""}</span>
      <Button variant="outline" size="sm" disabled={action.isPending} onClick={() => action.mutate(() => api.enhanced.post(`categories/${c.id}/archive`, { archived: !c.archived }))}>{c.archived ? "Restore" : "Archive"}</Button></div>)}
    <p className="text-xs text-muted-foreground">Archiving keeps historical transactions intact and removes the category from new-entry pickers.</p>
  </ToolCard>;
}
export function RulePreview({ id, onRun, busy }: { id: string; onRun: () => void; busy: boolean }) {
  const [open, setOpen] = useState(false);
  const preview = useQuery({ queryKey: ["enhanced", "rule-preview", id], queryFn: () => api.enhanced.get<{ matched: number; changes: { id: string; description: string; before: string; after: string }[] }>(`rules/${id}/preview`), enabled: open, staleTime: 0 });
  return <div className="space-y-2">
    <Button variant="outline" size="sm" onClick={() => setOpen(v => !v)}>{open ? "Close preview" : "Preview"}</Button>
    {open && <div className="text-sm space-y-2"><QueryError error={preview.error} />
      {preview.isPending ? <p>Loading preview…</p> : preview.data && <><p>{preview.data.matched} transactions match. Preview shows up to 100; running applies to all matches.</p>
        {preview.data.changes.map(c => <p key={c.id}>{c.description}: {c.before} → {c.after}</p>)}
        <Button size="sm" disabled={busy || preview.data.matched === 0} onClick={onRun}>Apply to matching transactions</Button></>}
    </div>}
  </div>;
}