"use client";

import { use } from "react";
import Link from "next/link";
import { ArrowLeft } from "lucide-react";
import { useMember, useMemberBills } from "@/lib/hooks/useMembers";
import { FollowButton } from "@/components/shared/FollowButton";
import { BillCard } from "@/components/shared/BillCard";
import { cn, partyBadgeColor } from "@/lib/utils";

export default function MemberDetailPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = use(params);
  const { data: member, isLoading } = useMember(id);
  const { data: billsData } = useMemberBills(id);

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

  return (
    <div className="space-y-6">
      <div className="flex items-start justify-between">
        <div className="flex items-start gap-4">
          <Link href="/members" className="mt-1 text-muted-foreground hover:text-foreground">
            <ArrowLeft className="w-4 h-4" />
          </Link>
          <div>
            <h1 className="text-2xl font-bold">{member.name}</h1>
            <div className="flex items-center gap-2 mt-1">
              {member.party && (
                <span className={cn("px-2 py-0.5 rounded text-xs font-medium", partyBadgeColor(member.party))}>
                  {member.party}
                </span>
              )}
              {member.state && <span className="text-sm text-muted-foreground">{member.state}</span>}
              {member.chamber && <span className="text-sm text-muted-foreground">{member.chamber}</span>}
              {member.district && <span className="text-sm text-muted-foreground">District {member.district}</span>}
            </div>
          </div>
        </div>
        <FollowButton type="member" value={member.bioguide_id} />
      </div>

      <div>
        <h2 className="font-semibold mb-4">Sponsored Bills ({billsData?.total ?? 0})</h2>
        {!billsData?.items?.length ? (
          <p className="text-sm text-muted-foreground">No bills found.</p>
        ) : (
          <div className="space-y-3">
            {billsData.items.map((bill) => <BillCard key={bill.bill_id} bill={bill} />)}
          </div>
        )}
      </div>
    </div>
  );
}