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

"use client";

import { use, useEffect, useRef } from "react";
import Link from "next/link";
import { ArrowLeft, ExternalLink, User } from "lucide-react";
import { useBill, useBillNews, useBillTrend } from "@/lib/hooks/useBills";
import { BriefPanel } from "@/components/bills/BriefPanel";
import { ActionTimeline } from "@/components/bills/ActionTimeline";
import { TrendChart } from "@/components/bills/TrendChart";
import { NewsPanel } from "@/components/bills/NewsPanel";
import { FollowButton } from "@/components/shared/FollowButton";
import { billLabel, congressLabel, formatDate, partyBadgeColor, cn } from "@/lib/utils";

export default function BillDetailPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = use(params);
  const billId = decodeURIComponent(id);

  const { data: bill, isLoading } = useBill(billId);
  const { data: trendData } = useBillTrend(billId, 30);
  const { data: newsArticles, refetch: refetchNews } = useBillNews(billId);

  // When the bill page is opened with no stored articles, the backend queues
  // a Celery news-fetch task that takes a few seconds to complete.
  // Retry up to 3 times (every 6 s) so articles appear without a manual refresh.
  // newsRetryRef resets on bill navigation so each bill gets its own retry budget.
  const newsRetryRef = useRef(0);
  useEffect(() => { newsRetryRef.current = 0; }, [billId]);
  useEffect(() => {
    if (newsArticles === undefined || newsArticles.length > 0) return;
    if (newsRetryRef.current >= 3) return;
    const timer = setTimeout(() => {
      newsRetryRef.current += 1;
      refetchNews();
    }, 6000);
    return () => clearTimeout(timer);
  }, [newsArticles]); // eslint-disable-line react-hooks/exhaustive-deps

  if (isLoading) {
    return <div className="text-center py-20 text-muted-foreground">Loading bill...</div>;
  }

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

  const label = billLabel(bill.bill_type, bill.bill_number);

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-start justify-between gap-4">
        <div className="flex-1">
          <div className="flex items-center gap-3 mb-2">
            <Link href="/bills" className="text-muted-foreground hover:text-foreground transition-colors">
              <ArrowLeft className="w-4 h-4" />
            </Link>
            <span className="font-mono text-sm font-semibold text-muted-foreground bg-muted px-2 py-0.5 rounded">
              {label}
            </span>
            <span className="text-sm text-muted-foreground">{bill.chamber}</span>
            <span className="text-sm text-muted-foreground">{congressLabel(bill.congress_number)}</span>
          </div>
          <h1 className="text-xl font-bold leading-snug">
            {bill.short_title || bill.title || "Untitled Bill"}
          </h1>
          {bill.sponsor && (
            <div className="flex items-center gap-2 mt-2 text-sm text-muted-foreground">
              <User className="w-3.5 h-3.5" />
              <Link href={`/members/${bill.sponsor.bioguide_id}`} className="hover:text-foreground transition-colors">
                {bill.sponsor.name}
              </Link>
              {bill.sponsor.party && (
                <span className={cn("px-1.5 py-0.5 rounded text-xs font-medium", partyBadgeColor(bill.sponsor.party))}>
                  {bill.sponsor.party}
                </span>
              )}
              {bill.sponsor.state && <span>{bill.sponsor.state}</span>}
            </div>
          )}
          <p className="text-xs text-muted-foreground mt-1">
            Introduced: {formatDate(bill.introduced_date)}
            {bill.congress_url && (
              <a href={bill.congress_url} target="_blank" rel="noopener noreferrer" className="ml-3 hover:text-primary transition-colors">
                congress.gov <ExternalLink className="w-3 h-3 inline" />
              </a>
            )}
          </p>
        </div>
        <FollowButton type="bill" value={bill.bill_id} />
      </div>

      {/* Content grid */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-6">
        <div className="md:col-span-2 space-y-6">
          <BriefPanel briefs={bill.briefs} />
          <ActionTimeline actions={bill.actions} />
        </div>
        <div className="space-y-4">
          <TrendChart data={trendData} />
          <NewsPanel articles={newsArticles} />
        </div>
      </div>
    </div>
  );
}