PocketVeto/frontend/app/following/page.tsx

"use client";

import { useState } from "react";
import { useQueries } from "@tanstack/react-query";
import Link from "next/link";
import { ChevronDown, ChevronRight, ExternalLink, Heart, Search, X } from "lucide-react";
import { useFollows, useRemoveFollow } from "@/lib/hooks/useFollows";
import { billsAPI, membersAPI } from "@/lib/api";
import { FollowButton } from "@/components/shared/FollowButton";
import { billLabel, chamberBadgeColor, cn, formatDate, partyBadgeColor } from "@/lib/utils";
import type { Follow } from "@/lib/types";

// ── Bill row ─────────────────────────────────────────────────────────────────

function BillRow({ follow, bill }: { follow: Follow; bill?: ReturnType<typeof billsAPI.get> extends Promise<infer T> ? T : never }) {
  const label = bill ? billLabel(bill.bill_type, bill.bill_number) : follow.follow_value;
  return (
    <div className="bg-card border border-border rounded-lg p-4 flex items-start justify-between gap-4">
      <div className="flex-1 min-w-0">
        <div className="flex items-center gap-2 mb-1 flex-wrap">
          <span className="text-xs font-mono font-semibold text-muted-foreground bg-muted px-1.5 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>
          )}
        </div>
        <Link
          href={`/bills/${follow.follow_value}`}
          className="text-sm font-medium hover:text-primary transition-colors line-clamp-2 leading-snug"
        >
          {bill ? (bill.short_title || bill.title || label) : <span className="text-muted-foreground">Loading…</span>}
        </Link>
        {bill?.latest_action_text && (
          <p className="text-xs text-muted-foreground mt-1.5 line-clamp-1">
            {bill.latest_action_date && <span>{formatDate(bill.latest_action_date)} — </span>}
            {bill.latest_action_text}
          </p>
        )}
      </div>
      <FollowButton type="bill" value={follow.follow_value} supportsModes />
    </div>
  );
}

// ── Member row ────────────────────────────────────────────────────────────────

function MemberRow({ follow, member, onRemove }: {
  follow: Follow;
  member?: ReturnType<typeof membersAPI.get> extends Promise<infer T> ? T : never;
  onRemove: () => void;
}) {
  return (
    <div className="bg-card border border-border rounded-lg p-4 flex items-center gap-4">
      <div className="shrink-0">
        {member?.photo_url ? (
          <img src={member.photo_url} alt={member.name} className="w-12 h-12 rounded-full object-cover border border-border" />
        ) : (
          <div className="w-12 h-12 rounded-full bg-muted flex items-center justify-center text-lg font-semibold text-muted-foreground">
            {member ? member.name[0] : "?"}
          </div>
        )}
      </div>
      <div className="flex-1 min-w-0">
        <div className="flex items-center gap-2 flex-wrap">
          <Link href={`/members/${follow.follow_value}`} className="text-sm font-semibold hover:text-primary transition-colors">
            {member?.name ?? follow.follow_value}
          </Link>
          {member?.party && (
            <span className={cn("text-xs px-1.5 py-0.5 rounded font-medium", partyBadgeColor(member.party))}>
              {member.party}
            </span>
          )}
        </div>
        {(member?.chamber || member?.state || member?.district) && (
          <p className="text-xs text-muted-foreground mt-0.5">
            {[member.chamber, member.state, member.district ? `District ${member.district}` : null]
              .filter(Boolean).join(" · ")}
          </p>
        )}
        {member?.official_url && (
          <a href={member.official_url} target="_blank" rel="noopener noreferrer"
            className="inline-flex items-center gap-1 text-xs text-primary hover:underline mt-1">
            Official site <ExternalLink className="w-3 h-3" />
          </a>
        )}
      </div>
      <button onClick={onRemove} className="text-muted-foreground hover:text-destructive transition-colors p-1 shrink-0" title="Unfollow">
        <X className="w-4 h-4" />
      </button>
    </div>
  );
}

// ── Section accordion wrapper ─────────────────────────────────────────────────

