"use client";

import { use, useEffect, useRef, useState } from "react";
import { useQuery } from "@tanstack/react-query";
import Link from "next/link";
import { ArrowLeft, ExternalLink, FileX, Tag, User } from "lucide-react";
import { useBill, useBillNews, useBillTrend } from "@/lib/hooks/useBills";
import { useAuthStore } from "@/stores/authStore";
import { BriefPanel } from "@/components/bills/BriefPanel";
import { DraftLetterPanel } from "@/components/bills/DraftLetterPanel";
import { NotesPanel } from "@/components/bills/NotesPanel";
import { ActionTimeline } from "@/components/bills/ActionTimeline";
import { VotePanel } from "@/components/bills/VotePanel";
import { TrendChart } from "@/components/bills/TrendChart";
import { NewsPanel } from "@/components/bills/NewsPanel";
import { FollowButton } from "@/components/shared/FollowButton";
import { CollectionPicker } from "@/components/bills/CollectionPicker";
import { billLabel, chamberBadgeColor, congressLabel, formatDate, partyBadgeColor, cn } from "@/lib/utils";
import { TOPIC_LABEL, TOPIC_TAGS } from "@/lib/topics";

const TABS = [
  { id: "analysis", label: "Analysis" },
  { id: "timeline", label: "Timeline" },
  { id: "votes",    label: "Votes" },
  { id: "notes",    label: "Notes" },
] as const;
type TabId = typeof TABS[number]["id"];

export default function BillDetailPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = use(params);
  const billId = decodeURIComponent(id);
  const [activeTab, setActiveTab] = useState<TabId>("analysis");

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

  const { data: note } = useQuery({
    queryKey: ["note", billId],
    queryFn: () => import("@/lib/api").then((m) => m.notesAPI.get(billId)),
    enabled: !!token,
    retry: false,
    throwOnError: false,
  });

  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>
            {bill.chamber && (
              <span className={cn("text-xs px-1.5 py-0.5 rounded font-medium", chamberBadgeColor(bill.chamber))}>
                {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 flex items-center gap-3 flex-wrap">
            {bill.introduced_date && (
              <span>Introduced: {formatDate(bill.introduced_date)}</span>
            )}
            {bill.congress_url && (
              <a href={bill.congress_url} target="_blank" rel="noopener noreferrer" className="hover:text-primary transition-colors">
                congress.gov <ExternalLink className="w-3 h-3 inline" />
              </a>
            )}
          </p>
        </div>
        <div className="flex items-center gap-2 shrink-0">
          <CollectionPicker billId={bill.bill_id} />
          <FollowButton type="bill" value={bill.bill_id} supportsModes />
        </div>
      </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-4">
          {/* Pinned note always visible above tabs */}
          {note?.pinned && <NotesPanel billId={bill.bill_id} />}

          {/* Tab bar */}
          <div className="flex gap-0 border-b border-border">
            {TABS.map((tab) => (
              <button
                key={tab.id}
                onClick={() => setActiveTab(tab.id)}
                className={cn(
                  "px-4 py-2.5 text-sm font-medium transition-colors border-b-2 -mb-px",
                  activeTab === tab.id
                    ? "border-primary text-foreground"
                    : "border-transparent text-muted-foreground hover:text-foreground"
                )}
              >
                {tab.label}
              </button>
            ))}
          </div>

          {/* Topic tags — only show tags that have a matching topic page */}
          {bill.briefs[0]?.topic_tags && bill.briefs[0].topic_tags.filter((t) => TOPIC_TAGS.has(t)).length > 0 && (
            <div className="flex flex-wrap gap-1.5">
              {bill.briefs[0].topic_tags.filter((t) => TOPIC_TAGS.has(t)).map((tag) => (
                <Link
                  key={tag}
                  href={`/bills?topic=${encodeURIComponent(tag)}`}
                  className="inline-flex items-center gap-0.5 text-xs px-1.5 py-0.5 rounded-full bg-accent text-accent-foreground hover:bg-accent/70 transition-colors"
                >
                  <Tag className="w-2.5 h-2.5" />
                  {TOPIC_LABEL[tag] ?? tag}
                </Link>
              ))}
            </div>
          )}

          {/* Tab content */}
          {activeTab === "analysis" && (
            <div className="space-y-6">
              {bill.briefs.length > 0 ? (
                <>
                  <BriefPanel briefs={bill.briefs} />
                  <DraftLetterPanel billId={bill.bill_id} brief={bill.briefs[0]} chamber={bill.chamber} />
                </>
              ) : bill.has_document ? (
                <div className="bg-card border border-border rounded-lg p-6 text-center space-y-2">
                  <p className="text-sm font-medium text-muted-foreground">Analysis pending</p>
                  <p className="text-xs text-muted-foreground">
                    Bill text was retrieved but has not yet been analyzed. Check back shortly.
                  </p>
                </div>
              ) : (
                <div className="bg-card border border-border rounded-lg p-6 space-y-3">
                  <div className="flex items-center gap-2 text-muted-foreground">
                    <FileX className="w-4 h-4 shrink-0" />
                    <span className="text-sm font-medium">No bill text published</span>
                  </div>
                  <p className="text-sm text-muted-foreground">
                    As of {new Date().toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" })},{" "}
                    no official text has been received for{" "}
                    <span className="font-medium">{billLabel(bill.bill_type, bill.bill_number)}</span>.
                    Analysis will be generated automatically once text is published on Congress.gov.
                  </p>
                  {bill.congress_url && (
                    <a
                      href={bill.congress_url}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="inline-flex items-center gap-1 text-xs text-primary hover:underline"
                    >
                      Check status on Congress.gov <ExternalLink className="w-3 h-3" />
                    </a>
                  )}
                </div>
              )}
            </div>
          )}

          {activeTab === "timeline" && (
            <ActionTimeline
              actions={bill.actions}
              latestActionDate={bill.latest_action_date}
              latestActionText={bill.latest_action_text}
            />
          )}

          {activeTab === "votes" && (
            <VotePanel billId={bill.bill_id} alwaysRender />
          )}

          {activeTab === "notes" && (
            <NotesPanel billId={bill.bill_id} />
          )}
        </div>

        <div className="space-y-4">
          <TrendChart data={trendData} />
          <NewsPanel articles={newsArticles} />
        </div>
      </div>
    </div>
  );
}