"use client";

import { use } from "react";
import { useQuery } from "@tanstack/react-query";
import Link from "next/link";
import { Landmark } from "lucide-react";
import { shareAPI } from "@/lib/api";
import type { Bill } from "@/lib/types";
import { billLabel, formatDate } from "@/lib/utils";

export default function SharedCollectionPage({ params }: { params: Promise<{ token: string }> }) {
  const { token } = use(params);

  const { data: collection, isLoading, isError } = useQuery({
    queryKey: ["share-collection", token],
    queryFn: () => shareAPI.getCollection(token),
    retry: false,
  });

  return (
    <div className="min-h-screen bg-background">
      {/* Minimal header */}
      <header className="border-b border-border bg-card px-6 py-3 flex items-center gap-2">
        <Landmark className="w-5 h-5 text-primary" />
        <Link href="/" className="font-semibold text-sm hover:opacity-70 transition-opacity">
          PocketVeto
        </Link>
      </header>

      <div className="max-w-2xl mx-auto px-4 py-8 space-y-6">
        {isLoading && (
          <div className="text-center py-20 text-muted-foreground text-sm">Loading…</div>
        )}

        {isError && (
          <div className="text-center py-20">
            <p className="text-muted-foreground">Collection not found or link is invalid.</p>
          </div>
        )}

        {collection && (
          <>
            {/* Header */}
            <div>
              <h1 className="text-xl font-bold">{collection.name}</h1>
              <p className="text-sm text-muted-foreground mt-1">
                {collection.bill_count} {collection.bill_count === 1 ? "bill" : "bills"}
              </p>
            </div>

            {/* Bill list */}
            {collection.bills.length === 0 ? (
              <p className="text-sm text-muted-foreground">No bills in this collection.</p>
            ) : (
              <div className="space-y-2">
                {collection.bills.map((bill: Bill) => (
                  <Link
                    key={bill.bill_id}
                    href={`/bills/${bill.bill_id}`}
                    className="block bg-card border border-border rounded-lg px-4 py-3 hover:bg-accent/50 transition-colors"
                  >
                    <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>
                ))}
              </div>
            )}

            {/* CTA */}
            <div className="pt-2">
              <Link
                href="/register"
                className="inline-flex items-center gap-1.5 px-4 py-2 text-sm font-medium rounded-md bg-primary text-primary-foreground hover:bg-primary/90 transition-colors"
              >
                Follow these bills on PocketVeto →
              </Link>
            </div>
          </>
        )}
      </div>
    </div>
  );
}