PocketVeto/frontend/app/collections/page.tsx

"use client";

import { useState } from "react";
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import Link from "next/link";
import { Bookmark, Plus, Globe, Lock, Trash2 } from "lucide-react";
import { collectionsAPI } from "@/lib/api";
import { HelpTip } from "@/components/shared/HelpTip";
import type { Collection } from "@/lib/types";

export default function CollectionsPage() {
  const qc = useQueryClient();
  const [showForm, setShowForm] = useState(false);
  const [newName, setNewName] = useState("");
  const [newPublic, setNewPublic] = useState(false);
  const [formError, setFormError] = useState("");

  const { data: collections, isLoading } = useQuery({
    queryKey: ["collections"],
    queryFn: collectionsAPI.list,
  });

  const createMutation = useMutation({
    mutationFn: ({ name, is_public }: { name: string; is_public: boolean }) =>
      collectionsAPI.create(name, is_public),
    onSuccess: () => {
      qc.invalidateQueries({ queryKey: ["collections"] });
      setNewName("");
      setNewPublic(false);
      setShowForm(false);
      setFormError("");
    },
    onError: () => setFormError("Failed to create collection. Try again."),
  });

  const deleteMutation = useMutation({
    mutationFn: (id: number) => collectionsAPI.delete(id),
    onSuccess: () => qc.invalidateQueries({ queryKey: ["collections"] }),
  });

  function handleCreate(e: React.FormEvent) {
    e.preventDefault();
    const name = newName.trim();
    if (!name) { setFormError("Name is required"); return; }
    if (name.length > 100) { setFormError("Name must be ≤ 100 characters"); return; }
    setFormError("");
    createMutation.mutate({ name, is_public: newPublic });
  }

  return (
    <div className="max-w-2xl mx-auto space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <div className="flex items-center gap-2">
            <Bookmark className="w-5 h-5 text-primary" />
            <h1 className="text-xl font-bold">My Collections</h1>
          </div>
          <p className="text-sm text-muted-foreground mt-1">
            A collection is a named group of bills you curate — like a playlist for legislation.
            Share any collection via a link; no account required to view.
          </p>
        </div>
        <button
          onClick={() => setShowForm((v) => !v)}
          className="flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors"
        >
          <Plus className="w-4 h-4" />
          New Collection
        </button>
      </div>

      {showForm && (
        <form
          onSubmit={handleCreate}
          className="bg-card border border-border rounded-lg p-4 space-y-3"
        >
          <div>
            <label className="text-xs font-medium text-muted-foreground mb-1 block">Collection name</label>
            <input
              type="text"
              value={newName}
              onChange={(e) => setNewName(e.target.value)}
              placeholder="e.g. Healthcare Watch"
              maxLength={100}
              className="w-full px-3 py-2 text-sm bg-background border border-border rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
              autoFocus
            />
          </div>
          <label className="flex items-center gap-2 text-sm cursor-pointer">
            <input
              type="checkbox"
              checked={newPublic}
              onChange={(e) => setNewPublic(e.target.checked)}
              className="rounded"
            />
            <span>Public collection</span>
            <HelpTip content="Share links work whether or not a collection is public. Marking it public signals it may appear in a future public directory — private collections are invisible to anyone without your link." />
          </label>
          {formError && <p className="text-xs text-destructive">{formError}</p>}
          <div className="flex gap-2">
            <button
              type="submit"
              disabled={createMutation.isPending}
              className="px-3 py-1.5 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors disabled:opacity-50"
            >
              {createMutation.isPending ? "Creating…" : "Create"}
            </button>
            <button
              type="button"
              onClick={() => { setShowForm(false); setFormError(""); setNewName(""); }}
              className="px-3 py-1.5 text-sm text-muted-foreground rounded-md hover:bg-accent transition-colors"
            >
              Cancel
            </button>
          </div>
        </form>
      )}

      {isLoading ? (
        <div className="text-center py-12 text-muted-foreground text-sm">Loading collections…</div>
      ) : !collections || collections.length === 0 ? (
        <div className="text-center py-12 text-muted-foreground">
          <Bookmark className="w-8 h-8 mx-auto mb-3 opacity-30" />
          <p className="text-sm">No collections yet — create one to start grouping bills.</p>
        </div>
      ) : (
        <div className="space-y-2">
          {collections.map((c: Collection) => (
            <div
              key={c.id}
              className="bg-card border border-border rounded-lg px-4 py-3 flex items-center gap-3 group"
            >
              <Link href={`/collections/${c.id}`} className="flex-1 min-w-0">
                <div className="flex items-center gap-2">
                  <span className="font-medium text-sm truncate">{c.name}</span>
                  <span className="text-xs px-1.5 py-0.5 bg-muted text-muted-foreground rounded shrink-0">
                    {c.bill_count} {c.bill_count === 1 ? "bill" : "bills"}
                  </span>
                  {c.is_public ? (
                    <span className="flex items-center gap-1 text-xs text-green-600 dark:text-green-400 shrink-0">
                      <Globe className="w-3 h-3" /> Public
                    </span>
                  ) : (
                    <span className="flex items-center gap-1 text-xs text-muted-foreground shrink-0">
                      <Lock className="w-3 h-3" /> Private
                    </span>
                  )}
                </div>
                <p className="text-xs text-muted-foreground mt-0.5">
                  Created {new Date(c.created_at).toLocaleDateString()}
                </p>
              </Link>
              <button
                onClick={() => {
                  if (confirm(`Delete "${c.name}"? This cannot be undone.`)) {
                    deleteMutation.mutate(c.id);
                  }
                }}
                className="p-1.5 rounded text-muted-foreground hover:text-destructive hover:bg-destructive/10 transition-colors opacity-0 group-hover:opacity-100"
                title="Delete collection"
              >
                <Trash2 className="w-3.5 h-3.5" />
              </button>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}