PocketVeto/frontend/app/collections/[id]/page.tsx

"use client";

import { use, useState } from "react";
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import Link from "next/link";
import { ArrowLeft, Check, Copy, Globe, Lock, Minus, Search, X } from "lucide-react";
import { collectionsAPI, billsAPI } from "@/lib/api";
import type { Bill } from "@/lib/types";
import { billLabel, formatDate } from "@/lib/utils";

export default function CollectionDetailPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = use(params);
  const collectionId = parseInt(id, 10);
  const qc = useQueryClient();

  const [editingName, setEditingName] = useState(false);
  const [nameInput, setNameInput] = useState("");
  const [copied, setCopied] = useState(false);
  const [searchQ, setSearchQ] = useState("");
  const [searchResults, setSearchResults] = useState<Bill[]>([]);
  const [searching, setSearching] = useState(false);

  const { data: collection, isLoading } = useQuery({
    queryKey: ["collection", collectionId],
    queryFn: () => collectionsAPI.get(collectionId),
  });

  const updateMutation = useMutation({
    mutationFn: (data: { name?: string; is_public?: boolean }) =>
      collectionsAPI.update(collectionId, data),
    onSuccess: () => {
      qc.invalidateQueries({ queryKey: ["collection", collectionId] });
      qc.invalidateQueries({ queryKey: ["collections"] });
      setEditingName(false);
    },
  });

  const addBillMutation = useMutation({
    mutationFn: (bill_id: string) => collectionsAPI.addBill(collectionId, bill_id),
    onSuccess: () => {
      qc.invalidateQueries({ queryKey: ["collection", collectionId] });
      qc.invalidateQueries({ queryKey: ["collections"] });
    },
  });

  const removeBillMutation = useMutation({
    mutationFn: (bill_id: string) => collectionsAPI.removeBill(collectionId, bill_id),
    onSuccess: () => {
      qc.invalidateQueries({ queryKey: ["collection", collectionId] });
      qc.invalidateQueries({ queryKey: ["collections"] });
    },
  });

  async function handleSearch(q: string) {
    setSearchQ(q);
    if (!q.trim()) { setSearchResults([]); return; }
    setSearching(true);
    try {
      const res = await billsAPI.list({ q, per_page: 8 });
      setSearchResults(res.items);
    } finally {
      setSearching(false);
    }
  }

  function copyShareLink() {
    if (!collection) return;
    navigator.clipboard.writeText(`${window.location.origin}/share/collection/${collection.share_token}`);
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  }

  function startRename() {
    setNameInput(collection?.name ?? "");
    setEditingName(true);
  }

  function submitRename(e: React.FormEvent) {
    e.preventDefault();
    const name = nameInput.trim();
    if (!name || name === collection?.name) { setEditingName(false); return; }
    updateMutation.mutate({ name });
  }

  if (isLoading) {
    return <div className="text-center py-20 text-muted-foreground text-sm">Loading…</div>;
  }
  if (!collection) {
    return (
      <div className="text-center py-20">
        <p className="text-muted-foreground">Collection not found.</p>
        <Link href="/collections" className="text-sm text-primary mt-2 inline-block">← Back to collections</Link>
      </div>
    );
  }

  const collectionBillIds = new Set(collection.bills.map((b) => b.bill_id));

  return (
    <div className="max-w-2xl mx-auto space-y-6">
      {/* Header */}
      <div className="space-y-3">
        <div className="flex items-center gap-3">
          <Link href="/collections" className="text-muted-foreground hover:text-foreground transition-colors">
            <ArrowLeft className="w-4 h-4" />
          </Link>
          {editingName ? (
            <form onSubmit={submitRename} className="flex items-center gap-2 flex-1">
              <input
                type="text"
                value={nameInput}
                onChange={(e) => setNameInput(e.target.value)}
                maxLength={100}
                autoFocus
                className="flex-1 px-2 py-1 text-lg font-bold bg-background border-b-2 border-primary focus:outline-none"
              />
              <button type="submit" className="p-1 text-primary hover:opacity-70">
                <Check className="w-4 h-4" />
              </button>
              <button type="button" onClick={() => setEditingName(false)} className="p-1 text-muted-foreground hover:opacity-70">
                <X className="w-4 h-4" />
              </button>
            </form>
          ) : (
            <button
              onClick={startRename}
              className="text-xl font-bold hover:opacity-70 transition-opacity text-left"
              title="Click to rename"
            >
              {collection.name}
            </button>
          )}
        </div>

        <div className="flex items-center gap-3 flex-wrap">
          {/* Public/private toggle */}
          <button
            onClick={() => updateMutation.mutate({ is_public: !collection.is_public })}
            className="flex items-center gap-1.5 text-xs px-2.5 py-1 rounded-full border border-border hover:bg-accent transition-colors"
          >
            {collection.is_public ? (
              <><Globe className="w-3 h-3 text-green-500" /> Public</>
            ) : (
              <><Lock className="w-3 h-3 text-muted-foreground" /> Private</>
            )}
          </button>

          {/* Copy share link */}
          <button
            onClick={copyShareLink}
            className="flex items-center gap-1.5 text-xs px-2.5 py-1 rounded-full border border-border hover:bg-accent transition-colors"
          >
            {copied ? (
              <><Check className="w-3 h-3 text-green-500" /> Link copied!</>
            ) : (
              <><Copy className="w-3 h-3" /> Copy share link</>
            )}
          </button>

          <span className="text-xs text-muted-foreground">
            {collection.bill_count} {collection.bill_count === 1 ? "bill" : "bills"}
          </span>
        </div>
      </div>

      {/* Add bills search */}
      <div className="relative">
        <div className="flex items-center gap-2 px-3 py-2 bg-card border border-border rounded-lg">
          <Search className="w-4 h-4 text-muted-foreground shrink-0" />
          <input
            type="text"
            value={searchQ}
            onChange={(e) => handleSearch(e.target.value)}
            placeholder="Search to add bills…"
            className="flex-1 text-sm bg-transparent focus:outline-none"
          />
          {searching && <span className="text-xs text-muted-foreground">Searching…</span>}
        </div>
        {searchResults.length > 0 && searchQ && (
          <div className="absolute top-full left-0 right-0 z-10 mt-1 bg-card border border-border rounded-lg shadow-lg overflow-hidden">
            {searchResults.map((bill) => {
              const inCollection = collectionBillIds.has(bill.bill_id);
              return (
                <button
                  key={bill.bill_id}
                  onClick={() => {
                    if (!inCollection) {
                      addBillMutation.mutate(bill.bill_id);
                      setSearchQ("");
                      setSearchResults([]);
                    }
                  }}
                  disabled={inCollection}
                  className="w-full flex items-center gap-3 px-3 py-2.5 text-left hover:bg-accent transition-colors disabled:opacity-50 disabled:cursor-default"
                >
                  <span className="font-mono text-xs text-muted-foreground shrink-0">
                    {billLabel(bill.bill_type, bill.bill_number)}
                  </span>
                  <span className="text-sm truncate flex-1">
                    {bill.short_title || bill.title || "Untitled"}
                  </span>
                  {inCollection && (
                    <span className="text-xs text-muted-foreground shrink-0">Added</span>
                  )}
                </button>
              );
            })}
          </div>
        )}
      </div>

      {/* Bill list */}
      {collection.bills.length === 0 ? (
        <div className="text-center py-12 text-muted-foreground">
          <p className="text-sm">No bills yet — search to add some.</p>
        </div>
      ) : (
        <div className="space-y-1">
          {collection.bills.map((bill) => (
            <div
              key={bill.bill_id}
              className="flex items-center gap-3 px-4 py-3 bg-card border border-border rounded-lg group"
            >
              <Link href={`/bills/${bill.bill_id}`} className="flex-1 min-w-0">
                <div className="flex items-center gap-2">
                  <span className="font-mono text-xs text-muted-foreground shrink-0">
                    {billLabel(bill.bill_type, bill.bill_number)}
                  </span>
                  <span className="text-sm font-medium truncate">
                    {bill.short_title || bill.title || "Untitled"}
                  </span>
                </div>
                {bill.latest_action_date && (
                  <p className="text-xs text-muted-foreground mt-0.5">
                    Latest action: {formatDate(bill.latest_action_date)}
                  </p>
                )}
              </Link>
              <button
                onClick={() => removeBillMutation.mutate(bill.bill_id)}
                className="p-1 rounded text-muted-foreground hover:text-destructive hover:bg-destructive/10 transition-colors opacity-0 group-hover:opacity-100 shrink-0"
                title="Remove from collection"
              >
                <Minus className="w-3.5 h-3.5" />
              </button>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}