PocketVeto/frontend/app/following/page.tsx

"use client";

import Link from "next/link";
import { Heart, ExternalLink, X } from "lucide-react";
import { useFollows, useRemoveFollow } from "@/lib/hooks/useFollows";
import { useBill } from "@/lib/hooks/useBills";
import { useMember } from "@/lib/hooks/useMembers";
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 }: { follow: Follow }) {
  const { data: bill } = useBill(follow.follow_value);
  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, onRemove }: { follow: Follow; onRemove: () => void }) {
  const { data: member } = useMember(follow.follow_value);

  return (
    <div className="bg-card border border-border rounded-lg p-4 flex items-center gap-4">
      {/* Photo */}
      <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>

      {/* Info */}
      <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>

      {/* Unfollow */}
      <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>
  );
}

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

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

  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");

  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 */}
      <div>
        <h2 className="font-semibold mb-3">Bills ({bills.length})</h2>
        {!bills.length ? (
          <p className="text-sm text-muted-foreground">No bills followed yet.</p>
        ) : (
          <div className="space-y-2">
            {bills.map((f) => <BillRow key={f.id} follow={f} />)}
          </div>
        )}
      </div>

      {/* Members */}
      <div>
        <h2 className="font-semibold mb-3">Members ({members.length})</h2>
        {!members.length ? (
          <p className="text-sm text-muted-foreground">No members followed yet.</p>
        ) : (
          <div className="space-y-2">
            {members.map((f) => (
              <MemberRow key={f.id} follow={f} onRemove={() => remove.mutate(f.id)} />
            ))}
          </div>
        )}
      </div>

      {/* Topics */}
      <div>
        <h2 className="font-semibold mb-3">Topics ({topics.length})</h2>
        {!topics.length ? (
          <p className="text-sm text-muted-foreground">No topics followed yet.</p>
        ) : (
          <div className="space-y-2">
            {topics.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>
    </div>
  );
}