"use client";

import { useMarriageAdvisorsQuery } from "@/hooks/marriage/use-marriage-advisors";
import Button from "./button";
import NetworkImage from "./network-image";

const FALLBACK_AVATAR = "/assets/images/Avatar Image.png";

export type AdvisorAvatar = {
  id: string;
  src: string;
};

type AdvisorActionsCardProps = {
  title: string;
  description: string;
  /** Static fallback avatars — used only while the API hasn't responded yet. */
  avatars: AdvisorAvatar[];
  extraCount: number;
  getAdvisorLabel: string;
  getAdvisorHref?: string;
  onGetAdvisor?: () => void;
  className?: string;
};

export function AdvisorActionsCard({
  title,
  description,
  avatars: fallbackAvatars,
  extraCount: fallbackExtraCount,
  getAdvisorLabel,
  getAdvisorHref,
  onGetAdvisor,
  className,
}: AdvisorActionsCardProps) {
  const { data, isLoading } = useMarriageAdvisorsQuery();
  const advisors = data?.results ?? [];

  // Derive real avatars from API response (pick first 3 with an avatar).
  const realAvatars: AdvisorAvatar[] = advisors
    .filter((a) => a.avatar_url)
    .slice(0, 3)
    .map((a) => ({
      id: a.username,
      src: a.avatar_url ?? FALLBACK_AVATAR,
    }));

  const displayAvatars =
    realAvatars.length > 0 ? realAvatars : fallbackAvatars;

  // Show total remaining advisors (capped at advisor count minus shown avatars).
  const displayExtraCount =
    advisors.length > 0
      ? Math.max(0, advisors.length - displayAvatars.length)
      : fallbackExtraCount;

  return (
    <section className={["space-y-3", className].filter(Boolean).join(" ")}>
      <div className="rounded-[13px] border border-white/80 bg-white/72 px-3 py-3.5 text-left shadow-[0_18px_45px_rgba(15,23,42,0.06)] backdrop-blur-sm">
        <h2 className="group-16 leading-none font-bold text-[#1C1C1C]">
          {title}
        </h2>
        <p className="mt-2 max-w-[280px] group-10 leading-[1.45] font-semibold text-[#8A8A8A]">
          {description}
        </p>

        <div className="mt-4 flex items-center justify-between gap-3">
          <div className="flex items-center pl-1">
            {isLoading
              ? /* ── Shimmer circles while API loads ── */
                Array.from({ length: 3 }).map((_, i) => (
                  <span
                    key={`shimmer-${i}`}
                    className="-ml-1.5 flex h-[30px] w-[30px] overflow-hidden rounded-full border-2 border-white first:ml-0 shimmer-bg"
                  />
                ))
              : displayAvatars.map((avatar) => (
                  <span
                    key={avatar.id}
                    className="-ml-1.5 flex h-[30px] w-[30px] overflow-hidden rounded-full border-2 border-white bg-[#E7E7E7] first:ml-0"
                  >
                    <NetworkImage
                      src={avatar.src}
                      fallbackSrc={FALLBACK_AVATAR}
                      alt=""
                      width={30}
                      height={30}
                      className="h-full w-full object-cover"
                    />
                  </span>
                ))}
            {!isLoading && displayExtraCount > 0 && (
              <span className="-ml-1.5 flex h-[30px] w-[30px] items-center justify-center rounded-full border-2 border-white bg-[#EDEEF1] group-10 font-semibold text-[#1C1C1C]">
                +{displayExtraCount}
              </span>
            )}
          </div>

          <Button
            className="w-auto rounded-[9px] border-none bg-[#EBEDF0] bg-none px-5 py-[13px] text-[#111111]! shadow-none"
            href={onGetAdvisor ? undefined : getAdvisorHref}
            onClick={onGetAdvisor}
          >
            {getAdvisorLabel}
          </Button>
        </div>
      </div>
    </section>
  );
}

export default AdvisorActionsCard;