"use client";

import { useEffect, useState } from "react";
import { Link } from "@/i18n/navigation";
import SocialGreetButton from "@/app/components/SocialGreetButton";
import { mediaUrl } from "@/app/lib/media";
import { fetchMeetupSocialSuggestions, type PublicProfile } from "@/app/lib/social";

interface MeetupSocialPanelProps {
  meetupId: string;
  city: string;
  locale?: string;
  compact?: boolean;
}

export default function MeetupSocialPanel({
  meetupId,
  city,
  locale = "zh",
  compact = false,
}: MeetupSocialPanelProps) {
  const [members, setMembers] = useState<PublicProfile[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    if (!meetupId) return;
    fetchMeetupSocialSuggestions(meetupId)
      .then((data) => setMembers(data.items || []))
      .catch(() => setMembers([]))
      .finally(() => setLoading(false));
  }, [meetupId]);

  if (loading) {
    return (
      <div className={`rounded-2xl border border-gray-100 bg-white p-4 dark:border-gray-800 dark:bg-gray-900 ${compact ? "" : "mt-6"}`}>
        <div className="h-20 animate-pulse rounded-xl bg-gray-100 dark:bg-gray-800" />
      </div>
    );
  }

  if (!members.length) return null;

  return (
    <section className={`rounded-2xl border border-violet-100 bg-violet-50/60 p-4 dark:border-violet-900/40 dark:bg-violet-950/20 ${compact ? "" : "mt-6"}`}>
      <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
        <div>
          <h3 className="text-sm font-bold text-gray-900 dark:text-gray-100">
            {locale === "zh" ? "活动后继续聊" : "Keep connecting"}
          </h3>
          <p className="text-xs text-gray-500 dark:text-gray-400">
            {locale === "zh" ? `同城 ${city} 成员，优先展示一起报名的伙伴` : `Members in ${city}, RSVP attendees first`}
          </p>
        </div>
        <Link
          href={`/dating?intent=friends&city=${encodeURIComponent(city)}`}
          className="rounded-full bg-[#ff4d4f] px-3 py-1.5 text-xs font-semibold text-white hover:bg-red-500"
        >
          {locale === "zh" ? "去匹配" : "Go matching"}
        </Link>
      </div>
      <div className="grid gap-3 sm:grid-cols-2">
        {members.slice(0, compact ? 4 : 6).map((member) => (
          <article
            key={member.id}
            className="flex items-center gap-3 rounded-xl border border-white/80 bg-white p-3 shadow-sm dark:border-gray-800 dark:bg-gray-900"
          >
            <Link href={`/members/${member.id}`}>
              <img
                src={mediaUrl(member.photo)}
                alt={member.name || "member"}
                className="h-11 w-11 rounded-full object-cover"
              />
            </Link>
            <div className="min-w-0 flex-1">
              <Link href={`/members/${member.id}`} className="truncate text-sm font-semibold text-gray-900 hover:text-[#ff4d4f] dark:text-gray-100">
                {member.name}
              </Link>
              <p className="truncate text-xs text-gray-500 dark:text-gray-400">{member.location}</p>
              {"rsvpAttendee" in member && (member as PublicProfile & { rsvpAttendee?: boolean }).rsvpAttendee ? (
                <span className="mt-1 inline-flex rounded-full bg-emerald-50 px-2 py-0.5 text-[10px] font-semibold text-emerald-700 dark:bg-emerald-950/40 dark:text-emerald-300">
                  {locale === "zh" ? "同场报名" : "RSVP"}
                </span>
              ) : null}
            </div>
            <SocialGreetButton
              profileId={member.id}
              label={locale === "zh" ? "聊" : "Hi"}
              className="rounded-full bg-[#ff4d4f] px-2.5 py-1 text-[11px] font-semibold text-white hover:bg-red-500"
            />
          </article>
        ))}
      </div>
    </section>
  );
}