"use client";

import { ClockIcon } from "@heroicons/react/24/outline";
import { Button } from "@/components/Button";
import { SectionHeader } from "@/components/ui/PageHeader";
import { StatusBadge } from "@/components/ui/StatusBadge";
import { publicProfilePath } from "@/lib/api";
import {
  applicationStatusBadgeVariant,
  applicationStatusLabel,
  invitationStatusBadgeVariant,
  invitationStatusLabel,
  participantStatusBadgeVariant,
  participantStatusLabel,
} from "@/lib/campaign-participation";
import { formatFollowerCount } from "@/lib/format";
import type {
  CampaignApplication,
  CampaignInvitation,
  CampaignParticipant,
  CreatorSummary,
} from "@/types/campaign-participation";
import type { SearchCreator } from "@/types/profile";

function CreatorAvatar({ name, imageUrl }: { name: string; imageUrl: string | null }) {
  const initial = name.trim().charAt(0).toUpperCase() || "?";
  if (imageUrl) {
    return (
      // eslint-disable-next-line @next/next/no-img-element -- remote API profile URLs
      <img src={imageUrl} alt="" className="h-9 w-9 shrink-0 rounded-full object-cover" />
    );
  }
  return (
    <span
      aria-hidden
      className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-line text-[0.75rem] font-semibold text-primary"
    >
      {initial}
    </span>
  );
}

function CreatorMeta({ creator }: { creator: CreatorSummary }) {
  const displayName = creator.display_name?.trim() || creator.username;
  const followers = formatFollowerCount(creator.followers);
  return (
    <div className="min-w-0">
      <p className="truncate text-[0.8125rem] font-medium text-primary">{displayName}</p>
      <p className="truncate text-[0.75rem] text-ink-40">@{creator.username}</p>
      {followers != null ? (
        <p className="mt-0.5 text-[0.75rem] text-ink-40">{followers} followers</p>
      ) : null}
    </div>
  );
}

function searchCreatorAsSummary(creator: SearchCreator): CreatorSummary {
  return {
    username: creator.username,
    display_name: creator.display_name,
    profile_image: creator.profile_image,
    platforms: creator.platforms,
    followers: creator.followers,
  };
}

function RelatedCreatorsList({ creators }: { creators: SearchCreator[] }) {
  return (
    <div className="space-y-2">
      <p className="text-[0.6875rem] uppercase tracking-[0.06em] text-ink-40">
        Related creators
      </p>
      <ul className="divide-y divide-line rounded-pv border border-line bg-surface">
        {creators.map((creator) => {
          const summary = searchCreatorAsSummary(creator);
          const name = summary.display_name?.trim() || summary.username;
          return (
            <li
              key={creator.username}
              className="flex items-center justify-between gap-3 px-3 py-2.5"
            >
              <div className="flex min-w-0 items-center gap-2.5">
                <CreatorAvatar name={name} imageUrl={summary.profile_image} />
                <CreatorMeta creator={summary} />
              </div>
              <Button
                size="sm"
                variant="secondary"
                href={publicProfilePath(creator.username, { from: "discover" })}
              >
                Profile
              </Button>
            </li>
          );
        })}
      </ul>
    </div>
  );
}