function Section({ title, count, children }: { title: string; count: number; children: React.ReactNode }) {
  const [open, setOpen] = useState(true);
  return (
    <div>
      <button
        onClick={() => setOpen((v) => !v)}
        className="w-full flex items-center gap-2 mb-3 group"
      >
        {open ? <ChevronDown className="w-4 h-4 text-muted-foreground" /> : <ChevronRight className="w-4 h-4 text-muted-foreground" />}
        <span className="font-semibold">{title}</span>
        <span className="text-xs text-muted-foreground font-normal">({count})</span>
      </button>
      {open && children}
    </div>
  );
}

// ── Page ──────────────────────────────────────────────────────────────────────

export default function FollowingPage() {
  const { data: follows = [], isLoading } = useFollows();
  const remove = useRemoveFollow();

  const [billSearch, setBillSearch] = useState("");
  const [billChamber, setBillChamber] = useState("");
  const [memberSearch, setMemberSearch] = useState("");
  const [memberParty, setMemberParty] = useState("");
  const [topicSearch, setTopicSearch] = useState("");

  const bills = follows.filter((f) => f.follow_type === "bill");
  const members = follows.filter((f) => f.follow_type === "member");
  const topics = follows.filter((f) => f.follow_type === "topic");

  // Batch-fetch bill + member data at page level so filters have access to titles/names.
  // Uses the same query keys as BillRow/MemberRow — React Query deduplicates, no extra calls.
  const billQueries = useQueries({
    queries: bills.map((f) => ({
      queryKey: ["bill", f.follow_value],
      queryFn: () => billsAPI.get(f.follow_value),
      staleTime: 2 * 60 * 1000,
    })),
  });

  const memberQueries = useQueries({
    queries: members.map((f) => ({
      queryKey: ["member", f.follow_value],
      queryFn: () => membersAPI.get(f.follow_value),
      staleTime: 10 * 60 * 1000,
    })),
  });

  // Filter bills
  const filteredBills = bills.filter((f, i) => {
    const bill = billQueries[i]?.data;
    if (billChamber && bill?.chamber?.toLowerCase() !== billChamber.toLowerCase()) return false;
    if (billSearch) {
      const q = billSearch.toLowerCase();
      const label = bill ? billLabel(bill.bill_type, bill.bill_number).toLowerCase() : "";
      const title = (bill?.short_title || bill?.title || "").toLowerCase();
      const id = f.follow_value.toLowerCase();
      if (!label.includes(q) && !title.includes(q) && !id.includes(q)) return false;
    }
    return true;
  });

  // Filter members
  const filteredMembers = members.filter((f, i) => {
    const member = memberQueries[i]?.data;
    if (memberParty && member?.party !== memberParty) return false;
    if (memberSearch) {
      const q = memberSearch.toLowerCase();
      const name = (member?.name || f.follow_value).toLowerCase();
      if (!name.includes(q)) return false;
    }
    return true;
  });

  // Filter topics
  const filteredTopics = topics.filter((f) =>
    !topicSearch || f.follow_value.toLowerCase().includes(topicSearch.toLowerCase())
  );

  // Unique parties and chambers from loaded data for filter dropdowns
  const loadedChambers = [...new Set(billQueries.map((q) => q.data?.chamber).filter(Boolean))] as string[];
  const loadedParties = [...new Set(memberQueries.map((q) => q.data?.party).filter(Boolean))] as string[];

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

  return (
    <div className="space-y-8">
      <div>
        <h1 className="text-2xl font-bold flex items-center gap-2">
          <Heart className="w-5 h-5" /> Following
        </h1>
        <p className="text-muted-foreground text-sm mt-1">Manage what you follow</p>
      </div>

      {/* Bills */}
      <Section title="Bills" count={bills.length}>
        <div className="space-y-3">
          {/* Search + filter bar */}
          {bills.length > 0 && (
            <div className="flex gap-2 flex-wrap">
              <div className="relative flex-1 min-w-48">
                <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground" />
                <input
                  type="text"
                  placeholder="Search bills…"
                  value={billSearch}
                  onChange={(e) => setBillSearch(e.target.value)}
                  className="w-full pl-8 pr-3 py-1.5 text-sm bg-card border border-border rounded-md focus:outline-none focus:ring-1 focus:ring-primary"
                />
              </div>
              {loadedChambers.length > 1 && (
                <select
                  value={billChamber}
                  onChange={(e) => setBillChamber(e.target.value)}
                  className="px-3 py-1.5 text-sm bg-card border border-border rounded-md focus:outline-none"
                >
                  <option value="">All Chambers</option>
                  {loadedChambers.map((c) => <option key={c} value={c}>{c}</option>)}
                </select>
              )}
            </div>
          )}

          {!bills.length ? (
            <p className="text-sm text-muted-foreground">No bills followed yet.</p>
          ) : !filteredBills.length ? (
            <p className="text-sm text-muted-foreground">No bills match your filters.</p>
          ) : (
            filteredBills.map((f, i) => {
              const originalIndex = bills.indexOf(f);
              return <BillRow key={f.id} follow={f} bill={billQueries[originalIndex]?.data} />;
            })
          )}
        </div>
      </Section>

      {/* Members */}
      <Section title="Members" count={members.length}>
        <div className="space-y-3">
          {members.length > 0 && (
            <div className="flex gap-2 flex-wrap">
              <div className="relative flex-1 min-w-48">
                <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground" />
                <input
                  type="text"
                  placeholder="Search members…"
                  value={memberSearch}
                  onChange={(e) => setMemberSearch(e.target.value)}
                  className="w-full pl-8 pr-3 py-1.5 text-sm bg-card border border-border rounded-md focus:outline-none focus:ring-1 focus:ring-primary"
                />
              </div>
              {loadedParties.length > 1 && (
                <select
                  value={memberParty}
                  onChange={(e) => setMemberParty(e.target.value)}
                  className="px-3 py-1.5 text-sm bg-card border border-border rounded-md focus:outline-none"
                >
                  <option value="">All Parties</option>
                  {loadedParties.map((p) => <option key={p} value={p}>{p}</option>)}
                </select>
              )}
            </div>
          )}

          {!members.length ? (
            <p className="text-sm text-muted-foreground">No members followed yet.</p>
          ) : !filteredMembers.length ? (
            <p className="text-sm text-muted-foreground">No members match your filters.</p>
          ) : (
            filteredMembers.map((f, i) => {
              const originalIndex = members.indexOf(f);
              return (
                <MemberRow
                  key={f.id}
                  follow={f}
                  member={memberQueries[originalIndex]?.data}
                  onRemove={() => remove.mutate(f.id)}
                />
              );
            })
          )}
        </div>
      </Section>

      {/* Topics */}
      <Section title="Topics" count={topics.length}>
        <div className="space-y-3">
          {topics.length > 0 && (
            <div className="relative">
              <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground" />
              <input
                type="text"
                placeholder="Search topics…"
                value={topicSearch}
                onChange={(e) => setTopicSearch(e.target.value)}
                className="w-full pl-8 pr-3 py-1.5 text-sm bg-card border border-border rounded-md focus:outline-none focus:ring-1 focus:ring-primary"
              />
            </div>
          )}

          {!topics.length ? (
            <p className="text-sm text-muted-foreground">No topics followed yet.</p>
          ) : !filteredTopics.length ? (
            <p className="text-sm text-muted-foreground">No topics match your search.</p>
          ) : (
            <div className="space-y-2">
              {filteredTopics.map((f) => (
                <div key={f.id} className="bg-card border border-border rounded-lg p-3 flex items-center justify-between">
                  <Link
                    href={`/bills?topic=${f.follow_value}`}
                    className="text-sm font-medium hover:text-primary transition-colors capitalize"
                  >
                    {f.follow_value.replace(/-/g, " ")}
                  </Link>
                  <button
                    onClick={() => remove.mutate(f.id)}
                    className="text-muted-foreground hover:text-destructive transition-colors p-1"
                  >
                    <X className="w-4 h-4" />
                  </button>
                </div>
              ))}
            </div>
          )}
        </div>
      </Section>
    </div>
  );
}