export function CampaignActivityPreview({
  participants,
  applications,
  invitations,
  relatedCreators = [],
  onGoToCreators,
  onGoToApplications,
}: {
  participants: CampaignParticipant[];
  applications: CampaignApplication[];
  invitations: CampaignInvitation[];
  relatedCreators?: SearchCreator[];
  onGoToCreators: () => void;
  onGoToApplications: () => void;
}) {
  const previewCreators = participants.filter((item) => item.status === "active").slice(0, 3);
  const previewApps = applications.slice(0, 3);
  const previewInvites = invitations.slice(0, 3);
  const hasAny =
    previewCreators.length > 0 || previewApps.length > 0 || previewInvites.length > 0;
  const suggestedCreators = relatedCreators.slice(0, 4);

  if (!hasAny && suggestedCreators.length === 0) {
    return null;
  }

  return (
    <section className="space-y-4" aria-labelledby="campaign-activity-heading">
      <SectionHeader
        id="campaign-activity-heading"
        title={hasAny ? "Recent activity" : "Creators who match"}
        description={
          hasAny
            ? "A short look at people already on this campaign."
            : "These creators fit this campaign. Open a profile, or use Discover to invite them."
        }
        icon={<ClockIcon className="size-4" />}
        action={
          hasAny ? (
            <div className="flex flex-wrap gap-2">
              <Button size="sm" variant="secondary" onClick={onGoToCreators}>
                Creators
              </Button>
              <Button size="sm" variant="secondary" onClick={onGoToApplications}>
                Applications
              </Button>
            </div>
          ) : null
        }
      />

      {!hasAny ? (
        <RelatedCreatorsList creators={suggestedCreators} />
      ) : (
        <div className="space-y-4">
          {previewCreators.length > 0 ? (
            <div className="space-y-2">
              <p className="text-[0.6875rem] uppercase tracking-[0.06em] text-ink-40">Creators</p>
              <ul className="divide-y divide-line rounded-pv border border-line bg-surface">
                {previewCreators.map((participant) => {
                  const name =
                    participant.creator.display_name?.trim() || participant.creator.username;
                  return (
                    <li
                      key={participant.id}
                      className="flex items-center justify-between gap-3 px-3 py-2.5"
                    >
                      <div className="flex min-w-0 items-center gap-2.5">
                        <CreatorAvatar
                          name={name}
                          imageUrl={participant.creator.profile_image}
                        />
                        <CreatorMeta creator={participant.creator} />
                      </div>
                      <div className="flex shrink-0 flex-col items-end gap-1.5">
                        <StatusBadge variant={participantStatusBadgeVariant(participant.status)}>
                          {participantStatusLabel(participant.status)}
                        </StatusBadge>
                        <Button
                          size="sm"
                          variant="secondary"
                          href={publicProfilePath(participant.creator.username)}
                        >
                          Profile
                        </Button>
                      </div>
                    </li>
                  );
                })}
              </ul>
            </div>
          ) : null}

          {previewApps.length > 0 ? (
            <div className="space-y-2">
              <p className="text-[0.6875rem] uppercase tracking-[0.06em] text-ink-40">
                Applications
              </p>
              <ul className="divide-y divide-line rounded-pv border border-line bg-surface">
                {previewApps.map((application) => {
                  const name =
                    application.creator.display_name?.trim() || application.creator.username;
                  return (
                    <li
                      key={application.id}
                      className="flex items-center justify-between gap-3 px-3 py-2.5"
                    >
                      <div className="flex min-w-0 items-center gap-2.5">
                        <CreatorAvatar name={name} imageUrl={application.creator.profile_image} />
                        <CreatorMeta creator={application.creator} />
                      </div>
                      <StatusBadge variant={applicationStatusBadgeVariant(application.status)}>
                        {applicationStatusLabel(application.status)}
                      </StatusBadge>
                    </li>
                  );
                })}
              </ul>
            </div>
          ) : null}

          {previewInvites.length > 0 ? (
            <div className="space-y-2">
              <p className="text-[0.6875rem] uppercase tracking-[0.06em] text-ink-40">Invited</p>
              <ul className="divide-y divide-line rounded-pv border border-line bg-surface">
                {previewInvites.map((invitation) => {
                  const name =
                    invitation.creator.display_name?.trim() || invitation.creator.username;
                  return (
                    <li
                      key={invitation.id}
                      className="flex items-center justify-between gap-3 px-3 py-2.5"
                    >
                      <div className="flex min-w-0 items-center gap-2.5">
                        <CreatorAvatar name={name} imageUrl={invitation.creator.profile_image} />
                        <CreatorMeta creator={invitation.creator} />
                      </div>
                      <StatusBadge variant={invitationStatusBadgeVariant(invitation.status)}>
                        {invitationStatusLabel(invitation.status)}
                      </StatusBadge>
                    </li>
                  );
                })}
              </ul>
            </div>
          ) : null}
        </div>
      )}
    </section>
  );
}